@master/css 2.0.0-rc.14 → 2.0.0-rc.16

package/dist/functions/reorder-for-readable-classes.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+var layer = require('../layer.cjs');
+var core = require('../core.cjs');
+
+/**
+ * Sorts classes in a consistent order
+ * @param classes
+ * @param options
+ * @returns consistent classes
+ */ function reorderForReadableClasses(classes, options) {
+    let css;
+    if (options?.css) {
+        css = options?.css;
+    } else {
+        css = new core.default(options?.config);
+    }
+    for (const eachClass of classes){
+        css.add(eachClass);
+    }
+    return css.rules// 只保留樣式語法相關的 rules, 排除 keyframes 與 variables 在外
+    .filter((eachRule)=>eachRule.layer).sort((a, b)=>{
+        if (a.layer === layer.Layer.Semantic && b.layer !== layer.Layer.Semantic) {
+            // 如果 a 是 Layer.Semantic 而 b 不是，则 a 应该排在 b 前面
+            return -1;
+        } else if (a.layer !== layer.Layer.Semantic && b.layer === layer.Layer.Semantic) {
+            // 如果 b 是 Layer.Semantic 而 a 不是，则 b 应该排在 a 前面
+            return 1;
+        } else if (a.id !== b.id) {
+            return a.className.localeCompare(b.className);
+        } else {
+            // 檢查 vendorSuffixSelectors 是否存在
+            const aHasVendorSuffix = a.vendorSuffixSelectors?.['']?.[0];
+            const bHasVendorSuffix = b.vendorSuffixSelectors?.['']?.[0];
+            // 檢查 media.token 是否存在
+            const aHasMediaToken = a.media?.token;
+            const bHasMediaToken = b.media?.token;
+            if (a.priority === -1 && b.priority === -1) {
+                // 如果 a 和 b 都有 vendorSuffixSelectors 或 media.token，則按照以下規則排序
+                if (aHasVendorSuffix && bHasVendorSuffix) {
+                    return aHasVendorSuffix.localeCompare(bHasVendorSuffix);
+                }
+                // 如果 a 和 b 都有 media.token 且不包含內建已處理過排序的，則按照以下規則排序
+                if (aHasMediaToken && bHasMediaToken && !Object.keys(a.media.features || {}).length && !Object.keys(b.media.features || {}).length) {
+                    return aHasMediaToken.localeCompare(bHasMediaToken);
+                }
+                if (aHasVendorSuffix && !bHasVendorSuffix) {
+                    return 1;
+                } else if (!aHasVendorSuffix && bHasVendorSuffix) {
+                    return -1;
+                }
+                if (aHasMediaToken && !bHasMediaToken) {
+                    return 1;
+                } else if (!aHasMediaToken && bHasMediaToken) {
+                    return -1;
+                }
+            }
+            // 如果 a 和 b 的 id 相同，則按照以下規則排序
+            if (a.id === b.id && a.stateToken === b.stateToken) {
+                return a.className.localeCompare(b.className);
+            }
+            // 再按照 rule.order 本身來升序排列
+            return a.order - b.order;
+        }
+    }).map((eachRule)=>eachRule.className);
+}
+
+module.exports = reorderForReadableClasses;

package/dist/functions/reorder-for-readable-classes.d.ts

@@ -1,5 +1,5 @@
 import type { Config } from '../config';
