zss-engine 0.2.38 → 0.2.40

package/dist/cjs/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getServerCSS = exports.injectServerCSS = exports.injectClientGlobalCSS = exports.injectClientCSS = exports.camelToKebabCase = exports.build = exports.transpiler = exports.genBase36Hash = exports.isDevAndTest = 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, "isDevAndTest", { enumerable: true, get: function () { return helper_js_1.isDevAndTest; } });
+var hash_js_1 = require("./utils/hash.js");
+Object.defineProperty(exports, "genBase36Hash", { enumerable: true, get: function () { return hash_js_1.genBase36Hash; } });
+var transpiler_js_1 = require("./utils/transpiler.js");
+Object.defineProperty(exports, "transpiler", { enumerable: true, get: function () { return transpiler_js_1.transpiler; } });
+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");
+Object.defineProperty(exports, "camelToKebabCase", { enumerable: true, get: function () { return helper_js_2.camelToKebabCase; } });
+var inject_client_css_js_1 = require("./utils/inject-client-css.js");
+Object.defineProperty(exports, "injectClientCSS", { enumerable: true, get: function () { return inject_client_css_js_1.injectClientCSS; } });
+var inject_client_global_css_js_1 = require("./utils/inject-client-global-css.js");
+Object.defineProperty(exports, "injectClientGlobalCSS", { enumerable: true, get: function () { return inject_client_global_css_js_1.injectClientGlobalCSS; } });
+var inject_server_css_js_1 = require("./utils/inject-server-css.js");
+Object.defineProperty(exports, "injectServerCSS", { enumerable: true, get: function () { return inject_server_css_js_1.injectServerCSS; } });
+Object.defineProperty(exports, "getServerCSS", { enumerable: true, get: function () { return inject_server_css_js_1.getServerCSS; } });

package/dist/cjs/types/common/css-properties.js

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

package/dist/cjs/types/common/css-property.js

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

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

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

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

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

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

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

package/dist/cjs/utils/build.js

@@ -0,0 +1,27 @@
+'use server';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.build = void 0;
+const helper_js_1 = require("./helper.js");
+const build = async (styleSheet, filePath, global) => {
+    if (!helper_js_1.isServer)
+        return;
+    const fs = await import('fs');
+    const { styleText } = await import('util');
+    const message = global === '--global' ? styleText('underline', `✅Generated global CSS\n\n`) : styleText('underline', `✅Generated create CSS\n\n`);
+    try {
+        if (fs.existsSync(filePath)) {
+            const cssData = fs.readFileSync(filePath, 'utf-8');
+            if (!cssData.includes(styleSheet)) {
+                fs.appendFileSync(filePath, styleSheet, 'utf-8');
+                if (process.argv.includes('--view'))
+                    console.log(message + styleSheet);
+            }
+        }
+        return;
+    }
+    catch (error) {
+        console.error('Error writing to file:', error);
+    }
+};
+exports.build = build;

package/dist/cjs/utils/hash.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.genBase36Hash = genBase36Hash;
+const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+function simpleHash(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+    }
+    return Math.abs(hash);
+}
+function encodeBase36(num) {
+    let result = '';
+    do {
+        result = chars[num % 36] + result;
+        num = Math.floor(num / 36);
+    } while (num > 0);
+    return result;
+}
+function getStartingChar(hash) {
+    const chars = 'abcdefghijklmnopqrstuvwxyz';
+    return chars[hash % chars.length];
+}
+function genBase36Hash(object, n) {
+    const serialized = JSON.stringify(object);
+    const hash = simpleHash(serialized);
+    let base36Hash = encodeBase36(hash);
+    const startingChar = getStartingChar(hash);
+    while (base36Hash.length < n - 1) {
+        base36Hash = chars[hash % chars.length] + base36Hash;
+    }
+    return startingChar + base36Hash.slice(0, n - 1);
+}

