@tiny-css/compiler NPM

Tiny CSS Compiler

The compiler for tiny-css. It optimizes & injects styles relative to classnames defined in the provided HTML files & only inserts them and not a byte more than them.

Features

Lowers the weight of css bundle
Really good for SSR(Server Side Render) as it would output only css style declaration that are relative to classnames defined in the static HTML files
Removes unimportant style declarations from the output.css file. Very efficient for heavy css frameworks like bootstrap or materialize as it only keeps the necessary style declarations
It not only works with Tiny-CSS but also with all kinds of css frameworks if the stylesheet defined classes are passed as an JSON files to --classes option and stylesheet with --input option

Installation

With npm

npm install @tiny-css/compiler --save-dev

With yarn

yarn add @tiny-css/compiler --dev

CLI-Options

Options	alias	What it does	Default
input	i	CSS Input file which will be used to retrieve style objects. This can be a fs path or a cdm link	required
cdn-version	c	The version of the cdn input file. Important if `--disable-cache` option is disabled & files are cached. This is used to determine the cache file location. Not required if using fs path	0.0.1
output	o	The file where css declarations will be outputted	${cwd}/tiny.output.css
debug	d	Outputs verbose information about the currently running process	false
cwd	N/A	Custom current working directory	process.cwd()
ignore	N/A	An array glob pattern to ignore the path for file searching	./node_modules/*/
disable-cache	N/A	Disable caching stylesheets	false

Example

$ tiny-css ./**/*.html --input ./tiny.css

More examples can be found here

Usage

If using a CDN link always a pass a version of that css file defined in the URL to the cli -c OR --cdn-version option.

Example:

$ tiny-css ./**/*.html --input https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css --cdn-version 4.5.2

Ignoring patters

An --ignore argument option can be passed to the cli to ignore any file/pattern

Example

$ tiny-css ./**/*.html --input ./tiny.css --ignore ./test/** ./node_modules/**

Contributing

Follow the Contribution guidelines

Tests

npm install
npm test

LICENSE

MIT

Social handlers:

Join the Discussion in Discord

CSS FRAMEWORK COMPILED JavaScript Typescript

chalk css glob is-url node-fetch node-html-parser yargs

@everything-registry/sub-chunk-921 @zalastax/nolb-_tin

0.1.1

3 years ago

0.1.0

3 years ago