zss-engine 0.2.91 → 0.2.93

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isHashInStyleSheets = exports.injectClientGlobalCSS = exports.injectClientQuery = exports.injectClientCSS = exports.applyCssValue = exports.camelToKebabCase = exports.build = exports.processAtomicProps = exports.splitAtomicAndNested = exports.transpileAtomic = exports.transpile = exports.genBase36Hash = exports.isTestingDevelopment = exports.isDevelopment = exports.isServer = void 0;
+exports.isHashInStyleSheets = exports.injectClientGlobalCSS = exports.injectClientQuery = exports.injectClientCSS = exports.applyCssValue = exports.camelToKebabCase = exports.build = exports.LONG_TO_SHORT = exports.SHORTHAND_PROPERTIES = exports.processAtomicProps = exports.splitAtomicAndNested = exports.transpileAtomic = exports.transpile = exports.genBase36Hash = exports.isTestingDevelopment = exports.isDevelopment = exports.isServer = void 0;
 var helper_js_1 = require("./utils/helper.js");
 Object.defineProperty(exports, "isServer", { enumerable: true, get: function () { return helper_js_1.isServer; } });
 Object.defineProperty(exports, "isDevelopment", { enumerable: true, get: function () { return helper_js_1.isDevelopment; } });
@@ -14,6 +14,9 @@ Object.defineProperty(exports, "transpileAtomic", { enumerable: true, get: funct
 var processor_atomic_js_1 = require("./utils/processor-atomic.js");
 Object.defineProperty(exports, "splitAtomicAndNested", { enumerable: true, get: function () { return processor_atomic_js_1.splitAtomicAndNested; } });
 Object.defineProperty(exports, "processAtomicProps", { enumerable: true, get: function () { return processor_atomic_js_1.processAtomicProps; } });
+var shorthand_js_1 = require("./utils/shorthand.js");
+Object.defineProperty(exports, "SHORTHAND_PROPERTIES", { enumerable: true, get: function () { return shorthand_js_1.SHORTHAND_PROPERTIES; } });
+Object.defineProperty(exports, "LONG_TO_SHORT", { enumerable: true, get: function () { return shorthand_js_1.LONG_TO_SHORT; } });
 var build_js_1 = require("./utils/build.js");
 Object.defineProperty(exports, "build", { enumerable: true, get: function () { return build_js_1.build; } });
 var helper_js_2 = require("./utils/helper.js");

package/dist/cjs/utils/processor-atomic.js

@@ -29,28 +29,14 @@ Object.entries(shorthand_js_1.SHORTHAND_PROPERTIES).forEach(([shorthand, longhan
         LONG_TO_SHORT[long] = shorthand;
     });
 });
-function processAtomicProps(flatProps, atomicHashes, allStyleSheets, seen, resultQueue, parentAtRule) {
+function processAtomicProps(flatProps, atomicHashes, allStyleSheets, parentAtRule) {
+    const resultQueue = [];
     for (const [property, value] of Object.entries(flatProps)) {
         if (property.startsWith('@media') || property.startsWith('@container')) {
-            const nestedQueue = [];
-            processAtomicProps(value, atomicHashes, allStyleSheets, seen, nestedQueue, property);
+            processAtomicProps(value, atomicHashes, allStyleSheets, property);
             continue;
         }
-        const kebab = (0, index_js_1.camelToKebabCase)(property);
-        if (shorthand_js_1.SHORTHAND_PROPERTIES[kebab]) {
-            const longhands = shorthand_js_1.SHORTHAND_PROPERTIES[kebab];
-            longhands.forEach(longhand => seen.delete(longhand));
-            seen.add(kebab);
-            resultQueue.push([property, value]);
-        }
-        else if (kebab in LONG_TO_SHORT) {
-            seen.add(kebab);
-            resultQueue.push([property, value]);
-        }
-        else {
-            seen.add(kebab);
-            resultQueue.push([property, value]);
-        }
+        resultQueue.push([property, value]);
     }
     for (const [property, value] of resultQueue) {
         const CSSProp = (0, index_js_1.camelToKebabCase)(property);

package/dist/cjs/utils/shorthand.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SHORTHAND_PROPERTIES = void 0;
+exports.LONG_TO_SHORT = exports.SHORTHAND_PROPERTIES = void 0;
 exports.SHORTHAND_PROPERTIES = {
     margin: ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'],
     padding: ['padding-top', 'padding-bottom', 'padding-left', 'padding-right'],
@@ -78,3 +78,12 @@ exports.SHORTHAND_PROPERTIES = {
     'text-emphasis': ['text-emphasis-style', 'text-emphasis-color'],
     mask: ['mask-image', 'mask-mode', 'mask-position', 'mask-size', 'mask-repeat', 'mask-origin', 'mask-clip', 'mask-composite'],
 };
+exports.LONG_TO_SHORT = {};
+Object.entries(exports.SHORTHAND_PROPERTIES).forEach(([shorthand, longhands]) => {
+    longhands.forEach(longhand => {
+        if (!exports.LONG_TO_SHORT[longhand]) {
+            exports.LONG_TO_SHORT[longhand] = [];
+        }
+        exports.LONG_TO_SHORT[longhand].push(shorthand);
+    });
+});

package/dist/cjs/utils/transpile-atomic.js

@@ -2,11 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transpileAtomic = transpileAtomic;
 const helper_js_1 = require("./helper.js");
+const shorthand_js_1 = require("./shorthand.js");
+const ALL_LONGHANDS = new Set(Object.values(shorthand_js_1.SHORTHAND_PROPERTIES).flat());
 function transpileAtomic(property, value, hash) {
     if (typeof value === 'string' || typeof value === 'number') {
         const CSSProp = (0, helper_js_1.camelToKebabCase)(property);
         const applyValue = (0, helper_js_1.applyCssValue)(value, CSSProp);
-        const atomicRule = `.${hash} { ${CSSProp}: ${applyValue}; }`;
+        let selector = `.${hash}`;
+        if (ALL_LONGHANDS.has(CSSProp)) {
+            selector += ':not(#\\#)';
+        }
+        const atomicRule = `${selector} { ${CSSProp}: ${applyValue}; }`;
         if (property.startsWith('@media') || property.startsWith('@container')) {
             return `${property} { ${atomicRule} }`;
         }

package/dist/esm/index.js

@@ -3,6 +3,7 @@ export { genBase36Hash } from './utils/hash.js';
 export { transpile } from './utils/transpile.js';
 export { transpileAtomic } from './utils/transpile-atomic.js';
 export { splitAtomicAndNested, processAtomicProps } from './utils/processor-atomic.js';
+export { SHORTHAND_PROPERTIES, LONG_TO_SHORT } from './utils/shorthand.js';
 export { build } from './utils/build.js';
 export { camelToKebabCase, applyCssValue } from './utils/helper.js';
 export { injectClientCSS, injectClientQuery } from './utils/inject-client-css.js';

package/dist/esm/utils/processor-atomic.js

@@ -25,28 +25,14 @@ Object.entries(SHORTHAND_PROPERTIES).forEach(([shorthand, longhands]) => {
         LONG_TO_SHORT[long] = shorthand;
     });
 });
-function processAtomicProps(flatProps, atomicHashes, allStyleSheets, seen, resultQueue, parentAtRule) {
+function processAtomicProps(flatProps, atomicHashes, allStyleSheets, parentAtRule) {
+    const resultQueue = [];
     for (const [property, value] of Object.entries(flatProps)) {
         if (property.startsWith('@media') || property.startsWith('@container')) {
-            const nestedQueue = [];
-            processAtomicProps(value, atomicHashes, allStyleSheets, seen, nestedQueue, property);
+            processAtomicProps(value, atomicHashes, allStyleSheets, property);
             continue;
         }
-        const kebab = camelToKebabCase(property);
-        if (SHORTHAND_PROPERTIES[kebab]) {
-            const longhands = SHORTHAND_PROPERTIES[kebab];
-            longhands.forEach(longhand => seen.delete(longhand));
-            seen.add(kebab);
-            resultQueue.push([property, value]);
-        }
-        else if (kebab in LONG_TO_SHORT) {
-            seen.add(kebab);
-            resultQueue.push([property, value]);
-        }
-        else {
-            seen.add(kebab);
-            resultQueue.push([property, value]);
-        }
+        resultQueue.push([property, value]);
     }
     for (const [property, value] of resultQueue) {
         const CSSProp = camelToKebabCase(property);

package/dist/esm/utils/shorthand.js

@@ -75,3 +75,12 @@ export const SHORTHAND_PROPERTIES = {
     'text-emphasis': ['text-emphasis-style', 'text-emphasis-color'],
     mask: ['mask-image', 'mask-mode', 'mask-position', 'mask-size', 'mask-repeat', 'mask-origin', 'mask-clip', 'mask-composite'],
 };
+export const LONG_TO_SHORT = {};
+Object.entries(SHORTHAND_PROPERTIES).forEach(([shorthand, longhands]) => {
+    longhands.forEach(longhand => {
+        if (!LONG_TO_SHORT[longhand]) {
+            LONG_TO_SHORT[longhand] = [];
+        }
+        LONG_TO_SHORT[longhand].push(shorthand);
+    });
+});

package/dist/esm/utils/transpile-atomic.js

@@ -1,9 +1,15 @@
 import { applyCssValue, camelToKebabCase } from './helper.js';
+import { SHORTHAND_PROPERTIES } from './shorthand.js';
+const ALL_LONGHANDS = new Set(Object.values(SHORTHAND_PROPERTIES).flat());
 function transpileAtomic(property, value, hash) {
     if (typeof value === 'string' || typeof value === 'number') {
         const CSSProp = camelToKebabCase(property);
         const applyValue = applyCssValue(value, CSSProp);
-        const atomicRule = `.${hash} { ${CSSProp}: ${applyValue}; }`;
+        let selector = `.${hash}`;
+        if (ALL_LONGHANDS.has(CSSProp)) {
+            selector += ':not(#\\#)';
+        }
+        const atomicRule = `${selector} { ${CSSProp}: ${applyValue}; }`;
         if (property.startsWith('@media') || property.startsWith('@container')) {
             return `${property} { ${atomicRule} }`;
         }

package/dist/types/index.d.ts

@@ -8,6 +8,7 @@ export { genBase36Hash } from './utils/hash.js';
 export { transpile } from './utils/transpile.js';
 export { transpileAtomic } from './utils/transpile-atomic.js';
 export { splitAtomicAndNested, processAtomicProps } from './utils/processor-atomic.js';
+export { SHORTHAND_PROPERTIES, LONG_TO_SHORT } from './utils/shorthand.js';
 export { build } from './utils/build.js';
 export { camelToKebabCase, applyCssValue } from './utils/helper.js';
 export { injectClientCSS, injectClientQuery } from './utils/inject-client-css.js';

package/dist/types/utils/processor-atomic.d.ts

@@ -1,4 +1,4 @@
 import type { CSSProperties, CreateStyle } from '../index.js';
 declare function splitAtomicAndNested(obj: CSSProperties, flat: CreateStyle, nonFlat: CreateStyle): void;
-declare function processAtomicProps(flatProps: CSSProperties, atomicHashes: Set<string>, allStyleSheets: Set<string>, seen: Set<string>, resultQueue: Array<[string, string | number]>, parentAtRule?: string): void;
+declare function processAtomicProps(flatProps: CSSProperties, atomicHashes: Set<string>, allStyleSheets: Set<string>, parentAtRule?: string): void;
 export { splitAtomicAndNested, processAtomicProps };

package/dist/types/utils/shorthand.d.ts

@@ -1 +1,2 @@
 export declare const SHORTHAND_PROPERTIES: Record<string, string[]>;
+export declare const LONG_TO_SHORT: Record<string, string[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zss-engine",
-  "version": "0.2.91",
+  "version": "0.2.93",
   "description": "Zero-runtime StyleSheet Engine",
   "funding": "https://github.com/sponsors/refirst11",
   "author": "Refirst 11",