package/dist/cjs/utils/helper.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.camelToKebabCase = exports.applyCssValue = exports.isDevAndTest = exports.isDevelopment = exports.isServer = void 0;
+const isWindowDefined = typeof window !== 'undefined';
+const isDocumentDefined = typeof document !== 'undefined';
+exports.isServer = !isWindowDefined || !isDocumentDefined;
+exports.isDevelopment = process.env.NODE_ENV === 'development';
+exports.isDevAndTest = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
+const exception = ['line-height', 'font-weight', 'opacity', 'scale', 'z-index', 'column-count', 'order', 'orphans', 'widows'];
+const applyCssValue = (value, cssProp) => {
+    if (typeof value === 'number') {
+        return exception.includes(cssProp) ? value.toString() : value + 'px';
+    }
+    return value;
+};
+exports.applyCssValue = applyCssValue;
+const camelToKebabCase = (property) => {
+    if (/^(ms|Moz|Webkit)/.test(property)) {
+        property = '-' + property;
+    }
+    return (property
+        .replace(/([A-Z]+)([0-9]+)/g, '$1$2')
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+        .toLowerCase());
+};
+exports.camelToKebabCase = camelToKebabCase;

package/dist/cjs/utils/inject-client-css.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStyleElement = createStyleElement;
+exports.injectClientCSS = injectClientCSS;
+const index_js_1 = require("../index.js");
+const styleSheets = {};
+const hashCache = {};
+function createStyleElement(hash) {
+    if (document.getElementById(hash))
+        return null;
+    const styleElement = document.createElement('style');
+    styleElement.setAttribute('id', hash);
+    styleElement.setAttribute('type', 'text/css');
+    styleSheets[hash] = styleElement;
+    document.head.appendChild(styleElement);
+    return styleSheets[hash];
+}
+function injectClientCSS(hash, sheet) {
+    if (index_js_1.isServer)
+        return;
+    requestAnimationFrame(() => {
+        styleCleanUp();
+    });
+    hashCache[hash] = hash;
+    const styleElement = createStyleElement(hash);
+    if (styleElement == null)
+        return;
+    styleElement.textContent = sheet;
+}
+function styleCleanUp() {
+    requestAnimationFrame(() => {
+        for (const hash in hashCache) {
+            const classElements = document.querySelectorAll(`[class*="${hash}"]`);
+            if (classElements.length === 0) {
+                removeStyleElement(hashCache[hash]);
+            }
+        }
+    });
+}
+function removeStyleElement(hash) {
+    if (styleSheets[hash]) {
+        delete styleSheets[hash];
+        if (hashCache.hasOwnProperty.call(hashCache, hash)) {
+            delete hashCache[hash];
+        }
+        const styleElement = document.getElementById(hash);
+        if (styleElement) {
+            document.head.removeChild(styleElement);
+        }
+    }
+}

package/dist/cjs/utils/inject-client-global-css.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectClientGlobalCSS = injectClientGlobalCSS;
+const index_js_1 = require("../index.js");
+function injectClientGlobalCSS(sheet) {
+    if (index_js_1.isServer)
+        return;
+    const existingStyleElement = document.querySelector(`[data-scope="global"]`);
+    if (existingStyleElement instanceof HTMLStyleElement) {
+        existingStyleElement.textContent += sheet;
+        return;
+    }
+    const styleElement = document.createElement('style');
+    styleElement.setAttribute('data-scope', 'global');
+    styleElement.setAttribute('type', 'text/css');
+    styleElement.textContent = sheet;
+    document.head.appendChild(styleElement);
+}

package/dist/cjs/utils/inject-server-css.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectServerCSS = injectServerCSS;
+exports.getServerCSS = getServerCSS;
+const styleSheets = {};
+function injectServerCSS(hash, sheet) {
+    styleSheets[hash] = sheet;
+}
+function getServerCSS() {
+    return Object.values(styleSheets).join('\n');
+}

