Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including generate-atomic-css-cli with all npm packages installed. Try it out:

generate-atomic-css-cli lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("generate-atomic-css-cli/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

generate-atomic-css-cli v1.1.46

Generates and updates all HTML templates' atomic CSS

generate-atomic-css-cli

Generates and updates all HTML templates' atomic CSS

Repository is on GitLab View dependencies as 2D chart Downloads/Month Code style: prettier MIT License

Other siblings of this package:

Table of Contents

Install

npm i -g generate-atomic-css-cli

Then, call it from the command line using keyword:

gac

Use it

Once installed, call it typing gac in your terminal, like this:

gac "index.html"
# or with wildcards:
gac "modules/css/*/*.scss"

How it works

You place special placeholders for config ("config heads" and "config tails"), then also placeholders for content ("content heads" and "content tails").

Config will be read from between config heads and tails, expanded into multiple lines as you requested and result will be placed instead of existing content between content heads and content tails.

In config, $$ means dynamic value, default 0-500 but you can customise the range appending pipes at the end of the line:

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 */

this will get wiped

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

z

yields:

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 */
.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; }
/* GENERATE-ATOMIC-CSS-CONTENT-ENDS */

z

As you see, pipes are inclusive values, one value means "upto", two values mean "from" and "upto".

You can use this CLI to generate/update any file: HTML, CSS or SCSS or whatever. Just put the placeholders and job will be done.

Usually config is within CSS comments block.

⚡️⚡️⚡️⚡️🔥🔥🔥🍻🍻🍻🍻🤩🤩💪🏼💪🏼💪🏼💪🏼💪🏼👊🏼👊🏼👊🏼👊🏼💥💥💥💥⚡️⚡️🌟🌟🌟🌟⚡️🍺🍺💪🏼💪🏼

⬆ back to top

Updating it

When you install it globally, it will check occasionally, are there newer versions available, and if so, will show a message nagging you to update. Same tech that AVA or npm uses!

⬆ back to top

Contributing

  • If you see an error, raise an issue.
  • If you want a new feature but can't code it up yourself, also raise an issue. Let's discuss it.
  • If you tried to use this package, but something didn't work out, also raise an issue. We'll try to help.
  • If you want to contribute some code, fork the monorepo via GitLab, then write code, then file a pull request on GitLab. We'll merge it in and release.

In monorepo, npm libraries are located in packages/ folder. Inside, the source code is located either in src/ folder (normal npm library) or in the root, cli.js (if it's a command-line application).

The npm script "dev", the "dev": "rollup -c --dev" builds the development version retaining all console.logs with row numbers. It's handy to have js-row-num-cli installed globally so you can automatically update the row numbers on all console.logs.

⬆ back to top

Licence

MIT License

Copyright (c) 2015-2020 Roy Revelt and other contributors

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free