@master/css 2.0.0-rc.46 → 2.0.0-rc.48

package/dist/index.cjs

@@ -3,17 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var index = require('./config/index.cjs');
-var rule = require('./rule.cjs');
 var common = require('./common.cjs');
 var core = require('./core.cjs');
+var syntaxRule = require('./syntax-rule.cjs');
+var rule = require('./rule.cjs');
 var layer = require('./layer.cjs');
+var syntaxLayer = require('./syntax-layer.cjs');
+var nonLayer = require('./non-layer.cjs');
+var syntaxRuleType = require('./syntax-rule-type.cjs');
 var extendConfig = require('./utils/extend-config.cjs');
 var reorderForReadableClasses = require('./utils/reorder-for-readable-classes.cjs');
 var areRuleModesEqual = require('./utils/are-rule-modes-equal.cjs');
 var areRuleAtEqual = require('./utils/are-rule-at-equal.cjs');
 var areRuleSelectorsEqual = require('./utils/are-rule-selectors-equal.cjs');
 var areRuleStatesEqual = require('./utils/are-rule-states-equal.cjs');
-var areSyntaxesDuplicated = require('./utils/are-syntaxes-duplicated.cjs');
+var areRulesDuplicated = require('./utils/are-rules-duplicated.cjs');
 var generateCss = require('./utils/generate-css.cjs');
 var isCoreRule = require('./utils/is-core-rule.cjs');
 var at = require('./config/at.cjs');
@@ -23,12 +27,11 @@ var functions = require('./config/functions.cjs');
 var animations = require('./config/animations.cjs');
 var variables = require('./config/variables.cjs');
 var modes = require('./config/modes.cjs');
-var syntaxes = require('./config/syntaxes.cjs');
+var rules = require('./config/rules.cjs');
 
 
 
 exports.config = index.config;
-exports.Rule = rule.Rule;
 exports.ANIMATION_SIGN = common.ANIMATION_SIGN;
 exports.AT_SIGN = common.AT_SIGN;
 exports.BASE_UNIT_REGEX = common.BASE_UNIT_REGEX;
@@ -53,14 +56,19 @@ exports.VALUE_UNITS = common.VALUE_UNITS;
 exports.MasterCSS = core.default;
 exports.default = core.default;
 exports.masterCSSs = core.masterCSSs;
+exports.SyntaxRule = syntaxRule.SyntaxRule;
+exports.Rule = rule.Rule;
 exports.Layer = layer;
+exports.SyntaxLayer = syntaxLayer;
+exports.NonLayer = nonLayer;
+exports.SyntaxRuleType = syntaxRuleType;
 exports.extendConfig = extendConfig;
 exports.reorderForReadableClasses = reorderForReadableClasses;
 exports.areRuleModesEqual = areRuleModesEqual;
 exports.areRuleAtEqual = areRuleAtEqual;
 exports.areRuleSelectorsEqual = areRuleSelectorsEqual;
 exports.areRuleStatesEqual = areRuleStatesEqual;
-exports.areRulesDuplicated = areSyntaxesDuplicated;
+exports.areRulesDuplicated = areRulesDuplicated;
 exports.generateCSS = generateCss;
 exports.isCoreRule = isCoreRule;
 exports.at = at;
@@ -70,4 +78,4 @@ exports.functions = functions;
 exports.animations = animations;
 exports.variables = variables;
 exports.modes = modes;
-exports.syntaxes = syntaxes;
+exports.rules = rules;

package/dist/index.d.ts

@@ -1,17 +1,21 @@
 export * from './config';
-export * from './rule';
 export * from './common';
 export * from './core';
-export { Rule } from './rule';
+export * from './syntax-rule';
+export * from './rule';
 export { default as Layer } from './layer';
+export { default as SyntaxLayer } from './syntax-layer';
+export { default as NonLayer } from './non-layer';
+export { default as SyntaxRuleType } from './syntax-rule-type';
 export { default as MasterCSS, default } from './core';
