cessie

2.0.1 • Public • Published

cessie logo

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

Package Sidebar

Install

npm i cessie

Weekly Downloads

9

Version

2.0.1

License

MIT

Unpacked Size

17 kB

Total Files

8

Last publish

Collaborators

  • bjarneo