PostCSS Autoprefixer Setup in an Astro Project

Question

What I'm trying to achieve

Set up automated autoprefixer on npm run build of an Astro project on all global stylesheets and component scoped styling to support other browsers and older browsers (up to about 2016).

My build

• Astro v1.9.1
• CSS compiled via SCSS
• A few Astro integrations (imagetools, prefetch, compress, NetlifyCMS are the only ones I think could have any relevance to this issue)

Steps I've taken

1. Built out an Astro project that uses both global styles in the /src/styles folder as well as scoped styling in Astro components
2. Ran npm install autoprefixer
3. Created a .postcss.config.cjs with the following code based on the docs:

   module.exports = {
      plugins: [
        require('autoprefixer'),
      ],
    };
   

4. Ran npm run build

What I expected

• For my CSS to be compiled with different vendor prefixes for browser support
• My main test of adding text-size-adjust: 100%; in src/styles/global.css to cause a -webkit-text-size-adjust: 100%; to be added to my compiled CSS in dist/assets (the build folder)

What else I have tried

• Creating a .postcssrc.json which contains

{
  "map": true,
  "plugins": {
    "autoprefixer": {}
  }
}

• Adding extra Vite configuration to my astro.config.mjs:

import autoprefixer from "autoprefixer";

export default defineConfig({
  vite: {
    postcss: {
      plugins: [
        autoprefixer({}), // add options if needed
      ],
    },
  },
})

• Adding some browserslist conditions to my package.json to set conditions for the autoprefixing

{
   "browserslist": [
       "last 2 versions",
       "not dead",
       "> 0.2%"
     ]
}

Result & Conclusion

• However I am still not getting autoprefixing to occur in my project
• I'm also struggling to find answers online or in the Astro Discord server - which is making me wonder: Are people not really using autoprefixer anymore? How are people supporting other vendors and older browsers?

Answer 1

Try this template https://github.com/lightrix/astro-starter-template It has autoprefixer, cssnano, compression and all the things you need.