package/dist/cjs/utils/transpiler.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transpiler = transpiler;
+const helper_js_1 = require("./helper.js");
+const createKeyframes = (property, content) => {
+    let keyframesRules = `${property} {\n`;
+    for (const key in content) {
+        if (Object.prototype.hasOwnProperty.call(content, key)) {
+            const keyframeValue = content[key];
+            keyframesRules += `  ${key} {\n`;
+            for (const prop in keyframeValue) {
+                if (Object.prototype.hasOwnProperty.call(keyframeValue, prop)) {
+                    const CSSProp = (0, helper_js_1.camelToKebabCase)(prop);
+                    const value = keyframeValue[prop];
+                    if (typeof value === 'string' || typeof value === 'number') {
+                        const applyValue = (0, helper_js_1.applyCssValue)(value, CSSProp);
+                        keyframesRules += `    ${CSSProp}: ${applyValue};\n`;
+                    }
+                }
+            }
+            keyframesRules += `  }\n`;
+        }
+    }
+    keyframesRules += `}\n`;
+    return keyframesRules;
+};
+function transpiler(object, base36Hash, core) {
+    let styleSheet = '';
+    const mediaQueries = [];
+    const classNameType = (property) => {
+        return core === '--global' ? property : `.${property}_${base36Hash}`;
+    };
+    const rules = (indent, rulesValue, property) => {
+        if (typeof property !== 'string')
+            return '';
+        const value = rulesValue[property];
+        const cssProp = (0, helper_js_1.camelToKebabCase)(property);
+        return `${indent}${cssProp}: ${value};\n`;
+    };
+    const stringConverter = (className, properties, indentLevel = 0) => {
+        const classSelector = {};
+        const indent = ''.repeat(indentLevel);
+        const innerIndent = ' '.repeat(indentLevel + 1);
+        let cssRule = '';
+        for (const property in properties) {
+            if (Object.prototype.hasOwnProperty.call(properties, property)) {
+                const value = properties[property];
+                if (typeof value === 'string' || typeof value === 'number') {
+                    let CSSProp = (0, helper_js_1.camelToKebabCase)(property);
+                    if (property.startsWith('ms')) {
+                        CSSProp = `-${CSSProp}`;
+                    }
+                    const applyValue = (0, helper_js_1.applyCssValue)(value, CSSProp);
+                    cssRule += `  ${CSSProp}: ${applyValue};\n`;
+                }
+                else if (!property.startsWith('@')) {
+                    const kebabPseudoSelector = (0, helper_js_1.camelToKebabCase)(property.replace('&', ''));
+                    const styles = stringConverter(className + kebabPseudoSelector, value, indentLevel);
+                    Object.assign(classSelector, styles);
+                }
+                else if (property.startsWith('@media') || property.startsWith('@container')) {
+                    const mediaRule = property;
+                    let nestedRules = '';
+                    let regularRules = '';
+                    for (const mediaProp in value) {
+                        if (Object.prototype.hasOwnProperty.call(value, mediaProp)) {
+                            const mediaValue = value[mediaProp];
+                            const isColon = mediaProp.startsWith(':');
+                            const isAnd = mediaProp.startsWith('&');
+                            if (isColon || isAnd) {
+                                const kebabMediaProp = (0, helper_js_1.camelToKebabCase)(mediaProp.replace('&', ''));
+                                let pseudoClassRule = '';
+                                if (typeof mediaValue === 'object' && mediaValue !== null) {
+                                    for (const pseudoProp in mediaValue) {
+                                        if (Object.prototype.hasOwnProperty.call(mediaValue, pseudoProp)) {
+                                            const CSSProp = (0, helper_js_1.camelToKebabCase)(pseudoProp);
+                                            const applyValue = (0, helper_js_1.applyCssValue)(mediaValue[pseudoProp], CSSProp);
+                                            pseudoClassRule += rules(innerIndent + '  ', { [pseudoProp]: applyValue }, pseudoProp);
+                                        }
+                                    }
+                                }
+                                nestedRules += `${innerIndent}${className}${kebabMediaProp} {\n${pseudoClassRule}${innerIndent}}\n`;
+                            }
+                            else {
+                                const CSSProp = (0, helper_js_1.camelToKebabCase)(mediaProp);
+                                const applyValue = (0, helper_js_1.applyCssValue)(mediaValue, CSSProp);
+                                regularRules += rules(innerIndent + '  ', { [mediaProp]: applyValue }, mediaProp);
+                            }
+                        }
+                    }
+                    if (regularRules) {
+                        mediaQueries.push({
+                            media: mediaRule,
+                            css: `${mediaRule} {\n${innerIndent}${className} {\n${regularRules}  }\n${nestedRules}${indent}}${indent}\n`,
+                        });
+                    }
+                    else {
+                        mediaQueries.push({
+                            media: mediaRule,
+                            css: `${mediaRule} {\n${nestedRules}${indent}}\n`,
+                        });
+                    }
+                }
+            }
+        }
+        classSelector[className] = cssRule;
+        return classSelector;
+    };
+    for (const property in object) {
+        if (property.startsWith('@keyframes')) {
+            const keyframesContent = object[property];
+            styleSheet += createKeyframes(property, keyframesContent);
+        }
+        const classSelectors = stringConverter(classNameType(property), object[property], 1);
+        for (const selector in classSelectors) {
+            if (!selector.startsWith('@keyframes') && classSelectors[selector]) {
+                styleSheet += selector + ' {\n' + classSelectors[selector] + '}\n';
+            }
+        }
+    }
+    mediaQueries.forEach(({ css }) => {
+        styleSheet += css;
+    });
+    return { styleSheet };
+}

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+export { isServer, isDevelopment, isDevAndTest } from './utils/helper.js';
+export { genBase36Hash } from './utils/hash.js';
+export { transpiler } from './utils/transpiler.js';
+export { build } from './utils/build.js';
+export { camelToKebabCase } from './utils/helper.js';
+export { injectClientCSS } from './utils/inject-client-css.js';
+export { injectClientGlobalCSS } from './utils/inject-client-global-css.js';
+export { injectServerCSS, getServerCSS } from './utils/inject-server-css.js';

