vasille-css 3.0.4 → 3.1.0

package/README.md

@@ -103,12 +103,11 @@ All of these are supported:
 * [x] Develop the `Vasille JSX` library.
 * [x] `100%` Test Coverage for the JSX library.
 * [x] Develop the `Vasille Babel Plugin`.
-* [ ] `100%` Test Coverage fot babel plugin.
+* [x] `100%` Test Coverage fot babel plugin.
 * [x] Add CSS support (define styles in components).
-* [ ] Add custom `input` components with 2-way value binding.
 * [ ] Add router.
-* [ ] Develop dev-tools extension for debugging.
-* [ ] Develop a lot of libraries for the framework.
+* [ ] Add SSR (server side rendering).
+* [ ] Develop tools extension for debugging.
 
 ## Questions
 

package/fake-types/index.d.ts

@@ -1,20 +1,9 @@
-import type { PropertiesHyphenFallback } from "csstype";
-
 export declare function setMobileMaxWidth(value: number): void;
 export declare function setTabletMaxWidth(value: number): void;
 export declare function setLaptopMaxWidth(value: number): void;
 
-type PropsSet = PropertiesHyphenFallback<number | number[], string> & {
-    [k: `--${string}`]: string;
-};
-type PseudoSet = PropsSet & {
-    [k: `:${string}`]: PropsSet;
-};
-type MediaSet = PseudoSet & {
-    [k: `@${string}`]: PseudoSet;
-};
-export declare function webStyleSheet<T extends {
-    [k: string]: MediaSet;
+export declare function styleSheet<T extends {
+    [className: string]: unknown;
 }>(styles: T): {
     [K in keyof T]: string;
 };

package/lib/index.js

@@ -37,13 +37,13 @@ function insertRule(target, rule) {
             break;
         case 2:
             if (!tablet) {
-                tablet = createStyleSheet(`(min-width:${mobileMaxWidth}px)and(max-width:${tabletMaxWidth}px)`);
+                tablet = createStyleSheet(`(min-width:${mobileMaxWidth}px) and (max-width:${tabletMaxWidth}px)`);
             }
             sheet = tablet;
             break;
         case 3:
             if (!desktop) {
-                desktop = createStyleSheet(`(min-width:${tabletMaxWidth}px)and(max-width:${laptopMaxWidth}px)`);
+                desktop = createStyleSheet(`(min-width:${tabletMaxWidth}px) and (max-width:${laptopMaxWidth}px)`);
             }
             sheet = desktop;
             break;
@@ -64,7 +64,7 @@ function insertRule(target, rule) {
         sheet.insertRule(rule, sheet.cssRules.length);
     }
 }
-export function webStyleSheet(styles) {
+export function styleSheet(styles) {
     const result = {};
     for (const key in styles) {
         Object.defineProperty(result, key, {

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "vasille-css",
-  "version": "3.0.4",
-  "description": "Add module CSS styles to Vasille Components",
+  "version": "3.1.0",
+  "description": "The first Developer eXperience orientated front-end framework (style library)",
   "main": "./lib/index.js",
   "types": "./fake-types/index.d.ts",
   "exports": {
+    "types": "./fake-types/index.d.ts",
     "import": "./lib/index.js",
     "browser": "./lib/index.js",
-    "node": "./lib-node/index.js",
-    "require": "./lib-node/index.js"
+    "node": "./lib/index.js"
   },
   "scripts": {
     "prepack": "cp -f ../README.md ./README.md",
     "prettier": "prettier src test --write",
     "build": "tsc --build tsconfig.json",
-    "build-node": "tsc --build tsconfig-build-node.json",
+    "test-types": "tsc --noEmit ./fake-types/index.d.ts",
     "test": "jest",
     "test-coverage": "jest --coverage"
   },
@@ -34,17 +34,13 @@
     "type": "git",
     "url": "git+https://github.com/vasille-js/vasille-js.git"
   },
-  "peerDependencies": {
-    "csstype": "^3.1.3"
-  },
   "devDependencies": {
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/jsdom": "^21.1.7",
-    "csstype": "^3.1.3",
-    "jest": "^29.7.0",
-    "jsdom": "^25.0.1",
-    "prettier": "^3.3.3",
-    "ts-jest": "^29.2.5",
-    "typescript": "^5.6.3"
+    "jest": "^30.0.5",
+    "jsdom": "^26.1.0",
+    "prettier": "^3.6.2",
+    "ts-jest": "^29.4.0",
+    "typescript": "^5.8.3"
   }
 }

package/lib-node/index.js

@@ -1,100 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setMobileMaxWidth = setMobileMaxWidth;
-exports.setTabletMaxWidth = setTabletMaxWidth;
-exports.setLaptopMaxWidth = setLaptopMaxWidth;
-exports.setIndex = setIndex;
-exports.webStyleSheet = webStyleSheet;
-let common;
-let mobile;
-let tablet;
-let desktop;
-let dark;
-let light;
-let mobileMaxWidth = 440;
-let tabletMaxWidth = 880;
-let laptopMaxWidth = 1320;
-let index = Math.floor(Math.random() * 10);
-function setMobileMaxWidth(value) {
-    mobileMaxWidth = value;
-}
-function setTabletMaxWidth(value) {
-    tabletMaxWidth = value;
-}
-function setLaptopMaxWidth(value) {
-    laptopMaxWidth = value;
-}
-function setIndex(value) {
-    index = value;
-}
-function createStyleSheet(media) {
-    const style = document.createElement("style");
-    style.media = media;
-    document.head.append(style);
-    return style.sheet;
-}
-function insertRule(target, rule) {
-    let sheet;
-    switch (target) {
-        case 1:
-            if (!mobile) {
-                mobile = createStyleSheet(`(max-width:${mobileMaxWidth}px)`);
-            }
-            sheet = mobile;
-            break;
-        case 2:
-            if (!tablet) {
-                tablet = createStyleSheet(`(min-width:${mobileMaxWidth}px)and(max-width:${tabletMaxWidth}px)`);
-            }
-            sheet = tablet;
-            break;
-        case 3:
-            if (!desktop) {
-                desktop = createStyleSheet(`(min-width:${tabletMaxWidth}px)and(max-width:${laptopMaxWidth}px)`);
-            }
-            sheet = desktop;
-            break;
-        case 4:
-            if (!dark) {
-                dark = createStyleSheet("(prefers-color-scheme:dark)");
-            }
-            sheet = dark;
-            break;
-        case 5:
-            if (!light) {
-                light = createStyleSheet("(prefers-color-scheme:light)");
-            }
-            sheet = light;
-            break;
-    }
-    if (sheet) {
-        sheet.insertRule(rule, sheet.cssRules.length);
-    }
-}
-function webStyleSheet(styles) {
-    const result = {};
-    for (const key in styles) {
-        Object.defineProperty(result, key, {
-            get() {
-                const className = `v-${++index}`;
-                for (const item of styles[key]) {
-                    if (item instanceof Array) {
-                        const [target, rule] = item;
-                        insertRule(target, rule.replace("{}", className));
-                    }
-                    else {
-                        if (!common) {
-                            common = createStyleSheet("");
-                        }
-                        common.insertRule(item.replace("{}", className), common.cssRules.length);
-                    }
-                }
-                styles[key].splice(0);
-                Object.defineProperty(result, key, { value: className });
-                return className;
-            },
-            configurable: true,
-        });
-    }
-    return result;
-}