Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

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

blurry low resolution placeholder image Astro PostCSS Example
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. Astro Astro Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Astro PostCSS Example: Future CSS Today 💅 #

Published: 2 years ago
4 minute read
Gunning Fog Index: 5.7
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

💅 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?
Voting reveals latest results.

🖥 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 Font Fallbacks using Capsize
  • VS Code File Nesting video
  • PostCSS Preset Env supported features 
  • Vite PostCSS docs 
  • Element chat: #rodney matrix chat 
  • Twitter handle: @askRodney 

🏁 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.

blurry low resolution placeholder image ask Rodney X (formerly Twitter) avatar

Rodney

@askRodney

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 #JAMStackhttps://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, @[email protected]  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.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
ASTROCSS

Related Posts

blurry low resolution placeholder image Get Started with SvelteKit Headless WordPress

Get Started with SvelteKit Headless WordPress

plus
sveltekit
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.