cssbuild's Introduction

cssbuild

A fast CSS compiler supporting a limited subset of CSS modules functionality.

Features

Generated class selectors and animation names are suffixed with a random token to effectively make them locally scoped by default
Local scoping can be switched off via a :global mode selector or :global() function
Generates JS files with class name and animation name mappings

What's not supported

Local @import and @url
Class composition

Installation

go get -u github.com/bduffany/cssbuild

Running

# Convert a CSS module stylesheet to vanilla CSS.
cssbuild -in src/styles.module.css -out dist/styles.css

# The above command writes JS to `dist/styles.module.css.js`.
# You can control this with the `-js_out` flag:
cssbuild -in src/styles.module.css -out dist/styles.css -js_out dist/styles.js

# See all options with documentation:
cssbuild -help

More details

The map keys in the generated JS file can optionally be made camelCase, using the -camel_case_js_keys flag, even if class names are kebab-case. This makes it easier to migrate to CSS modules (no need to waste time rewriting existing CSS or break with convention by requiring all CSS classes to be camelCase).
The :global mode selector applies to the rules block, which allows referencing global animation names.
Animation scoping supports -webkit- and -moz- prefixes.

Thanks to

tdewolff/parse for the excellent CSS parsing library, which made it possible to implement this with minimal custom parsing.
evanw/esbuild for inspiration.

Recommend Projects