@pre.style/core 3.1.0-alpha.2 → 3.1.0-alpha.3

package/dist/index.js

@@ -4,10 +4,10 @@
 function notTransformed() {
     throw new Error('pre.style transform not applied. css and scss blocks must be compiled by a pre.style bundler plugin, such as @pre.style/vite.');
 }
-export function css(_strings) {
+export function css(_strings, ..._values) {
     return notTransformed();
 }
-export function scss(_strings) {
+export function scss(_strings, ..._values) {
     return notTransformed();
 }
 import { createCn } from './cn.js';

package/dist/runtime-dev.d.ts

@@ -0,0 +1,2 @@
+export declare const dynamic: (classes: string, values: readonly unknown[], ...variables: import("./runtime.ts").RuntimeVariable[]) => string;
+export declare const dynamicLowercase: (classes: string, values: readonly unknown[], ...variables: import("./runtime.ts").RuntimeVariable[]) => string;

package/dist/runtime-dev.js

@@ -0,0 +1,9 @@
+import { CASE_INSENSITIVE, CASE_SENSITIVE, create } from './runtime.js';
+// `./runtime.ts` with full error messages, which the bundler plugin uses
+// outside production builds.
+const invalidValue = (value, strings) => {
+    const got = typeof value === 'number' ? String(value) : typeof value;
+    throw new TypeError(`pre.style: \`\${…}\` values must be strings or numbers, or null or undefined to use the default. Got ${got} in \`${strings.join('${…}')}\`. For a condition, write \`\${open ? width : null}\` rather than \`\${open && width}\`.`);
+};
+export const dynamic = /* @__PURE__ */ create(CASE_SENSITIVE, invalidValue);
+export const dynamicLowercase = /* @__PURE__ */ create(CASE_INSENSITIVE, invalidValue);

package/dist/runtime.d.ts

@@ -0,0 +1,16 @@
+import type { CnLookup } from './cn.ts';
+export type RuntimeVariable = [
+    name: string,
+    strings: readonly string[],
+    indexes: readonly number[],
+    property?: string | 0,
+    selector?: readonly string[]
+];
+export declare const CASE_SENSITIVE: string;
+export declare const CASE_INSENSITIVE: string;
+export type InvalidValue = (value: unknown, strings: readonly string[]) => never;
+export declare const create: (alphabet: string, invalid: InvalidValue) => (classes: string, values: readonly unknown[], ...variables: RuntimeVariable[]) => string;
+export declare const dynamic: (classes: string, values: readonly unknown[], ...variables: RuntimeVariable[]) => string;
+export declare const dynamicLowercase: (classes: string, values: readonly unknown[], ...variables: RuntimeVariable[]) => string;
+export type CnVariables = Record<string, string>;
+export declare const generatedClasses: (variables: CnVariables) => CnLookup;

package/dist/runtime.js

@@ -0,0 +1,99 @@
+const DIGITS = '0123456789';
+const LOWERCASE = 'abcdefghijklmnopqrstuvwxyz';
+export const CASE_SENSITIVE = DIGITS + LOWERCASE + LOWERCASE.toUpperCase();
+export const CASE_INSENSITIVE = DIGITS + LOWERCASE;
+const HASH_LENGTH = 4;
+// A hash of a value that's the same on the server and in the browser, since
+// the class names it's part of have to match for hydration. FNV-1a.
+function hash(value, alphabet) {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < value.length; i++) {
+        h ^= value.charCodeAt(i);
+        h = Math.imul(h, 0x01000193);
+    }
+    h >>>= 0;
+    let result = '';
+    for (let i = 0; i < HASH_LENGTH; i++) {
+        result += alphabet[h % alphabet.length];
+        h = Math.floor(h / alphabet.length);
+    }
+    return result;
+}
+// The variable's value, or null when any of its values is null or undefined,
+// so its default applies. Anything else is almost always a bug, which falling
+// back would hide.
+function text(strings, indexes, values, invalid) {
+    let result = strings[0];
+    let missing = false;
+    for (let i = 0; i < indexes.length; i++) {
+        const value = values[indexes[i]];
+        if (value === null || value === undefined)
+            missing = true;
+        else if (typeof value === 'string' || (typeof value === 'number' && Number.isFinite(value)))
+            result += value + strings[i + 1];
+        else
+            invalid(value, strings);
+    }
+    return missing ? null : result;
+}
+let sheet;
+const inserted = new Set();
+// Inserts a generated class's rule once. `setProperty` parses the value alone,
+// so a value can't add rules or declarations, even if it comes from a user.
+function insert(selector, className, property, value) {
+    if (inserted.has(className))
+        return;
+    inserted.add(className);
+    // An unknown selector is ignored, as it is in the CSS file. Browsers without
+    // constructable stylesheets, or where the list can't be changed (Chrome before
+    // 99, Firefox before 101, Safari before 16.4), keep the defaults rather than
+    // failing the render.
+    try {
+        if (sheet === undefined) {
+            sheet = new CSSStyleSheet();
+            document.adoptedStyleSheets.push(sheet);
+        }
+        const index = sheet.insertRule(`${selector}{}`, sheet.cssRules.length);
+        sheet.cssRules[index].style.setProperty(property, value);
+    }
+    catch { }
+}
+export const create = (alphabet, invalid) => (classes, values, ...variables) => {
+    let result = classes;
+    for (const [name, strings, indexes, property, selector] of variables) {
+        const value = text(strings, indexes, values, invalid);
+        if (value === null)
+            continue;
+        const className = `_${name}${hash(value, alphabet)}`;
+        // The server returns the same class strings, without the rules, so
+        // hydration matches and the page uses its defaults until this runs.
+        if (typeof document !== 'undefined')
+            insert(selector ? selector.join(`.${className}`) : `.${className}`, className, property || `--${name}`, value);
+        result += result === '' ? className : ` ${className}`;
+    }
+    return result;
+};
+// Production errors are numbered, to keep the runtime small. The site's
+// `/errors` pages explain them, and `./runtime-dev.ts` has the full messages.
+const invalidValue = (value) => {
+    throw new TypeError(`pre.style error 1 (${typeof value}): https://pre.style/errors/1`);
+};
+// What a block with `${…}` compiles to. It takes the block's class string, its
+// expressions' values, so each runs once and in order, and its variables, and
+// returns the class string with a generated class for each value.
+export const dynamic = /* @__PURE__ */ create(CASE_SENSITIVE, invalidValue);
+// For the `quirksMode` setting, where class selectors ignore case.
+export const dynamicLowercase = /* @__PURE__ */ create(CASE_INSENSITIVE, invalidValue);
+// A `cn` lookup that also recognizes generated classes, which aren't in its
+// table: `_`, a variable's name, and four characters. Each sets its variable on
+// the element. It's here rather than in `cn`, so apps without `${…}` don't ship
+// it.
+export const generatedClasses = (variables) => new (class extends Map {
+    get(className) {
+        const name = className.slice(1, -4);
+        return (super.get(className) ??
+            (className[0] === '_' && Object.hasOwn(variables, name)
+                ? ['', variables[name] || `--${name}`]
+                : undefined));
+    }
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pre.style/core",
-  "version": "3.1.0-alpha.2",
+  "version": "3.1.0-alpha.3",
   "description": "Zero-runtime CSS-in-JS that compiles css and scss blocks into atomic CSS classes.",
   "keywords": [
     "atomic-css",
@@ -37,6 +37,16 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./runtime": {
+      "pre.style-source": "./src/runtime.ts",
+      "types": "./dist/runtime.d.ts",
+      "default": "./dist/runtime.js"
+    },
+    "./runtime/dev": {
+      "pre.style-source": "./src/runtime-dev.ts",
+      "types": "./dist/runtime-dev.d.ts",
+      "default": "./dist/runtime-dev.js"
+    },
     "./compiler": {
       "pre.style-source": "./src/compiler/index.ts",
       "types": "./dist/compiler/index.d.ts",

package/package.schema.json

@@ -61,6 +61,10 @@
         "prependFiles": {
           "$ref": "#/definitions/prependFiles"
         },
+        "customPropertyLocalization": {
+          "description": "Give each custom property declared in the library's blocks and stylesheet files a generated name, used only in the block or file that declares it. Names it only reads, and names from prepended files, stay global. The app's setting doesn't apply to libraries.",
+          "type": "boolean"
+        },
         "keyframeLocalization": {
           "description": "Give each @keyframes in the library's blocks and stylesheet files a generated name, used only in the block or file that defines it, like styled-components' `keyframes`. The app's setting doesn't apply to libraries.",
           "type": "boolean"
@@ -88,6 +92,10 @@
         "prependFiles": {
           "$ref": "#/definitions/prependFiles"
         },
+        "customPropertyLocalization": {
+          "description": "Give each custom property declared in the app's blocks and stylesheet files a generated name, used only in the block or file that declares it. Names it only reads, and names from prepended files, stay global. Libraries use their own setting.",
+          "type": "boolean"
+        },
         "keyframeLocalization": {
           "description": "Give each @keyframes in the app's blocks and stylesheet files a generated name, used only in the block or file that defines it (including keyframes from prepended files), like styled-components' `keyframes`. Libraries use their own setting.",
           "type": "boolean"