gbs-add-block 2.0.2 → 2.0.3

package/.gbs/skills/gbs-components/SKILL.md

@@ -15,11 +15,14 @@ npx gbs-add-block -a Button,Input,Modal --beta
 ```
 
 Writes `component-lib/<folder>/` plus `component-lib/shared/`. Always pass
-`--beta`. Import the folder barrel **and its stylesheet** (or the repo's alias):
+`--beta`. Import the barrel in your component; each stylesheet goes in the
+global CSS **once** (Vite: `src/index.css`), never in a component file:
 
 ```ts
 import { Button } from "component-lib/button";
-import "component-lib/button/styles.css";
+```
+```css
+@import "../component-lib/button/styles.css";
 ```
 
 Folder = lowercased name, except `data-grid`, `date-picker`, `file-uploader`,
@@ -78,7 +81,6 @@ import { Input } from "component-lib/input";
 import { Select } from "component-lib/combobox";
 import { Modal } from "component-lib/modal";
 import { toast } from "component-lib/toaster";
-// plus each styles.css, once
 
 const ROLES = [{ value: "admin", label: "Admin" }, { value: "dev", label: "Dev" }];
 
@@ -121,12 +123,12 @@ export function InviteButton() {
 
 ## Details (in `references/`)
 
-- `install.md` — CLI flags, folders, `shared/`, 1.x vs beta.
-- `forms.md` — text and choice fields, controlled state, form posting.
-- `pickers.md` — Select, MultiSelect, DatePicker, FileUploader.
+- `install.md` — CLI flags, folders, 1.x vs beta.
+- `forms.md` — fields, controlled state, form posting.
+- `pickers.md` — Select, MultiSelect, DatePicker, Uploader.
 - `overlays.md` — Modal, dialog, Popover, Menu, Tooltip.
 - `toaster.md` — `toast()` and `<Toaster />`.
 - `data-grid.md` — columns, API, export.
-- `data-display.md` — Card, Tabs, Accordion, Badge, Avatar, Progress.
-- `styling.md` — tokens, layers, Tailwind, slots, `data-*`, dark.
+- `data-display.md` — Card, Tabs, Accordion, Badge, Avatar.
+- `styling.md` — tokens, layers, slots, `data-*`, dark.
 - `accessibility.md` — what is supplied, what you add.

package/.gbs/skills/gbs-components/references/data-grid.md

@@ -5,7 +5,6 @@ A virtualized grid. Import `DataGrid` and `createColumnHelper` from
 
 ```tsx
 import { createColumnHelper, DataGrid } from "component-lib/data-grid";
-import "component-lib/data-grid/styles.css";
 
 interface Employee { id: number; name: string; salary: number; active: boolean }
 

package/.gbs/skills/gbs-components/references/install.md

@@ -151,14 +151,13 @@ is replaced on update. Put your changes in your own module instead.
 
 ## Importing
 
-Import the folder barrel, plus the stylesheet once anywhere in the app:
+Import the barrel in the component that uses it:
 
 ```ts
 import { Input, OtpInput } from "component-lib/input";
-import "component-lib/input/styles.css";
 ```
 
-Or import the CSS from your root stylesheet:
+Put the stylesheet in the project's global CSS, once — never in a component file:
 
 ```css
 @import "../component-lib/input/styles.css";

package/.gbs/skills/gbs-components/references/overlays.md

@@ -25,7 +25,6 @@ dismiss rules, a close guard, sizes, drawers and animation.
 
 ```tsx
 import { Modal } from "component-lib/modal";
-import "component-lib/modal/styles.css";
 
 const [open, setOpen] = useState(false);
 
@@ -73,7 +72,6 @@ React.
 ```tsx
 // once, e.g. app/layout.tsx or App.tsx
 import { DialogHost } from "component-lib/dialog";
-import "component-lib/dialog/styles.css";
 <DialogHost />
 
 // anywhere
@@ -142,7 +140,6 @@ import {
   Menu, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem,
   MenuGroup, MenuSeparator, MenuSub,
 } from "component-lib/menu";
-import "component-lib/menu/styles.css";
 
 <Menu trigger={<Button variant="outline">Actions</Button>} label="Row actions">
   <MenuItem icon={<EditIcon />} shortcut="⌘E" onSelect={edit}>Edit</MenuItem>

package/.gbs/skills/gbs-components/references/styling.md

@@ -6,18 +6,20 @@ state attributes.
 
 ## 1. Stylesheets are per component
 
-Each folder has its own `styles.css`. Import the ones you use, once, anywhere:
-
-```ts
-import "component-lib/button/styles.css";
-```
-
-or from a root stylesheet:
+Each folder has its own `styles.css`. Put the ones you use in the project's
+**global** stylesheet — `src/index.css` in Vite, the root layout's CSS in Next —
+once each:
 
 ```css
 @import "../component-lib/button/styles.css";
 ```
 
+**Never import a stylesheet from a component file.** `import
+"component-lib/button/styles.css"` inside a `.tsx` does bundle, but it makes CSS
+order depend on module import order — which decides whether Tailwind utilities
+still beat the component's own rules — and a lazy-loaded component then pulls its
+styles in late, flashing unstyled. One global import per component, nowhere else.
+
 Nothing renders correctly without it — the components emit class names only.
 
 ## 2. Theme with `--gbs-*` on `:root`

package/.gbs/skills/gbs-components/references/toaster.md

@@ -12,7 +12,6 @@ shared module-level store; two import paths can create two stores.
 ```tsx
 // once, near the root
 import { Toaster } from "component-lib/toaster";
-import "component-lib/toaster/styles.css";
 <Toaster />
 
 // anywhere

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v2.0.2)
+# GBS Building Blocks 2.0 (v2.0.3)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -33,9 +33,13 @@ Pick a subset with `--for claude,codex`, or `--for none` for just `.gbs/`.
 Commit the result so everyone's agent picks it up. Re-run to update; a file you
 have edited is never replaced without `--force`.
 
-## What's New 🎉 (Ver 2.0.2)
+## What's New 🎉 (Ver 2.0.3)
 
-- Update Candidate for next major change 2.0.0
+- Agent skill: stylesheets are now documented as a single import in the
+  project's global CSS. The previous wording showed the stylesheet import
+  beside the component import, which led coding agents to repeat it in every
+  component file they wrote — making CSS order depend on module import order,
+  and arriving late on lazy-loaded routes.
 
 ## Authors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "React Component Library",
   "type": "module",
   "files": [