+export * from './types/config';
+export * from './types/syntax';
 export { default as extendConfig } from './utils/extend-config';
 export { default as reorderForReadableClasses } from './utils/reorder-for-readable-classes';
 export { default as areRuleModesEqual } from './utils/are-rule-modes-equal';
 export { default as areRuleAtEqual } from './utils/are-rule-at-equal';
 export { default as areRuleSelectorsEqual } from './utils/are-rule-selectors-equal';
 export { default as areRuleStatesEqual } from './utils/are-rule-states-equal';
-export { default as areRulesDuplicated } from './utils/are-syntaxes-duplicated';
+export { default as areRulesDuplicated } from './utils/are-rules-duplicated';
 export { default as generateCSS } from './utils/generate-css';
 export { default as isCoreRule } from './utils/is-core-rule';
-export type { NativeRule, MediaFeatureComponent, MediaQuery } from './rule';

package/dist/index.mjs

@@ -1,15 +1,19 @@
 export { config } from './config/index.mjs';
-export { Rule } from './rule.mjs';
 export { ANIMATION_SIGN, AT_SIGN, BASE_UNIT_REGEX, BORDER_STYLE_VALUES, CLASS_ATTRIBUTES, CLASS_DECLARATIONS, CLASS_FUNCTIONS, COLOR_VALUE_REGEX, DELIMITER_SIGN, IMAGE_VALUE_REGEX, NUMBER_VALUE_REGEX, OFFICIAL_URL, QUERY_COMPARISON_OPERATORS, QUERY_LOGICAL_OPERATORS, SELECTOR_SIGNS, SEPARATOR_SIGN, SEPARATOR_SIGNS, TRANSITION_SIGN, UNIT_REGEX, VALUE_DELIMITERS, VALUE_UNITS } from './common.mjs';
 export { default as MasterCSS, default, masterCSSs } from './core.mjs';
+export { SyntaxRule } from './syntax-rule.mjs';
+export { Rule } from './rule.mjs';
 export { default as Layer } from './layer.mjs';
+export { default as SyntaxLayer } from './syntax-layer.mjs';
+export { default as NonLayer } from './non-layer.mjs';
+export { default as SyntaxRuleType } from './syntax-rule-type.mjs';
 export { default as extendConfig } from './utils/extend-config.mjs';
 export { default as reorderForReadableClasses } from './utils/reorder-for-readable-classes.mjs';
 export { default as areRuleModesEqual } from './utils/are-rule-modes-equal.mjs';
 export { default as areRuleAtEqual } from './utils/are-rule-at-equal.mjs';
 export { default as areRuleSelectorsEqual } from './utils/are-rule-selectors-equal.mjs';
 export { default as areRuleStatesEqual } from './utils/are-rule-states-equal.mjs';
-export { default as areRulesDuplicated } from './utils/are-syntaxes-duplicated.mjs';
+export { default as areRulesDuplicated } from './utils/are-rules-duplicated.mjs';
 export { default as generateCSS } from './utils/generate-css.mjs';
 export { default as isCoreRule } from './utils/is-core-rule.mjs';
 export { default as at } from './config/at.mjs';
@@ -19,4 +23,4 @@ export { default as functions } from './config/functions.mjs';
 export { default as animations } from './config/animations.mjs';
 export { default as variables } from './config/variables.mjs';
 export { default as modes } from './config/modes.mjs';
-export { default as syntaxes } from './config/syntaxes.mjs';
+export { default as rules } from './config/rules.mjs';

package/dist/layer.cjs

@@ -1,27 +1,111 @@
 'use strict';
 
