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:

• Facebook
• Twitter

Join the Discussion in Discord