CLI

How CSS Components automatically generates components.

CSS Components provides a command line interface (CLI) to generate components. As long as your CSS files conform to a specific naming convention, you can generate components and all of the variant configuration automatically.

Running the CLI

The CLI can scan your project for CSS files and generate components for each file found using a GLOB pattern.

For demonstration purposes we will use the following file structure:

1    src
2    └── components
3        ├── button
4        │   ├── index.ts
5        │   └── styles.module.css
6        └── card
7            ├── index.ts
8            └── styles.module.css
9

If the tool is installed, to run the tool just run:

1    npx css-components --css "src/components/**/*.css" --output styles.ts
2

This will create 2 new files in each of the component folders:

1    src
2    └── components
3        ├── button
4        │   ├── index.ts
5        │   ├── styles.module.css
6        │   └── styles.ts
7        └── card
8            ├── index.ts
9            ├── styles.module.css
10            └── styles.ts
11

Naming Convention

Following the naming convention below will allow the CLI to generate components automatically.

Basics (element and component name)

For each style declaration, at a minimum you need to specify both the element type and class name.

The example below creates a new React Component called CheckoutButton which is a button DOM element.

1button.CheckoutButton {
2  color: gray;
3}
4

Variants

You can add variants to your component by suffixing the class name with _variant_value. The example below creates a component with big and theme variants:

1button.CheckoutButton {
2  color: gray;
3}
4
5button.CheckoutButton_big_true {
6  font-size: 32px;
7}
8
9button.CheckoutButton_theme_primary {
10  color: teal;
11}
12
13button.CheckoutButton_theme_secondary {
14  color: indigo;
15}
16

You can use this component like so:

1import { CheckoutButton } from "./styles";
2
3const Page = () => (
4  <div>
5    <CheckoutButton>Click Me</CheckoutButton>
6    <CheckoutButton big>Click Me</CheckoutButton>
7    <CheckoutButton theme="primary">Click Me</CheckoutButton>
8    <CheckoutButton theme="secondary">Click Me</CheckoutButton>
9  </div>
10);
11

Default Variants

You can specify a default variant by suffixing the class name with _default. The example below creates a component with a theme variant defaulting to primary:

1h1.Title {
2  font-size: 16px;
3  color: gray;
4}
5
6h1.Title_theme_primary_default {
7  color: teal;
8}
9
10h1.Title_theme_secondary {
11  color: indigo;
12}
13

Compound Variants

You can also create compound variants by combining multiple variants. The example shows a button which has special styling applied when both the big and theme variants are set to certain combinations.

1button.Button {
2  color: gray;
3}
4
5button.Button_big_true {
6  font-size: 32px;
7}
8
9button.Button_theme_primary {
10  color: teal;
11}
12
13button.Button_theme_secondary {
14  color: indigo;
15}
16
17/* These two styles get applied under certain combinations of variants */
18button.Button_big_true_theme_primary {
19  border: 1px solid teal;
20}
21
22button.Button_big_true_theme_secondary {
23  border: 1px solid teal;
24}
25