Nutella Peanut-Butter Marshmallow
Learn how companies like Phone2Action are using npm in their front-end developmentJoin the conversation »

generate-atomic-css-cli

1.1.27 • Public • Published

generate-atomic-css-cli

Generates and updates all HTML templates' atomic CSS

Minimum Node version required 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 --silent" 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-2019 Roy Revelt and other contributors

Install

npm i generate-atomic-css-cli

DownloadsWeekly Downloads

97

Version

1.1.27

License

MIT

Unpacked Size

15.4 kB

Total Files

5

Last publish

Collaborators

  • avatar