zss-engine 2.2.8 → 2.3.0

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.exceptionCamelCase = exports.applyCssValue = exports.camelToKebabCase = exports.overrideLonghand = exports.processAtomicProps = exports.splitAtomicAndNested = exports.transpileAtomic = exports.transpile = exports.genBase36Hash = void 0;
+exports.exceptionCamelCase = exports.isAtRule = exports.applyCssValue = exports.camelToKebabCase = exports.overrideLonghand = exports.processAtomicProps = exports.splitAtomicAndNested = exports.transpileAtomic = exports.transpile = exports.genBase36Hash = void 0;
 var hash_js_1 = require("./utils/hash.js");
 Object.defineProperty(exports, "genBase36Hash", { enumerable: true, get: function () { return hash_js_1.genBase36Hash; } });
 var transpile_js_1 = require("./utils/transpile.js");
@@ -15,4 +15,5 @@ Object.defineProperty(exports, "overrideLonghand", { enumerable: true, get: func
 var helper_js_1 = require("./utils/helper.js");
 Object.defineProperty(exports, "camelToKebabCase", { enumerable: true, get: function () { return helper_js_1.camelToKebabCase; } });
 Object.defineProperty(exports, "applyCssValue", { enumerable: true, get: function () { return helper_js_1.applyCssValue; } });
+Object.defineProperty(exports, "isAtRule", { enumerable: true, get: function () { return helper_js_1.isAtRule; } });
 Object.defineProperty(exports, "exceptionCamelCase", { enumerable: true, get: function () { return helper_js_1.exceptionCamelCase; } });

package/dist/cjs/utils/helper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.camelToKebabCase = exports.applyCssValue = exports.exceptionCamelCase = void 0;
+exports.isAtRule = exports.camelToKebabCase = exports.applyCssValue = exports.exceptionCamelCase = void 0;
 const hex_to_color_name_js_1 = require("./hex-to-color-name.js");
 const exception = [
     'animation-iteration-count',
@@ -61,3 +61,11 @@ const camelToKebabCase = (property) => {
         .toLowerCase());
 };
 exports.camelToKebabCase = camelToKebabCase;
+const isAtRule = (prop) => {
+    return (prop.startsWith('@media') ||
+        prop.startsWith('@container') ||
+        prop.startsWith('@supports') ||
+        prop.startsWith('@layer') ||
+        prop.startsWith('@scope'));
+};
+exports.isAtRule = isAtRule;

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

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.splitAtomicAndNested = splitAtomicAndNested;
 exports.processAtomicProps = processAtomicProps;
-const index_js_1 = require("../index.js");
+const helper_js_1 = require("./helper.js");
+const transpile_atomic_js_1 = require("./transpile-atomic.js");
+const hash_js_1 = require("./hash.js");
 const shorthand_js_1 = require("./shorthand.js");
 function splitAtomicAndNested(obj, flat, nonFlat) {
     const queryFlat = flat;
@@ -11,7 +13,7 @@ function splitAtomicAndNested(obj, flat, nonFlat) {
         if (property.startsWith(':') || property.startsWith('[')) {
             queryNonFlat[property] = value;
         }
-        else if (property.startsWith('@media') || property.startsWith('@container')) {
+        else if ((0, helper_js_1.isAtRule)(property)) {
             const innerFlat = {};
             const innerNonFlat = {};
             splitAtomicAndNested(value, innerFlat, innerNonFlat);
@@ -34,21 +36,21 @@ Object.entries(shorthand_js_1.SHORTHAND_PROPERTIES).forEach(([shorthand, longhan
 function processAtomicProps(flatProps, atomicMap, parentAtRule) {
     const resultQueue = [];
     for (const [key, style] of Object.entries(flatProps)) {
-        if (key.startsWith('@media') || key.startsWith('@container')) {
+        if ((0, helper_js_1.isAtRule)(key)) {
             processAtomicProps(style, atomicMap, key);
             continue;
         }
         resultQueue.push([key, style]);
     }
     for (const [property, value] of resultQueue) {
-        const CSSProp = (0, index_js_1.camelToKebabCase)(property);
-        const normalizedValue = (0, index_js_1.applyCssValue)(value, CSSProp);
+        const CSSProp = (0, helper_js_1.camelToKebabCase)(property);
+        const normalizedValue = (0, helper_js_1.applyCssValue)(value, CSSProp);
         const singlePropObj = { [property]: normalizedValue };
         const styleObj = parentAtRule ? { [parentAtRule]: singlePropObj } : singlePropObj;
-        const atomicHash = (0, index_js_1.genBase36Hash)(styleObj, 1, 8);
+        const atomicHash = (0, hash_js_1.genBase36Hash)(styleObj, 1, 8);
         if (atomicMap.has(atomicHash))
             continue;
-        let styleSheet = (0, index_js_1.transpileAtomic)(property, value, atomicHash);
+        let styleSheet = (0, transpile_atomic_js_1.transpileAtomic)(property, value, atomicHash);
         if (parentAtRule) {
             styleSheet = `${parentAtRule} { ${styleSheet} }`;
         }

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

@@ -16,7 +16,7 @@ function transpileAtomic(property, value, hash, pseudo) {
             selector += pseudo;
         }
         const atomicRule = `${selector} { ${CSSProp}: ${applyValue}; }`;
-        if (property.startsWith('@media') || property.startsWith('@container')) {
+        if ((0, helper_js_1.isAtRule)(property)) {
             return `${property} { ${atomicRule} }`;
         }
         return atomicRule;

package/dist/cjs/utils/transpile.js

@@ -54,7 +54,7 @@ function transpile(object, base36Hash, core) {
                     const styles = stringConverter(selector, value, indentLevel);
                     Object.assign(classSelector, styles);
                 }
-                else if (property.startsWith('@media') || property.startsWith('@container')) {
+                else if ((0, helper_js_1.isAtRule)(property)) {
                     const mediaRule = property;
                     let nestedRules = '';
                     let regularRules = '';

package/dist/esm/index.js

@@ -3,4 +3,4 @@ export { transpile } from './utils/transpile.js';
 export { transpileAtomic } from './utils/transpile-atomic.js';
 export { splitAtomicAndNested, processAtomicProps } from './utils/processor-atomic.js';
 export { overrideLonghand } from './utils/override-longhand.js';
-export { camelToKebabCase, applyCssValue, exceptionCamelCase } from './utils/helper.js';
+export { camelToKebabCase, applyCssValue, isAtRule, exceptionCamelCase } from './utils/helper.js';

package/dist/esm/utils/helper.js

@@ -56,3 +56,10 @@ export const camelToKebabCase = (property) => {
         .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
         .toLowerCase());
 };
+export const isAtRule = (prop) => {
+    return (prop.startsWith('@media') ||
+        prop.startsWith('@container') ||
+        prop.startsWith('@supports') ||
+        prop.startsWith('@layer') ||
+        prop.startsWith('@scope'));
+};

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

@@ -1,4 +1,6 @@
-import { camelToKebabCase, genBase36Hash, applyCssValue, transpileAtomic } from '../index.js';
+import { camelToKebabCase, applyCssValue, isAtRule } from './helper.js';
+import { transpileAtomic } from './transpile-atomic.js';
+import { genBase36Hash } from './hash.js';
 import { SHORTHAND_PROPERTIES } from './shorthand.js';
 function splitAtomicAndNested(obj, flat, nonFlat) {
     const queryFlat = flat;
@@ -7,7 +9,7 @@ function splitAtomicAndNested(obj, flat, nonFlat) {
         if (property.startsWith(':') || property.startsWith('[')) {
             queryNonFlat[property] = value;
         }
-        else if (property.startsWith('@media') || property.startsWith('@container')) {
+        else if (isAtRule(property)) {
             const innerFlat = {};
             const innerNonFlat = {};
             splitAtomicAndNested(value, innerFlat, innerNonFlat);
@@ -30,7 +32,7 @@ Object.entries(SHORTHAND_PROPERTIES).forEach(([shorthand, longhands]) => {
 function processAtomicProps(flatProps, atomicMap, parentAtRule) {
     const resultQueue = [];
     for (const [key, style] of Object.entries(flatProps)) {
-        if (key.startsWith('@media') || key.startsWith('@container')) {
+        if (isAtRule(key)) {
             processAtomicProps(style, atomicMap, key);
             continue;
         }

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

@@ -1,4 +1,4 @@
-import { applyCssValue, camelToKebabCase } from './helper.js';
+import { applyCssValue, camelToKebabCase, isAtRule } from './helper.js';
 import { SHORTHAND_PROPERTIES } from './shorthand.js';
 const ALL_LONGHANDS = new Set(Object.values(SHORTHAND_PROPERTIES).flat());
 function transpileAtomic(property, value, hash, pseudo) {
@@ -13,7 +13,7 @@ function transpileAtomic(property, value, hash, pseudo) {
             selector += pseudo;
         }
         const atomicRule = `${selector} { ${CSSProp}: ${applyValue}; }`;
-        if (property.startsWith('@media') || property.startsWith('@container')) {
+        if (isAtRule(property)) {
             return `${property} { ${atomicRule} }`;
         }
         return atomicRule;

package/dist/esm/utils/transpile.js

@@ -1,4 +1,4 @@
-import { camelToKebabCase, applyCssValue } from './helper.js';
+import { camelToKebabCase, applyCssValue, isAtRule } from './helper.js';
 const createKeyframes = (property, content) => {
     let keyframesRules = `${property} {\n`;
     for (const key in content) {
@@ -51,7 +51,7 @@ export function transpile(object, base36Hash, core) {
                     const styles = stringConverter(selector, value, indentLevel);
                     Object.assign(classSelector, styles);
                 }
-                else if (property.startsWith('@media') || property.startsWith('@container')) {
+                else if (isAtRule(property)) {
                     const mediaRule = property;
                     let nestedRules = '';
                     let regularRules = '';

package/dist/types/index.d.ts

@@ -4,4 +4,4 @@ export { transpile } from './utils/transpile.js';
 export { transpileAtomic } from './utils/transpile-atomic.js';
 export { splitAtomicAndNested, processAtomicProps } from './utils/processor-atomic.js';
 export { overrideLonghand } from './utils/override-longhand.js';
-export { camelToKebabCase, applyCssValue, exceptionCamelCase } from './utils/helper.js';
+export { camelToKebabCase, applyCssValue, isAtRule, exceptionCamelCase } from './utils/helper.js';

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

@@ -1,3 +1,4 @@
 export declare const exceptionCamelCase: string[];
 export declare const applyCssValue: (value: string | number, cssProp: string) => string;
 export declare const camelToKebabCase: (property: string) => string;
+export declare const isAtRule: (prop: string) => boolean;

package/dist/types/utils/override-longhand.d.ts

@@ -1,2 +1,2 @@
-import { CSSProperties } from '../types/css-properties.js';
+import type { CSSProperties } from '../types/css-properties.js';
 export declare const overrideLonghand: (style: CSSProperties) => CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zss-engine",
-  "version": "2.2.8",
+  "version": "2.3.0",
   "description": "A CSS-in-JS transpiler engine for building zero-runtime stylesheets at build time.",
   "funding": "https://github.com/sponsors/refirst11",
   "author": "Refirst 11",