create-bestax 4.2.0 → 4.2.2

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.
Files changed (10) hide show
  1. package/dist/project-creator.d.ts.map +1 -1
  2. package/dist/project-creator.js +1 -2
  3. package/package.json +1 -1
  4. package/templates/skills/bestax-custom-component/references/component-catalog.md +4 -4
  5. package/templates/skills/bestax-icons/references/icon-libraries.md +3 -4
  6. package/templates/skills/bestax-layout-scaffold/SKILL.md +5 -5
  7. package/templates/skills/bestax-migrate/references/component-map.md +34 -34
  8. package/templates/skills/bestax-migrate/references/css-migration.md +36 -4
  9. package/templates/skills/bestax-migrate/references/unmappables.md +1 -1
  10. package/templates/skills/bestax-theming/references/css-variables.md +38 -18
package/dist/project-creator.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"project-creator.d.ts","sourceRoot":"","sources":["../src/project-creator.ts"],"names":[],"mappings":"AA6BA,OAAO,EAOL,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AAWxB,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,qBAAa,cAAc;IACzB,OAAO,CAAC,YAAY,CAAS;gBAEjB,YAAY,CAAC,EAAE,MAAM;IAI3B,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAa3D,sBAAsB,CAC1B,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,OAAO,CAAC;IAkBnB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAInC,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAMjE,oBAAoB,CACxB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB,OAAO,CAAC,IAAI,CAAC;IAgBV,WAAW,CACf,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,eAAe,GACvB,OAAO,CAAC,IAAI,CAAC;IAqBV,gBAAgB,CACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IAmDhB,OAAO,CAAC,WAAW;IA2BnB,OAAO,CAAC,YAAY;IAYd,gBAAgB,CACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IAgJV,mBAAmB,CACvB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IAmEV,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAgJtE;;;;;;;;OAQG;YACW,eAAe;CA2B9B"}
1
+ {"version":3,"file":"project-creator.d.ts","sourceRoot":"","sources":["../src/project-creator.ts"],"names":[],"mappings":"AA6BA,OAAO,EAOL,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AAWxB,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,qBAAa,cAAc;IACzB,OAAO,CAAC,YAAY,CAAS;gBAEjB,YAAY,CAAC,EAAE,MAAM;IAI3B,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAa3D,sBAAsB,CAC1B,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,OAAO,CAAC;IAkBnB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAInC,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAMjE,oBAAoB,CACxB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB,OAAO,CAAC,IAAI,CAAC;IAgBV,WAAW,CACf,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,eAAe,GACvB,OAAO,CAAC,IAAI,CAAC;IAqBV,gBAAgB,CACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IAmDhB,OAAO,CAAC,WAAW;IA2BnB,OAAO,CAAC,YAAY;IAYd,gBAAgB,CACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IA+IV,mBAAmB,CACvB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IAmEV,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAgJtE;;;;;;;;OAQG;YACW,eAAe;CA2B9B"}
package/dist/project-creator.js CHANGED
@@ -159,9 +159,8 @@ export class ProjectCreator {
159
159
  // integrity attributes are deliberately not added: the ionicons ESM
160
160
  // loader dynamically imports per-icon chunks that cannot carry
161
161
  // integrity hashes, so entry-file SRI would give false assurance.
162
- const ioniconScripts = ` <!-- Ionicons -->
162
+ const ioniconScripts = ` <!-- Ionicons (v8 is ESM-only; no legacy nomodule fallback exists) -->
163
163
  <script type="module" src="https://unpkg.com/ionicons@8.0.13/dist/ionicons/ionicons.esm.js"></script>
164
- <script nomodule src="https://unpkg.com/ionicons@8.0.13/dist/ionicons/ionicons.js"></script>
165
164
  `;
166
165
  htmlContent =
167
166
  htmlContent.slice(0, insertPosition) +
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-bestax",
3
- "version": "4.2.0",
3
+ "version": "4.2.2",
4
4
  "description": "Create a new bestax-bulma project",
5
5
  "type": "module",
6
6
  "bin": {
package/templates/skills/bestax-custom-component/references/component-catalog.md CHANGED
@@ -82,12 +82,12 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
82
82
  - [Card](https://bestax.io/docs/api/components/card) — The `Card` component renders a Bulma-styled card with optional header, image, content, and footer.
83
83
  - [Carousel](https://bestax.io/docs/api/components/carousel) — The `Carousel` component provides an image/content slider with navigation arrows and indicators.
84
84
  - [Collapse](https://bestax.io/docs/api/components/collapse) — The `Collapse` component provides an expandable/collapsible content panel.
85
- - [Dialog](https://bestax.io/docs/api/components/dialog) — The `Dialog` component provides confirmation and alert dialogs with customizable actions.
85
+ - [Dialog](https://bestax.io/docs/api/components/dialog) — The `Dialog` component provides ready-made confirm and alert dialogs, so a destructive action stays one `await dialog.confirm()` call away.
86
86
  - [Dropdown](https://bestax.io/docs/api/components/dropdown) — The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.
87
87
  - [Loading](https://bestax.io/docs/api/components/loading) — The `Loading` component provides a loading overlay with a spinner animation.
88
88
  - [Menu](https://bestax.io/docs/api/components/menu) — The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.
89
89
  - [Message](https://bestax.io/docs/api/components/message) — The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.
90
- - [Modal](https://bestax.io/docs/api/components/modal) — The `Modal` component provides a flexible, accessible modal dialog for your Bulma React UI.
90
+ - [Modal](https://bestax.io/docs/api/components/modal) — The `Modal` component provides an empty, accessible overlay for arbitrary content — for a ready-made confirm or alert, reach for `Dialog` instead.
91
91
  - [Navbar](https://bestax.io/docs/api/components/navbar) — The `Navbar` component implements Bulma's powerful, responsive navigation bar for your Bulma React UI.
92
92
  - [Pagination](https://bestax.io/docs/api/components/pagination) — The `Pagination` component provides a flexible, composable Bulma pagination navigation for your Bulma React UI.
93
93
  - [Panel](https://bestax.io/docs/api/components/panel) — The `Panel` component implements Bulma's versatile panel block for React.
@@ -123,12 +123,12 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
123
123
  ## Columns
124
124
 
125
125
  - [Column](https://bestax.io/docs/api/columns/column) — The `Column` component provides a single responsive layout column using Bulma's flexbox-based column system.
126
- - [Columns](https://bestax.io/docs/api/columns/columns) — The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](./column.md) components.
126
+ - [Columns](https://bestax.io/docs/api/columns) — The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](./column.md) components.
127
127
 
128
128
  ## Grid
129
129
 
130
130
  - [Cell](https://bestax.io/docs/api/grid/cell) — The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](./grid.md) component.
131
- - [Grid](https://bestax.io/docs/api/grid/grid) — The `Grid` component provides Bulma's advanced CSS Grid layout for complex, modern layouts.
131
+ - [Grid](https://bestax.io/docs/api/grid) — The `Grid` component provides Bulma's advanced CSS Grid layout for complex, modern layouts.
132
132
 
133
133
  ## Layout
134
134
 
package/templates/skills/bestax-icons/references/icon-libraries.md CHANGED
@@ -52,12 +52,11 @@ Set it once on `ConfigProvider` and omit `library` everywhere else.
52
52
  type="module"
53
53
  src="https://unpkg.com/ionicons@8.0.13/dist/ionicons/ionicons.esm.js"
54
54
  ></script>
55
- <script
56
- nomodule
57
- src="https://unpkg.com/ionicons@8.0.13/dist/ionicons/ionicons.js"
58
- ></script>
59
55
  ```
60
56
 
57
+ Ionicons v8 is ESM-only — there is no legacy `nomodule` bundle, so a single
58
+ `type="module"` tag is all that is needed.
59
+
61
60
  - **Scaffold flag:** `--icon ionicons` — which maps to `iconLibrary="ion"`. Passing
62
61
  `'ionicons'` as the `library`/`iconLibrary` value renders nothing.
63
62
  - **Names:** kebab-case: `rocket`, `heart`, `settings`.
package/templates/skills/bestax-layout-scaffold/SKILL.md CHANGED
@@ -99,10 +99,10 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
99
99
  and `.box` re-declare `--bulma-card-shadow`/`--bulma-box-shadow` from `--bulma-shadow` on
100
100
  their own selector, so setting _those_ from an ancestor never wins (same for
101
101
  `--bulma-box-radius`; `--bulma-card-radius` is a literal with no ancestor route at all).
102
- It has to be a CSS rule rather than `<Theme bulmaVars={{ '--bulma-shadow': … }}>`, because
103
- `bulmaVars` is a closed typed record and `--bulma-shadow` is not one of its keys — that
104
- exact call **does not compile**, and it was the single most repeated invention across this
105
- library's cold-start evals. Either way the subtree stays theme- and dark-mode-aware.
102
+ A class-scoped CSS rule keeps the ring on just the one featured card without wrapping it in
103
+ its own `Theme`; `<Theme bulmaVars={{ '--bulma-shadow': … }}>` also compiles and is the
104
+ better fit when the override already applies to a whole scoped subtree. Either way the
105
+ subtree stays theme- and dark-mode-aware.
106
106
 
107
107
  - **CTAs on a colored hero must stay legible in both schemes.** On a fixed-color surface
108
108
  (`Hero color="primary"`, a dark banner), use **filled** buttons — `color="light"` or
@@ -194,7 +194,7 @@ inline `style`.
194
194
  every other `Section` — never band CSS, never `bgColor="light"`/`"white"`.
195
195
  - [ ] Decorative CSS ≤10 lines total incl. comments — no file-header comment (hero wash +
196
196
  featured-card ring), `--bulma-*`-derived; no resets — Bulma ships one.
197
- The ring sets `--bulma-shadow` in a CSS rule; `Theme bulmaVars` has no such key.
197
+ The ring sets `--bulma-shadow` (via a scoped CSS rule or `Theme bulmaVars`).
198
198
  - [ ] Set the icon library once via `<ConfigProvider iconLibrary="…">` at the root.
199
199
  - [ ] Site built? ~800 KB raw / ~82 KB gzip CSS is the expected default-flavor size — to shrink
200
200
  it, run the `bestax-optimize` skill (measure first).
package/templates/skills/bestax-migrate/references/component-map.md CHANGED
@@ -6,40 +6,40 @@ codemod converts it; **Flagged** = it leaves a `TODO(bestax-migrate)` comment (s
6
6
 
7
7
  ## Top-level components
8
8
 
9
- | RBC | bestax | Notes |
10
- | -------------- | -------------------------------------------- | ------------------------------------------------------------------------------------- |
11
- | `Block` | `Block` | Auto |
12
- | `Box` | `Box` | Auto |
13
- | `Breadcrumb` | `Breadcrumb` | Auto; `align` → `alignment` (`center`→`centered`) |
14
- | `Button` | `Button` | Auto; `<Button remove/>` → `<Delete/>`; see prop map |
15
- | `Card` | `Card` | Auto |
16
- | `Columns` | `Columns` | Auto; `breakpoint="mobile"`→`isMobile`, `multiline`→`isMultiline`, … |
17
- | `Container` | `Container` | Auto; `breakpoint="fluid"`→`fluid`, `max`→`isMax` |
18
- | `Content` | `Content` | Auto |
19
- | `Dropdown` | `Dropdown` | Structure auto; controlled `value`/`onChange` flagged |
20
- | `Element` | — | Flagged: no generic element; use a semantic component + helper props |
21
- | `Footer` | `Footer` | Auto |
22
- | `Form.*` | flat imports | See Form table below |
23
- | `Heading` | `Title` / `SubTitle` / `<p class="heading">` | Auto; `subtitle` picks `SubTitle`, `heading` picks the plain element |
24
- | `Hero` | `Hero` | Auto; `hasNavbar`→`fullheightWithNavbar`; `halfheight`/`gradient` flagged |
25
- | `Icon` | `Icon` | `<i class="fas fa-x">` children → `name`/`library`/`variant` props; else flagged |
26
- | `Image` | `Image` | Auto; numeric `size={128}` → `size="128x128"`, `rounded`→`isRounded` |
27
- | `Level` | `Level` | Auto; `breakpoint="mobile"`→`isMobile` |
28
- | `Loader` | plain `<div className="loader">` | Auto (Bulma v1 still ships the class) |
29
- | `Media` | `Media` | Auto |
30
- | `Menu` | `Menu` | Auto |
31
- | `Message` | `Message` | Auto; `size` flagged |
32
- | `Modal` | `Modal` | `show`→`active`; `closeOnEsc`/`closeOnBlur`/`showClose` flagged (defaults cover them) |
33
- | `Navbar` | `Navbar` | Auto; see dropdown note below |
34
- | `Notification` | `Notification` | Auto; `light`→`isLight` |
35
- | `Pagination` | `Pagination` | `onChange`→`onPageChange`; `delta`/labels/`showFirstLast`/`autoHide` flagged |
36
- | `Panel` | `Panel` | Auto |
37
- | `Progress` | `Progress` | Auto |
38
- | `Section` | `Section` | Auto |
39
- | `Table` | `Table` | Auto; `size="fullwidth"`→`isFullwidth`, `striped`→`isStriped`, … |
40
- | `Tabs` | `Tabs` | Auto; children wrapped in `Tabs.List`; `type="toggle-rounded"`→`toggle rounded` |
41
- | `Tag` | `Tag` | Auto; `remove`→`isDelete`, `rounded`→`isRounded` |
42
- | `Tile` | — | Flagged: Bulma v1 replaced tiles with `Grid`/`Cell` |
9
+ | RBC | bestax | Notes |
10
+ | -------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
11
+ | `Block` | `Block` | Auto |
12
+ | `Box` | `Box` | Auto |
13
+ | `Breadcrumb` | `Breadcrumb` | Auto; `align` → `alignment` (`center`→`centered`) |
14
+ | `Button` | `Button` | Auto for literal `remove` (by value, not presence — truthy → `<Delete/>`, `remove={false}` stays `Button`); dynamic flagged |
15
+ | `Card` | `Card` | Auto |
16
+ | `Columns` | `Columns` | Auto; `breakpoint="mobile"`→`isMobile`, `multiline`→`isMultiline`, … |
17
+ | `Container` | `Container` | Auto; `breakpoint="fluid"`→`fluid`, `max`→`isMax` |
18
+ | `Content` | `Content` | Auto |
19
+ | `Dropdown` | `Dropdown` | Structure auto; controlled `value`/`onChange` flagged |
20
+ | `Element` | — | Flagged: no generic element; use a semantic component + helper props |
21
+ | `Footer` | `Footer` | Auto |
22
+ | `Form.*` | flat imports | See Form table below |
23
+ | `Heading` | `Title` / `SubTitle` / `<p class="heading">` | Auto for literal `subtitle`/`heading` (by value, not presence — `subtitle={false}` is `Title`); dynamic value flagged |
24
+ | `Hero` | `Hero` | Auto; `hasNavbar`→`fullheightWithNavbar`; `halfheight`/`gradient` flagged |
25
+ | `Icon` | `Icon` | `<i class="fas fa-x">` children → `name`/`library`/`variant` props; else flagged |
26
+ | `Image` | `Image` | Auto; numeric `size={128}` → `size="128x128"`, `rounded`→`isRounded` |
27
+ | `Level` | `Level` | Auto; `breakpoint="mobile"`→`isMobile` |
28
+ | `Loader` | plain `<div className="loader">` | Auto (Bulma v1 still ships the class) |
29
+ | `Media` | `Media` | Auto |
30
+ | `Menu` | `Menu` | Auto |
31
+ | `Message` | `Message` | Auto; `size` flagged |
32
+ | `Modal` | `Modal` | `show`→`active`; `closeOnEsc`/`closeOnBlur`/`showClose` flagged (defaults cover them) |
33
+ | `Navbar` | `Navbar` | Auto; see dropdown note below |
34
+ | `Notification` | `Notification` | Auto; `light`→`isLight` |
35
+ | `Pagination` | `Pagination` | `onChange`→`onPageChange`; `delta`/labels/`showFirstLast`/`autoHide` flagged |
36
+ | `Panel` | `Panel` | Auto |
37
+ | `Progress` | `Progress` | Auto |
38
+ | `Section` | `Section` | Auto |
39
+ | `Table` | `Table` | Auto; `size="fullwidth"`→`isFullwidth`, `striped`→`isStriped`, … |
40
+ | `Tabs` | `Tabs` | Auto; children wrapped in `Tabs.List`; `type="toggle-rounded"`→`toggle rounded` |
41
+ | `Tag` | `Tag` | Auto; `remove`→`isDelete`, `rounded`→`isRounded` |
42
+ | `Tile` | — | Flagged: Bulma v1 replaced tiles with `Grid`/`Cell` |
43
43
 
44
44
  ## Compound sub-components
45
45
 
package/templates/skills/bestax-migrate/references/css-migration.md CHANGED
@@ -22,13 +22,18 @@ finish what it flagged.
22
22
 
23
23
  ```scss
24
24
  @use 'bulma/sass' with (
25
- $primary: #ff6b35,
26
- $family-primary: 'Nunito',
27
- sans-serif
28
- );
25
+ $primary: #ff6b35,
26
+ $family-primary: (
27
+ 'Nunito',
28
+ sans-serif,
29
+ )
30
+ );
29
31
  @use '@allxsmith/bestax-bulma/scss/extras';
30
32
  ```
31
33
 
34
+ A comma-valued override (a font-family stack) is wrapped in parens so Dart Sass
35
+ reads it as one list value, not extra arguments to `with (…)`.
36
+
32
37
  0.9 `_all` aggregator imports (`bulma/sass/elements/_all`) became directory modules
33
38
  (`@use 'bulma/sass/elements';`). Relative node_modules paths
34
39
  (`@import '../../node_modules/bulma/bulma'`, common under Parcel) keep their prefix,
@@ -38,6 +43,31 @@ finish what it flagged.
38
43
  **dart-sass ≥ 1.79** — the codemod's node-sass replacement installs that, but check
39
44
  bundler-pinned older versions (Parcel's sass transformer pins 1.66).
40
45
 
46
+ react-bulma-components' own stylesheet — any `react-bulma-components/…` specifier,
47
+ bare, `~`-prefixed, or a relative `node_modules/` path, covering the documented v3
48
+ entry points (`src/index.sass`, `dist/react-bulma-components(.min).css`) as well as
49
+ deep partials and extensionless forms — is not a third-party extension; it's the
50
+ library being migrated away from. It targets Bulma 0.9, not the v1 your components now
51
+ use, and (unless `--no-deps` is passed) `package.json` no longer lists it, so the
52
+ import can never resolve once installed. Every `--css` mode rewrites it into a real
53
+ Bulma root rather than leaving a known-broken import — the **same shape the
54
+ `@import 'bulma/…'` root path emits**, so a file that starts from RBC and one that
55
+ starts from a Bulma import converge: `bestax` (default) emits
56
+ `@use 'bulma/sass';` (folding any leading `$var` overrides above the import into
57
+ `with (…)`) plus `@use '@allxsmith/bestax-bulma/scss/extras';`; `bulma` emits plain
58
+ `@use 'bulma/sass';`; `keep` does the same with a TODO explaining the replacement
59
+ (worded to match whether `--no-deps` kept the package). It deliberately does **not**
60
+ emit the hard-configured `scss/bestax` bundle here — that bundle can't carry the
61
+ user's own theme vars, and reconfiguring `bulma/sass` when another file already
62
+ configures it is a hard Sass error. If the file already has its own `bulma/…` root
63
+ (a `@use 'bulma/sass'` of its own, or a Bulma `@import` the codemod converts), the RBC
64
+ **root/index** line (`src/index`, the bundled `dist/*.css`, or the bare specifier) is
65
+ dropped instead of emitting a second root; in `bestax` mode the extras are added once
66
+ alongside that existing root. A dropped RBC **deep partial** (e.g.
67
+ `src/components/navbar.sass`) is different — `bulma/sass` doesn't necessarily carry a
68
+ given partial's styles, so it gets a `// TODO(bestax-migrate)` and a report entry
69
+ ("port any styles it carried beyond Bulma's own by hand") rather than vanishing silently.
70
+
41
71
  - **package.json**: `react-bulma-components` removed, `@allxsmith/bestax-bulma` added,
42
72
  `bulma` bumped to `^1.0.4` (or added when sources still import `bulma/…` directly),
43
73
  and dead `node-sass` replaced with dart `sass`. Run the package manager's install
@@ -63,6 +93,8 @@ elements,form,components,grid,layout,helpers,themes}` with leaf partials like
63
93
  compatibility. Class-based usage (`className="is-checkradio"`) keeps needing the
64
94
  extension; usage that migrated to bestax components (Radio, Checkbox, the advanced
65
95
  form controls) is already styled by the bestax extras, so the import can go.
96
+ react-bulma-components' own stylesheet is never flagged this way (see above) — only
97
+ packages actually named `bulma-*` are.
66
98
 
67
99
  ## Choosing a CSS flavor (optional)
68
100
 
package/templates/skills/bestax-migrate/references/unmappables.md CHANGED
@@ -32,7 +32,7 @@ matches the usage, or plain JSX with classes:
32
32
  ## `Tile` — Bulma v1 replaced tiles with Grid
33
33
 
34
34
  Convert ancestor/parent/child tile trees to `Grid`/`Cell` (docs:
35
- https://bestax.io/docs/api/grid/grid):
35
+ https://bestax.io/docs/api/grid):
36
36
 
37
37
  ```tsx
38
38
  // Before
package/templates/skills/bestax-theming/references/css-variables.md CHANGED
@@ -101,32 +101,33 @@ and numeric shades `--bulma-<c>-00` … `--bulma-<c>-95`.
101
101
  | `--bulma-size-small` / `-normal` / `-medium` / `-large` | 0.75 / 1 / 1.25 / 1.5rem | via `bulmaVars` |
102
102
  | `--bulma-weight-light/normal/medium/semibold/bold/extrabold` | 300 / 400 / 500 / 600 / 700 / 800 | via `bulmaVars` |
103
103
 
104
- ## Shadow — the one token `bulmaVars` cannot set
104
+ ## Shadow — override the upstream token, not the derived one
105
105
 
106
- `--bulma-shadow` is a real Bulma variable (`.box` and `.card` both derive
107
- `--bulma-box-shadow`/`--bulma-card-shadow` from it), but it is **not a key of `bulmaVars`** —
108
- that record is a closed union built from an explicit list, and shadow was left out. Writing
109
- `<Theme bulmaVars={{ '--bulma-shadow': … }}>` is a compile error, and it is the single most
110
- repeated invention in this library's cold-start evals: every run on every guidance channel
111
- tried it.
106
+ `--bulma-shadow` (plus its `--bulma-shadow-h`/`-s`/`-l` channels) is a real Bulma variable that
107
+ `.box`, `.card`, `.dropdown`, and `.panel` each derive their own shadow variable from
108
+ (`--bulma-box-shadow`, `--bulma-card-shadow`, …). It **is** a key of `bulmaVars`, so `Theme` can
109
+ set it directly:
112
110
 
113
- Set it in CSS instead, then apply the class to the one element that needs it:
114
-
115
- ```css
116
- .featured-ring {
117
- --bulma-shadow: 0 0 0 2px var(--bulma-primary);
118
- }
111
+ ```tsx
112
+ <Theme bulmaVars={{ '--bulma-shadow': '0 0 0 2px var(--bulma-primary)' }}>
113
+ <Box>featured</Box>
114
+ </Theme>
119
115
  ```
120
116
 
117
+ There is no individual `shadow` prop for it — `shadow` already names the unrelated
118
+ `shadowless` helper class (`shadow="shadowless"` → `is-shadowless`) — so reach it through
119
+ `bulmaVars` as shown above.
120
+
121
121
  Do **not** reach for `--bulma-box-shadow`/`--bulma-card-shadow` from an ancestor instead —
122
- those are re-declared on `.box`/`.card` themselves, so an inherited value always loses (the
123
- same rule as the extras section below).
122
+ those are re-declared on `.box`/`.card` themselves, so an inherited value always loses. Setting
123
+ `--bulma-shadow` from an ancestor `Theme` is the one override that cascades into all of them
124
+ (the same rule as the extras section below).
124
125
 
125
126
  ## Extras component variables
126
127
 
127
- Every "Beyond Bulma" extra registers its own `--bulma-<component>-*` variables. They are
128
- registered on the component's **own selector** (`.avatar`, `.dialog`, `.tooltip`, … —
129
- `.bestax-avatar` etc. with the prefixed CSS flavor), not on `:root`. A value set on a wrapping
128
+ Every "Beyond Bulma" extra registers its own `--bulma-<component>-*` variables. Most are
129
+ registered on the component's **own selector** (`.avatar`, `.dialog`, … — `.bestax-avatar`
130
+ etc. with the prefixed CSS flavor), not on `:root`. A value set on a wrapping
130
131
  ancestor — including `Theme`'s `bulmaVars` on a wrapping `Theme` — is only _inherited_ and
131
132
  always loses to the component-level declaration, so it will NOT take effect. Working overrides
132
133
  target the component's own element instead: redeclare on the component's own class in your CSS
@@ -135,6 +136,20 @@ target the component's own element instead: redeclare on the component's own cla
135
136
  (`.avatar.big-avatar { --bulma-avatar-size: 3.5rem; }`), or set it via the component's `style`
136
137
  prop. Several default to core theme vars above, so they already flow through a custom theme.
137
138
 
139
+ Two exceptions where that advice silently fails, because the declarations sit somewhere a
140
+ lone class or the `style` prop cannot outrank:
141
+
142
+ - **Compound selectors** — LinkButton's variables are declared on `.button.link-button`
143
+ (specificity 0-2-0). A single class added via `className` is 0-1-0 and loses regardless of
144
+ stylesheet order. Override with the `style` prop, or in CSS loaded after the library
145
+ styles with a selector that matches or exceeds the compound:
146
+ `.button.link-button { --bulma-link-button-ghost-color: … }`.
147
+ - **Constituent elements** — Tooltip's variables (all but `--bulma-tooltip-dashed-color`)
148
+ are declared on `.tooltip-content`, and Sidebar's `--bulma-sidebar-overlay-background` on
149
+ `.sidebar-background`. Values set via `className` or `style` land on the component root and
150
+ are only inherited by the constituent, so they lose to its own declaration — target the
151
+ declaring element in your CSS: `.tooltip-content { --bulma-tooltip-background: … }`.
152
+
138
153
  ### Avatar / Avatars / Badge
139
154
 
140
155
  | Variable | Default |
@@ -238,6 +253,8 @@ own-selector override rule applies.
238
253
 
239
254
  ### LinkButton
240
255
 
256
+ Declared on the compound `.button.link-button` — see the compound-selector exception above.
257
+
241
258
  `--bulma-link-button-ghost-color`, `--bulma-link-button-ghost-hover-color`,
242
259
  `--bulma-link-button-transition-duration`, `--bulma-link-button-underline-offset`
243
260
 
@@ -378,6 +395,9 @@ own-selector override rule applies.
378
395
 
379
396
  ### Tooltip
380
397
 
398
+ All but `--bulma-tooltip-dashed-color` are declared on `.tooltip-content` — see the
399
+ constituent-element exception above.
400
+
381
401
  `--bulma-tooltip-arrow-margin`, `--bulma-tooltip-arrow-size`, `--bulma-tooltip-background`,
382
402
  `--bulma-tooltip-color`, `--bulma-tooltip-dashed-color`, `--bulma-tooltip-font-size`,
383
403
  `--bulma-tooltip-font-weight`, `--bulma-tooltip-line-height`, `--bulma-tooltip-max-width`,