Making the switch to using PostCSS is a cinch, we can use the postcss-custom-media
plugin for this purpose, available at https://github.com/postcss/postcss-custom-media.
The plugin is easy to install, it follows the same principles as all of the other plugins we've covered, so without further ado, let's get that out of the way now:
Fire up a Node.js command prompt, then navigate to the working directory.
At the prompt, enter this command, then press Enter:
npm install --save-dev postcss-custom-media
Keep the command prompt open for now, we will use it in the next few steps.
With the plugin installed, we can now use it, before we get stuck into converting our previous demo, let's work through a simple example, so you can see it in action:
In a new file, add the following code, saving it as
style.css
within thesrc
folder at the root of our project area:@custom-media --apple-watch (max-device-width: 42mm) and (min-device-width: 38mm); @media (--apple-watch...