@navecss/core 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navecss/core",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "license": "MIT",
   "type": "module",
   "description": "Nave design system — layer architecture, reset, atomic utilities, and the Vite, PostCSS and Lightning CSS adapters and a command line for the @nave directive",
@@ -19,11 +19,26 @@
     "access": "public"
   },
   "exports": {
-    ".": "./dist/index.css",
-    "./layers": "./dist/layers.css",
-    "./no-tokens": "./dist/no-tokens.css",
-    "./reset": "./dist/reset.css",
-    "./atomic": "./dist/atomic.css",
+    ".": {
+      "types": "./dist/css.d.ts",
+      "default": "./dist/index.css"
+    },
+    "./layers": {
+      "types": "./dist/css.d.ts",
+      "default": "./dist/layers.css"
+    },
+    "./no-tokens": {
+      "types": "./dist/css.d.ts",
+      "default": "./dist/no-tokens.css"
+    },
+    "./reset": {
+      "types": "./dist/css.d.ts",
+      "default": "./dist/reset.css"
+    },
+    "./atomic": {
+      "types": "./dist/css.d.ts",
+      "default": "./dist/atomic.css"
+    },
     "./cx": {
       "types": "./dist/cx.d.ts",
       "import": "./dist/cx.js"
@@ -50,7 +65,10 @@
       "types": "./dist/lightningcss.d.ts",
       "import": "./dist/lightningcss.js"
     },
-    "./standalone": "./dist/standalone.css",
+    "./standalone": {
+      "types": "./dist/css.d.ts",
+      "default": "./dist/standalone.css"
+    },
     "./check": {
       "types": "./dist/check.d.ts",
       "import": "./dist/check.js"
@@ -80,31 +98,40 @@
     }
   },
   "dependencies": {
-    "@navecss/tokens": "^0.4.0"
+    "@navecss/tokens": "^0.6.0"
   },
   "devDependencies": {
+    "@astrojs/node": "11.1.11",
+    "@astrojs/react": "7.1.4",
     "@rmenke/css-tokenizer-tests": "1.4.0",
     "@sveltejs/vite-plugin-svelte": "7.3.1",
-    "@types/node": "^26.6.4",
-    "@vitejs/plugin-vue": "6.0.9",
-    "@vitest/browser": "5.0.3",
-    "@vitest/browser-playwright": "5.0.3",
-    "@vitest/coverage-v8": "5.0.3",
+    "@types/node": "^26.6.6",
+    "@vitejs/plugin-vue": "6.0.10",
+    "@vitest/browser": "5.1.0",
+    "@vitest/browser-playwright": "5.1.0",
+    "@vitest/coverage-v8": "5.1.0",
+    "astro": "7.4.0",
     "lightningcss": "1.33.0",
     "lightningcss-1-24": "npm:lightningcss@1.24.1",
-    "playwright": "1.63.0",
-    "postcss": "^8.5.28",
-    "prettier": "3.9.9",
-    "sass": "1.105.1",
+    "mdn-data": "2.37.2",
+    "playwright": "1.65.0",
+    "postcss": "^8.5.32",
+    "prettier": "3.9.10",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "sass": "1.108.1",
     "source-map": "^0.8.0",
-    "svelte": "5.57.2",
-    "tsup": "^8.5.1",
+    "stylelint": "17.16.0",
+    "stylelint-16-16": "npm:stylelint@16.16.0",
+    "stylelint-16-17": "npm:stylelint@16.17.0",
+    "svelte": "5.57.3",
+    "tsup": "^9.0.0",
     "typescript": "6.0.3",
-    "vite": "8.3.3",
+    "vite": "8.3.5",
     "vite-floor": "npm:vite@8.2.1",
-    "vitest": "5.0.3",
+    "vitest": "5.1.0",
     "vscode-css-languageservice": "6.3.10",
-    "vue": "3.5.43"
+    "vue": "3.5.45"
   },
   "engines": {
     "node": ">=22.18"
@@ -123,12 +150,14 @@
   "scripts": {
     "build": "node scripts/build-css.ts && tsup",
     "dev": "tsup --watch",
+    "generate:property-table": "node scripts/generate-property-table.ts",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit && tsc --noEmit -p test/browser/tsconfig.json",
     "lint": "eslint src scripts \"test/**/*.ts\" --max-warnings 0 && stylelint \"src/**/*.css\" --max-warnings 0",
     "lint:fix": "eslint src scripts \"test/**/*.ts\" --fix && stylelint \"src/**/*.css\" --fix",
     "test": "node scripts/generate-consumer-theming-fixtures.ts && node scripts/generate-vite-plugin-fixtures.ts && vitest run",
-    "test:browser": "node scripts/generate-consumer-theming-fixtures.ts && node scripts/generate-vite-plugin-fixtures.ts && node scripts/generate-lightningcss-fixtures.ts && node scripts/generate-no-bundler-fixture.ts && vitest run --config vitest.browser.config.ts && vitest run --config vitest.chromium.config.ts",
-    "check:pack": "node ../../scripts/without-dry-run.mjs publint && node ../../scripts/without-dry-run.mjs attw --pack . --profile esm-only --exclude-entrypoints . layers no-tokens reset atomic standalone"
+    "test:browser": "node scripts/generate-consumer-theming-fixtures.ts && node scripts/generate-vite-plugin-fixtures.ts && node scripts/generate-lightningcss-fixtures.ts && node scripts/generate-native-order-lightningcss-fixture.ts && node scripts/generate-no-bundler-fixture.ts && vitest run --config vitest.browser.config.ts && vitest run --config vitest.chromium.config.ts && pnpm run test:browser:engines",
+    "test:browser:engines": "node scripts/generate-native-order-engine-fixtures.ts && vitest run --config vitest.browser.engines.config.ts",
+    "check:pack": "node ../../scripts/without-dry-run.mjs publint && node ../../scripts/without-dry-run.mjs attw --pack . --profile esm-only"
   }
 }

