generate-atomic-css

Generate Atomic CSS

Install

This package is pure ESM. If you're not ready yet, install an older version of this program, 1.5.0 (npm i generate-atomic-css@1.5.0).

npm i generate-atomic-css

Quick Take

import { strict as assert } from "assert";

import {
  genAtomic,
  version,
  headsAndTails,
  extractFromToSource,
} from "generate-atomic-css";

assert.deepEqual(
  genAtomic(
    `a

/* GENERATE-ATOMIC-CSS-CONFIG-STARTS
.pb$$$ { padding-bottom: $$$px !important; } | 5 | 10

.mt$$$ { margin-top: $$$px !important; } | 1
GENERATE-ATOMIC-CSS-CONFIG-ENDS
GENERATE-ATOMIC-CSS-CONTENT-STARTS */

tralala

/* GENERATE-ATOMIC-CSS-CONTENT-ENDS */

z`,
    {
      includeConfig: false,
      includeHeadsAndTails: false,
    },
  ),
  {
    log: { count: 8 },
    result: `a

.pb5  { padding-bottom:  5px !important; }
.pb6  { padding-bottom:  6px !important; }
.pb7  { padding-bottom:  7px !important; }
.pb8  { padding-bottom:  8px !important; }
.pb9  { padding-bottom:  9px !important; }
.pb10 { padding-bottom: 10px !important; }

.mt0 { margin-top:   0 !important; }
.mt1 { margin-top: 1px !important; }

z
`,
  },
);

Documentation

Please visit codsen.com for a full description of the API.

Contributing

To report bugs or request features or assistance, raise an issue on GitHub.

Licence

MIT License.

Copyright © 2010-2025 Roy Revelt and other contributors.

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

3.0.0 (2022-12-01)

BREAKING CHANGES

• Minimum supported Node version is v14.18; we're dropping v12 support

2.2.0 (2022-08-12)

Features

• export types (11b5fb9)

2.1.1 (2022-04-18)

Fixed

• tweak types (abf7641)

2.1.0 (2022-04-11)

Fixed

• use Partial, every opts key is optional (844685c)

Features

• export defaults and version (1107244)

2.0.0 (2021-09-09)

Features

• migrate to ES Modules (8c9d95d)

BREAKING CHANGES

• programs now are in ES Modules and won't work with Common JS require()

1.5.0 (2021-05-24)

Features

• config file based major bump blacklisting (e15f9bb)

1.4.15 (2021-04-11)

Reverts

• Revert "chore: setup refresh" (23cf206)

1.4.1 (2021-01-28)

Fixed

• add testStats to npmignore (f3c84e9)

1.4.0 (2021-01-23)

Features

• rewrite in TS (8bbd4c4)

1.3.0 (2020-11-28)

Accidental version bump during migration to SourceHut. Sorry about that.

1.2.3 (2019-07-24)

Fixed

• closing curlies were not recognised if they were placed on a new line - fixed now (c81eb14)

1.2.0 (2019-07-15)

Features

• Complete extractFromToSource with unit tests (4ac3634)
• Improvements to multiple CSS rule generation and recognition in config (b780889)
• Improvements to the padding algorithm (21ac50f)
• Separate extractFromToSource() into a standalone, exported function (af27f89)

1.1.0 (2019-07-06)

Fixed

• Don't close the comment blocks above, it's not fully safe (5ce6230)
• Fix cases when there is no $$$ in the input and there are heads/tails (09ceccd)
• Fix the case when the only non-whitespace string is at zero index (falsey value) (76fd296)
• More tests and more improvements to edge case recognition (4721b20)
• Tightened the whitespace management part on the surrounding areas (551a851)

Features

• Add progress-reporting callback function to opts (82e0d9b)
• Algorithm improvements to cover more dirty input cases (70190a6)
• Generated digit padding everywhere if possible (750e853)
• Make more unit tests pass (177f05c)
• opts.pad (5d3e16a)
• Output the log (c729689)
• Tackle input without any $$$ (1dcaee4)

1.0.0 (2018-06-28)

• First public release