-import { MasterCSS } from '../core';
+import MasterCSS from '../core';
 /**
  * Sorts classes in a consistent order
  * @param classes

package/dist/functions/reorder-for-readable-classes.mjs

@@ -0,0 +1,66 @@
+import { Layer } from '../layer.mjs';
+import MasterCSS from '../core.mjs';
+
+/**
+ * Sorts classes in a consistent order
+ * @param classes
+ * @param options
+ * @returns consistent classes
+ */ function reorderForReadableClasses(classes, options) {
+    let css;
+    if (options?.css) {
+        css = options?.css;
+    } else {
+        css = new MasterCSS(options?.config);
+    }
+    for (const eachClass of classes){
+        css.add(eachClass);
+    }
+    return css.rules// 只保留樣式語法相關的 rules, 排除 keyframes 與 variables 在外
+    .filter((eachRule)=>eachRule.layer).sort((a, b)=>{
+        if (a.layer === Layer.Semantic && b.layer !== Layer.Semantic) {
+            // 如果 a 是 Layer.Semantic 而 b 不是，则 a 应该排在 b 前面
+            return -1;
+        } else if (a.layer !== Layer.Semantic && b.layer === Layer.Semantic) {
+            // 如果 b 是 Layer.Semantic 而 a 不是，则 b 应该排在 a 前面
+            return 1;
+        } else if (a.id !== b.id) {
+            return a.className.localeCompare(b.className);
+        } else {
+            // 檢查 vendorSuffixSelectors 是否存在
+            const aHasVendorSuffix = a.vendorSuffixSelectors?.['']?.[0];
+            const bHasVendorSuffix = b.vendorSuffixSelectors?.['']?.[0];
+            // 檢查 media.token 是否存在
+            const aHasMediaToken = a.media?.token;
+            const bHasMediaToken = b.media?.token;
+            if (a.priority === -1 && b.priority === -1) {
+                // 如果 a 和 b 都有 vendorSuffixSelectors 或 media.token，則按照以下規則排序
+                if (aHasVendorSuffix && bHasVendorSuffix) {
+                    return aHasVendorSuffix.localeCompare(bHasVendorSuffix);
+                }
+                // 如果 a 和 b 都有 media.token 且不包含內建已處理過排序的，則按照以下規則排序
+                if (aHasMediaToken && bHasMediaToken && !Object.keys(a.media.features || {}).length && !Object.keys(b.media.features || {}).length) {
+                    return aHasMediaToken.localeCompare(bHasMediaToken);
+                }
+                if (aHasVendorSuffix && !bHasVendorSuffix) {
+                    return 1;
+                } else if (!aHasVendorSuffix && bHasVendorSuffix) {
+                    return -1;
+                }
+                if (aHasMediaToken && !bHasMediaToken) {
+                    return 1;
+                } else if (!aHasMediaToken && bHasMediaToken) {
+                    return -1;
+                }
+            }
+            // 如果 a 和 b 的 id 相同，則按照以下規則排序
+            if (a.id === b.id && a.stateToken === b.stateToken) {
+                return a.className.localeCompare(b.className);
+            }
+            // 再按照 rule.order 本身來升序排列
+            return a.order - b.order;
+        }
+    }).map((eachRule)=>eachRule.className);
+}
+
+export { reorderForReadableClasses as default };

package/dist/functions/transform-color-with-opacity.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+function transformColorWithOpacity(color, opacityStr) {
+    let opacity = opacityStr.endsWith('%') ? parseFloat(opacityStr) / 100.0 : +opacityStr;
+    opacity = isNaN(opacity) ? 1 : Math.min(Math.max(opacity, 0), 1);
+    return color + Math.round(opacity * 255).toString(16).toUpperCase().padStart(2, '0');
+}
+
+exports.transformColorWithOpacity = transformColorWithOpacity;

package/dist/functions/transform-color-with-opacity.mjs

@@ -0,0 +1,7 @@
+function transformColorWithOpacity(color, opacityStr) {
+    let opacity = opacityStr.endsWith('%') ? parseFloat(opacityStr) / 100.0 : +opacityStr;
+    opacity = isNaN(opacity) ? 1 : Math.min(Math.max(opacity, 0), 1);
+    return color + Math.round(opacity * 255).toString(16).toUpperCase().padStart(2, '0');
+}
+
+export { transformColorWithOpacity };

package/dist/index.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('./config/index.cjs');
+var rule = require('./rule.cjs');
+var layer = require('./layer.cjs');
+var extend = require('@techor/extend');
+var reorderForReadableClasses = require('./functions/reorder-for-readable-classes.cjs');
+var core = require('./core.cjs');
+var selectors = require('./config/selectors.cjs');
+var semantics = require('./config/semantics.cjs');
+var rules = require('./config/rules.cjs');
+var functions = require('./config/functions.cjs');
+var animations = require('./config/animations.cjs');
+var variables = require('./config/variables.cjs');
+var screenSizes = require('./tokens/screen-sizes.cjs');
+
+
+
+exports.config = index.config;
+exports.Rule = rule.Rule;
+Object.defineProperty(exports, "Layer", {
+	enumerable: true,
+	get: function () { return layer.Layer; }
+});
+exports.extend = extend;
+exports.reorderForReadableClasses = reorderForReadableClasses;
+exports.MasterCSS = core.default;
+exports.default = core.default;
+exports.selectors = selectors;
+exports.semantics = semantics;
+exports.rules = rules.default;
+exports.functions = functions;
+exports.animations = animations;
+exports.variables = variables;
+exports.mediaQueries = screenSizes;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-export { MasterCSS, MasterCSS as default } from './core';
+export * from './config';
 export { Rule } from './rule';
