PostCSS

lastmod 2024-03-15created 2023-03-0710 edits

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains. The Autoprefixer PostCSS plugin is one of the most popular CSS processors.

Plugins

• Autoprefixer
• normalize.css
• postcss-js

Troubleshooting

Without from option PostCSS could generate wrong source map and will not find Browserslist config

• ionic framework - Without from option PostCSS could generate wrong source map or do not find Browserslist config - Stack Overflow

Ran into this issue while wiring up 11ty, vite, and tailwind. The full message is:

Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.

It means exactly what it says. Without the 'from' option, PostCSS may generate a wrong source map and may not find the Browserslist config.

To prevent this warning, specify the "CSS file path" or set it to undefined.

postcss( any_plugins ).process( css )

to

postcss( any_plugins ).process( css, { from: undefined } )

See also

• PostCSS - PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations.
• PurgeCSS - Tool that finds and removes unused CSS

Favorite site

• postcss - npm
• [Recommended] Learning about PostCSS (What is PostCSS?) — Jjini's Dev Research Lab
• react-tutorial/04-postcss.md at master · velopert/react-tutorial
• (React.js) PostCSS basics