@mieweb/ui 0.11.0-dev.46 → 0.11.0-dev.47

package/agent/evals/install.md

@@ -28,10 +28,12 @@ format and scoring.
 
 - **Ask:** "Is there a one-import setup?"
 - **Expect:** Almost — the TW4 quick start is **three** lines in your own CSS
-  entry: `@import 'tailwindcss'`, `@source "../node_modules/@mieweb/ui/dist"`,
-  then `@import '@mieweb/ui/init.css'` (dark variant + `@theme` fallbacks +
-  default brand + base styles). `init.css` is Tailwind input, not standalone;
-  for no-Tailwind apps the one-import answer is `styles.css`.
+  entry: `@import 'tailwindcss'`, `@import '@mieweb/ui/init.css'` (dark
+  variant + `@theme` fallbacks + default brand + base styles), then
+  `@source "../node_modules/@mieweb/ui/dist"`. Both `@import`s must come first
+  and be consecutive — `@source` between them makes PostCSS silently drop the
+  `init.css` import (#705). `init.css` is Tailwind input, not standalone; for
+  no-Tailwind apps the one-import answer is `styles.css`.
 - **Agent:** MIE UI Install Agent
 - **Source:** agent/skills/mieweb-ui-tailwind4/SKILL.md — CSS entry, Option A; src/styles/init.css usage header
 

package/agent/skills/mieweb-ui-tailwind4/SKILL.md

@@ -30,14 +30,16 @@ In a Tailwind consumer, missing `@source` (TW4) or content/safelist coverage (TW
 
 ## CSS entry — quick start vs manual
 
-**Option A (quick start)** — three lines, all in **your own** CSS entry (the first two resolve relative to your file, so they cannot live inside the package):
+**Option A (quick start)** — three lines, all in **your own** CSS entry (the `@source` path resolves relative to your file, so it cannot live inside the package):
 
 ```css
 @import 'tailwindcss';
-@source "../node_modules/@mieweb/ui/dist"; /* path relative to THIS file */
 @import '@mieweb/ui/init.css'; /* dark variant + @theme fallbacks + default brand + base styles */
+@source "../node_modules/@mieweb/ui/dist"; /* path relative to THIS file */
 ```
 
+The two `@import`s must come first and be consecutive — CSS requires `@import` to precede all other statements, and `@tailwindcss/postcss` silently **drops** a late `@import` with only a build warning, so `@source` between them loses all of `init.css` (no dark variant, no brand tokens — mieweb/ui#705).
+
 **Option B (manual, full control)** — every line matters, in this order:
 
 ```css
@@ -114,6 +116,7 @@ Filters/selection/pagination state is yours (usually the URL); `ViewSet` owns on
 | PostCSS does nothing | TW3 plugin configured | `@tailwindcss/postcss`, not `tailwindcss` |
 | `var()` renders transparent | Variable undefined | Fallback: `var(--token, #hex)` |
 | Peer-dep install errors | Required vs optional confusion | react/react-dom + the five @kerebron/* runtime peers are required; match optional peers to imported entries |
+| Dark variant + brand tokens missing; build warns `@import statements must precede…` | `@source` placed between the `@import`s — PostCSS silently drops the late `init.css` import (mieweb/ui#705) | Both `@import`s first and consecutive, `@source` after them |
 | Module shows failed action as success | `on*` promise swallowed | Return the real promise (`mutateAsync` / `callAsync`) |
 | Views regroup on every render | Unstable `accessors` | Module scope or `useMemo` |
 | `transition-*` utilities stop working after theme/brand CSS | The brand CSS's unlayered `*` transition shorthand resets `transition-property` on every element and beats layered utilities, even though it lists only color properties (mieweb/ui#460, #682) | Move the transition rule into `@layer base` (or remove/narrow it) so component transitions win; keep brand token declarations unlayered |

package/dist/styles/init.css

@@ -5,12 +5,16 @@
  * Add these three lines to your main CSS entry point:
  *
  *   @import 'tailwindcss';
- *   @source "../node_modules/@mieweb/ui/dist";
  *   @import '@mieweb/ui/init.css';
+ *   @source "../node_modules/@mieweb/ui/dist";
  *
- * The first two lines MUST live in your own CSS file (not inside a
- * package) because the paths resolve relative to your project root.
- * The third line imports this file, which includes:
+ * Keep both @import lines FIRST and CONSECUTIVE — CSS requires @import
+ * to precede all other statements, and @tailwindcss/postcss silently
+ * drops a late @import (only a build warning), losing this entire file:
+ * no dark variant, no brand tokens (mieweb/ui#705). These lines must
+ * live in your own CSS file (not inside a package) because the @source
+ * path resolves relative to your project root.
+ * The second line imports this file, which includes:
  *
  *   - Dark mode custom variant (data-theme="dark")
  *   - @theme with all color scales + fallback values

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mieweb/ui",
-  "version": "0.11.0-dev.46",
+  "version": "0.11.0-dev.47",
   "description": "A themeable, accessible React component library built with Tailwind CSS",
   "author": "Medical Informatics Engineering, Inc.",
   "license": "SEE LICENSE IN LICENSE",