@spiracss/html-cli 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,18 +1,14 @@
1
1
  # @spiracss/html-cli
2
2
 
3
- CLI tools for SpiraCSS HTML to SCSS generation, HTML structure linting, and placeholder formatting.
3
+ A CLI tool designed primarily for AI agents and automation scripts—generates SCSS from HTML, validates structure, and formats placeholders. The [VS Code extension](https://marketplace.visualstudio.com/items?itemName=spiracss.spiracss-html-to-scss) uses this package internally; for manual use, prefer the extension.
4
4
 
5
5
  ## About SpiraCSS
6
6
 
7
- [SpiraCSS](https://spiracss.jp) is a CSS architecture built on minimal structural principles derived from HTML/CSS. It reduces inconsistencies in structural decisions that are common in CSS design by replacing individual intuition with clear principles. Designed for AI-assisted implementation and tool-based validation, it aims to shorten development time and ensure consistent quality.
7
+ [SpiraCSS](https://spiracss.jp) is a CSS architecture based on one principle. The HTML structure determines how to write styles, eliminating the need for individual judgment. Designed for AI agents and tool-based validation.
8
8
 
9
- Key points:
10
- - Structural decisions can be derived from class names and HTML structure.
11
- - `shared`/`interaction`/`rel` comment conventions can be treated as tool-verifiable contracts.
12
- - SpiraCSS projects should place [`spiracss.config.js`](https://github.com/zetsubo-dev/spiracss/blob/master/docs_spira/en/tooling/spiracss-config.md) | \[[JA](https://github.com/zetsubo-dev/spiracss/blob/master/docs_spira/ja/tooling/spiracss-config.md)\] at the project root so that generation and validation follow the same policy.
13
- - Download [spiracss-ai-doc.md](https://github.com/zetsubo-dev/spiracss/blob/master/docs_spira/ai/spiracss-ai-doc.md) and use it as a reference document for AI-assisted workflows.
9
+ This CLI is designed to be used with the [SpiraCSS Design Principles](https://spiracss.jp/architecture/principles/).
14
10
 
15
- This CLI generates and validates structure so humans and AI start from the same template.
11
+ [See how it works](https://spiracss.jp)
16
12
 
17
13
  ## Status
18
14
 
@@ -24,6 +20,10 @@ Beta release. Breaking changes may still occur.
24
20
 
25
21
  ## Install
26
22
 
23
+ ```bash
24
+ yarn add -D @spiracss/html-cli
25
+ ```
26
+
27
27
  ```bash
28
28
  npm install -D @spiracss/html-cli
29
29
  ```
@@ -40,21 +40,23 @@ Use `--root` for a single component root. Use `--selection` for fragments.
40
40
 
41
41
  ```bash
42
42
  # Generate SCSS from a component root (root mode)
43
- cat file.html | npx spiracss-html-to-scss --root --stdin --base-dir src/pages
43
+ cat file.html | yarn spiracss-html-to-scss --root --stdin --base-dir src/pages
44
44
 
45
45
  # Generate SCSS from fragments (selection mode)
46
- cat fragment.html | npx spiracss-html-to-scss --selection --stdin --base-dir src/pages
46
+ cat fragment.html | yarn spiracss-html-to-scss --selection --stdin --base-dir src/pages
47
47
 
48
48
  # Lint a component root
49
- cat file.html | npx spiracss-html-lint --root --stdin
49
+ cat file.html | yarn spiracss-html-lint --root --stdin
50
50
 
51
51
  # Lint fragments
52
- cat fragment.html | npx spiracss-html-lint --selection --stdin
52
+ cat fragment.html | yarn spiracss-html-lint --selection --stdin
53
53
 
54
54
  # Insert placeholders
55
- cat file.html | npx spiracss-html-format --stdin
55
+ cat file.html | yarn spiracss-html-format --stdin
56
56
  ```
57
57
 
58
+ Note: If you use npm, replace `yarn` with `npx` or `npm exec`.
59
+
58
60
  ## Configuration
59
61
 
60
62
  SpiraCSS tools share a common configuration file at the project root: `spiracss.config.js` (htmlFormat, selectorPolicy, generator options, naming).
@@ -83,13 +85,12 @@ Note: If your project is CommonJS (no `"type": "module"` in `package.json`), use
83
85
 
84
86
  ## Docs
85
87
 
86
- - [HTML CLI guide](https://github.com/zetsubo-dev/spiracss/blob/master/docs_spira/en/tooling/html-cli.md) | \[[JA](https://github.com/zetsubo-dev/spiracss/blob/master/docs_spira/ja/tooling/html-cli.md)\]
87
- - [HTML to SCSS guide](https://github.com/zetsubo-dev/spiracss/blob/master/docs_spira/en/tooling/html-to-scss.md) | \[[JA](https://github.com/zetsubo-dev/spiracss/blob/master/docs_spira/ja/tooling/html-to-scss.md)\]
88
- - [Quickstart](https://github.com/zetsubo-dev/spiracss/blob/master/docs_spira/en/quickstart.md) | \[[JA](https://github.com/zetsubo-dev/spiracss/blob/master/docs_spira/ja/quickstart.md)\]
89
- - [`spiracss.config.js` guide](https://github.com/zetsubo-dev/spiracss/blob/master/docs_spira/en/tooling/spiracss-config.md) | \[[JA](https://github.com/zetsubo-dev/spiracss/blob/master/docs_spira/ja/tooling/spiracss-config.md)\]
88
+ - [HTML CLI](https://spiracss.jp/tooling/html-cli/)
89
+ - [HTML to SCSS (VS Code)](https://spiracss.jp/tooling/html-to-scss/)
90
+ - [Configuration](https://spiracss.jp/configuration/)
90
91
 
91
92
  ## Related Tools
92
93
 
93
94
  - [SpiraCSS Stylelint Plugin (npm)](https://www.npmjs.com/package/@spiracss/stylelint-plugin)
94
- - [SpiraCSS Comment Links (VS Code Marketplace)](https://marketplace.visualstudio.com/items?itemName=spiracss.spiracss-comment-links)
95
- - [SpiraCSS HTML to SCSS (VS Code Marketplace)](https://marketplace.visualstudio.com/items?itemName=spiracss.spiracss-html-to-scss)
95
+ - SpiraCSS Comment Links ([VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=spiracss.spiracss-comment-links) / [Open VSX](https://open-vsx.org/extension/spiracss/spiracss-comment-links))
96
+ - SpiraCSS HTML to SCSS ([VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=spiracss.spiracss-html-to-scss) / [Open VSX](https://open-vsx.org/extension/spiracss/spiracss-html-to-scss))