zss-engine 0.2.49 → 0.2.51

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getServerCSS = exports.injectServerCSS = exports.injectClientGlobalCSS = exports.injectClientCSS = exports.applyCssValue = exports.camelToKebabCase = exports.build = exports.transpileAtomic = exports.transpile = exports.genBase36Hash = exports.isTestingDevelopment = exports.isDevelopment = exports.isServer = void 0;
+exports.getServerCSS = exports.injectServerCSS = exports.injectClientGlobalCSS = 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;
 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; } });
@@ -11,6 +11,9 @@ var transpile_js_1 = require("./utils/transpile.js");
 Object.defineProperty(exports, "transpile", { enumerable: true, get: function () { return transpile_js_1.transpile; } });
 var transpile_atomic_js_1 = require("./utils/transpile-atomic.js");
 Object.defineProperty(exports, "transpileAtomic", { enumerable: true, get: function () { return transpile_atomic_js_1.transpileAtomic; } });
+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 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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitAtomicAndNested = splitAtomicAndNested;
+exports.processAtomicProps = processAtomicProps;
+const index_js_1 = require("../index.js");
+function splitAtomicAndNested(obj, flat, nonFlat) {
+    Object.entries(obj).forEach(([property, value]) => {
+        if (property.startsWith(':') || property.startsWith('&')) {
+            nonFlat[property] = value;
+        }
+        else if (property.startsWith('@media') || property.startsWith('@container')) {
+            const innerFlat = {};
+            const innerNonFlat = {};
+            splitAtomicAndNested(value, innerFlat, innerNonFlat);
+            if (Object.keys(innerFlat).length)
+                flat[property] = innerFlat;
+            if (Object.keys(innerNonFlat).length)
+                nonFlat[property] = innerNonFlat;
+        }
+        else if (typeof value === 'object' && value !== null) {
+            flat[property] = value;
+        }
+        else {
+            flat[property] = value;
+        }
+    });
+}
+function processAtomicProps(flatProps, parentAtRule, atomicHashes, allStyleSheets) {
+    Object.entries(flatProps).forEach(([property, value]) => {
+        if (property.startsWith('@media') || property.startsWith('@container')) {
+            processAtomicProps(value, property);
+        }
+        else {
+            const CSSProp = (0, index_js_1.camelToKebabCase)(property);
+            const normalizedValue = (0, index_js_1.applyCssValue)(value, CSSProp);
+            const singlePropObj = { [property]: normalizedValue };
+            const atomicHash = (0, index_js_1.genBase36Hash)(singlePropObj, 6);
+            atomicHashes?.push(atomicHash);
+            let styleSheet = (0, index_js_1.transpileAtomic)(property, value, atomicHash);
+            if (parentAtRule) {
+                styleSheet = `${parentAtRule} { ${styleSheet} }`;
+            }
+            allStyleSheets?.push(styleSheet);
+        }
+    });
+}

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transpileAtomic = transpileAtomic;
-const helper_1 = require("./helper");
+const helper_js_1 = require("./helper.js");
 function transpileAtomic(property, value, hash) {
     if (typeof value === 'string' || typeof value === 'number') {
-        const CSSProp = (0, helper_1.camelToKebabCase)(property);
-        const applyValue = (0, helper_1.applyCssValue)(value, CSSProp);
+        const CSSProp = (0, helper_js_1.camelToKebabCase)(property);
+        const applyValue = (0, helper_js_1.applyCssValue)(value, CSSProp);
         const atomicRule = `.${hash} { ${CSSProp}: ${applyValue}; }`;
         if (property.startsWith('@media') || property.startsWith('@container')) {
             return `${property} {\n  ${atomicRule}\n}\n`;

package/dist/cjs/utils/transpile.js

@@ -27,8 +27,8 @@ const createKeyframes = (property, content) => {
 function transpile(object, base36Hash, core) {
     let styleSheet = '';
     const mediaQueries = [];
-    const classNameType = (property) => {
-        return core === '--global' ? property : `.${property}_${base36Hash}`;
+    const classNameApply = (property) => {
+        return core === '--global' ? property : `.${base36Hash}`;
     };
     const rules = (indent, rulesValue, property) => {
         if (typeof property !== 'string')
@@ -108,7 +108,7 @@ function transpile(object, base36Hash, core) {
             const keyframesContent = object[property];
             styleSheet += createKeyframes(property, keyframesContent);
         }
-        const classSelectors = stringConverter(classNameType(property), object[property], 1);
+        const classSelectors = stringConverter(classNameApply(property), object[property], 1);
         for (const selector in classSelectors) {
             if (!selector.startsWith('@keyframes') && classSelectors[selector]) {
                 styleSheet += selector + ' {\n' + classSelectors[selector] + '}\n';

package/dist/esm/index.js

@@ -2,6 +2,7 @@ export { isServer, isDevelopment, isTestingDevelopment } from './utils/helper.js
 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 { build } from './utils/build.js';
 export { camelToKebabCase, applyCssValue } from './utils/helper.js';
 export { injectClientCSS } from './utils/inject-client-css.js';

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

@@ -0,0 +1,43 @@
+import { camelToKebabCase, genBase36Hash, applyCssValue, transpileAtomic } from '../index.js';
+function splitAtomicAndNested(obj, flat, nonFlat) {
+    Object.entries(obj).forEach(([property, value]) => {
+        if (property.startsWith(':') || property.startsWith('&')) {
+            nonFlat[property] = value;
+        }
+        else if (property.startsWith('@media') || property.startsWith('@container')) {
+            const innerFlat = {};
+            const innerNonFlat = {};
+            splitAtomicAndNested(value, innerFlat, innerNonFlat);
+            if (Object.keys(innerFlat).length)
+                flat[property] = innerFlat;
+            if (Object.keys(innerNonFlat).length)
+                nonFlat[property] = innerNonFlat;
+        }
+        else if (typeof value === 'object' && value !== null) {
+            flat[property] = value;
+        }
+        else {
+            flat[property] = value;
+        }
+    });
+}
+function processAtomicProps(flatProps, parentAtRule, atomicHashes, allStyleSheets) {
+    Object.entries(flatProps).forEach(([property, value]) => {
+        if (property.startsWith('@media') || property.startsWith('@container')) {
+            processAtomicProps(value, property);
+        }
+        else {
+            const CSSProp = camelToKebabCase(property);
+            const normalizedValue = applyCssValue(value, CSSProp);
+            const singlePropObj = { [property]: normalizedValue };
+            const atomicHash = genBase36Hash(singlePropObj, 6);
+            atomicHashes?.push(atomicHash);
+            let styleSheet = transpileAtomic(property, value, atomicHash);
+            if (parentAtRule) {
+                styleSheet = `${parentAtRule} { ${styleSheet} }`;
+            }
+            allStyleSheets?.push(styleSheet);
+        }
+    });
+}
+export { splitAtomicAndNested, processAtomicProps };

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

@@ -1,4 +1,4 @@
-import { applyCssValue, camelToKebabCase } from './helper';
+import { applyCssValue, camelToKebabCase } from './helper.js';
 function transpileAtomic(property, value, hash) {
     if (typeof value === 'string' || typeof value === 'number') {
         const CSSProp = camelToKebabCase(property);

package/dist/esm/utils/transpile.js

@@ -24,8 +24,8 @@ const createKeyframes = (property, content) => {
 export function transpile(object, base36Hash, core) {
     let styleSheet = '';
     const mediaQueries = [];
-    const classNameType = (property) => {
-        return core === '--global' ? property : `.${property}_${base36Hash}`;
+    const classNameApply = (property) => {
+        return core === '--global' ? property : `.${base36Hash}`;
     };
     const rules = (indent, rulesValue, property) => {
         if (typeof property !== 'string')
@@ -105,7 +105,7 @@ export function transpile(object, base36Hash, core) {
             const keyframesContent = object[property];
             styleSheet += createKeyframes(property, keyframesContent);
         }
-        const classSelectors = stringConverter(classNameType(property), object[property], 1);
+        const classSelectors = stringConverter(classNameApply(property), object[property], 1);
         for (const selector in classSelectors) {
             if (!selector.startsWith('@keyframes') && classSelectors[selector]) {
                 styleSheet += selector + ' {\n' + classSelectors[selector] + '}\n';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zss-engine",
-  "version": "0.2.49",
+  "version": "0.2.51",
   "description": "Zero-runtime StyleSheet Engine",
   "keywords": [
     "zero-runtime",

package/types/index.d.ts

@@ -7,6 +7,7 @@ export { isServer, isDevelopment, isTestingDevelopment } from './utils/helper.js
 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 { build } from './utils/build.js';
 export { camelToKebabCase, applyCssValue } from './utils/helper.js';
 export { injectClientCSS } from './utils/inject-client-css.js';

package/types/utils/hash.d.ts

@@ -1,2 +1,2 @@
-import { CreateStyle, CreateKeyframes } from '../index.js';
-export declare function genBase36Hash(object: CreateStyle | CreateKeyframes, n: number): string;
+import { CreateStyle, CreateKeyframes, CSSProperties } from '../index.js';
+export declare function genBase36Hash(object: CreateStyle | CSSProperties | CreateKeyframes, n: number): string;

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

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

package/types/utils/transpile.d.ts

@@ -1,4 +1,4 @@
-import type { CSSHTML } from '../index.js';
-export declare function transpile(object: CSSHTML, base36Hash?: string, core?: string): {
+import type { CSSProperties, CSSHTML, CreateStyle } from '../index.js';
+export declare function transpile(object: CSSHTML | CreateStyle | CSSProperties, base36Hash?: string, core?: string): {
     styleSheet: string;
 };