Transpile your CSS bundle to support CSS variables, calc, and future CSS for legacy browsers.
Transpile your CSS bundle to support CSS variables, calc, and future CSS for legacy browsers.
postcss-preset-env
.postcss-custom-properties
, and postcss-calc
.Example usage of this CLI would be cases where you don't have the power, or will to edit/write postcss/webpack config for your application. One of those examples are Create React App.
Create React App:
$ npm run build
$ cat build/static/css/*.chunk.css >> bundle.css
$ cessie bundle.css -o ie11.css
$ npm i -g cessie
// Or use npx
$ npx cessie
$ cessie inputFile.css -o ie11.css
Usage
$ cessie <input> -o filename.css
Options
--out-file, -o Name of the out file
--minify, -m Minify css. Defaults to true.
--watch, -w Watch for file changes. Defaults to false.
--source-map, -s Generate source map. Defaults to true.
--import-from, -i Import CSS variables from file (https://github.com/postcss/postcss-custom-properties#importfrom)
--export-to, -e Export CSS variables to file (https://github.com/postcss/postcss-custom-properties#exportto)
Examples
$ cessie bundle.css -o ie11.css
// css/sass/less file
:root {
--color: white;
--padding: 10px;
}
div {
color: var(--color);
padding: calc(var(--padding) * 2);
}
// Run cessie with no minify
$ cessie my.css -o output.css -m false
// output.css
div {
color: white;
padding: 20px;
}
See more examples
Please write an issue.
MIT © Bjarne Øverli