generate-atomic-css

Generate Atomic CSS

Usage no npm install needed!

<script type="module">
  import generateAtomicCss from 'https://cdn.skypack.dev/generate-atomic-css';
</script>

README

generate-atomic-css

Generate Atomic CSS

Install

The latest version is ESM only: Node 12+ is needed to use it and it must be imported instead of required. If your project is not on ESM yet and you want to use require, use an older version of this program, 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 (c) 2010-2022 Roy Revelt and other contributors

ok codsen star