@taybart/corvid 0.2.0 → 0.2.3

package/dist/style.d.ts

@@ -3,7 +3,56 @@
  **************/
 export declare function cssVar(name: string): string;
 export declare function render(style: Object): string;
-export declare function inject(selector: string, style: Object): string;
+/**
+ * A block of css declarations. A value that is itself an object is a nested
+ * rule: the key is a selector (`&:focus`, `input`) or an at-rule (`@media ...`)
+ * rather than a property.
+ */
+export type declarations = {
+    [key: string]: string | number | declarations;
+};
+/**
+ * Render a declaration block to css without touching the document.
+ */
+export declare function css(selector: string, style: declarations): string;
+/**
+ * Install a stylesheet for `selector`. Nested objects become nested rules, so
+ * a component declares its styles in one call:
+ *
+ *   inject('x-search-form', {
+ *     marginTop: '33vh',
+ *     input: {
+ *       border: 'none',
+ *       '&:focus': { borderBottomColor: 'var(--ring)' },
+ *     },
+ *   })
+ *
+ * Injecting the same key again replaces that sheet rather than adding to it;
+ * `key` defaults to the selector.
+ * @return the generated css
+ */
+export declare function inject(selector: string, style: declarations, { key }?: {
+    key?: string;
+}): string;
+/**
+ * Compile `style` for a shadow root, rooted at `:host`.
+ *
+ * Hands back a constructable sheet where the platform has them — one per key,
+ * shared by every instance of the component, so a thousand cards cost one
+ * sheet — and the css text otherwise, for the caller to put in a `<style>`
+ * inside the root. Re-compiling an existing key replaces that sheet's contents
+ * in place, so live instances pick the change up (which is what makes an HMR
+ * reload work rather than stack a second sheet).
+ *
+ * Document styles do not reach into a shadow tree, so this is the only way a
+ * shadowed component gets styled at all.
+ */
+export declare function shadowSheet(key: string, style: declarations): CSSStyleSheet | string;
+/**
+ * Remove a stylesheet installed by `inject`
+ * @param key - the key it was injected under (the selector, unless overridden)
+ */
+export declare function eject(key: string): void;
 /**
  * Check if the current theme is dark
  */

package/dist/style.js