-export type { NativeRule, MediaFeatureComponent, MediaQuery } from './rule';
 export { Layer } from './layer';
 export { default as extend } from '@techor/extend';
 export { default as reorderForReadableClasses } from './functions/reorder-for-readable-classes';
-export * from './config';
+export { default as MasterCSS, default } from './core';
+export type { NativeRule, MediaFeatureComponent, MediaQuery } from './rule';

package/dist/index.mjs

@@ -0,0 +1,13 @@
+export { config } from './config/index.mjs';
+export { Rule } from './rule.mjs';
+export { Layer } from './layer.mjs';
+export { default as extend } from '@techor/extend';
+export { default as reorderForReadableClasses } from './functions/reorder-for-readable-classes.mjs';
+export { default as MasterCSS, default } from './core.mjs';
+export { default as selectors } from './config/selectors.mjs';
+export { default as semantics } from './config/semantics.mjs';
+export { default as rules } from './config/rules.mjs';
+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 mediaQueries } from './tokens/screen-sizes.mjs';

package/dist/layer.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+exports.Layer = void 0;
+(function(Layer) {
+    // semantic
+    Layer[Layer["Semantic"] = -8] = "Semantic";
+    // native shorthand
+    Layer[Layer["CoreNativeShorthand"] = -7] = "CoreNativeShorthand";
+    // native shorthand
+    Layer[Layer["NativeShorthand"] = -6] = "NativeShorthand";
+    // shorthand
+    Layer[Layer["CoreShorthand"] = -5] = "CoreShorthand";
+    // shorthand
+    Layer[Layer["Shorthand"] = -4] = "Shorthand";
+    // native
+    Layer[Layer["CoreNative"] = -3] = "CoreNative";
+    // native
+    Layer[Layer["Native"] = -2] = "Native";
+    // normal
+    Layer[Layer["Core"] = -1] = "Core";
+    // normal
+    Layer[Layer["Normal"] = 0] = "Normal";
+})(exports.Layer || (exports.Layer = {}));

package/dist/layer.mjs

@@ -0,0 +1,23 @@
+var Layer;
+(function(Layer) {
+    // semantic
+    Layer[Layer["Semantic"] = -8] = "Semantic";
+    // native shorthand
+    Layer[Layer["CoreNativeShorthand"] = -7] = "CoreNativeShorthand";
+    // native shorthand
+    Layer[Layer["NativeShorthand"] = -6] = "NativeShorthand";
+    // shorthand
+    Layer[Layer["CoreShorthand"] = -5] = "CoreShorthand";
+    // shorthand
+    Layer[Layer["Shorthand"] = -4] = "Shorthand";
+    // native
+    Layer[Layer["CoreNative"] = -3] = "CoreNative";
+    // native
+    Layer[Layer["Native"] = -2] = "Native";
+    // normal
+    Layer[Layer["Core"] = -1] = "Core";
+    // normal
+    Layer[Layer["Normal"] = 0] = "Normal";
+})(Layer || (Layer = {}));
+
+export { Layer };

package/dist/polyfills/css-escape.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./css-escape2.cjs');
+var cssEscape = require('../_virtual/css-escape.cjs');
+
+
+
+module.exports = cssEscape.__exports;

package/dist/polyfills/css-escape.mjs

@@ -0,0 +1,2 @@
+import './css-escape2.mjs';
+export { __exports as default } from '../_virtual/css-escape.mjs';

