hydrogen.css

Atomic CSS for CSS Modules

Installation

NPM

npm i -S hydrogencss

Yarn

yarn add hydrogencss

Usage with CSS Modules

There are two ways to compose with each value. The first:

.container {
  composes: <value> from 'hydrogencss/<property>.css';
}

With this way you will be importing all the classes within <property>.css, unless you are clearing up the unused CSS.

The alternate way to import is

.container {
  composes: <value> from 'hydrogencss/<property>/<value>.css';
}

Example:

.container {
  composes: flex from 'hydrogencss/display/flex.css';
}

Which will just include:

.flex { display: flex; }

To see all the properties and values available please check the docs folder.