Skip to content

bduffany/cssbuild

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Fast, basic CSS module compiler.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages