vasille-css 7.0.0-rc.2 → 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);

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;
 }
@@ -22,7 +22,7 @@ function createStyleSheet(media) {
     document.head.append(style);
     return style.sheet;
 }
-export function getStyleSheet(target) {
+export function insertRule(target, rule) {
     let sheet;
     switch (target) {
         case 0:
@@ -68,10 +68,6 @@ export function getStyleSheet(target) {
             sheet = light;
             break;
     }
-    return sheet;
-}
-export function insertRule(target, rule) {
-    const sheet = getStyleSheet(target);
     /* istanbul ignore else */
     if (sheet) {
         sheet.insertRule(rule, sheet.cssRules.length);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasille-css",
-  "version": "7.0.0-rc.2",
+  "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,4 +1,7 @@
 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])[]);

package/types/lib.d.ts

@@ -1,5 +1,10 @@
+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;
-export declare function getStyleSheet(target: number): CSSStyleSheet | undefined;
 export declare function insertRule(target: number, rule: string): void;