Atomic CSS composition for yarn workspaces
npm install @utilitycss/atomic
$ yarn install -g @utilitycss/atomic
Usage
Atomic is meant to be used on monorepos, using yarn workspaces and lerna to
handle internal dependencies. Your project should also live under a single npm
scope (e.g. ).If you installed atomic globally you can bootstrap a new atomic project using
`
$ mkdir my-project && cd my-project
$ atomic init
Alternatively you can use
$ mkdir my-project && cd my-project
$ npx @utilitycss/atomic init
To build the CSS bundle use
$ yarn build
To start the watch mode use
$ yarn start
If you already built the project once and you only want to watch for changes you
can use the --no-rebuild (-n) flag
$ yarn start -- -n
You can create your own visitor in order to execute some actions on each atom
respecting the dependency order.
js
// ./visitor.jsconst Visitor = require("@utilitycss/atomic").Visitor;
module.exports = class ListVisitor extends Visitor {
async visit(node) {
console.log('ATOM NAME:', node.name);
}
async finalize() {
console.log('END');
}
};
`and then run
$ yarn atomic visit ./visitor.js
the visit function will be executed in batches of concurrent task whenever
possible: all the atoms in the current batch do not have interdependencies and
they only depend on atoms already visited on some previous batch.