package/dist/esm/types/common/css-properties.js

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

package/dist/esm/types/common/css-property.js

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

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

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

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

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

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

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

package/dist/esm/utils/build.js

@@ -0,0 +1,23 @@
+'use server';
+import { isServer } from './helper.js';
+export const build = async (styleSheet, filePath, global) => {
+    if (!isServer)
+        return;
+    const fs = await import('fs');
+    const { styleText } = await import('util');
+    const message = global === '--global' ? styleText('underline', `✅Generated global CSS\n\n`) : styleText('underline', `✅Generated create CSS\n\n`);
+    try {
+        if (fs.existsSync(filePath)) {
+            const cssData = fs.readFileSync(filePath, 'utf-8');
+            if (!cssData.includes(styleSheet)) {
+                fs.appendFileSync(filePath, styleSheet, 'utf-8');
+                if (process.argv.includes('--view'))
+                    console.log(message + styleSheet);
+            }
+        }
+        return;
+    }
+    catch (error) {
+        console.error('Error writing to file:', error);
+    }
+};

package/dist/esm/utils/hash.js

@@ -0,0 +1,31 @@
+const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+function simpleHash(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+    }
+    return Math.abs(hash);
+}
+function encodeBase36(num) {
+    let result = '';
+    do {
+        result = chars[num % 36] + result;
+        num = Math.floor(num / 36);
+    } while (num > 0);
+    return result;
+}
+function getStartingChar(hash) {
+    const chars = 'abcdefghijklmnopqrstuvwxyz';
+    return chars[hash % chars.length];
+}
+export function genBase36Hash(object, n) {
+    const serialized = JSON.stringify(object);
+    const hash = simpleHash(serialized);
+    let base36Hash = encodeBase36(hash);
+    const startingChar = getStartingChar(hash);
+    while (base36Hash.length < n - 1) {
+        base36Hash = chars[hash % chars.length] + base36Hash;
+    }
+    return startingChar + base36Hash.slice(0, n - 1);
+}

package/dist/esm/utils/helper.js

@@ -0,0 +1,22 @@
+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 isDevAndTest = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
+const exception = ['line-height', 'font-weight', 'opacity', 'scale', 'z-index', 'column-count', 'order', 'orphans', 'widows'];
+export const applyCssValue = (value, cssProp) => {
+    if (typeof value === 'number') {
+        return exception.includes(cssProp) ? value.toString() : value + 'px';
+    }
+    return value;
+};
+export const camelToKebabCase = (property) => {
+    if (/^(ms|Moz|Webkit)/.test(property)) {
+        property = '-' + property;
+    }
+    return (property
+        .replace(/([A-Z]+)([0-9]+)/g, '$1$2')
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+        .toLowerCase());
+};

