vasille-css 7.0.0-rc.1 → 7.0.0-rc.3

package/lib/dev.js

@@ -1,4 +1,35 @@
-import { CssStyleInjector } from "./index.js";
+import { CssStyleInjector, setLaptopMaxWidth, setMobileMaxWidth, setTabletMaxWidth } from "./index.js";
+import { desktop, laptopMaxWidth, mobile, mobileMaxWidth, tablet, tabletMaxWidth } from "./lib.js";
+function warn(device) {
+    console.warn(`[vasille-css] Setting of ${device} max width in production mode is not supported.`);
+}
+export function devSetMobileMaxWidth(value) {
+    setMobileMaxWidth(value);
+    if (mobile) {
+        mobile.media = `(max-width:${mobileMaxWidth}px)`;
+    }
+    if (tablet) {
+        tablet.media = `(min-width:${mobileMaxWidth}px) and (max-width:${tabletMaxWidth}px)`;
+    }
+    warn("mobile");
+}
+export function devSetTabletMaxWidth(value) {
+    setTabletMaxWidth(value);
+    if (tablet) {
+        tablet.media = `(min-width:${mobileMaxWidth}px) and (max-width:${tabletMaxWidth}px)`;
+    }
+    if (desktop) {
+        desktop.media = `(min-width:${tabletMaxWidth}px) and (max-width:${laptopMaxWidth}px)`;
+    }
+    warn("tablet");
+}
+export function devSetLaptopMaxWidth(value) {
+    setLaptopMaxWidth(value);
+    if (desktop) {
+        desktop.media = `(min-width:${tabletMaxWidth}px) and (max-width:${laptopMaxWidth}px)`;
+    }
+    warn("laptop");
+}
 export class DevCssStyleInjector extends CssStyleInjector {
     constructor(key, styles) {
         super(styles);
@@ -8,10 +39,3 @@ export class DevCssStyleInjector extends CssStyleInjector {
         return `${super.generateClassName()}-${this.key}`;
     }
 }
-export function devStyleSheet(styles) {
-    const result = {};
-    for (const key in styles) {
-        result[key] = new DevCssStyleInjector(key, styles[key]);
-    }
-    return result;
-}

package/lib/index.js

@@ -12,13 +12,7 @@ export class CssStyleInjector {
         }
         const className = this.generateClassName();
         for (const item of this.styles) {
-            if (item instanceof Array) {
-                const [target, rule] = item;
-                insertRule(target, rule.replace("{}", className));
-            }
-            else {
-                insertRule(0, item.replace("{}", className));
-            }
+            this.insertRule(item, className);
         }
         this.styles.splice(0);
         return (this.className = className);
@@ -26,6 +20,25 @@ export class CssStyleInjector {
     generateClassName() {
         return `vasille-${++index}`;
     }
+    insertRule(rule, className) {
+        if (rule instanceof Array) {
+            insertRule(rule[0], rule[1].replace("{}", className));
+        }
+        else {
+            insertRule(0, rule.replace("{}", className));
+        }
+    }
+}
+export class SafeCssStyleInjector extends CssStyleInjector {
+    insertRule(rule, className) {
+        try {
+            super.insertRule(rule, className);
+        }
+        catch (e) {
+            // ignore any style related errors
+            void e;
+        }
+    }
 }
 /**
  * Inserts stylesheet to document
@@ -34,7 +47,7 @@ export class CssStyleInjector {
 export function styleSheet(styles) {
     const result = {};
     for (const key in styles) {
-        result[key] = new CssStyleInjector(styles[key]);
+        result[key] = new SafeCssStyleInjector(styles[key]);
     }
     return result;
 }

package/lib/lib.js

@@ -1,12 +1,12 @@
 let common;
-let mobile;
-let tablet;
-let desktop;
+export let mobile;
+export let tablet;
+export let desktop;
 let dark;
 let light;
-let mobileMaxWidth = 440;
-let tabletMaxWidth = 880;
-let laptopMaxWidth = 1320;
+export let mobileMaxWidth = 440;
+export let tabletMaxWidth = 880;
+export let laptopMaxWidth = 1320;
 export function setMobileMaxWidth(value) {
     mobileMaxWidth = value;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasille-css",
-  "version": "7.0.0-rc.1",
+  "version": "7.0.0-rc.3",
   "description": "The same devkit which is designed to build fault tolerant frontends (CSS style library)",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",

package/types/dev.d.ts

@@ -1,11 +1,9 @@
 import { CssStyleInjector } from "./index.js";
+export declare function devSetMobileMaxWidth(value: number): void;
+export declare function devSetTabletMaxWidth(value: number): void;
+export declare function devSetLaptopMaxWidth(value: number): void;
 export declare class DevCssStyleInjector extends CssStyleInjector {
     protected key: string;
     constructor(key: string, styles: (string | [number, string])[]);
     protected generateClassName(): string;
 }
-export declare function devStyleSheet<T extends {
-    [k: string]: (string | [number, string])[];
-}>(styles: T): {
-    [K in keyof T]: DevCssStyleInjector;
-};

package/types/index.d.ts

@@ -5,6 +5,10 @@ export declare class CssStyleInjector {
     constructor(styles: (string | [number, string])[]);
     inject(): string;
     protected generateClassName(): string;
+    protected insertRule(rule: string | [number, string], className: string): void;
+}
+export declare class SafeCssStyleInjector extends CssStyleInjector {
+    protected insertRule(rule: string | [number, string], className: string): void;
 }
 /**
  * Inserts stylesheet to document

package/types/lib.d.ts

@@ -1,3 +1,9 @@
+export declare let mobile: CSSStyleSheet | undefined;
+export declare let tablet: CSSStyleSheet | undefined;
+export declare let desktop: CSSStyleSheet | undefined;
+export declare let mobileMaxWidth: number;
+export declare let tabletMaxWidth: number;
+export declare let laptopMaxWidth: number;
 export declare function setMobileMaxWidth(value: number): void;
 export declare function setTabletMaxWidth(value: number): void;
 export declare function setLaptopMaxWidth(value: number): void;