-var Layer = /*#__PURE__*/ function(Layer) {
-    /**
-     * utility classes
-     * @example block, inline
-     */ Layer[Layer["Utility"] = -4] = "Utility";
-    /**
-     * native shorthand
-     * @example border, padding, margin
-     */ Layer[Layer["NativeShorthand"] = -3] = "NativeShorthand";
-    /**
-     * shorthand
-     * @example px, py, mx, my
-     */ Layer[Layer["Shorthand"] = -2] = "Shorthand";
-    /**
-     * native properties
-     * @example color, background-color, font-size
-     */ Layer[Layer["Native"] = -1] = "Native";
-    /**
-     * normal
-     * @example grid-cols
-     */ Layer[Layer["Normal"] = 0] = "Normal";
-    return Layer;
-}(Layer || {});
+var findNativeCssRuleIndex = require('./shared/utils/find-native-css-rule-index.cjs');
+
+class Layer {
+    name;
+    css;
+    rules;
+    usages;
+    native;
+    constructor(name, css){
+        this.name = name;
+        this.css = css;
+        this.rules = [];
+        this.usages = {};
+        this.native = null;
+    }
+    insert(rule, index) {
+        if (this.rules.find(({ key })=>key === rule.key)) return;
+        if (!this.css.rules.includes(this)) {
+            this.css.rules.push(this);
+            const nativeSheet = this.css.style?.sheet;
+            if (nativeSheet && !this.native) {
+                const insertedIndex = nativeSheet.insertRule(this.text, nativeSheet.cssRules.length);
+                this.native = nativeSheet.cssRules.item(insertedIndex);
+            }
+        }
+        if (index === undefined) {
+            index = this.rules.length;
+        }
+        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, index - 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 nativeRule = rule.nodes[i];
+                    this.native.insertRule(nativeRule.text, cssRuleIndex);
+                    nativeRule.native = this.native.cssRules[cssRuleIndex++];
+                    i++;
+                } catch (error) {
+                    console.error(error);
+                    rule.nodes.splice(i, 1);
+                }
+            }
+        }
+        this.rules.splice(index, 0, rule);
+        return index;
+    }
+    delete(key) {
+        const rule = this.rules.find((rule)=>rule.key === key);
+        if (!rule) return;
+        if (this.rules.length === 1) {
+            const indexOfLayer = this.css.rules.indexOf(this);
+            this.css.rules.splice(indexOfLayer, 1);
+            const nativeSheet = this.css.style?.sheet;
+            if (nativeSheet && this.native) {
+                const foundIndex = findNativeCssRuleIndex(nativeSheet.cssRules, this.native);
+                if (foundIndex !== -1) {
+                    nativeSheet.deleteRule(foundIndex);
+                }
+            }
+        }
+        if (this.native?.cssRules && 'nodes' in rule) {
+            for (const node of rule.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);
+                    }
+                }
+            }
+        }
+        this.rules.splice(this.rules.indexOf(rule), 1);
+        return rule;
+    }
+    reset() {
+        this.rules.length = 0;
+        const indexOfLayer = this.css.rules.indexOf(this);
+        if (indexOfLayer !== -1) {
+            this.css.rules.splice(indexOfLayer, 1);
+        }
+        // @ts-expect-error
+        this.usages = {};
+        if (this.native) {
+            this.native = null;
+        }
+    }
+    get text() {
+        return '@layer ' + this.name + '{' + this.rules.map(({ text })=>text).join('') + '}';
+    }
+}
 
 module.exports = Layer;

package/dist/layer.d.ts

