@knighted/css 1.0.0-rc.2 → 1.0.0-rc.4

package/dist/cjs/css.cjs

@@ -125,9 +125,27 @@ async function compileSass(filePath, indented, peerResolver) {
     const sass = sassModule;
     const result = sass.compile(filePath, {
         style: 'expanded',
+        loadPaths: buildSassLoadPaths(filePath),
     });
     return result.css;
 }
+// Ensure Sass can resolve bare module specifiers by walking node_modules folders.
+function buildSassLoadPaths(filePath) {
+    const loadPaths = new Set();
+    let cursor = node_path_1.default.dirname(filePath);
+    const root = node_path_1.default.parse(cursor).root;
+    while (true) {
+        loadPaths.add(cursor);
+        loadPaths.add(node_path_1.default.join(cursor, 'node_modules'));
+        if (cursor === root)
+            break;
+        cursor = node_path_1.default.dirname(cursor);
+    }
+    const cwd = process.cwd();
+    loadPaths.add(cwd);
+    loadPaths.add(node_path_1.default.join(cwd, 'node_modules'));
+    return Array.from(loadPaths).filter(dir => dir && (0, node_fs_1.existsSync)(dir));
+}
 async function compileLess(filePath, peerResolver) {
     const mod = await optionalPeer('less', 'Less', peerResolver);
     const less = unwrapModuleNamespace(mod);

package/dist/cjs/stableSelectors.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stableClassFromModule = void 0;
+exports.stableToken = stableToken;
+exports.stableClass = stableClass;
+exports.stableSelector = stableSelector;
+exports.createStableClassFactory = createStableClassFactory;
+exports.stableClassName = stableClassName;
+const DEFAULT_NAMESPACE = 'knighted';
+const defaultJoin = (values) => values.filter(Boolean).join(' ');
+const normalizeToken = (token) => {
+    const sanitized = token
+        .trim()
+        .replace(/\s+/g, '-')
+        .replace(/[^A-Za-z0-9_-]/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '');
+    return sanitized.length ? sanitized : 'stable';
+};
+function stableToken(token, options) {
+    const normalized = normalizeToken(token);
+    const namespace = options?.namespace?.trim() ?? DEFAULT_NAMESPACE;
+    if (!namespace) {
+        return normalized;
+    }
+    return `${namespace}-${normalized}`;
+}
+function stableClass(token, options) {
+    return stableToken(token, options);
+}
+function stableSelector(token, options) {
+    return `.${stableToken(token, options)}`;
+}
+function createStableClassFactory(options) {
+    return (token) => stableClass(token, options);
+}
+function stableClassName(styles, key, options) {
+    const hashed = styles[key] ?? '';
+    const token = options?.token ?? String(key);
+    const stable = stableClass(token, options);
+    const join = options?.join ?? defaultJoin;
+    return join([hashed, stable]);
+}
+exports.stableClassFromModule = stableClassName;

package/dist/cjs/stableSelectors.d.cts

@@ -0,0 +1,13 @@
+export interface StableSelectorOptions {
+    namespace?: string;
+}
+export interface StableClassNameOptions extends StableSelectorOptions {
+    token?: string;
+    join?: (values: string[]) => string;
+}
+export declare function stableToken(token: string, options?: StableSelectorOptions): string;
+export declare function stableClass(token: string, options?: StableSelectorOptions): string;
+export declare function stableSelector(token: string, options?: StableSelectorOptions): string;
+export declare function createStableClassFactory(options?: StableSelectorOptions): (token: string) => string;
+export declare function stableClassName<T extends Record<string, string>>(styles: T, key: keyof T | string, options?: StableClassNameOptions): string;
+export declare const stableClassFromModule: typeof stableClassName;

package/dist/css.js

@@ -1,5 +1,5 @@
 import path from 'node:path';
-import { promises as fs } from 'node:fs';
+import { existsSync, promises as fs } from 'node:fs';
 import dependencyTree from 'dependency-tree';
 import { composeVisitors, transform as lightningTransform, } from 'lightningcss';
 import { applyStringSpecificityBoost, buildSpecificityVisitor, } from './helpers.js';
@@ -116,9 +116,27 @@ async function compileSass(filePath, indented, peerResolver) {
     const sass = sassModule;
     const result = sass.compile(filePath, {
         style: 'expanded',
+        loadPaths: buildSassLoadPaths(filePath),
     });
     return result.css;
 }
+// Ensure Sass can resolve bare module specifiers by walking node_modules folders.
+function buildSassLoadPaths(filePath) {
+    const loadPaths = new Set();
+    let cursor = path.dirname(filePath);
+    const root = path.parse(cursor).root;
+    while (true) {
+        loadPaths.add(cursor);
+        loadPaths.add(path.join(cursor, 'node_modules'));
+        if (cursor === root)
+            break;
+        cursor = path.dirname(cursor);
+    }
+    const cwd = process.cwd();
+    loadPaths.add(cwd);
+    loadPaths.add(path.join(cwd, 'node_modules'));
+    return Array.from(loadPaths).filter(dir => dir && existsSync(dir));
+}
 async function compileLess(filePath, peerResolver) {
     const mod = await optionalPeer('less', 'Less', peerResolver);
     const less = unwrapModuleNamespace(mod);

package/dist/stableSelectors.d.ts

@@ -0,0 +1,13 @@
+export interface StableSelectorOptions {
+    namespace?: string;
+}
+export interface StableClassNameOptions extends StableSelectorOptions {
+    token?: string;
+    join?: (values: string[]) => string;
+}
+export declare function stableToken(token: string, options?: StableSelectorOptions): string;
+export declare function stableClass(token: string, options?: StableSelectorOptions): string;
+export declare function stableSelector(token: string, options?: StableSelectorOptions): string;
+export declare function createStableClassFactory(options?: StableSelectorOptions): (token: string) => string;
+export declare function stableClassName<T extends Record<string, string>>(styles: T, key: keyof T | string, options?: StableClassNameOptions): string;
+export declare const stableClassFromModule: typeof stableClassName;

package/dist/stableSelectors.js

@@ -0,0 +1,36 @@
+const DEFAULT_NAMESPACE = 'knighted';
+const defaultJoin = (values) => values.filter(Boolean).join(' ');
+const normalizeToken = (token) => {
+    const sanitized = token
+        .trim()
+        .replace(/\s+/g, '-')
+        .replace(/[^A-Za-z0-9_-]/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '');
+    return sanitized.length ? sanitized : 'stable';
+};
+export function stableToken(token, options) {
+    const normalized = normalizeToken(token);
+    const namespace = options?.namespace?.trim() ?? DEFAULT_NAMESPACE;
+    if (!namespace) {
+        return normalized;
+    }
+    return `${namespace}-${normalized}`;
+}
+export function stableClass(token, options) {
+    return stableToken(token, options);
+}
+export function stableSelector(token, options) {
+    return `.${stableToken(token, options)}`;
+}
+export function createStableClassFactory(options) {
+    return (token) => stableClass(token, options);
+}
+export function stableClassName(styles, key, options) {
+    const hashed = styles[key] ?? '';
+    const token = options?.token ?? String(key);
+    const stable = stableClass(token, options);
+    const join = options?.join ?? defaultJoin;
+    return join([hashed, stable]);
+}
+export const stableClassFromModule = stableClassName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/css",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "A build-time utility that traverses JavaScript/TypeScript module dependency graphs to extract, compile, and optimize all imported CSS into a single, in-memory string.",
   "type": "module",
   "main": "./dist/css.js",
@@ -32,6 +32,18 @@
     "./loader-queries": {
       "types": "./loader-queries.d.ts",
       "default": "./loader-queries.d.ts"
+    },
+    "./stableSelectors": {
+      "types": "./dist/stableSelectors.d.ts",
+      "import": "./dist/stableSelectors.js",
+      "require": "./dist/cjs/stableSelectors.cjs"
+    },
+    "./stable": {
+      "sass": "./stable/_index.scss",
+      "default": "./stable/_index.scss"
+    },
+    "./stable/stable.css": {
+      "default": "./stable/stable.css"
     }
   },
   "keywords": [
@@ -56,6 +68,11 @@
     "dependency-tree": "^11.2.0",
     "lightningcss": "^1.30.2"
   },
+  "overrides": {
+    "module-lookup-amd": {
+      "glob": "^9.0.0"
+    }
+  },
   "peerDependencies": {
     "@vanilla-extract/integration": "^8.0.0",
     "less": "^4.2.0",
@@ -75,7 +92,8 @@
   "files": [
     "dist",
     "loader-queries.d.ts",
-    "types.d.ts"
+    "types.d.ts",
+    "stable"
   ],
   "author": "KCM <knightedcodemonkey@gmail.com>",
   "license": "MIT",

package/stable/_index.scss

@@ -0,0 +1,57 @@
+// Knighted stable selector mixins
+// Usage: @use '@knighted/css/stable' as knighted;
+//        .button { @include knighted.stable('button') { ... } }
+
+@use 'sass:meta';
+
+$knighted-stable-namespace: 'knighted' !default;
+
+@function _knighted-normalize-token($token) {
+  @if meta.type-of($token) == 'number' {
+    @return $token;
+  }
+  @return $token;
+}
+
+@function stable-token($token, $namespace: $knighted-stable-namespace) {
+  $normalized-token: _knighted-normalize-token($token);
+  @if $namespace == '' {
+    @return $normalized-token;
+  }
+  @return '#{$namespace}-#{$normalized-token}';
+}
+
+@function stable-class($token, $namespace: $knighted-stable-namespace) {
+  $token-value: stable-token($token, $namespace);
+  @return '.#{$token-value}';
+}
+
+@mixin stable($token, $namespace: $knighted-stable-namespace) {
+  @if not & {
+    @error 'The knighted.stable mixin must be used within a selector context so that "&" is defined.';
+  }
+
+  $stable-selector: stable-class($token, $namespace);
+  @at-root #{&},
+    #{$stable-selector} {
+    @content;
+  }
+}
+
+@mixin stable-at-root($selector, $token, $namespace: $knighted-stable-namespace) {
+  $stable-selector: stable-class($token, $namespace);
+  @at-root #{$selector},
+    #{$stable-selector} {
+    @content;
+  }
+}
+
+@function stable-class-name($token, $namespace: $knighted-stable-namespace) {
+  @return stable-token($token, $namespace);
+}
+
+@mixin stable-only($token, $namespace: $knighted-stable-namespace) {
+  @at-root #{stable-class($token, $namespace)} {
+    @content;
+  }
+}

package/stable/stable.css

@@ -0,0 +1,15 @@
+@layer knighted.stable;
+
+:root {
+  --knighted-stable-namespace: 'knighted';
+}
+
+/*
+Usage:
+  @import '@knighted/css/stable/stable.css';
+  @layer knighted.stable {
+    .knighted-button {
+      declarations go here;
+    }
+  }
+*/