zss-engine 0.2.48 → 0.2.50

package/dist/cjs/index.js

@@ -1,18 +1,21 @@
 "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.isTestingDevelopment = exports.isDevelopment = exports.isServer = void 0;
+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;
 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; } });
 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 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 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; } });
+Object.defineProperty(exports, "applyCssValue", { enumerable: true, get: function () { return helper_js_2.applyCssValue; } });
 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");

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transpileAtomic = transpileAtomic;
+const helper_1 = require("./helper");
+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 atomicRule = `.${hash} { ${CSSProp}: ${applyValue}; }`;
+        if (property.startsWith('@media') || property.startsWith('@container')) {
+            return `${property} {\n  ${atomicRule}\n}\n`;
+        }
+        return `${atomicRule}\n`;
+    }
+    return '';
+}

package/dist/cjs/utils/{transpiler.js → transpile.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transpiler = transpiler;
+exports.transpile = transpile;
 const helper_js_1 = require("./helper.js");
 const createKeyframes = (property, content) => {
     let keyframesRules = `${property} {\n`;
@@ -24,11 +24,11 @@ const createKeyframes = (property, content) => {
     keyframesRules += `}\n`;
     return keyframesRules;
 };
-function transpiler(object, base36Hash, core) {
+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')
@@ -47,9 +47,6 @@ function transpiler(object, base36Hash, core) {
                 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`;
                 }
@@ -111,7 +108,7 @@ function transpiler(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

@@ -1,8 +1,9 @@
 export { isServer, isDevelopment, isTestingDevelopment } from './utils/helper.js';
 export { genBase36Hash } from './utils/hash.js';
-export { transpiler } from './utils/transpiler.js';
+export { transpile } from './utils/transpile.js';
+export { transpileAtomic } from './utils/transpile-atomic.js';
 export { build } from './utils/build.js';
-export { camelToKebabCase } from './utils/helper.js';
+export { camelToKebabCase, applyCssValue } 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/utils/transpile-atomic.js

@@ -0,0 +1,14 @@
+import { applyCssValue, camelToKebabCase } from './helper';
+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}; }`;
+        if (property.startsWith('@media') || property.startsWith('@container')) {
+            return `${property} {\n  ${atomicRule}\n}\n`;
+        }
+        return `${atomicRule}\n`;
+    }
+    return '';
+}
+export { transpileAtomic };

package/dist/esm/utils/{transpiler.js → transpile.js}

@@ -21,11 +21,11 @@ const createKeyframes = (property, content) => {
     keyframesRules += `}\n`;
     return keyframesRules;
 };
-export function transpiler(object, base36Hash, core) {
+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')
@@ -44,9 +44,6 @@ export function transpiler(object, base36Hash, core) {
                 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`;
                 }
@@ -108,7 +105,7 @@ export function transpiler(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.48",
+  "version": "0.2.50",
   "description": "Zero-runtime StyleSheet Engine",
   "keywords": [
     "zero-runtime",

package/types/index.d.ts

@@ -5,9 +5,10 @@ export type { CreateValues, CreateTheme, ReturnVariableType, RxVariableSet, Retu
 export type { Join } from './types/main/join';
 export { isServer, isDevelopment, isTestingDevelopment } from './utils/helper.js';
 export { genBase36Hash } from './utils/hash.js';
-export { transpiler } from './utils/transpiler.js';
+export { transpile } from './utils/transpile.js';
+export { transpileAtomic } from './utils/transpile-atomic.js';
 export { build } from './utils/build.js';
-export { camelToKebabCase } from './utils/helper.js';
+export { camelToKebabCase, applyCssValue } 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/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/transpile-atomic.d.ts

@@ -0,0 +1,2 @@
+declare function transpileAtomic(property: string, value: string | number, hash: string): string;
+export { transpileAtomic };

package/types/utils/transpile.d.ts

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

package/types/utils/transpiler.d.ts

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