@@ -1,28 +1,14 @@
-declare const enum Layer {
-    /**
-     * utility classes
-     * @example block, inline
-     */
-    Utility = -4,
-    /**
-     * native shorthand
-     * @example border, padding, margin
-     */
-    NativeShorthand = -3,
-    /**
-     * shorthand
-     * @example px, py, mx, my
-     */
-    Shorthand = -2,
-    /**
-     * native properties
-     * @example color, background-color, font-size
-     */
-    Native = -1,
-    /**
-     * normal
-     * @example grid-cols
-     */
-    Normal = 0
+import { Rule } from './rule';
+import MasterCSS from './core';
+export default class Layer {
+    name: string;
+    css: MasterCSS;
+    readonly rules: Rule[];
+    readonly usages: Record<string, number>;
+    native: CSSLayerBlockRule | null;
+    constructor(name: string, css: MasterCSS);
+    insert(rule: Rule, index?: number): number | undefined;
+    delete(key: string): Rule | undefined;
+    reset(): void;
+    get text(): string;
 }
-export default Layer;

package/dist/layer.mjs

@@ -1,25 +1,109 @@
-var Layer = /*#__PURE__*/ function(Layer) {
-    /**
-     * utility classes
-     * @example block, inline
-     */ Layer[Layer["Utility"] = -4] = "Utility";
-    /**
-     * native shorthand
-     * @example border, padding, margin
-     */ Layer[Layer["NativeShorthand"] = -3] = "NativeShorthand";
-    /**
-     * shorthand
-     * @example px, py, mx, my
-     */ Layer[Layer["Shorthand"] = -2] = "Shorthand";
-    /**
-     * native properties
-     * @example color, background-color, font-size
-     */ Layer[Layer["Native"] = -1] = "Native";
-    /**
-     * normal
-     * @example grid-cols
-     */ Layer[Layer["Normal"] = 0] = "Normal";
-    return Layer;
-}(Layer || {});
+import findNativeCSSRuleIndex from './shared/utils/find-native-css-rule-index.mjs';
+
+class Layer {
+    name;
+    css;
+    rules;
+    usages;
+    native;
+    constructor(name, css){
+        this.name = name;
+        this.css = css;
+        this.rules = [];
+        this.usages = {};
+        this.native = null;
+    }
+    insert(rule, index) {
+        if (this.rules.find(({ key })=>key === rule.key)) return;
+        if (!this.css.rules.includes(this)) {
+            this.css.rules.push(this);
+            const nativeSheet = this.css.style?.sheet;
+            if (nativeSheet && !this.native) {
+                const insertedIndex = nativeSheet.insertRule(this.text, nativeSheet.cssRules.length);
+                this.native = nativeSheet.cssRules.item(insertedIndex);
+            }
+        }
+        if (index === undefined) {
+            index = this.rules.length;
+        }
+        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, index - 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 nativeRule = rule.nodes[i];
+                    this.native.insertRule(nativeRule.text, cssRuleIndex);
+                    nativeRule.native = this.native.cssRules[cssRuleIndex++];
+                    i++;
+                } catch (error) {
+                    console.error(error);
+                    rule.nodes.splice(i, 1);
+                }
+            }
+        }
+        this.rules.splice(index, 0, rule);
+        return index;
+    }
+    delete(key) {
+        const rule = this.rules.find((rule)=>rule.key === key);
+        if (!rule) return;
+        if (this.rules.length === 1) {
+            const indexOfLayer = this.css.rules.indexOf(this);
+            this.css.rules.splice(indexOfLayer, 1);
+            const nativeSheet = this.css.style?.sheet;
+            if (nativeSheet && this.native) {
+                const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
+                if (foundIndex !== -1) {
+                    nativeSheet.deleteRule(foundIndex);
+                }
+            }
+        }
+        if (this.native?.cssRules && 'nodes' in rule) {
+            for (const node of rule.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);
+                    }
+                }
+            }
+        }
+        this.rules.splice(this.rules.indexOf(rule), 1);
+        return rule;
+    }
+    reset() {
+        this.rules.length = 0;
+        const indexOfLayer = this.css.rules.indexOf(this);
+        if (indexOfLayer !== -1) {
+            this.css.rules.splice(indexOfLayer, 1);
+        }
+        // @ts-expect-error
+        this.usages = {};
+        if (this.native) {
+            this.native = null;
+        }
+    }
+    get text() {
+        return '@layer ' + this.name + '{' + this.rules.map(({ text })=>text).join('') + '}';
+    }
+}
 
 export { Layer as default };

