Does Astro have out-of-the-box PostCSS support?

Yes. Astro gets out-of-the-box PostCSS support via Vite. You just need to add a `postcss.config.cjs` config file in the root folder of your project. Then, once you have installed any plugins you reference in your config, you are good to go. There is no need to install PostCSS itself as a project dependency, and neither do you have to update the Astro config file. You might need to restart your Astro dev server, after adding or changing the PostCSS config file, though.

Can you use CSS custom properties (CSS variables) in media queries?

Unfortunately, CSS custom properties do not work in media queries. As an example, the following will not work:` @media screen and (min-width: --desktop-breakpoint)`. This might surprise you if you previously used Sass and had variables work just fine there. Using vanilla CSS, you have a couple of options. You could use the pixel or rem value directly, instead of the custom property. That is not ideal on a large code base, changing the desktop breakpoint could become quite a chore. An alternative is to use a custom media query, with PostCSS.

How do custom media queries work?

Custom media queries can help make your code more robust. You can define a media query for desktop devices once, and use that multiple times. To associate the media query `screen and (width >= 1024px)` with the identifier `--desktop-device`, you can use: `@custom-media --desktop-device screen and (width >= 1024px);`. Place that definition at the top of a CSS file. Now you can just drop that identifier into your media queries within the same file. For example, you might use: `@media (--desktop`-device) { div { color: red } }. Custom media queries are not yet widely supported, but we saw an example of using them with the PostCSS `postcss-preset-env` plugin, which will add polyfills.

Astro PostCSS Example: Future CSS Today 💅 # Astro PostCSS Example: Future CSS Today 💅 #

Astro PostCSS Example: Future CSS Today 💅 #

Published: 2 years ago

4 minute read

Gunning Fog Index: 5.7

Content by Rodney

💅 Astro PostCSS Example #

In this video, we see an Astro PostCSS example, helping you to get going with PostCSS in Astro. PostCSS is a fantastic CSS utility with a rich plugin ecosystem. You can add plugins automatically to include prefixes for legacy browsers and optimize your CSS, letting you send fewer bytes to the end user. There are also PostCSS plugins which let you use upcoming CSS features, still at a proposal stage, today; it adds polyfills so your future CSS runs in today’s browsers.

In terms of future CSS features, we see how you can add support for:

custom media queries;
media query ranges; and
nesting rules.

We also see how you can discover and use other future CSS, such as color-mix and trigonometric-functions. If that that’s what you came here for, then hit play on the video! You can drop a comment below or reach out for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.

📹 Video #

Please enable JavaScript to watch the video 📼

Astro PostCSS Example: Future CSS Today

🗳 Poll #

Will you try Custom Media Queries?

🖥 Astro PostCSS Example Code #

PostCSS Config #

postcss.config.cjs

javascript

    1 const autoprefixer = require('autoprefixer');
2 const postcssPresetEnv = require('postcss-preset-env');
3 const csso = require('postcss-csso');
4 
5 const config = {
6 	plugins: [
7 		postcssPresetEnv({
8 			stage: 3,
9 			features: {
10 				'nesting-rules': true,
11 				'custom-media-queries': true,
12 				'media-query-ranges': true,
13 			},
14 		}),
15 		autoprefixer(),
16 		csso(),
17 	],
18 };
19 
20 module.exports = config;

Install PostCSS Plugins used Above #

    pnpm add -D autoprefixer postcss-csso postcss-preset-env

There is no need to install PostCSS itself.

Custom Media Query Example Code #

src/styles/fonts.css

css

    1 @custom-media --desktop-device screen and (width >= 1024px);
2 
3 :root {
4   /* TRUNCATED */
5 	--colour-dark: hsl(225 5% 17%); /* shark */
6 	--colour-theme: hsl(39 92% 59%); /* saffron */
7 }
8 
9 body {
10   /* TRUNCATED */
11   color: var(--colour-theme);
12 	background: var(--colour-dark);
13 }
14 
15 @media (--desktop-device) {
16 	body {
17 		background: var(--colour-theme);
18 		color: var(--colour-dark);
19 	}
20 }

The full demo code is in the Rodney Lab GitHub repo .

🔗 Links #

🏁 Astro PostCSS Example: Summary #

Does Astro have out-of-the-box PostCSS support? #: Yes. Astro gets out-of-the-box PostCSS support via Vite. You just need to add a `postcss.config.cjs` config file in the root folder of your project. Then, once you have installed any plugins you reference in your config, you are good to go. There is no need to install PostCSS itself as a project dependency, and neither do you have to update the Astro config file. You might need to restart your Astro dev server, after adding or changing the PostCSS config file, though.
Can you use CSS custom properties (CSS variables) in media queries? #: Unfortunately, CSS custom properties do not work in media queries. As an example, the following will not work:` @media screen and (min-width: --desktop-breakpoint)`. This might surprise you if you previously used Sass and had variables work just fine there. Using vanilla CSS, you have a couple of options. You could use the pixel or rem value directly, instead of the custom property. That is not ideal on a large code base, changing the desktop breakpoint could become quite a chore. An alternative is to use a custom media query, with PostCSS.
How do custom media queries work? #: Custom media queries can help make your code more robust. You can define a media query for desktop devices once, and use that multiple times. To associate the media query `screen and (width >= 1024px)` with the identifier `--desktop-device`, you can use: `@custom-media --desktop-device screen and (width >= 1024px);`. Place that definition at the top of a CSS file. Now you can just drop that identifier into your media queries within the same file. For example, you might use: `@media (--desktop`-device) { div { color: red } }. Custom media queries are not yet widely supported, but we saw an example of using them with the PostCSS `postcss-preset-env` plugin, which will add polyfills.

🙏🏽 Feedback #

Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also, if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.

Just dropped a new post on using 💅 PostCSS with 🚀 Astro.

We add an optimization plugin and also, try out some future CSS: Custom Media Queries.

Hope you find it useful!

#learnastro #futureCSS #JAMStack https://t.co/sLh8BXzkuH
— Rodney (@askRodney) May 19, 2023

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter, @rodney@toot.community on Mastodon and also the #rodney Element Matrix room. Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as SEO. Also, subscribe to the newsletter to keep up-to-date with our latest projects.