0.5.1 • Published 2 years ago
postcss-parcel-css v0.5.1
postcss-parcel-css
This package is deprecated, please use
postcss-lightningcss
instead.
This PostCSS plugin uses @parcel/css to compile and minify your CSS.
@parcel/css
is more than a minifier as it can replace quite a few PostCSS plugins such as autoprefixer
.
You can find the complete list of features in the package's documentation and the list of plugins it's able to replace below.
Install
yarn add -D postcss-parcel-css
Usage
const postcss = require("postcss");
const postcssParcelCss = require("postcss-parcel-css");
postcss([postcssParcelCss(/* pluginOptions */)]).process(
YOUR_CSS /*, processOptions */
);
Options
const postcssParcelCss = require("postcss-parcel-css");
postcssParcelCss({
// Use a browserslist query that will inform which browsers are supported
// Will add or remove vendor prefixes that are needed or not anymore
browsers: ">= .25%",
// Will pass all options to @parcel/css
// Check out their documentation for details:
// https://www.npmjs.com/package/@parcel/css#user-content-documentation
parcelCssOptions: {
// Enable minification (default: true)
minify: true,
// Enable source maps (default: true)
sourceMap: true,
// Compile as cssModules (default: undefined)
cssModules: false,
// For which browsers to compile (default: undefined)
// Can be omitted if you set the `browsers` option
targets: {
safari: (13 << 16) | (2 << 8), // represents Safari 13.2.0
},
// Individually enable various drafts
drafts: {
// Enable css nesting (default: undefined)
nesting: false,
},
},
});
The detailed list of parcelCssOptions
can be found here
About source maps
Source maps will pass through @parcel/css
.
But many mappings will be lost in translation; @parcel/css
creates only a source map for selectors.
Mappings for properties cannot be re-created after this transformation.
PostCSS plugins that you can remove if you have @parcel/css
The rows marked as "Depends on browser config" will convert your CSS only if:
- You set the
browsers
orparcelCssOptions.targets
options - one of the target browsers doesn't support the feature
PostCSS Plugin | @parcel/css option |
---|---|
autoprefixer | Depends on browser config |
postcss-clamp | Depends on browser config |
postcss-color-hex-alpha | Depends on browser config |
postcss-color-hsl | Depends on browser config |
postcss-color-rgb | Depends on browser config |
postcss-color-function | Depends on browser config |
postcss-color-rebeccapurple | Depends on browser config |
postcss-custom-media | parcelCssOptions.drafts.customMedia |
postcss-double-position-gradients | Depends on browser config |
postcss-hwb-function | Depends on browser config |
postcss-lab-function | Depends on browser config |
postcss-logical | Depends on browser config (1) |
postcss-media-minmax | Depends on browser config |
postcss-multi-value-display | Depends on browser config |
postcss-nesting | parcelCssOptions.drafts.nesting |
postcss-normalize-display-values | Depends on browser config |
postcss-oklab-function | Depends on browser config |
postcss-overflow-shorthand | Depends on browser config |
postcss-place | Depends on browser config |
postcss-progressive-custom-properties | Depends on browser config (2) |
@parcel/css
doesn't support thelogical
shorthand keyword as its syntax is likely to change- Progressive custom properties works only if the properties don't contain properties themselves:
lab(29.2345% 39.3825 20.0664)
has a proper fallbackoklch(40% 0.234 0.39 / var(--opacity-50))
will not have a fallback
License
MIT