package/dist/esm/utils/inject-client-css.js

@@ -0,0 +1,47 @@
+import { isServer } from '../index.js';
+const styleSheets = {};
+const hashCache = {};
+export function createStyleElement(hash) {
+    if (document.getElementById(hash))
+        return null;
+    const styleElement = document.createElement('style');
+    styleElement.setAttribute('id', hash);
+    styleElement.setAttribute('type', 'text/css');
+    styleSheets[hash] = styleElement;
+    document.head.appendChild(styleElement);
+    return styleSheets[hash];
+}
+export function injectClientCSS(hash, sheet) {
+    if (isServer)
+        return;
+    requestAnimationFrame(() => {
+        styleCleanUp();
+    });
+    hashCache[hash] = hash;
+    const styleElement = createStyleElement(hash);
+    if (styleElement == null)
+        return;
+    styleElement.textContent = sheet;
+}
+function styleCleanUp() {
+    requestAnimationFrame(() => {
+        for (const hash in hashCache) {
+            const classElements = document.querySelectorAll(`[class*="${hash}"]`);
+            if (classElements.length === 0) {
+                removeStyleElement(hashCache[hash]);
+            }
+        }
+    });
+}
+function removeStyleElement(hash) {
+    if (styleSheets[hash]) {
+        delete styleSheets[hash];
+        if (hashCache.hasOwnProperty.call(hashCache, hash)) {
+            delete hashCache[hash];
+        }
+        const styleElement = document.getElementById(hash);
+        if (styleElement) {
+            document.head.removeChild(styleElement);
+        }
+    }
+}

package/dist/esm/utils/inject-client-global-css.js

@@ -0,0 +1,15 @@
+import { isServer } from '../index.js';
+export function injectClientGlobalCSS(sheet) {
+    if (isServer)
+        return;
+    const existingStyleElement = document.querySelector(`[data-scope="global"]`);
+    if (existingStyleElement instanceof HTMLStyleElement) {
+        existingStyleElement.textContent += sheet;
+        return;
+    }
+    const styleElement = document.createElement('style');
+    styleElement.setAttribute('data-scope', 'global');
+    styleElement.setAttribute('type', 'text/css');
+    styleElement.textContent = sheet;
+    document.head.appendChild(styleElement);
+}

package/dist/esm/utils/inject-server-css.js

@@ -0,0 +1,7 @@
+const styleSheets = {};
+export function injectServerCSS(hash, sheet) {
+    styleSheets[hash] = sheet;
+}
+export function getServerCSS() {
+    return Object.values(styleSheets).join('\n');
+}

package/dist/esm/utils/transpiler.js

