Transpile your CSS bundle to support CSS variables, calc, and future CSS for legacy browsers.
- Uses PostCSS behind the scenes.
- Transpiles future CSS by using
postcss-preset-env. - Transpiles CSS variables and calc by using
postcss-custom-properties, andpostcss-calc. - Can be used for all CSS bundles.
- Can transpile SCSS, SASS, and LESS.
- Can minify the output if not already minified.
- Watch mode.
- Source map.
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