zss-engine 0.2.64 → 0.2.66

package/dist/cjs/utils/build.js

@@ -7,8 +7,7 @@ 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`);
+    const message = global === '--global' ? `💫 style.global(...):\n\n` : `💫 style.props(...):\n\n`;
     try {
         if (fs.existsSync(filePath)) {
             const cssData = fs.readFileSync(filePath, 'utf-8');

package/dist/cjs/utils/hash.js

@@ -2,15 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.genBase36Hash = genBase36Hash;
 function deepNormalize(obj) {
-    if (obj === null || obj === undefined)
+    if (obj === null)
         return 'null';
+    if (obj === undefined)
+        return 'undefined';
     if (typeof obj !== 'object')
         return String(obj);
     if (Array.isArray(obj)) {
         return '[' + obj.map(deepNormalize).join(',') + ']';
     }
-    const keys = Object.keys(obj).sort();
-    const pairs = keys.map(key => `"${key}":${deepNormalize(obj[key])}`);
+    const recordObj = obj;
+    const keys = Object.keys(recordObj).sort();
+    const pairs = keys.map(key => `"${key}":${deepNormalize(recordObj[key])}`);
     return '{' + pairs.join(',') + '}';
 }
 function murmurhash3_32(str, seed = 0) {

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.splitAtomicAndNested = splitAtomicAndNested;
 exports.processAtomicProps = processAtomicProps;
 const index_js_1 = require("../index.js");
+const shorthand_1 = require("./shorthand");
 function splitAtomicAndNested(obj, flat, nonFlat) {
     Object.entries(obj).forEach(([property, value]) => {
         if (property.startsWith(':') || property.startsWith('&')) {
@@ -25,25 +26,53 @@ function splitAtomicAndNested(obj, flat, nonFlat) {
         }
     });
 }
+const LONG_TO_SHORT = {};
+Object.entries(shorthand_1.SHORTHAND_PROPERTIES).forEach(([shorthand, longhands]) => {
+    longhands.forEach(long => {
+        LONG_TO_SHORT[long] = shorthand;
+    });
+});
 function processAtomicProps(flatProps, atomicHashes, allStyleSheets, parentAtRule) {
-    Object.entries(flatProps).forEach(([property, value]) => {
+    const seen = new Set();
+    const resultQueue = [];
+    for (const [property, value] of Object.entries(flatProps)) {
         if (property.startsWith('@media') || property.startsWith('@container')) {
             processAtomicProps(value, atomicHashes, allStyleSheets, property);
+            continue;
         }
-        else {
-            const CSSProp = (0, index_js_1.camelToKebabCase)(property);
-            const normalizedValue = (0, index_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);
-            if (atomicHashes.has(atomicHash))
-                return;
-            atomicHashes.add(atomicHash);
-            let styleSheet = (0, index_js_1.transpileAtomic)(property, value, atomicHash);
-            if (parentAtRule) {
-                styleSheet = `${parentAtRule} { ${styleSheet} }`;
+        const kebab = (0, index_js_1.camelToKebabCase)(property);
+        if (shorthand_1.SHORTHAND_PROPERTIES[kebab]) {
+            const longhands = shorthand_1.SHORTHAND_PROPERTIES[kebab];
+            longhands.forEach(l => seen.delete(l));
+            seen.add(kebab);
+            resultQueue.push([property, value]);
+        }
+        else if (kebab in LONG_TO_SHORT) {
+            const shorthand = LONG_TO_SHORT[kebab];
+            if (seen.has(shorthand)) {
+                continue;
             }
-            allStyleSheets.add(styleSheet + '\n');
+            seen.add(kebab);
+            resultQueue.push([property, value]);
         }
-    });
+        else {
+            seen.add(kebab);
+            resultQueue.push([property, value]);
+        }
+    }
+    for (const [property, value] of resultQueue) {
+        const CSSProp = (0, index_js_1.camelToKebabCase)(property);
+        const normalizedValue = (0, index_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);
+        if (atomicHashes.has(atomicHash))
+            continue;
+        atomicHashes.add(atomicHash);
+        let styleSheet = (0, index_js_1.transpileAtomic)(property, value, atomicHash);
+        if (parentAtRule) {
+            styleSheet = `${parentAtRule} { ${styleSheet} }`;
+        }
+        allStyleSheets.add(styleSheet + '\n');
+    }
 }

package/dist/cjs/utils/shorthand.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SHORTHAND_PROPERTIES = void 0;
+exports.SHORTHAND_PROPERTIES = {
+    margin: ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'],
+    padding: ['padding-top', 'padding-bottom', 'padding-left', 'padding-right'],
+    background: [
+        'background-image',
+        'background-size',
+        'background-position',
+        'background-repeat',
+        'background-origin',
+        'background-clip',
+        'background-attachment',
+        'background-color',
+    ],
+    font: ['font-style', 'font-variant', 'font-weight', 'font-stretch', 'font-size', 'font-family', 'line-height'],
+    border: [
+        'border-top-width',
+        'border-bottom-width',
+        'border-left-width',
+        'border-right-width',
+        'border-top-style',
+        'border-bottom-style',
+        'border-left-style',
+        'border-right-style',
+        'border-top-color',
+        'border-bottom-color',
+        'border-left-color',
+        'border-right-color',
+    ],
+    'border-top': ['border-top-width', 'border-top-style', 'border-top-color'],
+    'border-bottom': ['border-bottom-width', 'border-bottom-style', 'border-bottom-color'],
+    'border-left': ['border-left-width', 'border-left-style', 'border-left-color'],
+    'border-right': ['border-right-width', 'border-right-style', 'border-right-color'],
+    'border-width': ['border-top-width', 'border-bottom-width', 'border-left-width', 'border-right-width'],
+    'border-style': ['border-top-style', 'border-bottom-style', 'border-left-style', 'border-right-style'],
+    'border-color': ['border-top-color', 'border-bottom-color', 'border-left-color', 'border-right-color'],
+    'list-style': ['list-style-type', 'list-style-position', 'list-style-image'],
+    'border-radius': ['border-top-right-radius', 'border-top-left-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'],
+    transition: ['transition-delay', 'transition-duration', 'transition-property', 'transition-timing-function'],
+    animation: [
+        'animation-name',
+        'animation-duration',
+        'animation-timing-function',
+        'animation-delay',
+        'animation-iteration-count',
+        'animation-direction',
+        'animation-fill-mode',
+        'animation-play-state',
+    ],
+    'border-block-end': ['border-block-end-width', 'border-block-end-style', 'border-block-end-color'],
+    'border-block-start': ['border-block-start-width', 'border-block-start-style', 'border-block-start-color'],
+    'border-image': ['border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset', 'border-image-repeat'],
+    'border-inline-end': ['border-inline-end-width', 'border-inline-end-style', 'border-inline-end-color'],
+    'border-inline-start': ['border-inline-start-width', 'border-inline-start-style', 'border-inline-start-color'],
+    'column-rule': ['column-rule-width', 'column-rule-style', 'column-rule-color'],
+    columns: ['column-width', 'column-count'],
+    flex: ['flex-grow', 'flex-shrink', 'flex-basis'],
+    'flex-flow': ['flex-direction', 'flex-wrap'],
+    grid: [
+        'grid-template-rows',
+        'grid-template-columns',
+        'grid-template-areas',
+        'grid-auto-rows',
+        'grid-auto-columns',
+        'grid-auto-flow',
+        'grid-column-gap',
+        'grid-row-gap',
+    ],
+    'grid-area': ['grid-row-start', 'grid-column-start', 'grid-row-end', 'grid-column-end'],
+    'grid-column': ['grid-column-start', 'grid-column-end'],
+    'grid-gap': ['grid-row-gap', 'grid-column-gap'],
+    'grid-row': ['grid-row-start', 'grid-row-end'],
+    'grid-template': ['grid-template-columns', 'grid-template-rows', 'grid-template-areas'],
+    outline: ['outline-color', 'outline-style', 'outline-width'],
+    'text-decoration': ['text-decoration-color', 'text-decoration-style', 'text-decoration-line'],
+    'text-emphasis': ['text-emphasis-style', 'text-emphasis-color'],
+    mask: ['mask-image', 'mask-mode', 'mask-position', 'mask-size', 'mask-repeat', 'mask-origin', 'mask-clip', 'mask-composite'],
+};

package/dist/esm/utils/build.js

@@ -4,8 +4,7 @@ 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`);
+    const message = global === '--global' ? `💫 style.global(...):\n\n` : `💫 style.props(...):\n\n`;
     try {
         if (fs.existsSync(filePath)) {
             const cssData = fs.readFileSync(filePath, 'utf-8');

package/dist/esm/utils/hash.js

@@ -1,13 +1,16 @@
 function deepNormalize(obj) {
-    if (obj === null || obj === undefined)
+    if (obj === null)
         return 'null';
+    if (obj === undefined)
+        return 'undefined';
     if (typeof obj !== 'object')
         return String(obj);
     if (Array.isArray(obj)) {
         return '[' + obj.map(deepNormalize).join(',') + ']';
     }
-    const keys = Object.keys(obj).sort();
-    const pairs = keys.map(key => `"${key}":${deepNormalize(obj[key])}`);
+    const recordObj = obj;
+    const keys = Object.keys(recordObj).sort();
+    const pairs = keys.map(key => `"${key}":${deepNormalize(recordObj[key])}`);
     return '{' + pairs.join(',') + '}';
 }
 function murmurhash3_32(str, seed = 0) {

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

@@ -1,4 +1,5 @@
 import { camelToKebabCase, genBase36Hash, applyCssValue, transpileAtomic } from '../index.js';
+import { SHORTHAND_PROPERTIES } from './shorthand';
 function splitAtomicAndNested(obj, flat, nonFlat) {
     Object.entries(obj).forEach(([property, value]) => {
         if (property.startsWith(':') || property.startsWith('&')) {
@@ -21,26 +22,54 @@ function splitAtomicAndNested(obj, flat, nonFlat) {
         }
     });
 }
+const LONG_TO_SHORT = {};
+Object.entries(SHORTHAND_PROPERTIES).forEach(([shorthand, longhands]) => {
+    longhands.forEach(long => {
+        LONG_TO_SHORT[long] = shorthand;
+    });
+});
 function processAtomicProps(flatProps, atomicHashes, allStyleSheets, parentAtRule) {
-    Object.entries(flatProps).forEach(([property, value]) => {
+    const seen = new Set();
+    const resultQueue = [];
+    for (const [property, value] of Object.entries(flatProps)) {
         if (property.startsWith('@media') || property.startsWith('@container')) {
             processAtomicProps(value, atomicHashes, allStyleSheets, property);
+            continue;
         }
-        else {
-            const CSSProp = camelToKebabCase(property);
-            const normalizedValue = applyCssValue(value, CSSProp);
-            const singlePropObj = { [property]: normalizedValue };
-            const styleObj = parentAtRule ? { [parentAtRule]: singlePropObj } : singlePropObj;
-            const atomicHash = genBase36Hash(styleObj, 1, 8);
-            if (atomicHashes.has(atomicHash))
-                return;
-            atomicHashes.add(atomicHash);
-            let styleSheet = transpileAtomic(property, value, atomicHash);
-            if (parentAtRule) {
-                styleSheet = `${parentAtRule} { ${styleSheet} }`;
+        const kebab = camelToKebabCase(property);
+        if (SHORTHAND_PROPERTIES[kebab]) {
+            const longhands = SHORTHAND_PROPERTIES[kebab];
+            longhands.forEach(l => seen.delete(l));
+            seen.add(kebab);
+            resultQueue.push([property, value]);
+        }
+        else if (kebab in LONG_TO_SHORT) {
+            const shorthand = LONG_TO_SHORT[kebab];
+            if (seen.has(shorthand)) {
+                continue;
             }
-            allStyleSheets.add(styleSheet + '\n');
+            seen.add(kebab);
+            resultQueue.push([property, value]);
         }
-    });
+        else {
+            seen.add(kebab);
+            resultQueue.push([property, value]);
+        }
+    }
+    for (const [property, value] of resultQueue) {
+        const CSSProp = camelToKebabCase(property);
+        const normalizedValue = applyCssValue(value, CSSProp);
+        const singlePropObj = { [property]: normalizedValue };
+        const styleObj = parentAtRule ? { [parentAtRule]: singlePropObj } : singlePropObj;
+        const atomicHash = genBase36Hash(styleObj, 1, 8);
+        if (atomicHashes.has(atomicHash))
+            continue;
+        atomicHashes.add(atomicHash);
+        let styleSheet = transpileAtomic(property, value, atomicHash);
+        if (parentAtRule) {
+            styleSheet = `${parentAtRule} { ${styleSheet} }`;
+        }
+        allStyleSheets.add(styleSheet + '\n');
+    }
 }
 export { splitAtomicAndNested, processAtomicProps };

package/dist/esm/utils/shorthand.js

@@ -0,0 +1,77 @@
+export const SHORTHAND_PROPERTIES = {
+    margin: ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'],
+    padding: ['padding-top', 'padding-bottom', 'padding-left', 'padding-right'],
+    background: [
+        'background-image',
+        'background-size',
+        'background-position',
+        'background-repeat',
+        'background-origin',
+        'background-clip',
+        'background-attachment',
+        'background-color',
+    ],
+    font: ['font-style', 'font-variant', 'font-weight', 'font-stretch', 'font-size', 'font-family', 'line-height'],
+    border: [
+        'border-top-width',
+        'border-bottom-width',
+        'border-left-width',
+        'border-right-width',
+        'border-top-style',
+        'border-bottom-style',
+        'border-left-style',
+        'border-right-style',
+        'border-top-color',
+        'border-bottom-color',
+        'border-left-color',
+        'border-right-color',
+    ],
+    'border-top': ['border-top-width', 'border-top-style', 'border-top-color'],
+    'border-bottom': ['border-bottom-width', 'border-bottom-style', 'border-bottom-color'],
+    'border-left': ['border-left-width', 'border-left-style', 'border-left-color'],
+    'border-right': ['border-right-width', 'border-right-style', 'border-right-color'],
+    'border-width': ['border-top-width', 'border-bottom-width', 'border-left-width', 'border-right-width'],
+    'border-style': ['border-top-style', 'border-bottom-style', 'border-left-style', 'border-right-style'],
+    'border-color': ['border-top-color', 'border-bottom-color', 'border-left-color', 'border-right-color'],
+    'list-style': ['list-style-type', 'list-style-position', 'list-style-image'],
+    'border-radius': ['border-top-right-radius', 'border-top-left-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'],
+    transition: ['transition-delay', 'transition-duration', 'transition-property', 'transition-timing-function'],
+    animation: [
+        'animation-name',
+        'animation-duration',
+        'animation-timing-function',
+        'animation-delay',
+        'animation-iteration-count',
+        'animation-direction',
+        'animation-fill-mode',
+        'animation-play-state',
+    ],
+    'border-block-end': ['border-block-end-width', 'border-block-end-style', 'border-block-end-color'],
+    'border-block-start': ['border-block-start-width', 'border-block-start-style', 'border-block-start-color'],
+    'border-image': ['border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset', 'border-image-repeat'],
+    'border-inline-end': ['border-inline-end-width', 'border-inline-end-style', 'border-inline-end-color'],
+    'border-inline-start': ['border-inline-start-width', 'border-inline-start-style', 'border-inline-start-color'],
+    'column-rule': ['column-rule-width', 'column-rule-style', 'column-rule-color'],
+    columns: ['column-width', 'column-count'],
+    flex: ['flex-grow', 'flex-shrink', 'flex-basis'],
+    'flex-flow': ['flex-direction', 'flex-wrap'],
+    grid: [
+        'grid-template-rows',
+        'grid-template-columns',
+        'grid-template-areas',
+        'grid-auto-rows',
+        'grid-auto-columns',
+        'grid-auto-flow',
+        'grid-column-gap',
+        'grid-row-gap',
+    ],
+    'grid-area': ['grid-row-start', 'grid-column-start', 'grid-row-end', 'grid-column-end'],
+    'grid-column': ['grid-column-start', 'grid-column-end'],
+    'grid-gap': ['grid-row-gap', 'grid-column-gap'],
+    'grid-row': ['grid-row-start', 'grid-row-end'],
+    'grid-template': ['grid-template-columns', 'grid-template-rows', 'grid-template-areas'],
+    outline: ['outline-color', 'outline-style', 'outline-width'],
+    'text-decoration': ['text-decoration-color', 'text-decoration-style', 'text-decoration-line'],
+    'text-emphasis': ['text-emphasis-style', 'text-emphasis-color'],
+    mask: ['mask-image', 'mask-mode', 'mask-position', 'mask-size', 'mask-repeat', 'mask-origin', 'mask-clip', 'mask-composite'],
+};

package/package.json

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

package/types/types/main/create.d.ts

@@ -5,17 +5,15 @@ export type CreateStyleType<T> = {
 export type CreateStyle = {
     [key: string]: CSSProperties;
 };
-type Selector<Properties> = {
+type SelectorProperties<Properties> = {
     readonly properties: Properties;
 };
-type AtomicClass<P extends string, V> = {
+type StyleAtomClassFor<P extends string, V> = {
     readonly property: `${P}: ${V & (string | number)}`;
 };
 export type ReturnType<T> = {
     [K in keyof T]: Readonly<{
-        [P in keyof T[K]]: P extends `@media ${string}` | `@container ${string}` | `:${string}` | `&${string}` ? Selector<keyof T[K][P]> : AtomicClass<P & string, T[K][P]>;
+        [P in keyof T[K]]: P extends `@media ${string}` | `@container ${string}` | `:${string}` | `&${string}` ? SelectorProperties<keyof T[K][P]> : StyleAtomClassFor<P & string, T[K][P]>;
     }>;
-} & {
-    [K in keyof T as `$${string & K}`]: string;
 };
 export {};

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

@@ -3,10 +3,6 @@ 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;
@@ -33,5 +29,5 @@ type KeyframesSelector = {
 type QuerySelectorHTML = {
     [K in Query]: CSSHTML;
 };
-export type CSSHTML = HTMLSelector | ClassNameSelector | AttributeSelector | ConsecutiveSelector | PseudoClassSelector | PseudoElementSelector | KeyframesSelector | QuerySelectorHTML;
+export type CSSHTML = HTMLSelector | AttributeSelector | ConsecutiveSelector | PseudoClassSelector | PseudoElementSelector | KeyframesSelector | QuerySelectorHTML;
 export {};

package/types/utils/shorthand.d.ts

@@ -0,0 +1 @@
+export declare const SHORTHAND_PROPERTIES: Record<string, string[]>;