https://github.com/jaandrle/jaacss-cli
EXPERIMENT – Helper for managing atomic CSS (functional CSS/utility-first CSS)
https://github.com/jaandrle/jaacss-cli
atomic-css cli css functional-css no-dependencies nodejs utility-first
Last synced: 10 months ago
JSON representation
EXPERIMENT – Helper for managing atomic CSS (functional CSS/utility-first CSS)
- Host: GitHub
- URL: https://github.com/jaandrle/jaacss-cli
- Owner: jaandrle
- License: mit
- Created: 2021-05-29T11:19:33.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-02T13:33:16.000Z (over 3 years ago)
- Last Synced: 2025-04-01T18:13:19.817Z (11 months ago)
- Topics: atomic-css, cli, css, functional-css, no-dependencies, nodejs, utility-first
- Language: JavaScript
- Homepage:
- Size: 214 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jaaCSS-cli
***Warning: WIP and for now mainly experiment***
## Overview
This is command line (terminal) tool for managing functional (atomic) CSS clases.
You can “connect” the script with CSS/SASS file by `node jaaCSS.js -I file_path` (on unix-like systems works without 'node ').
It opens interactive promt with typical usage:
```terminal
? marginR
+ marginR__2
? fontS__1
- fontS__1
+ fontS__1d5
```
…in you web page, you wanted some right margin – so, you ask for already used margins, yet you decide to use new one. Analogously for font size.
More info for now only in source code [./src](./src).
## Example files
Modified files should look like:
- [./examples/example.css](./examples/example.css)
- [./examples/example.scss](./examples/example.css)
## CLI help
### main
```
jaaCSS@1.2.1
EXPERIMENT – Helper for managing functional CSS classes
Usage: jaaCSS --[cmd] [param]
…cmd: help, init, html, interactive, eval
…param: Based on cmd
Help:
Commands:
--help|-h
Shows this text
--init css_like_file
Creates inital file structure with `jaaCSS` section
The section is separated by comments `/* jaaCSS:start/end */`
This command/step can be ommited,
the `-I` will do it itself, if the section doesn’t exists.
--html html_like_file
[WIP] Show classes from HTML
--interactive|-I css_like_file
Interactive shell for manipulating with `jaaCSS` section.
With prefixes +/- you can add/remove styles from file (e.g. `+ fontS__1`).
With prefix '?' you can filter existing rules.
Using 'q' quits shell and program.
Without prefixes it works as `--eval`.
--eval value_c
Just console log conversion
Params:
css_like_file
CSS (like) file
html_like_file
HTML (like) file
value_c
The value part for evaluing in the form:
- `property: value;` …or
- `property__value`
```
### interactive mod
```
node jaaCSS.js "-I" "example.css"
jaaCSS@1.2.1
EXPERIMENT – Helper for managing functional CSS classes
Usage: jaaCSS --[cmd] [param]
…cmd: help, init, html, interactive, eval
…param: Based on cmd
Interactive shell
q: Quit interactive shell
: Just echo full rule (e.g. `fontS__1`)
?: Searching registered rules (e.g. `? fontS`)
+: Add rule to the file (e.g. `+ fontS__1`)
-: Remove rule to the file (e.g. `- fontS__1`)
!: Add rule by full recepy (e.g. `! color__urgent { color: red; }`
=: [WIP] Compare classes in CSS like file and HTML like one (`>` only in CSS | `<` only in HTML)
@: Converting class names (for example from HTML) to the CSS rules/SASS includes.
just write anything to converse or start line with: q/ /?/+/-/!/=/@
```