zss-engine 0.1.0

package/dist/index.d.ts

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

package/dist/index.js

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

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

@@ -0,0 +1,48 @@
+import type { CSSVariableValue } from './css-variables';
+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 PropertiesWithoutMozInitial = {
+    [K in keyof Properties]: ExcludeMozInitial<Properties[K]>;
+};
+type CSSProperties = Omit<PropertiesWithoutMozInitial, 'fontSize'> & {
+    fontSize: PropertiesWithoutMozInitial['fontSize'] | number;
+};
+type BaseCSSProperties = {
+    [K in keyof CSSProperties]: CSSProperties[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 AndString = `&${string}`;
+type AndStringType = {
+    [key in AndString]: CommonProperties;
+};
+type Colon = `:${string}`;
+type ColonType = {
+    [key in Colon]: CommonProperties;
+};
+export type MediaQuery = `@media ${string}`;
+type MediaQueryType = {
+    [K in MediaQuery]: CommonProperties | ColonType;
+};
+export type CustomProperties = CommonProperties | ColonType | AndStringType | MediaQueryType;
+export {};

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

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

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

@@ -0,0 +1,5 @@
+type PropertyValue = string | number | PropertyType;
+export type PropertyType = {
+    [key: string]: PropertyValue;
+};
+export {};

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

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

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

@@ -0,0 +1,3 @@
+type CSSVariableKey = `--${string}`;
+export type CSSVariableValue = `var(${CSSVariableKey})`;
+export {};

package/dist/types/common/css-variables.js

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

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './common/css-properties';
+export * from './common/css-property';
+export * from './main/create';
+export * from './main/global';
+export * from './main/vars';

package/dist/types/index.js

@@ -0,0 +1,5 @@
+export * from './common/css-properties';
+export * from './common/css-property';
+export * from './main/create';
+export * from './main/global';
+export * from './main/vars';

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

@@ -0,0 +1,10 @@
+import type { CustomProperties } from '../common/css-properties';
+export type CreateStyle<T> = {
+    readonly [K in keyof T]: T[K] extends CustomProperties ? CustomProperties : T[K];
+};
+export type ClassesStyle = {
+    [key: string]: CustomProperties;
+};
+export type ReturnType<T> = {
+    [key in keyof T]: string;
+};

package/dist/types/main/create.js

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

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

@@ -0,0 +1,34 @@
+import { JSX } from 'react';
+import type { CustomProperties, MediaQuery } from '../common/css-properties';
+type JSXType = keyof JSX.IntrinsicElements | '*' | ':root';
+type HTMLType = {
+    [K in JSXType]: CustomProperties;
+};
+type ClassName = `.${string}`;
+type ClassNameType = {
+    [K in ClassName]: CustomProperties;
+};
+type Attribute = `${string}[${string}]${string}`;
+type AttributeType = {
+    [K in Attribute]: CustomProperties;
+};
+type Consecutive = `${JSXType} ${string}`;
+type ConsecutiveType = {
+    [K in Consecutive]: CustomProperties;
+};
+type Pseudo = `${JSXType}:${string}`;
+type PseudoType = {
+    [K in Pseudo]: CustomProperties;
+};
+type KeyframeSelector = 'from' | 'to' | `${number}%`;
+export type KeyframesDefinition = {
+    [K in KeyframeSelector]?: CustomProperties;
+};
+type KeyframesType = {
+    [K in `@keyframes ${string}`]: KeyframesDefinition;
+};
+type MediaQueryHTMLType = {
+    [K in MediaQuery]: CustomHTMLType;
+};
+export type CustomHTMLType = HTMLType | ClassNameType | AttributeType | ConsecutiveType | PseudoType | KeyframesType | MediaQueryHTMLType;
+export {};

package/dist/types/main/global.js

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

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

@@ -0,0 +1 @@
+export type VarsDefinition = Record<string, string | Record<string, string>>;

package/dist/types/main/vars.js

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

package/dist/utils/build.d.ts

@@ -0,0 +1 @@
+export declare const build: (styleSheet: string, filePath: string, global?: string) => Promise<void>;

package/dist/utils/build.js

@@ -0,0 +1,23 @@
+'use server';
+import { isServer } from './helper';
+import { styleText } from 'node:util';
+export const build = async (styleSheet, filePath, global) => {
+    if (!isServer)
+        return;
+    const fs = require('fs');
+    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('--log'))
+                    console.log(message + styleSheet);
+            }
+        }
+        return;
+    }
+    catch (error) {
+        console.error('Error writing to file:', error);
+    }
+};

package/dist/utils/hash.d.ts

@@ -0,0 +1,2 @@
+import { ClassesStyle, KeyframesDefinition, VarsDefinition } from '..';
+export declare function genBase36Hash(object: ClassesStyle | KeyframesDefinition | VarsDefinition, n: number): string;

package/dist/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/utils/helper.d.ts

@@ -0,0 +1,6 @@
+export declare const isServer: boolean;
+export declare const isDevelopment: boolean;
+export declare const isDevAndTest: boolean;
+export declare const isDevServer: boolean;
+export declare const applyCssValue: (value: string | number, cssProp: string) => string;
+export declare const camelToKebabCase: (property: string) => string;

package/dist/utils/helper.js

@@ -0,0 +1,16 @@
+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';
+export const isDevServer = isDevelopment && isServer;
+const exception = ['line-height', 'font-weight', 'opacity', 'scale', 'z-index'];
+export const applyCssValue = (value, cssProp) => {
+    if (typeof value === 'number') {
+        return exception.includes(cssProp) ? value.toString() : value + 'px';
+    }
+    return value;
+};
+export const camelToKebabCase = (property) => {
+    return property.replace(/([A-Z])/g, '-$1').toLowerCase();
+};

package/dist/utils/inject-client-css.d.ts

@@ -0,0 +1,2 @@
+export declare function createStyleElement(hash: string): HTMLStyleElement | null;
+export declare function injectClientCSS(hash: string, sheet: string): void;

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

@@ -0,0 +1,47 @@
+import { isServer } from '..';
+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/utils/inject-client-global-css.d.ts

@@ -0,0 +1 @@
+export declare function injectClientGlobalCSS(sheet: string, scoped: string): void;

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

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

package/dist/utils/inject-server-css.d.ts

@@ -0,0 +1,2 @@
+export declare function injectServerCSS(hash: string, sheet: string): void;
+export declare function getServerCSS(): string;

package/dist/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/utils/transpiler.d.ts

@@ -0,0 +1,4 @@
+import type { ClassesStyle, CustomHTMLType, VarsDefinition } from '..';
+export declare function transpiler(object: ClassesStyle | CustomHTMLType | VarsDefinition, base36Hash?: string, core?: string): {
+    styleSheet: string;
+};

package/dist/utils/transpiler.js

@@ -0,0 +1,122 @@
+import { camelToKebabCase, applyCssValue } from '..';
+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')) {
+                    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 };
+}

package/license

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 zss-in-js contributor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "zss-engine",
+  "version": "0.1.0",
+  "description": "Zero-runtime Style Sheet Engine",
+  "keywords": [
+    "zero-runtime",
+    "style-sheet",
+    "engine",
+    "css-in-js"
+  ],
+  "author": "Refirst",
+  "repository": "github:zss-in-js/zss-engine",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "devDependencies": {
+    "@types/node": "^22.8.5",
+    "@types/react": "^19.0.4",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "csstype": "^3.1.3"
+  }
+}