PostCSS Tips, Tricks and Fixes

Looking for Tips, Tricks and Fixes for using specific PostCSS plugins with Fylgja. Look no further then down here.

Preset Env or Autoprefixer  # 

While Fylgja support all ever green browser versions. There still might be a use case, where you need to support older browsers.

For this we recommend PostCSS Preset Env, since this plugin also polyfills modern CSS into something most browsers can understand.

If you are looking for more info, checkout the preset-env.cssdb.org

If you just looking for adding vendor prefixes then Autoprefixer is also a good alternative.

CSSNano  # 

While CSSNano is a great tool for minifying your CSS, it can be to aggressive.

The only issue you might find with CSSNano, is with our current aspect-ratio component.

For this we at least recommend to keep your CSS calc's as the are.

require("cssnano")({
preset: ["default", {
calc: false
}],
})

PurgeCSS  # 

Fylgja works really wel with PurgeCSS. And almost does not needed any config to work with Fylgja.

Sadly PurgeCSS does remove any pseudo states without any prefixes. So things like :any-link will get removed.

To avoid this simply make sure the add the following regex to your safelist.

require("@fullhuman/postcss-purgecss")({
safelist: [/^\:/]
})
Noticed a typo or is something unclear? Help us improve this page on GitHub.