zss-engine 2.2.7 → 2.3.0

package/dist/cjs/index.js

@@ -1,10 +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 = 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; } });
-Object.defineProperty(exports, "isTestingDevelopment", { enumerable: true, get: function () { return helper_js_1.isTestingDevelopment; } });
+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");
@@ -16,7 +12,8 @@ Object.defineProperty(exports, "splitAtomicAndNested", { enumerable: true, get:
 Object.defineProperty(exports, "processAtomicProps", { enumerable: true, get: function () { return processor_atomic_js_1.processAtomicProps; } });
 var override_longhand_js_1 = require("./utils/override-longhand.js");
 Object.defineProperty(exports, "overrideLonghand", { enumerable: true, get: function () { return override_longhand_js_1.overrideLonghand; } });
-var helper_js_2 = require("./utils/helper.js");
-Object.defineProperty(exports, "camelToKebabCase", { enumerable: true, get: function () { return helper_js_2.camelToKebabCase; } });
-Object.defineProperty(exports, "applyCssValue", { enumerable: true, get: function () { return helper_js_2.applyCssValue; } });
-Object.defineProperty(exports, "exceptionCamelCase", { enumerable: true, get: function () { return helper_js_2.exceptionCamelCase; } });
+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,12 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.camelToKebabCase = exports.applyCssValue = exports.exceptionCamelCase = exports.isTestingDevelopment = exports.isDevelopment = exports.isServer = 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 isWindowDefined = typeof window !== 'undefined';
-const isDocumentDefined = typeof document !== 'undefined';
-exports.isServer = !isWindowDefined || !isDocumentDefined;
-exports.isDevelopment = process.env.NODE_ENV === 'development';
-exports.isTestingDevelopment = process.env.NODE_ENV === 'test' || exports.isDevelopment;
 const exception = [
     'animation-iteration-count',
     'aspect-ratio',
@@ -66,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

@@ -1,7 +1,6 @@
-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 { 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

@@ -1,9 +1,4 @@
 import { hexToColorName } from './hex-to-color-name.js';
-const isWindowDefined = typeof window !== 'undefined';
-const isDocumentDefined = typeof document !== 'undefined';
-export const isServer = !isWindowDefined || !isDocumentDefined;
-export const isDevelopment = process.env.NODE_ENV === 'development';
-export const isTestingDevelopment = process.env.NODE_ENV === 'test' || isDevelopment;
 const exception = [
     'animation-iteration-count',
     'aspect-ratio',
@@ -61,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

@@ -1,10 +1,7 @@
-export type { CSSProperties } from './types/common/css-properties';
-export type { CreateTheme } from './types/main/variableTypes';
-export type { ViewTransition } from './types/main/viewTransition';
-export { isServer, isDevelopment, isTestingDevelopment } from './utils/helper.js';
+export type { CSSProperties } from './types/css-properties.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 { 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/types/css-properties.d.ts

@@ -0,0 +1,23 @@
+import type { Properties } from 'csstype';
+type CSSVariableKey = `--${string}`;
+type CSSVariableValue = `var(${CSSVariableKey})`;
+type CSSVariableProperty = {
+    [key: CSSVariableKey]: string | number;
+};
+type BaseCSSProperties = {
+    [K in keyof Properties]: Properties[K] | CSSVariableValue;
+};
+type ArrayString = `[${string}`;
+type ArraySelector = {
+    [key in ArrayString]: BaseCSSProperties | CSSVariableProperty;
+};
+type ColonString = `:${string}`;
+type ColonSelector = {
+    [key in ColonString]: BaseCSSProperties | CSSVariableProperty;
+};
+type Query = `@media ${string}` | `@container ${string}`;
+type QuerySelector = {
+    [K in Query]: BaseCSSProperties | ColonSelector | ArraySelector | CSSVariableProperty;
+};
+export type CSSProperties = BaseCSSProperties | ArraySelector | ColonSelector | QuerySelector | CSSVariableProperty;
+export {};

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

@@ -1,6 +1,4 @@
-export declare const isServer: boolean;
-export declare const isDevelopment: boolean;
-export declare const isTestingDevelopment: boolean;
 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/common/css-properties.js';
+import type { CSSProperties } from '../types/css-properties.js';
 export declare const overrideLonghand: (style: CSSProperties) => CSSProperties;

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

@@ -1,4 +1,4 @@
-import type { CSSHTML } from '../types/main/global.js';
-export declare function transpile(object: CSSHTML, base36Hash?: string, core?: string): {
+import type { CSSProperties } from '../types/css-properties.js';
+export declare function transpile(object: Record<string, CSSProperties>, base36Hash?: string, core?: string): {
     styleSheet: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zss-engine",
-  "version": "2.2.7",
+  "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",

package/dist/cjs/types/main/global.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/types/main/variableTypes.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/types/main/viewTransition.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/types/main/global.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/types/main/variableTypes.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/types/main/viewTransition.js

@@ -1 +0,0 @@
-export {};

package/dist/types/types/common/css-properties.d.ts

@@ -1,46 +0,0 @@
-import type { CSSVariableValue, CSSVariableProperty } from '../main/variableTypes';
-import type { Properties, Property } from 'csstype';
-type ColorValue = Exclude<Property.Color, '-moz-initial'> | (string & {});
-type CSSColorProperty = Exclude<ColorValue, SystemColorKeyword>;
-type SystemColorKeyword = 'ActiveBorder' | 'ActiveCaption' | 'AppWorkspace' | 'Background' | 'ButtonFace' | 'ButtonHighlight' | 'ButtonShadow' | 'ButtonText' | 'CaptionText' | 'GrayText' | 'Highlight' | 'HighlightText' | 'InactiveBorder' | 'InactiveCaption' | 'InactiveCaptionText' | 'InfoBackground' | 'InfoText' | 'Menu' | 'MenuText' | 'Scrollbar' | 'ThreeDDarkShadow' | 'ThreeDFace' | 'ThreeDHighlight' | 'ThreeDLightShadow' | 'ThreeDShadow' | 'Window' | 'WindowFrame' | 'WindowText';
-type ExcludeMozInitial<T> = Exclude<T, '-moz-initial'>;
-type CSSTypeProperties = Properties<number | (string & {})>;
-type CustomProperties = {
-    [K in keyof CSSTypeProperties]: ExcludeMozInitial<CSSTypeProperties[K]>;
-};
-type BaseCSSProperties = {
-    [K in keyof CustomProperties]: CustomProperties[K] | CSSVariableValue;
-};
-interface CommonProperties extends BaseCSSProperties {
-    accentColor?: CSSColorProperty;
-    color?: CSSColorProperty;
-    borderLeftColor?: CSSColorProperty;
-    borderRightColor?: CSSColorProperty;
-    borderTopColor?: CSSColorProperty;
-    borderBottomColor?: CSSColorProperty;
-    borderBlockColor?: CSSColorProperty;
-    borderBlockStartColor?: CSSColorProperty;
-    borderBlockEndColor?: CSSColorProperty;
-    borderInlineColor?: CSSColorProperty;
-    borderInlineStartColor?: CSSColorProperty;
-    borderInlineEndColor?: CSSColorProperty;
-    backgroundColor?: CSSColorProperty;
-    outlineColor?: CSSColorProperty;
-    textDecorationColor?: CSSColorProperty;
-    caretColor?: CSSColorProperty;
-    columnRuleColor?: CSSColorProperty;
-}
-type ArrayString = `[${string}`;
-type ArraySelector = {
-    [key in ArrayString]: CommonProperties | CSSVariableProperty;
-};
-type ColonString = `:${string}`;
-type ColonSelector = {
-    [key in ColonString]: CommonProperties | CSSVariableProperty;
-};
-export type Query = `@media ${string}` | `@container ${string}`;
-type QuerySelector = {
-    [K in Query]: CommonProperties | ColonSelector | ArraySelector | CSSVariableProperty;
-};
-export type CSSProperties = CommonProperties | ArraySelector | ColonSelector | QuerySelector | CSSVariableProperty;
-export {};

package/dist/types/types/main/global.d.ts

@@ -1,37 +0,0 @@
-import type { CSSProperties, Query } from '../common/css-properties';
-type JSXType = keyof HTMLElementTagNameMap | '*' | ':root';
-type HTMLSelector = {
-    [K in JSXType]: CSSProperties;
-};
-type ClassName = `.${string}`;
-type ClassNameSelector = {
-    [K in ClassName]: CSSProperties;
-};
-type Attribute = `${string}[${string}]${string}`;
-type AttributeSelector = {
-    [K in Attribute]: CSSProperties;
-};
-type Consecutive = `${JSXType} ${string}`;
-type ConsecutiveSelector = {
-    [K in Consecutive]: CSSProperties;
-};
-type PseudoClass = `${JSXType}:${string}`;
-type PseudoClassSelector = {
-    [K in PseudoClass]: CSSProperties;
-};
-type PseudoElement = `::${string}`;
-type PseudoElementSelector = {
-    [K in PseudoElement]: CSSProperties;
-};
-type KeyframesInSelector = 'from' | 'to' | `${number}%`;
-export type Keyframes = {
-    [K in KeyframesInSelector]?: CSSProperties;
-};
-type KeyframesSelector = {
-    [K in `@keyframes ${string}`]: Keyframes;
-};
-type QuerySelectorHTML = {
-    [K in Query]: CSSHTML;
-};
-export type CSSHTML = HTMLSelector | ClassNameSelector | AttributeSelector | ConsecutiveSelector | PseudoClassSelector | PseudoElementSelector | KeyframesSelector | QuerySelectorHTML;
-export {};

package/dist/types/types/main/variableTypes.d.ts

@@ -1,7 +0,0 @@
-type CSSVariableKey = `--${string}`;
-export type CSSVariableValue = `var(${CSSVariableKey})`;
-export type CSSVariableProperty = {
-    [key: CSSVariableKey]: string | number;
-};
-export type CreateTheme = Record<string, Record<string, string | number>>;
-export {};

package/dist/types/types/main/viewTransition.d.ts

@@ -1,7 +0,0 @@
-import { CSSProperties } from '../common/css-properties';
-export type ViewTransition = {
-    group?: CSSProperties;
-    imagePair?: CSSProperties;
-    new?: CSSProperties;
-    old?: CSSProperties;
-};