package/skills/navecss/SKILL.md

@@ -48,6 +48,18 @@ Consumer rules go in `@layer components.consumer`, and a deliberate exception in
 `@layer overrides`; never write an unlayered rule. Atom names are the camelCase keys listed
 under Atoms below (`focusRing`, `justifyBetween`), never the `nave-` class they emit.
 
+`@nave a b;` expands in place, atom by atom, each atom's pseudo-class, `@media` and `@container`
+blocks right after its declarations, and what the rule says after the directive comes after all of
+it. A later declaration overrides an atom's declarations and its `@media` and `@container` blocks.
+Over a pseudo-class block, such as the `:focus-visible` of `focusRing`, a later nested block such
+as `&:focus { ... }` wins too, but a plain declaration does not, because the block's selector is
+more specific. Name responsive and state atoms (`hide*`, `*PhoneOnly`, `focusRing`) after the atoms
+they adjust, and write a declaration that should give way to them above the directive. When the
+build warns that something later in the rule overrides an atom's block, make the move or
+reorder the warning names. Where it names neither, write the atom the task wants to win
+last and add the marker the warning then prints; otherwise add a `nave-allow-override`
+marker only when the override is what the task asks for.
+
 See where `@nave` is valid (nesting depth, `@media`/`@container`, `@keyframes`) in
 [the package README](../../README.md#where-nave-is-valid).
 
@@ -58,7 +70,7 @@ built-in atom it names, and `cx()` takes built-in atoms and nothing else.
 Its type check is TypeScript only: a JavaScript consumer gets none of it. A type error from
 `cx()` means the name is wrong: it is never a reason to reach for `cx.raw()` or a cast.
 
-In a project whose Vite config uses `navePlugin()` from `@navecss/core/vite`, the build reads every `cx()` call and fails on one whose atoms it cannot list. Pass names it can read (a literal, a condition between literals, a `const` in the same file); to choose by a value, call `cx()` once per case and pick between the results; pass a name known only at run time to `cx.dynamic()`, with its atoms in `keep`. The build's report names its remedies, most preferred first: take the first one that fits. Never set `atomic: 'all'`, never build a `nave-` class from pieces, and never apply a class taken from `@navecss/core/atoms`, to make a report go away. The dev server serves the atoms the build would ship, chosen from the code it has read, so a `nave-*` class with no rule in dev is written where the build cannot see it: move it into code the build reads, or list its atom in `keep`.
+In a project whose Vite config uses `navePlugin()` from `@navecss/core/vite`, or whose Next.js config is wrapped in `withNave()` from `@navecss/prune`, the build reads every `cx()` call and fails on one whose atoms it cannot list. On Next.js that means the calls in the JavaScript and TypeScript modules your entry files import: a module that reaches the page another way, such as one that only Markdown or MDX files import or one loaded through `import()` or `require()` with a specifier built at run time, is not read, and `@navecss/prune`'s README lists what else the build cannot see. Pass names it can read (a literal, a condition between literals, a `const` in the same file); to choose by a value, call `cx()` once per case and pick between the results; pass a name known only at run time to `cx.dynamic()`, with its atoms in `keep`, an option of `navePlugin()` on Vite and of `withNave()` on Next.js. The build's report names its remedies, most preferred first: take the first one that fits; on Next.js, `next dev` prints it in its terminal, not in the browser. Never set `atomic: 'all'`, never move a Next.js project back to `@navecss/core/postcss` or remove `withNave()`, never build a `nave-` class from pieces, and never apply a class taken from `@navecss/core/atoms`, to make a report go away. The dev server serves the atoms the build would ship, chosen from the code it has read, so a `nave-*` class with no rule in dev is written where the build cannot see it: move it into code the build reads, or list its atom in `keep`.
 
 ## `cx.raw()`
 
@@ -194,6 +206,8 @@ renders nothing.
 - `--nave-color-action-primary-active`
 - `--nave-color-action-primary-hover`
 - `--nave-color-action-secondary`
+- `--nave-color-action-secondary-active`
+- `--nave-color-action-secondary-hover`
 - `--nave-color-backdrop-modal`: Translucent layer between a modal panel and the page, which it recedes. Only behind a fully modal panel; never under text, a control or a focus indicator the reader can reach.
 - `--nave-color-border-control`: Identifying boundary for a control (inputs, form boundaries, and the secondary action control).
 - `--nave-color-border-default`: Decorative dividers and card edges.