Skip to content

bjarneo/cessie

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published