@master/css-runtime 2.0.0-rc.6 → 2.0.0-rc.60

package/dist/index.mjs

@@ -0,0 +1,499 @@
+import { Layer, withSyntaxLayer, MasterCSS, config, Rule } from '@master/css';
+import { installHook } from '@master/css-devtools-hook';
+
+function registerGlobal(CSSRuntime) {
+    if (!globalThis.CSSRuntime) globalThis.CSSRuntime = CSSRuntime;
+    installHook();
+}
+
+function findNativeCSSRuleIndex(cssRules, nativeRule) {
+    for(let i = 0; i < cssRules.length; i++){
+        if (cssRules[i] === nativeRule) {
+            return i;
+        }
+    }
+    return -1;
+}
+
+class RuntimeLayer extends Layer {
+    name;
+    cssRuntime;
+    rules;
+    tokenCounts;
+    native;
+    constructor(name, cssRuntime){
+        super(name, cssRuntime), this.name = name, this.cssRuntime = cssRuntime, this.rules = [], this.tokenCounts = new Map(), this.native = null;
+    }
+    attach() {
+        super.attach();
+        const nativeSheet = this.cssRuntime.style?.sheet;
+        if (nativeSheet && !this.native?.parentStyleSheet) {
+            const insertedIndex = nativeSheet.insertRule(this.text, nativeSheet.cssRules.length);
+            this.native = nativeSheet.cssRules.item(insertedIndex);
+        }
+    }
+    insert(rule, index = this.rules.length) {
+        const insertedIndex = super.insert(rule, index);
+        if (insertedIndex === undefined) return;
+        if (this.native) {
+            let cssRuleIndex = 0;
+            const lastCssRule = function getLastCssRule(layer, index) {
+                let lastCssRule;
+                const previouRule = layer.rules[index];
+                if (previouRule && 'nodes' in previouRule) {
+                    if (!previouRule.nodes.length) return getLastCssRule(layer, index - 1);
+                    const lastNativeRule = previouRule.nodes[previouRule.nodes.length - 1];
+                    lastCssRule = lastNativeRule.native;
+                }
+                return lastCssRule;
+            }(this, insertedIndex - 1);
+            if (lastCssRule) {
+                for(let i = 0; i < this.native.cssRules.length; i++){
+                    if (this.native.cssRules[i] === lastCssRule) {
+                        cssRuleIndex = i + 1;
+                        break;
+                    }
+                }
+            }
+            for(let i = 0; i < rule.nodes.length;){
+                try {
+                    const node = rule.nodes[i];
+                    const insertedIndex = this.native.insertRule(node.text, cssRuleIndex);
+                    node.native = this.native.cssRules.item(insertedIndex);
+                    cssRuleIndex++;
+                    i++;
+                } catch (error) {
+                    console.error(error, rule.nodes[i]);
+                    rule.nodes.splice(i, 1);
+                }
+            }
+        }
+        return insertedIndex;
+    }
+    detach() {
+        const nativeSheet = this.cssRuntime.style?.sheet;
+        if (nativeSheet && this.native?.parentStyleSheet) {
+            const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
+            if (foundIndex !== -1) {
+                nativeSheet.deleteRule(foundIndex);
+            }
+        }
+    }
+    delete(key) {
+        const deletedRule = super.delete(key);
+        if (!deletedRule) return;
+        if (this.native?.cssRules && 'nodes' in deletedRule) {
+            for (const node of deletedRule.nodes){
+                if (node.native) {
+                    const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, node.native);
+                    if (foundIndex !== -1) {
+                        // todo: Firefox throw "Uncaught NS_ERROR_FAILURE". Reproduce: Add '@fade|1s @fade|2s' and remove '@fade|1s @fade|2s'
+                        this.native.deleteRule(foundIndex);
+                    }
+                }
+            }
+        }
+        return deletedRule;
+    }
+    reset() {
+        super.reset();
+        const nativeSheet = this.cssRuntime.style?.sheet;
+        if (this.native && nativeSheet) {
+            const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
+            if (foundIndex !== -1) {
+                nativeSheet.deleteRule(foundIndex);
+            }
+            this.native = null;
+        }
+    }
+}
+
+const RuntimeSyntaxLayer = withSyntaxLayer(RuntimeLayer);
+
+class CSSRuntime extends MasterCSS {
+    root;
+    customConfig;
+    static instances = new WeakMap();
+    host;
+    observing;
+    progressive;
+    container;
+    observer;
+    baseLayer;
+    themeLayer;
+    presetLayer;
+    componentsLayer;
+    generalLayer;
+    classCounts;
+    constructor(root = document, customConfig = config){
+        super(customConfig), this.root = root, this.customConfig = customConfig, this.observing = false, this.progressive = false, this.baseLayer = new RuntimeSyntaxLayer('base', this), this.themeLayer = new RuntimeLayer('theme', this), this.presetLayer = new RuntimeSyntaxLayer('preset', this), this.componentsLayer = new RuntimeSyntaxLayer('components', this), this.generalLayer = new RuntimeSyntaxLayer('general', this), this.classCounts = new Map();
+        const rootConstructorName = root?.constructor.name;
+        if (rootConstructorName === 'HTMLDocument' || rootConstructorName === 'Document') {
+            this.root.defaultView.globalThis.cssRuntime = this;
+            this.container = this.root.head;
+            this.host = this.root.documentElement;
+        } else {
+            this.container = this.root;
+            this.host = this.root.host;
+        }
+        this.supportVendors = new Set();
+        const styleDeclaration = document.documentElement.style;
+        if ('webkitTransform' in styleDeclaration) this.supportVendors.add('webkit');
+        if ('MozTransform' in styleDeclaration) this.supportVendors.add('moz');
+        if ('msTransform' in styleDeclaration) this.supportVendors.add('ms');
+        if ('OTransform' in styleDeclaration) this.supportVendors.add('o');
+        globalThis.CSSRuntime.instances.set(this.root, this);
+        __MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:created', {
+            cssRuntime: this
+        });
+    }
+    /**
+     * Observe the DOM for changes and update the running stylesheet. (browser only)
+     * @param options mutation observer options
+     * @returns this
+     */ observe() {
+        if (this.observing) return this;
+        // 1. Check if the stylesheet is progressive.
+        if (this.root.styleSheets) for (const sheet of this.root.styleSheets){
+            const { ownerNode } = sheet;
+            if (ownerNode && ownerNode.id === 'master') {
+                this.style = ownerNode;
+                // @ts-ignore
+                this.progressive = true;
+                break;
+            }
+        }
+        // 2. Count the classes in the host and its children.
+        const connectedNames = new Set();
+        const increaseClassCount = (className)=>{
+            const count = this.classCounts.get(className) || 0;
+            if (!count) {
+                connectedNames.add(className);
+            }
+            this.classCounts.set(className, count + 1);
+        };
+        this.host.classList.forEach(increaseClassCount);
+        (this.root.constructor.name === 'HTMLDocument' ? this.host : this.container).querySelectorAll('[class]').forEach((element)=>element.classList.forEach(increaseClassCount));
+        // 3. Hydrate the existing CSS rules or create a new one.
+        if (this.progressive) {
+            const hydrateResult = this.hydrate(this.style.sheet.cssRules);
+            // Add the connected class names that are not hydrated yet.
+            for (const eachConnectedName of connectedNames){
+                if (hydrateResult.allSyntaxRules.find((rule)=>(rule.fixedClass || rule.name) === eachConnectedName)) continue;
+                this.add(eachConnectedName);
+            }
+        } else {
+            this.style = document.createElement('style');
+            this.style.id = 'master';
+            this.container.append(this.style);
+            this.style.sheet.insertRule(this.layerStatementRule.text);
+            this.layerStatementRule.nodes[0].native = this.style.sheet.cssRules.item(0);
+            for (const eachConnectedName of connectedNames){
+                this.add(eachConnectedName);
+            }
+        }
+        // @ts-expect-error readonly
+        this.observer = new MutationObserver((mutationRecords)=>{
+            const eachClassCounts = new Map();
+            const targetFirstAttrMutationRecord = new Map();
+            const updateClassCount = (classes, isAdding = false)=>{
+                const usage = isAdding ? 1 : -1;
+                classes.forEach((className)=>{
+                    eachClassCounts.set(className, (eachClassCounts.get(className) || 0) + usage);
+                });
+            };
+            const connectedStatusMap = new Map();
+            const disconnectedStatusMap = new Map();
+            const recordStatus = (target, mutationRecord, map, adding)=>{
+                const status = map.get(target);
+                if (status) {
+                    status.change += adding ? 1 : -1;
+                    status.mutationRecord = mutationRecord;
+                } else {
+                    map.set(target, {
+                        change: adding ? 1 : -1,
+                        mutationRecord
+                    });
+                }
+                for (const child of target.children){
+                    if ('classList' in child) {
+                        recordStatus(child, mutationRecord, map, adding);
+                    }
+                }
+            };
+            mutationRecords.forEach((mutationRecord)=>{
+                const target = mutationRecord.target;
+                switch(mutationRecord.type){
+                    case 'attributes':
+                        if (!targetFirstAttrMutationRecord.has(target)) {
+                            targetFirstAttrMutationRecord.set(target, mutationRecord);
+                        }
+                        break;
+                    case 'childList':
+                        const targetStatusMap = target.isConnected ? connectedStatusMap : disconnectedStatusMap;
+                        mutationRecord.addedNodes.forEach((node)=>'classList' in node && recordStatus(node, mutationRecord, targetStatusMap, true));
+                        mutationRecord.removedNodes.forEach((node)=>'classList' in node && recordStatus(node, mutationRecord, targetStatusMap, false));
+                        break;
+                }
+            });
+            const updateTarget = (target, adding)=>{
+                const firstAttrMutationRecord = targetFirstAttrMutationRecord.get(target);
+                if (firstAttrMutationRecord) {
+                    targetFirstAttrMutationRecord.delete(target);
+                }
+                if (adding) {
+                    updateClassCount(target.classList, adding);
+                } else {
+                    if (firstAttrMutationRecord) {
+                        updateClassCount(firstAttrMutationRecord.oldValue ? firstAttrMutationRecord.oldValue.split(/\s+/) : [], adding);
+                    } else {
+                        updateClassCount(target.classList, adding);
+                    }
+                    disconnectedStatusMap.forEach((disconnectedTargetStatus, disconnectedTarget)=>{
+                        if (disconnectedTargetStatus.mutationRecord.target === target && disconnectedTargetStatus.change !== 0) {
+                            updateTarget(disconnectedTarget, disconnectedTargetStatus.change > 0);
+                        }
+                    });
+                }
+            };
+            connectedStatusMap.forEach(({ change }, target)=>change !== 0 && updateTarget(target, change > 0));
+            targetFirstAttrMutationRecord.forEach((mutation, target)=>{
+                if (!target.isConnected) return;
+                const oldClassList = mutation.oldValue ? mutation.oldValue.split(/\s+/) : [];
+                const newClassList = target.classList;
+                const addedClasses = [];
+                newClassList.forEach((c)=>{
+                    if (!oldClassList.includes(c)) addedClasses.push(c);
+                });
+                const removedClasses = oldClassList.filter((c)=>!newClassList.contains(c));
+                if (addedClasses.length) {
+                    updateClassCount(addedClasses, true);
+                }
+                if (removedClasses.length) {
+                    updateClassCount(removedClasses, false);
+                }
+            });
+            /**
+             * Merge the class usage changes into the current class usage map.
+             */ eachClassCounts.forEach((countChange, className)=>{
+                let currentCount = this.classCounts.get(className) || 0;
+                let newCount = currentCount + countChange;
+                if (newCount > 0) {
+                    this.classCounts.set(className, newCount);
+                    if (currentCount === 0) {
+                        this.add(className);
+                    }
+                } else {
+                    this.classCounts.delete(className);
+                    this.remove(className);
+                }
+            });
+            globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:mutated', {
+                records: mutationRecords,
+                classCounts: eachClassCounts,
+                cssRuntime: this
+            });
+        });
+        this.observer.observe(this.root, {
+            attributes: true,
+            attributeOldValue: true,
+            attributeFilter: [
+                'class'
+            ],
+            childList: true,
+            subtree: true
+        });
+        if (!this.progressive) {
+            this.host.removeAttribute('hidden');
+        }
+        // @ts-ignore
+        this.observing = true;
+        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:observed', {
+            cssRuntime: this
+        });
+        return this;
+    }
+    hydrate(nativeLayerRules) {
+        const cssLayerRules = [];
+        const checkSheet = new CSSStyleSheet();
+        const result = {
+            allSyntaxRules: []
+        };
+        for(let i = 0; i < nativeLayerRules.length; i++){
+            const eachNativeCSSRule = nativeLayerRules[i];
+            if (eachNativeCSSRule.constructor.name === 'CSSLayerBlockRule') {
+                const eachCSSLayerRule = eachNativeCSSRule;
+                if (eachNativeCSSRule.name === 'theme') {
+                    this.themeLayer.native = eachCSSLayerRule;
+                    let variableRule;
+                    let lastVariableName;
+                    for(let j = 0; j < eachCSSLayerRule.cssRules.length; j++){
+                        const cssRule = eachCSSLayerRule.cssRules[j];
+                        const variableCSSRule = cssRule.constructor.name === 'CSSMediaRule' ? cssRule.cssRules[0] : cssRule;
+                        const variableName = variableCSSRule.style[0].slice(2);
+                        if (variableName !== lastVariableName) {
+                            lastVariableName = variableName;
+                            variableRule = new Rule(variableName);
+                            this.themeLayer.rules.push(variableRule);
+                            this.themeLayer.tokenCounts.set(variableRule.name, 0);
+                        }
+                        variableRule?.nodes.push({
+                            native: cssRule,
+                            text: cssRule.cssText
+                        });
+                    }
+                    if (this.themeLayer.rules.length) this.rules.push(this.themeLayer);
+                } else {
+                    cssLayerRules.push(eachCSSLayerRule);
+                }
+            } else if (eachNativeCSSRule.constructor.name === 'CSSLayerStatementRule') {
+                this.layerStatementRule.nodes[0].native = eachNativeCSSRule;
+            } else if (eachNativeCSSRule.constructor.name === 'CSSKeyframesRule') {
+                const keyframsRule = eachNativeCSSRule;
+                const animationRule = new Rule(keyframsRule.name, [
+                    {
+                        native: keyframsRule,
+                        text: keyframsRule.cssText
+                    }
+                ]);
+                this.animationsNonLayer.rules.push(animationRule);
+                this.rules.push(animationRule);
+                this.animationsNonLayer.tokenCounts.set(animationRule.name, 0);
+            }
+        }
+        for (const eachCSSLayerRule of cssLayerRules){
+            let layer;
+            switch(eachCSSLayerRule.name){
+                case 'base':
+                    layer = this.baseLayer;
+                    break;
+                case 'preset':
+                    layer = this.presetLayer;
+                    break;
+                case 'components':
+                    layer = this.componentsLayer;
+                    break;
+                case 'general':
+                    layer = this.generalLayer;
+                    break;
+                default:
+                    console.error(`Cannot recognize the layer \`${eachCSSLayerRule.name}\`. (https://rc.css.master.co/messages/hydration-errors)`);
+                    continue;
+            }
+            layer.native = eachCSSLayerRule;
+            const unresolvedCSSRules = new Map();
+            for (const rule of eachCSSLayerRule.cssRules){
+                unresolvedCSSRules.set(rule.cssText, rule);
+            }
+            for (const eachNativeLayerRule of eachCSSLayerRule.cssRules){
+                if (!unresolvedCSSRules.has(eachNativeLayerRule.cssText)) continue;
+                const selectorText = this.getSelectorText(eachNativeLayerRule);
+                if (!selectorText) {
+                    console.error(`Cannot get the selector text from \`${eachNativeLayerRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
+                    continue;
+                }
+                const createdRules = this.createFromSelectorText(selectorText);
+                if (createdRules) {
+                    for (const createdRule of createdRules){
+                        layer.rules.push(createdRule);
+                        layer.insertVariables(createdRule);
+                        layer.insertAnimations(createdRule);
+                        result.allSyntaxRules.push(createdRule);
+                        createdRule.nodes.forEach((node)=>{
+                            const createdNodeNativeRule = checkSheet.cssRules.item(checkSheet.insertRule(node.text));
+                            if (createdNodeNativeRule) {
+                                const match = unresolvedCSSRules.get(createdNodeNativeRule.cssText);
+                                if (match) {
+                                    node.native = match;
+                                    unresolvedCSSRules.delete(createdNodeNativeRule.cssText);
+                                    return;
+                                }
+                            }
+                            console.error(`Cannot retrieve CSS rule for \`${node.selectorText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
+                        });
+                    }
+                } else {
+                    console.error(`Cannot recognize \`${eachNativeLayerRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
+                }
+            }
+            if (layer.rules.length) this.rules.push(layer);
+        }
+        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:hydrated', {
+            cssRuntime: this,
+            result
+        });
+        return result;
+    }
+    getSelectorText(cssRule) {
+        if (cssRule instanceof CSSStyleRule) {
+            return cssRule.selectorText;
+        } else if (cssRule instanceof CSSGroupingRule) {
+            return this.getSelectorText(cssRule.cssRules.item(0));
+        }
+    }
+    disconnect() {
+        if (!this.observing) return;
+        if (this.observer) {
+            this.observer.disconnect();
+            // @ts-expect-error readonly
+            this.observer = undefined;
+        }
+        // @ts-ignore
+        this.observing = false;
+        this.reset();
+        this.classCounts.clear();
+        if (!this.progressive) {
+            this.style?.remove();
+            this.style = null;
+        }
+        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:disconnected', {
+            cssRuntime: this
+        });
+        return this;
+    }
+    refresh(customConfig = this.customConfig) {
+        if (!this.observing || !this.style.sheet) return this;
+        for(let i = 1; i <= this.style.sheet.cssRules.length - 1; i++){
+            this.style.sheet.deleteRule(i);
+        }
+        super.refresh(customConfig);
+        /**
+         * 拿當前所有的 classNames 按照最新的 colors, config.rules 匹配並生成新的 style
+         * 所以 refresh 過後 rules 可能會變多也可能會變少
+         */ this.classCounts.forEach((_, className)=>{
+            this.add(className);
+        });
+        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:refreshed', {
+            cssRuntime: this,
+            customConfig
+        });
+        return this;
+    }
+    destroy() {
+        this.disconnect();
+        globalThis.CSSRuntime.instances.delete(this.root);
+        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:destroyed', {
+            cssRuntime: this
+        });
+        return this;
+    }
+}
+(function(CSSRuntime) {
+    registerGlobal(CSSRuntime);
+})(CSSRuntime);
+
+/**
+ * Initialize a new CSSRuntime instance and observe the target root
+ * @param config master css config
+ * @param root target root to observe
+ * @param autoObserve auto observe the target root
+ * @returns master css instance
+ */ function initCSSRuntime(config, root = document, autoObserve = true) {
+    let cssRuntime = globalThis.CSSRuntime.instances.get(root);
+    if (cssRuntime) return cssRuntime;
+    cssRuntime = new CSSRuntime(root, config);
+    if (autoObserve) cssRuntime.observe();
+    return cssRuntime;
+}
+
+export { CSSRuntime, CSSRuntime as default, initCSSRuntime };

package/dist/init.d.ts

@@ -0,0 +1,10 @@
+import CSSRuntime from './core';
+import type { Config } from '@master/css';
+/**
+ * Initialize a new CSSRuntime instance and observe the target root
+ * @param config master css config
+ * @param root target root to observe
+ * @param autoObserve auto observe the target root
+ * @returns master css instance
+ */
+export default function initCSSRuntime(config?: Config, root?: Document | ShadowRoot, autoObserve?: boolean): CSSRuntime;

package/dist/layer.d.ts

@@ -0,0 +1,15 @@
+import { Layer, Rule } from '@master/css';
+import CSSRuntime from './core';
+export default class RuntimeLayer extends Layer {
+    name: string;
+    cssRuntime: CSSRuntime;
+    readonly rules: Rule[];
+    readonly tokenCounts: Map<string, number>;
+    native: CSSLayerBlockRule | null;
+    constructor(name: string, cssRuntime: CSSRuntime);
+    attach(): void;
+    insert(rule: Rule, index?: number): number | undefined;
+    detach(): void;
+    delete(key: string): Rule | undefined;
+    reset(): void;
+}

package/dist/register-global.d.ts

@@ -0,0 +1,9 @@
+import type { Config } from '@master/css';
+import type Core from './core';
+declare global {
+    var CSSRuntime: typeof Core;
+    var cssRuntime: Core;
+    var masterCSSConfig: Config;
+    var masterCSSConfigs: Config[];
+}
+export default function registerGlobal(CSSRuntime: typeof Core): void;

package/dist/syntax-layer.d.ts

@@ -0,0 +1,19 @@
+import RuntimeLayer from './layer';
+declare const RuntimeSyntaxLayer: {
+    new (...args: any[]): {
+        rules: import("@master/css").SyntaxRule[];
+        insert(syntaxRule: import("@master/css").SyntaxRule): number | undefined;
+        delete(key: string): import("@master/css").SyntaxRule | undefined;
+        insertVariables(syntaxRule: import("@master/css").SyntaxRule): void;
+        insertAnimations(syntaxRule: import("@master/css").SyntaxRule): void;
+        readonly tokenCounts: Map<string, number>;
+        name: string;
+        css: import("@master/css").MasterCSS;
+        attach(): void;
+        detach(): void;
+        reset(): void;
+        readonly text: string;
+    };
+} & typeof RuntimeLayer;
+export declare type RuntimeSyntaxLayerInstance = InstanceType<typeof RuntimeSyntaxLayer>;
+export default RuntimeSyntaxLayer;

package/dist/types/hydrate-result.d.ts

@@ -0,0 +1,4 @@
+import type { SyntaxRule } from '@master/css';
+export interface HydrateResult {
+    allSyntaxRules: SyntaxRule[];
+}

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './hydrate-result';

package/package.json

@@ -1 +1 @@
-{"name":"@master/css-runtime","scripts":{"build":"pnpm run \"/^build:/\"","build:iife":"techor pack \"src/iife.ts\" --outfile \"dist/iife.bundle.js\" --bundle --format iife --no-external --no-clean","build:esm":"techor pack \"src/index.ts\" --outfile \"dist/index.bundle.mjs\" --bundle --format esm --no-clean","build:cjs":"techor pack \"src/index.ts\" --outfile \"dist/index.bundle.js\" --bundle --format cjs --no-clean","build:type":"tsc --emitDeclarationOnly --declaration --outDir dist","dev":"pnpm run \"/^build:(?!type)/\" --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"Run the Master CSS right in the browser","author":"Aoyue Design LLC.","funding":"https://css.master.co/docs/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/runtime"},"keywords":["utility","css","lightweight","mastercss","master","runtime","cdn"],"sideEffects":false,"main":"./dist/index.bundle.js","jsnext:main":"./dist/index.bundle.mjs","esnext":"./dist/index.bundle.mjs","module":"./dist/index.bundle.mjs","browser":"./dist/iife.bundle.js","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.bundle.js","import":"./dist/index.bundle.mjs","types":"./dist/index.d.ts"}},"files":["dist"],"publishConfig":{"access":"public"},"dependencies":{"@master/css":"^2.0.0-rc.6"},"version":"2.0.0-rc.6"}
+{"name":"@master/css-runtime","type":"module","scripts":{"build":"techor build","dev":"pnpm build --watch","e2e":"playwright test","e2e:watch":"nodemon -e js,mjs,ts,html,css --watch dist --watch e2e --exec playwright test","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"Run Master CSS right in the browser","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/runtime"},"keywords":["utility","css","lightweight","mastercss","master","runtime","cdn"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","browser":"./dist/global.min.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":{"development":"./dist/index.development.cjs","default":"./dist/index.cjs"},"import":{"development":"./dist/index.development.mjs","default":"./dist/index.mjs"}}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css":"^2.0.0-rc.60","@master/css-devtools-hook":"^2.0.0-rc.60"},"devDependencies":{"@playwright/test":"^1.49.1","shared":"^2.0.0-rc.60"},"version":"2.0.0-rc.60"}