package/dist/polyfills/css-escape2.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+var _commonjsHelpers = require('../_virtual/_commonjsHelpers.cjs');
+
+(()=>{
+    const root = typeof _commonjsHelpers.commonjsGlobal !== 'undefined' ? _commonjsHelpers.commonjsGlobal : window;
+    if (!root.CSS && !root.CSS?.escape) {
+        // https://drafts.csswg.org/cssom/#serialize-an-identifier
+        const cssEscape = function(value) {
+            if (arguments.length == 0) {
+                throw new TypeError('`CSS.escape` requires an argument.');
+            }
+            const string = String(value);
+            const length = string.length;
+            let index = -1;
+            let result = '';
+            let codeUnit;
+            const firstCodeUnit = string.charCodeAt(0);
+            if (// If the character is the first character and is a `-` (U+002D), and
+            // there is no second character, […]
+            length == 1 && firstCodeUnit == 0x002D) {
+                return '\\' + string;
+            }
+            while(++index < length){
+                codeUnit = string.charCodeAt(index);
+                // Note: there’s no need to special-case astral symbols, surrogate
+                // pairs, or lone surrogates.
+                // If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
+                // (U+FFFD).
+                if (codeUnit == 0x0000) {
+                    result += '\uFFFD';
+                    continue;
+                }
+                if (// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
+                // U+007F, […]
+                codeUnit >= 0x0001 && codeUnit <= 0x001F || codeUnit == 0x007F || // If the character is the first character and is in the range [0-9]
+                // (U+0030 to U+0039), […]
+                index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039 || // If the character is the second character and is in the range [0-9]
+                // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
+                index == 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit == 0x002D) {
+                    // https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+                    result += '\\' + codeUnit.toString(16) + ' ';
+                    continue;
+                }
+                // If the character is not handled by one of the above rules and is
+                // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+                // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
+                // U+005A), or [a-z] (U+0061 to U+007A), […]
+                if (codeUnit >= 0x0080 || codeUnit == 0x002D || codeUnit == 0x005F || codeUnit >= 0x0030 && codeUnit <= 0x0039 || codeUnit >= 0x0041 && codeUnit <= 0x005A || codeUnit >= 0x0061 && codeUnit <= 0x007A) {
+                    // the character itself
+                    result += string.charAt(index);
+                    continue;
+                }
+                // Otherwise, the escaped character.
+                // https://drafts.csswg.org/cssom/#escape-a-character
+                result += '\\' + string.charAt(index);
+            }
+            return result;
+        };
+        if (!root.CSS) {
+            root.CSS = {};
+        }
+        root.CSS.escape = cssEscape;
+        globalThis.CSS.escape = cssEscape;
+    }
+})();
+
+module.exports = undefined;

package/dist/polyfills/css-escape2.mjs

@@ -0,0 +1,64 @@
+import { commonjsGlobal } from '../_virtual/_commonjsHelpers.mjs';
+
+(()=>{
+    const root = typeof commonjsGlobal !== 'undefined' ? commonjsGlobal : window;
+    if (!root.CSS && !root.CSS?.escape) {
+        // https://drafts.csswg.org/cssom/#serialize-an-identifier
+        const cssEscape = function(value) {
+            if (arguments.length == 0) {
+                throw new TypeError('`CSS.escape` requires an argument.');
+            }
+            const string = String(value);
+            const length = string.length;
+            let index = -1;
+            let result = '';
+            let codeUnit;
+            const firstCodeUnit = string.charCodeAt(0);
+            if (// If the character is the first character and is a `-` (U+002D), and
+            // there is no second character, […]
+            length == 1 && firstCodeUnit == 0x002D) {
+                return '\\' + string;
+            }
+            while(++index < length){
+                codeUnit = string.charCodeAt(index);
+                // Note: there’s no need to special-case astral symbols, surrogate
+                // pairs, or lone surrogates.
+                // If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
+                // (U+FFFD).
+                if (codeUnit == 0x0000) {
+                    result += '\uFFFD';
+                    continue;
+                }
+                if (// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
+                // U+007F, […]
+                codeUnit >= 0x0001 && codeUnit <= 0x001F || codeUnit == 0x007F || // If the character is the first character and is in the range [0-9]
+                // (U+0030 to U+0039), […]
+                index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039 || // If the character is the second character and is in the range [0-9]
+                // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
+                index == 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit == 0x002D) {
+                    // https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+                    result += '\\' + codeUnit.toString(16) + ' ';
+                    continue;
+                }
+                // If the character is not handled by one of the above rules and is
+                // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+                // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
+                // U+005A), or [a-z] (U+0061 to U+007A), […]
+                if (codeUnit >= 0x0080 || codeUnit == 0x002D || codeUnit == 0x005F || codeUnit >= 0x0030 && codeUnit <= 0x0039 || codeUnit >= 0x0041 && codeUnit <= 0x005A || codeUnit >= 0x0061 && codeUnit <= 0x007A) {
+                    // the character itself
+                    result += string.charAt(index);
+                    continue;
+                }
+                // Otherwise, the escaped character.
+                // https://drafts.csswg.org/cssom/#escape-a-character
+                result += '\\' + string.charAt(index);
+            }
+            return result;
+        };
+        if (!root.CSS) {
+            root.CSS = {};
+        }
+        root.CSS.escape = cssEscape;
+        globalThis.CSS.escape = cssEscape;
+    }
+})();