css-engine-test-pb 0.0.4 → 0.0.6

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,87 @@
-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) {
+                    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) {
+                            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)) {

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.d.ts

@@ -1,2 +1,2 @@
 import { StyleRule } from './types';
-export declare function makeResetStyles(styleDefinition: StyleRule): string;
+export declare function makeResetStyles(styleDefinition: StyleRule): () => string;

package/dist/makeResetStyles.js

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

package/package.json

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