@gustcss/vite 0.10.0 → 0.11.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 +45 -3
- package/dist/index.cjs +822 -11
- package/dist/index.d.ts +22 -0
- package/dist/index.mjs +821 -11
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -70,12 +70,39 @@ Create `gustcss.config.json` in your project root:
|
|
|
70
70
|
}
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
+
### Dev-Server Linting
|
|
74
|
+
|
|
75
|
+
Set `lint` to report class names that generate no CSS while the dev server runs.
|
|
76
|
+
The plugin runs `gustcss lint --json` on startup and after source changes, and
|
|
77
|
+
prints the diagnostics through the Vite logger.
|
|
78
|
+
The lint process runs asynchronously: at most one runs at a time, changes that
|
|
79
|
+
arrive while it runs are coalesced into a single follow-up run, and unchanged
|
|
80
|
+
results are not printed twice. Lint problems never stop the dev server, and the
|
|
81
|
+
child process is killed when the server closes.
|
|
82
|
+
|
|
83
|
+
```javascript
|
|
84
|
+
export default defineConfig({
|
|
85
|
+
plugins: [gustcss({ lint: true })],
|
|
86
|
+
})
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Pass `{ strict: true }` to also report custom-looking classes and low-confidence
|
|
90
|
+
extractions (`gustcss lint --strict`).
|
|
91
|
+
|
|
92
|
+
The same check runs on demand with the CLI (`gustcss lint`), which is what CI
|
|
93
|
+
should use. See the CLI documentation for rules, configuration, and baselines.
|
|
94
|
+
|
|
73
95
|
### Production Class-Name Mangling
|
|
74
96
|
|
|
75
97
|
Enable `mangleClassNames` to shorten generated selectors and matching source references during `vite build`.
|
|
76
98
|
|
|
77
99
|
Development mode keeps readable class names.
|
|
78
100
|
|
|
101
|
+
The mangler also rewrites class literals passed to the class-composition helpers `cn`, `cx`, `clsx`, `classNames`, `cva`, `tv`, `twMerge`, and `twJoin` (the same default list the CLI scanner extracts class names from).
|
|
102
|
+
Variant helpers (`cva`, `tv`) keep their object keys untouched, because those keys are variant names, not classes. For `clsx`-style helpers the quoted object keys are classes and are rewritten.
|
|
103
|
+
|
|
104
|
+
A class reference the mangler cannot rewrite stops the build: an aliased helper (`import { cn as merge }`), an unquoted `clsx` object key, or a mapped class inside an unknown string. Add the class to `mangleExclude` or move the reference to a static string when the build reports one of those errors.
|
|
105
|
+
|
|
79
106
|
```javascript
|
|
80
107
|
export default defineConfig({
|
|
81
108
|
plugins: [
|
|
@@ -92,15 +119,30 @@ The manifest defaults to `<output>.classes.json`; set `mangleMap` to use another
|
|
|
92
119
|
|
|
93
120
|
Treat the manifest as generated output and ignore it in Git unless your workflow intentionally pins class mappings.
|
|
94
121
|
|
|
95
|
-
The transformer supports HTML, JavaScript, TypeScript, JSX, and
|
|
122
|
+
The transformer supports HTML, JavaScript, TypeScript, JSX, TSX, and Astro. It rewrites static `class` and `className` attributes, static template segments, direct string arguments to `classList`, and `setAttribute('class', ...)`. Code examples inside HTML `<code>` and `<pre>` bodies are neither rewritten nor inspected; classes on the elements themselves are still rewritten. An unclosed `<code>` or `<pre>` fails the build instead of masking the remainder of the document.
|
|
123
|
+
|
|
124
|
+
**Astro templates** (`.astro`) are rewritten before the Astro compiler sees them. Astro's own Vite plugins run ahead of user plugins, so the rewrite happens in the plugin's `load` hook on the raw source, guided by the AST that `parse()` from `@astrojs/compiler` returns (the package ships with astro, so nothing extra has to be installed). Attribute kinds, the frontmatter, comments, `<style>` and `<script>` blocks are taken from that AST.
|
|
125
|
+
|
|
126
|
+
**Rewritten:**
|
|
127
|
+
- Static `class="…"` attributes and `class={"…"}` expressions that consist of a single string literal
|
|
128
|
+
- `class:list` array elements (including the right operand of `cond && "flex"`) and quoted object keys, nested arrays and objects included
|
|
129
|
+
- `classList.add("…")` / `setAttribute("class", "…")` calls in the frontmatter and in `<script>` blocks
|
|
130
|
+
|
|
131
|
+
**Fail-closed** (the build stops when a mapped class appears in one of these places):
|
|
132
|
+
- Any `class` expression other than a single string literal, such as `class={cond ? "flex" : "x"}` or `` class={`flex ${x}`} ``
|
|
133
|
+
- Inside `class:list`: unquoted keys (`{ flex: on }`), shorthand properties (`{ hidden }`), template literals, comparison operands (`variant === "flex"`), subscripts (`map["flex"]`), function calls, method chains, or an expression that is not an array/object literal
|
|
134
|
+
- Component props other than `class` / `class:list` (`<Card klass="flex" />`), `set:html` / `set:text` values, strings inside `{}` expressions (`{JSON.stringify("flex")}`), and ambiguous strings in the frontmatter or `<script>`. A `class` or `class:list` passed to a component is rewritten as a static value, like JSX `className`; forward `Astro.props.class` unchanged on the receiving side
|
|
135
|
+
- `<style>` selectors (`.flex`, `@scope (.flex)`, `[class~="flex"]`); add hand-written selectors such as `.sr-only { … }` to `mangleExclude`
|
|
136
|
+
|
|
137
|
+
HTML comments, `<code>` / `<pre>` bodies, ordinary non-class attributes (`<input type="flex">`) and `<style>` declarations (`border: 1px solid`) are neither rewritten nor inspected.
|
|
96
138
|
|
|
97
|
-
JavaScript, TypeScript, JSX, and
|
|
139
|
+
JavaScript, TypeScript, JSX, TSX, and Astro frontmatter transforms emit Source Map v3 mappings back to the original source. Comments and ordinary strings containing `class="..."` are not treated as JSX attributes. An ordinary string that still references a mapped class fails closed as ambiguous.
|
|
98
140
|
|
|
99
141
|
Conditional expressions, nested calls, selectors, and other ambiguous references fail the build. The plugin restores readable CSS after a failed transform.
|
|
100
142
|
|
|
101
143
|
Add dynamically or externally referenced class names, including production E2E selectors, to `mangleExclude`.
|
|
102
144
|
|
|
103
|
-
Vue
|
|
145
|
+
Vue and Svelte templates are not supported by this option. A mapped class in one of these files fails the build instead of emitting mismatched output.
|
|
104
146
|
|
|
105
147
|
Files under `node_modules` are neither rewritten nor inspected.
|
|
106
148
|
|