cessie

KO | EN

gitlite — search

#react #ai #typescript #golang #go #rust #linux #cli #kubernetes #vue #awesome-list #pytorch #openai #ios

(★ 79)

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

cessie Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<br>

<h1 align="center">cessie</h1>

<blockquote align="center">Transpile your CSS bundle to support CSS variables, calc, and future CSS for legacy browsers.</blockquote>

## 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](https://github.com/bjarneo/cessie/blob/master/EXAMPLES.md)

## Want features?

Please write an issue.

## License

cessie

cessie Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

cessie

cessie Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README