cessie

cessie

Transpile your CSS bundle to support CSS variables, calc, and future CSS for legacy browsers.

Features

• Uses PostCSS behind the scenes.
• Transpiles future CSS by using postcss-preset-env.
• Transpiles CSS variables and calc by using postcss-custom-properties, and postcss-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.

Case

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

Install

$ npm i -g cessie
// Or use npx
$ npx cessie

Usage

$ 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

Examples

// 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

Want features?

Please write an issue.

License

MIT © Bjarne Øverli