css-engine-test-pb 0.0.5 → 0.0.7

package/dist/compiler.d.ts

@@ -4,8 +4,14 @@ interface CompiledRule {
     cssText: string;
     bucket: StyleBucket;
 }
+export type CompileMode = 'atomic' | 'monolithic';
 export declare class StyleCompiler {
-    compile(styleDefinition: StyleRule): CompiledRule[];
+    compile(styleDefinition: StyleRule, mode?: CompileMode): CompiledRule[];
+    private compileAtomic;
+    private compileMonolithic;
+    private buildCSSBlock;
+    private buildMonolithicPseudos;
+    private buildMonolithicMedia;
     private processProperties;
     private processPseudos;
     private processMediaQueries;

package/dist/compiler.js

@@ -1,13 +1,105 @@
-import { createClassName } from './utils/hash';
+import { StyleBucket } from './types';
+import { createClassName, hashString } from './utils/hash';
 import { camelToKebab, isPseudoSelector, isMediaQuery, determineBucket } from './utils';
 export class StyleCompiler {
-    compile(styleDefinition) {
+    compile(styleDefinition, mode = 'atomic') {
+        if (mode === 'monolithic') {
+            return this.compileMonolithic(styleDefinition);
+        }
+        return this.compileAtomic(styleDefinition);
+    }
+    compileAtomic(styleDefinition) {
         const rules = [];
         this.processProperties(styleDefinition, rules);
         this.processPseudos(styleDefinition, rules);
         this.processMediaQueries(styleDefinition, rules);
         return rules;
     }
+    compileMonolithic(styleDefinition) {
+        const hash = hashString(JSON.stringify(styleDefinition));
+        const className = 'r' + hash;
+        let cssText = '';
+        const mainStyles = this.buildCSSBlock(styleDefinition);
+        if (mainStyles) {
+            cssText += `.${className} { ${mainStyles} }\n`;
+        }
+        cssText += this.buildMonolithicPseudos(styleDefinition, className);
+        cssText += this.buildMonolithicMedia(styleDefinition, className);
+        return [{
+                className,
+                cssText: cssText.trim(),
+                bucket: StyleBucket.RESET
+            }];
+    }
+    buildCSSBlock(styles) {
+        let css = '';
+        for (const [property, value] of Object.entries(styles)) {
+            if (isPseudoSelector(property) || isMediaQuery(property)) {
+                continue;
+            }
+            if (value === undefined || value === null) {
+                continue;
+            }
+            const kebabProperty = camelToKebab(property);
+            css += `${kebabProperty}: ${value}; `;
+        }
+        return css.trim();
+    }
+    buildMonolithicPseudos(styleDefinition, className) {
+        let css = '';
+        for (const [key, value] of Object.entries(styleDefinition)) {
+            if (isPseudoSelector(key) && value) {
+                const pseudoStyles = this.buildCSSBlock(value);
+                if (pseudoStyles) {
+                    if (key.includes(',')) {
+                        const selectors = key
+                            .split(',')
+                            .map(s => `.${className}${s.trim()}`)
+                            .join(', ');
+                        css += `${selectors} { ${pseudoStyles} }\n`;
+                    }
+                    else {
+                        css += `.${className}${key} { ${pseudoStyles} }\n`;
+                    }
+                }
+            }
+        }
+        return css;
+    }
+    buildMonolithicMedia(styleDefinition, className) {
+        let css = '';
+        for (const [key, value] of Object.entries(styleDefinition)) {
+            if (isMediaQuery(key) && value) {
+                const nestedStyles = value;
+                let mediaCss = '';
+                const mainStyles = this.buildCSSBlock(nestedStyles);
+                if (mainStyles) {
+                    mediaCss += `.${className} { ${mainStyles} }\n`;
+                }
+                for (const [nestedKey, nestedValue] of Object.entries(nestedStyles)) {
+                    if (isPseudoSelector(nestedKey) && nestedValue) {
+                        const pseudoStyles = this.buildCSSBlock(nestedValue);
+                        if (pseudoStyles) {
+                            if (nestedKey.includes(',')) {
+                                const selectors = nestedKey
+                                    .split(',')
+                                    .map(s => `.${className}${s.trim()}`)
+                                    .join(', ');
+                                mediaCss += `${selectors} { ${pseudoStyles} }\n`;
+                            }
+                            else {
+                                mediaCss += `.${className}${nestedKey} { ${pseudoStyles} }\n`;
+                            }
+                        }
+                    }
+                }
+                if (mediaCss) {
+                    css += `${key} {\n${mediaCss}}\n`;
+                }
+            }
+        }
+        return css;
+    }
     processProperties(styles, rules, pseudo, media) {
         Object.entries(styles).forEach(([property, value]) => {
             if (isPseudoSelector(property) || isMediaQuery(property)) {
@@ -19,7 +111,17 @@ export class StyleCompiler {
             const kebabProperty = camelToKebab(property);
             const hashInput = `${kebabProperty}:${value}${pseudo || ''}${media || ''}`;
             const className = createClassName(hashInput);
-            const selector = pseudo ? `.${className}${pseudo}` : `.${className}`;
+            let selector;
+            if (pseudo && pseudo.includes(',')) {
+                const selectors = pseudo
+                    .split(',')
+                    .map(s => `.${className}${s.trim()}`)
+                    .join(', ');
+                selector = selectors;
+            }
+            else {
+                selector = pseudo ? `.${className}${pseudo}` : `.${className}`;
+            }
             const cssRule = `${selector} { ${kebabProperty}: ${value}; }`;
             const bucket = determineBucket(pseudo, media);
             let cssText = cssRule;

package/dist/engine.d.ts

@@ -4,7 +4,7 @@ export declare class StyleEngine {
     private insertion;
     private cache;
     constructor();
-    createStyle(styleDefinition: StyleRule): string;
+    createStyle(styleDefinition: StyleRule, mode?: 'atomic' | 'monolithic'): string;
     createStyles(slots: StyleSlots): GeneratedClasses;
     getCSSString(): string;
     clear(): void;

package/dist/engine.js

@@ -6,12 +6,12 @@ export class StyleEngine {
         this.insertion = new InsertionFactory();
         this.cache = new Map();
     }
-    createStyle(styleDefinition) {
-        const cacheKey = JSON.stringify(styleDefinition);
+    createStyle(styleDefinition, mode = 'atomic') {
+        const cacheKey = `${mode}:${JSON.stringify(styleDefinition)}`;
         if (this.cache.has(cacheKey)) {
             return this.cache.get(cacheKey);
         }
-        const rules = this.compiler.compile(styleDefinition);
+        const rules = this.compiler.compile(styleDefinition, mode);
         rules.forEach(rule => {
             this.insertion.insertRule(rule.cssText, rule.bucket);
         });
@@ -25,7 +25,7 @@ export class StyleEngine {
             const resolvedStyle = typeof styleDefinition === 'function'
                 ? styleDefinition()
                 : styleDefinition;
-            classes[slotName] = this.createStyle(resolvedStyle);
+            classes[slotName] = this.createStyle(resolvedStyle, 'atomic');
         });
         return classes;
     }

package/dist/makeResetStyles.js

@@ -1,6 +1,6 @@
 import { getGlobalEngine } from './engine';
 export function makeResetStyles(styleDefinition) {
     const engine = getGlobalEngine();
-    const className = engine.createStyle(styleDefinition);
+    const className = engine.createStyle(styleDefinition, 'monolithic');
     return () => className;
 }

package/dist/types.d.ts

@@ -87,6 +87,14 @@ export interface CSSPseudos {
     '::before'?: CSSProperties;
     '::after'?: CSSProperties;
     '::placeholder'?: CSSProperties;
+    ':hover:active'?: CSSProperties;
+    ':active:focus-visible'?: CSSProperties;
+    ':hover:focus-visible'?: CSSProperties;
+    ':hover:active, :hover:focus-visible'?: CSSProperties;
+    ':hover:active,:hover:focus-visible'?: CSSProperties;
+    ':hover:active, :active:focus-visible'?: CSSProperties;
+    ':hover:active,:active:focus-visible'?: CSSProperties;
+    [key: `${':' | '::'}${string}`]: CSSProperties | undefined;
 }
 export interface CSSMediaQueries {
     '@media (min-width: 480px)'?: CSSProperties & CSSPseudos;
@@ -95,6 +103,7 @@ export interface CSSMediaQueries {
     '@media (min-width: 1440px)'?: CSSProperties & CSSPseudos;
     '@media (prefers-color-scheme: dark)'?: CSSProperties & CSSPseudos;
     '@media (prefers-reduced-motion: reduce)'?: CSSProperties & CSSPseudos;
+    [key: `@media ${string}`]: (CSSProperties & CSSPseudos) | undefined;
 }
 export type StyleRule = CSSProperties & CSSPseudos & CSSMediaQueries;
 export type StyleDefinition = StyleRule | (() => StyleRule);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-engine-test-pb",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",