package/dist/non-layer.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+var findNativeCssRuleIndex = require('./shared/utils/find-native-css-rule-index.cjs');
+
+class NonLayer {
+    css;
+    rules;
+    usages;
+    constructor(css){
+        this.css = css;
+        this.rules = [];
+        this.usages = {};
+    }
+    insert(rule) {
+        if (this.rules.includes(rule)) return;
+        const sheet = this.css.style?.sheet;
+        if (sheet) {
+            for(let i = 0; i < rule.nodes.length;){
+                try {
+                    const nativeRule = rule.nodes[i];
+                    const insertedIndex = sheet.insertRule(nativeRule.text, sheet.cssRules.length);
+                    nativeRule.native = sheet.cssRules[insertedIndex];
+                    i++;
+                } catch (error) {
+                    console.error(error);
+                    rule.nodes.splice(i, 1);
+                }
+            }
+        }
+        this.rules.push(rule);
+        this.css.rules.push(rule);
+    }
+    delete(key) {
+        const rule = this.rules.find((rule)=>rule.key === key);
+        if (!rule) return;
+        const sheet = this.css.style?.sheet;
+        if (sheet) {
+            for (const node of rule.nodes){
+                const foundIndex = findNativeCssRuleIndex(sheet.cssRules, node.native);
+                if (foundIndex !== -1) {
+                    sheet.deleteRule(foundIndex);
+                }
+            }
+        }
+        this.rules.splice(this.rules.indexOf(rule), 1);
+        this.css.rules.splice(this.css.rules.indexOf(rule), 1);
+        return rule;
+    }
+    get text() {
+        return this.rules.map(({ text })=>text).join('');
+    }
+    reset() {
+        for (const rule of this.rules){
+            const foundIndex = this.css.rules.indexOf(rule);
+            if (foundIndex !== -1) {
+                this.css.rules.splice(foundIndex, 1);
+            }
+        }
+        this.rules.length = 0;
+        // @ts-expect-error
+        this.usages = {};
+    }
+}
+
+module.exports = NonLayer;

package/dist/non-layer.d.ts

@@ -0,0 +1,12 @@
+import MasterCSS from './core';
+import { Rule } from './rule';
+export default class NonLayer {
+    css: MasterCSS;
+    readonly rules: Rule[];
+    readonly usages: Record<string, number>;
+    constructor(css: MasterCSS);
+    insert(rule: Rule): void;
+    delete(key: string): Rule | undefined;
+    get text(): string;
+    reset(): void;
+}

package/dist/non-layer.mjs

@@ -0,0 +1,63 @@
+import findNativeCSSRuleIndex from './shared/utils/find-native-css-rule-index.mjs';
+
+class NonLayer {
+    css;
+    rules;
+    usages;
+    constructor(css){
+        this.css = css;
+        this.rules = [];
+        this.usages = {};
+    }
+    insert(rule) {
+        if (this.rules.includes(rule)) return;
+        const sheet = this.css.style?.sheet;
+        if (sheet) {
+            for(let i = 0; i < rule.nodes.length;){
+                try {
+                    const nativeRule = rule.nodes[i];
+                    const insertedIndex = sheet.insertRule(nativeRule.text, sheet.cssRules.length);
+                    nativeRule.native = sheet.cssRules[insertedIndex];
+                    i++;
+                } catch (error) {
+                    console.error(error);
+                    rule.nodes.splice(i, 1);
+                }
+            }
+        }
+        this.rules.push(rule);
+        this.css.rules.push(rule);
+    }
+    delete(key) {
+        const rule = this.rules.find((rule)=>rule.key === key);
+        if (!rule) return;
+        const sheet = this.css.style?.sheet;
+        if (sheet) {
+            for (const node of rule.nodes){
+                const foundIndex = findNativeCSSRuleIndex(sheet.cssRules, node.native);
+                if (foundIndex !== -1) {
+                    sheet.deleteRule(foundIndex);
+                }
+            }
+        }
+        this.rules.splice(this.rules.indexOf(rule), 1);
+        this.css.rules.splice(this.css.rules.indexOf(rule), 1);
+        return rule;
+    }
+    get text() {
+        return this.rules.map(({ text })=>text).join('');
+    }
+    reset() {
+        for (const rule of this.rules){
+            const foundIndex = this.css.rules.indexOf(rule);
+            if (foundIndex !== -1) {
+                this.css.rules.splice(foundIndex, 1);
+            }
+        }
+        this.rules.length = 0;
+        // @ts-expect-error
+        this.usages = {};
+    }
+}
+
+export { NonLayer as default };