zss-engine 0.2.9 → 0.2.10

package/dist/utils/transpiler.mjs

@@ -1,122 +0,0 @@
-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') || 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 };
-}

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

@@ -1,46 +0,0 @@
-import type { CSSVariableValue } from '../main/vars';
-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 CSSProperties = {
-    [K in keyof CSSTypeProperties]: ExcludeMozInitial<CSSTypeProperties[K]>;
-};
-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 | AndStringType;
-};
-export type CustomProperties = CommonProperties | ColonType | AndStringType | MediaQueryType;
-export {};

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

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

package/types/types/index.d.ts

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

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

@@ -1,10 +0,0 @@
-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/types/types/main/global.d.ts

@@ -1,45 +0,0 @@
-import type { CustomProperties, MediaQuery } from '../common/css-properties';
-type JSXType = keyof HTMLElementTagNameMap | '*' | ':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 PseudoClass = `${JSXType}:${string}`;
-type PseudoClassType = {
-  [K in PseudoClass]: CustomProperties;
-};
-type PseudoElement = `::${string}`;
-type PseudoElementType = {
-  [K in PseudoElement]: 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
-  | PseudoClassType
-  | PseudoElementType
-  | KeyframesType
-  | MediaQueryHTMLType;
-export {};

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

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

package/types/utils/build.d.ts

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

package/types/utils/hash.d.ts

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

package/types/utils/helper.d.ts

@@ -1,6 +0,0 @@
-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/types/utils/inject-client-css.d.ts

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

package/types/utils/inject-client-global-css.d.ts

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

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

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

package/types/utils/transpiler.d.ts

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