autoprefixer VS cssnano

Do you use Autoprefixer? https://github.com/postcss/autoprefixer

Simple, fast, and a little bit opinionated, Eleventy Plus Vite features Eleventy 2.0.0-canary, the new Eleventy 2.0 Dev Server with live reload, Vite 3.0 as Middleware in Eleventy Dev Server (using eleventy-plugin-vite), build output post-processing by Vite (with Rollup), CSS/Sass post-processing with PostCSS including Autoprefixer and cssnano, a custom CSS/Sass structure, basic fluid typography based on Utopia, dark mode support, an RSS feed, XML sitemap, and — to top it off — perfect scores on Lighthouse.

w/ postcss-preset-env(v7.8.3): convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments. It takes the support data that comes from MDN and Can I Use and determine from a browserlist whether those transformations are needed. It also packs Autoprefixer within and shares the list with it, so prefixes are only applied when you're going to need them given your browser support list.

As others have said, you need to normalize. Also, you may need something like autoprefixer if you're using styles that have different vendor prefixes. https://github.com/postcss/autoprefixer

Mmm maybe it's not gap then, maybe it's some other property. Maybe autoprefixer could help. Or polyfills, as other user suggested.

Of course, we have great tooling for that: Autoprefixer, PostCSS and Stylelint for CSS transformation, Babel and Webpack for JavaScript transpilation and bundling, ESLint for code analysis, and many others.

Bulma uses autoprefixer to make (most) Flexbox…

There are a number of tools available to minify CSS in development or as part of your build pipeline including, but not limited to, cssnano and Vite. If you’re using sass, it’s as straightforward as adding --style=compressed to your sass command. The results you achieve may vary depending on the complexity of your CSS, but you may see numbers similar to this (processed with sass):

Since Tailwind is a PostCSS plugin, we can also add cssnano plugin to compress the bundle.

Minifying your CSS involves removing unnecessary whitespace, comments, and reducing property names. This results in smaller file sizes and faster downloads. Use tools like UglifyCSS and CSSNano for this purpose.

For the sake of simplicity, my example setup uses a single-file plugin and puts all styles directly into a single style.css file without using further theme.css or theme.json files, which we might want to use depending on the requirements for customizability. Likewise, SASS / SCSS support can be added if it makes life easier for the developer(s) involved. But as we already use PostCSS to control autoprefixing and cssnano minification, we can also use it to support the latest and even upcoming CSS sytax like native CSS nesting.

The cssnano plugin can minify/compress CSS and make it suitable for production use. Install cssnano plugin using this command:

CSS minification by cssnano

cssnano

cssnano is used to ensure that the final result is as small as possible for a production environment.

There are plenty of free plugins are available to optimize styles, scripts and create source maps for them. Optimize styles Optimize Scripts Create Sourcemaps