@@ -0,0 +1,122 @@
+import { camelToKebabCase, applyCssValue } from './helper.js';
+const createKeyframes = (property, content) => {
+    let keyframesRules = `${property} {\n`;
+    for (const key in content) {
+        if (Object.prototype.hasOwnProperty.call(content, key)) {
+            const keyframeValue = content[key];
+            keyframesRules += `  ${key} {\n`;
+            for (const prop in keyframeValue) {
+                if (Object.prototype.hasOwnProperty.call(keyframeValue, prop)) {
+                    const CSSProp = camelToKebabCase(prop);
+                    const value = keyframeValue[prop];
+                    if (typeof value === 'string' || typeof value === 'number') {
+                        const applyValue = applyCssValue(value, CSSProp);
+                        keyframesRules += `    ${CSSProp}: ${applyValue};\n`;
+                    }
+                }
+            }
+            keyframesRules += `  }\n`;
+        }
+    }
+    keyframesRules += `}\n`;
+    return keyframesRules;
+};
+export function transpiler(object, base36Hash, core) {
+    let styleSheet = '';
+    const mediaQueries = [];
+    const classNameType = (property) => {
+        return core === '--global' ? property : `.${property}_${base36Hash}`;
+    };
+    const rules = (indent, rulesValue, property) => {
+        if (typeof property !== 'string')
+            return '';
+        const value = rulesValue[property];
+        const cssProp = camelToKebabCase(property);
+        return `${indent}${cssProp}: ${value};\n`;
+    };
+    const stringConverter = (className, properties, indentLevel = 0) => {
+        const classSelector = {};
+        const indent = ''.repeat(indentLevel);
+        const innerIndent = ' '.repeat(indentLevel + 1);
+        let cssRule = '';
+        for (const property in properties) {
+            if (Object.prototype.hasOwnProperty.call(properties, property)) {
+                const value = properties[property];
+                if (typeof value === 'string' || typeof value === 'number') {
+                    let CSSProp = camelToKebabCase(property);
+                    if (property.startsWith('ms')) {
+                        CSSProp = `-${CSSProp}`;
+                    }
+                    const applyValue = applyCssValue(value, CSSProp);
+                    cssRule += `  ${CSSProp}: ${applyValue};\n`;
+                }
+                else if (!property.startsWith('@')) {
+                    const kebabPseudoSelector = camelToKebabCase(property.replace('&', ''));
+                    const styles = stringConverter(className + kebabPseudoSelector, value, indentLevel);
+                    Object.assign(classSelector, styles);
+                }
+                else if (property.startsWith('@media') || property.startsWith('@container')) {
+                    const mediaRule = property;
+                    let nestedRules = '';
+                    let regularRules = '';
+                    for (const mediaProp in value) {
+                        if (Object.prototype.hasOwnProperty.call(value, mediaProp)) {
+                            const mediaValue = value[mediaProp];
+                            const isColon = mediaProp.startsWith(':');
+                            const isAnd = mediaProp.startsWith('&');
+                            if (isColon || isAnd) {
+                                const kebabMediaProp = camelToKebabCase(mediaProp.replace('&', ''));
+                                let pseudoClassRule = '';
+                                if (typeof mediaValue === 'object' && mediaValue !== null) {
+                                    for (const pseudoProp in mediaValue) {
+                                        if (Object.prototype.hasOwnProperty.call(mediaValue, pseudoProp)) {
+                                            const CSSProp = camelToKebabCase(pseudoProp);
+                                            const applyValue = applyCssValue(mediaValue[pseudoProp], CSSProp);
+                                            pseudoClassRule += rules(innerIndent + '  ', { [pseudoProp]: applyValue }, pseudoProp);
+                                        }
+                                    }
+                                }
+                                nestedRules += `${innerIndent}${className}${kebabMediaProp} {\n${pseudoClassRule}${innerIndent}}\n`;
+                            }
+                            else {
+                                const CSSProp = camelToKebabCase(mediaProp);
+                                const applyValue = applyCssValue(mediaValue, CSSProp);
+                                regularRules += rules(innerIndent + '  ', { [mediaProp]: applyValue }, mediaProp);
+                            }
+                        }
+                    }
+                    if (regularRules) {
+                        mediaQueries.push({
+                            media: mediaRule,
+                            css: `${mediaRule} {\n${innerIndent}${className} {\n${regularRules}  }\n${nestedRules}${indent}}${indent}\n`,
+                        });
+                    }
+                    else {
+                        mediaQueries.push({
+                            media: mediaRule,
+                            css: `${mediaRule} {\n${nestedRules}${indent}}\n`,
+                        });
+                    }
+                }
+            }
+        }
+        classSelector[className] = cssRule;
+        return classSelector;
+    };
+    for (const property in object) {
+        if (property.startsWith('@keyframes')) {
+            const keyframesContent = object[property];
+            styleSheet += createKeyframes(property, keyframesContent);
+        }
+        const classSelectors = stringConverter(classNameType(property), object[property], 1);
+        for (const selector in classSelectors) {
+            if (!selector.startsWith('@keyframes') && classSelectors[selector]) {
+                styleSheet += selector + ' {\n' + classSelectors[selector] + '}\n';
+            }
+        }
+    }
+    mediaQueries.forEach(({ css }) => {
+        styleSheet += css;
+    });
+    return { styleSheet };
+}