@@ -10,17 +10,161 @@ function render(style) {
     Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}:${v};`);
     return s;
 }
-function inject(selector, style) {
-    const existing = document.getElementById(`corvid-injected-${encodeURIComponent(selector)}`);
-    if (existing) existing.remove();
-    const injected = document.createElement('style');
-    injected.id = `corvid-injected-${encodeURIComponent(selector)}`;
-    let s = `${selector} {\n`;
-    Object.entries(style).forEach(([k, v])=>s += `${toKebab(k)}: ${v};\n`);
-    s += '}';
-    injected.textContent = s;
-    document.head.appendChild(injected);
-    return s;
+function splitSelectors(selector) {
+    const out = [];
+    let depth = 0;
+    let quote = '';
+    let current = '';
+    for (const ch of selector){
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if ('"' === ch || "'" === ch) quote = ch;
+        else if ('(' === ch || '[' === ch) depth++;
+        else if (')' === ch || ']' === ch) depth--;
+        else if (',' === ch && 0 === depth) {
+            if (current.trim()) out.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += ch;
+    }
+    if (current.trim()) out.push(current.trim());
+    return out;
+}
+function hostCompound(selector) {
+    if (!selector.startsWith(':host')) return selector;
+    let i = 5;
+    let inner = '';
+    if ('(' === selector[i]) {
+        const open = i;
+        let depth = 0;
+        let quote = '';
+        while(i < selector.length){
+            const ch = selector[i];
+            if (quote) {
+                if (ch === quote) quote = '';
+            } else if ('"' === ch || "'" === ch) quote = ch;
+            else if ('(' === ch) depth++;
+            else if (')' === ch) {
+                depth--;
+                if (0 === depth) {
+                    i++;
+                    break;
+                }
+            }
+            i++;
+        }
+        inner = selector.slice(open + 1, i - 1);
+    }
+    const start = i;
+    let depth = 0;
+    let quote = '';
+    while(i < selector.length){
+        const ch = selector[i];
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if ('"' === ch || "'" === ch) quote = ch;
+        else if (0 === depth && (' ' === ch || '>' === ch || '+' === ch || '~' === ch)) break;
+        else if (0 === depth && ':' === ch && ':' === selector[i + 1]) break;
+        else if ('(' === ch || '[' === ch) depth++;
+        else if (')' === ch || ']' === ch) depth--;
+        i++;
+    }
+    const compound = selector.slice(start, i);
+    if (!compound) return selector;
+    return `:host(${inner}${compound})${selector.slice(i)}`;
+}
+function resolve(parents, selector) {
+    const out = [];
+    for (const parent of parents)for (const part of splitSelectors(selector))out.push(hostCompound(part.includes('&') ? part.replaceAll('&', parent) : `${parent} ${part}`));
+    return out;
+}
+function compile(parents, decls, indent = '') {
+    const blocks = [];
+    const props = [];
+    const nested = [];
+    for (const [k, v] of Object.entries(decls))if (null !== v && 'object' == typeof v) nested.push([
+        k,
+        v
+    ]);
+    else props.push(`${indent}  ${toKebab(k)}: ${v};`);
+    if (props.length) blocks.push(`${indent}${parents.join(', ')} {\n${props.join('\n')}\n${indent}}`);
+    for (const [selector, block] of nested){
+        if (selector.startsWith('@')) {
+            const inner = selector.startsWith('@keyframes') ? Object.entries(block).flatMap(([step, d])=>null !== d && 'object' == typeof d ? compile([
+                    step
+                ], d, `${indent}  `) : []) : compile(parents, block, `${indent}  `);
+            if (inner.length) blocks.push(`${indent}${selector} {\n${inner.join('\n')}\n${indent}}`);
+            continue;
+        }
+        blocks.push(...compile(resolve(parents, selector), block, indent));
+    }
+    return blocks;
+}
+function css(selector, style) {
+    return compile(splitSelectors(selector), style).join('\n');
+}
+function registry() {
+    const doc = document;
+    if (!doc.__corvidSheets) doc.__corvidSheets = new Map();
+    return doc.__corvidSheets;
+}
+function adoptable() {
+    return 'undefined' != typeof CSSStyleSheet && 'replaceSync' in CSSStyleSheet.prototype && 'undefined' != typeof Document && 'adoptedStyleSheets' in Document.prototype;
+}
+function styleTag(key) {
+    const tagged = Array.from(document.head.querySelectorAll('style[data-corvid]'));
+    for (const node of tagged)if (node.dataset.corvid === key) return node;
+    const node = document.createElement('style');
+    node.dataset.corvid = key;
+    document.head.appendChild(node);
+    return node;
+}
+function inject(selector, style, { key = selector } = {}) {
+    const rules = css(selector, style);
+    const sheets = registry();
+    const existing = sheets.get(key);
+    if (existing) {
+        if ('replaceSync' in existing) existing.replaceSync(rules);
+        else existing.textContent = rules;
+        return rules;
+    }
+    if (adoptable()) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(rules);
+        document.adoptedStyleSheets = [
+            ...document.adoptedStyleSheets,
+            sheet
+        ];
+        sheets.set(key, sheet);
+        return rules;
+    }
+    const node = styleTag(key);
+    node.textContent = rules;
+    sheets.set(key, node);
+    return rules;
+}
+function shadowSheet(key, style) {
+    const rules = css(':host', style);
+    if ('undefined' == typeof CSSStyleSheet || !('replaceSync' in CSSStyleSheet.prototype) || 'undefined' == typeof ShadowRoot || !('adoptedStyleSheets' in ShadowRoot.prototype)) return rules;
+    const sheets = registry();
+    const existing = sheets.get(key);
+    if (existing && 'replaceSync' in existing) {
+        existing.replaceSync(rules);
+        return existing;
+    }
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(rules);
+    sheets.set(key, sheet);
+    return sheet;
+}
+function eject(key) {
+    const sheets = registry();
+    const sheet = sheets.get(key);
+    if (!sheet) return;
+    if ('replaceSync' in sheet) document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s)=>s !== sheet);
+    else sheet.remove();
+    sheets.delete(key);
 }
 function isDarkMode() {
     return window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -46,4 +190,4 @@ function gradient(start, end, value) {
     const blue = Math.round(start.blue + (end.blue - start.blue) * value / 100);
     return `rgb(${red}, ${green}, ${blue})`;
 }
-export { cssVar, gradient, handleThemeSwitch, inject, isDarkMode, onDarkMode, render, switchTheme };
+export { css, cssVar, eject, gradient, handleThemeSwitch, inject, isDarkMode, onDarkMode, render, shadowSheet, switchTheme };

package/dist/style.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taybart/corvid",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "type": "module",
   "main": "./dist/index.js",
   "exports": {