1

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?
TylerH
  • 20,799
  • 66
  • 75
  • 101
Lushawn
  • 522
  • 1
  • 3
  • 17
  • Is the dot at the start of `.postcss.config.cjs` a typo? Because I think it shouldn't be there.Got it working with `sass` loading config as `.json` or `.cjs`, fell free to ask about my setup even though i wasn't really doing anything special. I too was quite surprised to see little to no discussion about this topic – Bjarne Voigtländer Jan 20 '23 at 19:04
  • Oh very good point, that was not a typo I actually named the file that... Thanks for pointing that out! I have actually got autoprefixer to work properly in another project but will be revisiting this soon (as certain properties weren't being prefixed for older browsers which I often require). – Lushawn Jan 22 '23 at 10:57
  • It does work, but the CSS needs to be part of the Astro process flow in order for it to get processed. Try putting `text-size-adjust: 100%;` inside of an `.astro` file. – thdoan Mar 31 '23 at 00:38

1 Answers1

0

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

Nikola Hristov
  • 19
  • 6