Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bjarneo/cessie

Transpile your CSS bundle to support CSS variables, calc, and future CSS for legacy browsers.
https://github.com/bjarneo/cessie

css ie11 less postcss preprocessor sass scss transpiler

Last synced: about 2 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/bjarneo/cessie
Owner: bjarneo
License: mit
Created: 2019-05-23T05:50:22.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-02-28T19:30:21.000Z (over 1 year ago)
Last Synced: 2024-07-02T07:22:50.764Z (3 months ago)
Topics: css, ie11, less, postcss, preprocessor, sass, scss, transpiler
Language: JavaScript
Homepage: https://www.npmjs.com/package/cessie
Size: 666 KB
Stars: 80
Watchers: 4
Forks: 2
Open Issues: 10
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

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