@pastweb/atomic-css-postcss v1.0.5

Atomic CSS Plugin for PostCSS

A PostCSS plugin inspired to CSS Modules and Tailwind CSS framework.

Fore more info about tools and the options check the Atom CSS page.

install

npm i -D @pastweb/atomic-css-postcss

Usage

import postcss from 'postcss';
import { atomicCss }, { type  Options } from '@pastweb/atomic-css-postcss';

const fileName = 'my/file/name.css';
const cssInput = '...any css code here';
// Utility function to process CSS with the plugin
const processCSS = async (input: string, opts: Options = {}) => {
  const result = await postcss([ atomicCss(opts) ]).process(input, { from: fileName });
  return result.css;
};

const output = await processCSS(cssInput, { /** options */ });

console.log(output);

Saving exported classes

By default, no any JSON file with exported classes will be placed next to corresponding CSS. But you have a freedom to make everything you want with exported classes, just use the getModules callback. For example, save data about classes into a corresponding JSON file:

import { atomicCss } from '@pastweb/atomic-css-postcss';
...
postcss([
  atomicCss({
    getModules: function (filePath, modules) {
      var path = require("path");
      var cssName = path.basename(filePath, ".css");
      var jsonFileName = path.resolve("./build/" + cssName + ".json");
      fs.writeFileSync(jsonFileName, JSON.stringify(modules));
    },
  }),
]);