babel-plugin-vasille 0.99.2 → 0.99.3

package/lib-node/css-transformer.js

@@ -0,0 +1,232 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findStyleInNode = findStyleInNode;
+const t = __importStar(require("@babel/types"));
+const call_1 = require("./call");
+function tryProcessProp(path, pseudo, media, internal) {
+    if (t.isObjectMethod(path.node)) {
+        throw path.buildCodeFrameError("Object methods not supported here");
+    }
+    if (t.isSpreadElement(path.node)) {
+        throw path.buildCodeFrameError("Spread element not suppored here");
+    }
+    return processProp(path, pseudo, media, internal);
+}
+const mediaDefaults = ["mobile", "tablet", "laptop", "prefersDark", "prefersLight"];
+function processValue(name, path, pseudo, theme, media, mediaDefault, allowFallback, internal) {
+    if ((0, call_1.calls)(path.node, ["theme"], internal)) {
+        const call = path.node;
+        if (theme) {
+            throw path.buildCodeFrameError("Vasille: Theme seem the be defined twince");
+        }
+        if (t.isStringLiteral(call.arguments[0])) {
+            return processValue(name, path.get("arguments")[1], pseudo, `body.${call.arguments[0].value}`, media, mediaDefault, false, internal);
+        }
+        else {
+            throw path
+                .get("arguments")[0]
+                .buildCodeFrameError("Vasille: Expected string literal");
+        }
+    }
+    if ((0, call_1.calls)(path.node, ["dark"], internal)) {
+        if (theme) {
+            throw path.buildCodeFrameError("Vasille: Theme seem the be defined twince");
+        }
+        return processValue(name, path.get("arguments")[0], pseudo, `.dark`, media, mediaDefault, false, internal);
+    }
+    let callee;
+    if ((callee = (0, call_1.calls)(path.node, mediaDefaults, internal))) {
+        const index = mediaDefaults.indexOf(callee) + 1;
+        if (mediaDefault.includes(index)) {
+            return processValue(name, path.get("arguments")[0], pseudo, theme, media, mediaDefault, false, internal);
+        }
+        return processValue(name, path.get("arguments")[0], pseudo, theme, media, [...mediaDefault, index], false, internal);
+    }
+    function composeRules(value) {
+        return mediaDefault.length
+            ? mediaDefault.map(index => {
+                return {
+                    defaultMediaRule: index,
+                    mediaRule: media,
+                    pseudo: pseudo,
+                    theme: theme,
+                    rule: `${name}:${value}`,
+                };
+            })
+            : [
+                {
+                    defaultMediaRule: 0,
+                    mediaRule: media,
+                    pseudo: pseudo,
+                    theme: theme,
+                    rule: `${name}:${value}`,
+                },
+            ];
+    }
+    if (t.isStringLiteral(path.node)) {
+        return composeRules(path.node.value);
+    }
+    if (t.isNumericLiteral(path.node)) {
+        return composeRules(`${path.node.value}px`);
+    }
+    if (t.isArrayExpression(path.node)) {
+        if (path.node.elements.every(item => t.isNumericLiteral(item))) {
+            return composeRules(path.node.elements.map(item => `${item.value}px`).join(" "));
+        }
+        else if (allowFallback) {
+            return [
+                ...path.get("elements").map(path => {
+                    if (t.isExpression(path.node)) {
+                        return processValue(name, path, pseudo, theme, media, mediaDefault, false, internal);
+                    }
+                    else {
+                        throw path.buildCodeFrameError("Vasille: Exprected expression");
+                    }
+                }).flat(1),
+            ];
+        }
+        else {
+            throw path.buildCodeFrameError("Vasille: Only numbers arrays are suppored here");
+        }
+    }
+    throw path.buildCodeFrameError("Vasille: Failed o parse value, it is not a string, number or array");
+}
+function processProp(path, pseudo, media, internal) {
+    let name;
+    if (t.isIdentifier(path.node.key)) {
+        name = path.node.key.name;
+    }
+    else if (t.isStringLiteral(path.node.key)) {
+        name = path.node.key.value;
+    }
+    else {
+        throw path.get("key").buildCodeFrameError("Vasille: Incompaible key, exprect idenifier or string literal");
+    }
+    if (name.startsWith("@")) {
+        if (media || pseudo) {
+            throw path.get("key").buildCodeFrameError("Vasille: Media queries allowed inly in the root of style");
+        }
+        if (t.isObjectExpression(path.node.value)) {
+            return path.get("value").get("properties").map(item => {
+                return tryProcessProp(item, "", name, internal);
+            }).flat(1);
+        }
+        else {
+            throw path.get("value").buildCodeFrameError("Vasille: Exprected object expression");
+        }
+    }
+    if (name.startsWith(":")) {
+        if (pseudo) {
+            throw path.get("key").buildCodeFrameError("Recursive pseudo classes are restriced");
+        }
+        if (t.isObjectExpression(path.node.value)) {
+            return path.get("value").get("properties").map(item => {
+                return tryProcessProp(item, name, media, internal);
+            }).flat(1);
+        }
+        else {
+            throw path.get("value").buildCodeFrameError("Vasille: Exprected object expression");
+        }
+    }
+    return processValue(name, path.get("value"), pseudo, "", media, [], true, internal);
+}
+function findStyleInNode(path, internal) {
+    if (t.isExpressionStatement(path.node)) {
+        return findStyleInNode(path.get("expression"), internal);
+    }
+    if (t.isExportNamedDeclaration(path.node)) {
+        return findStyleInNode(path.get("declaration"), internal);
+    }
+    if (t.isVariableDeclaration(path.node) &&
+        path.node.declarations.length === 1 &&
+        (0, call_1.calls)(path.node.declarations[0].init, ["webStyleSheet"], internal)) {
+        const call = path.node.declarations[0].init;
+        const callPath = path
+            .get("declarations")[0]
+            .get("init");
+        const objPath = callPath.get("arguments")[0];
+        if (call.arguments.length !== 1) {
+            throw callPath.buildCodeFrameError("Vasille: webStyleSheet function has 1 parameter");
+        }
+        if (!t.isObjectExpression(call.arguments[0])) {
+            throw objPath.buildCodeFrameError("Vasille: expected object expression");
+        }
+        for (const path of objPath.get("properties")) {
+            if (!t.isObjectProperty(path.node)) {
+                throw path.buildCodeFrameError("Vasille: Expected object property");
+            }
+            const prop = path;
+            if (!t.isObjectExpression(prop.node.value)) {
+                throw prop.get("value").buildCodeFrameError("Vasille: Exprected object expression");
+            }
+            if (!(t.isIdentifier(prop.node.key) || t.isStringLiteral(prop.node.key))) {
+                throw prop.get("key").buildCodeFrameError("Vasille: Expected identifier of string literal");
+            }
+            const unsorted = [];
+            const sorted = {};
+            for (const path of prop.get("value").get("properties")) {
+                unsorted.push(...tryProcessProp(path, "", "", internal));
+            }
+            for (const rule of unsorted) {
+                if (!sorted[rule.defaultMediaRule]) {
+                    sorted[rule.defaultMediaRule] = {};
+                }
+                const defaultMediaRule = sorted[rule.defaultMediaRule];
+                if (!defaultMediaRule[rule.mediaRule]) {
+                    defaultMediaRule[rule.mediaRule] = {};
+                }
+                const mediaRule = defaultMediaRule[rule.mediaRule];
+                if (!mediaRule[rule.theme]) {
+                    mediaRule[rule.theme] = {};
+                }
+                const theme = mediaRule[rule.theme];
+                if (!theme[rule.pseudo]) {
+                    theme[rule.pseudo] = [];
+                }
+                theme[rule.pseudo].push(rule.rule);
+            }
+            const expressions = [];
+            for (const defaultMediaRule in sorted) {
+                for (const mediaRule in sorted[defaultMediaRule]) {
+                    for (const theme in sorted[defaultMediaRule][mediaRule]) {
+                        for (const pseudo in sorted[defaultMediaRule][mediaRule][theme]) {
+                            const rulePack = sorted[defaultMediaRule][mediaRule][theme][pseudo].join(";");
+                            const pseudoPack = pseudo ? `{}${pseudo}{${rulePack}}` : `{}{${rulePack}}`;
+                            const themePack = theme ? `${theme} ${pseudoPack}` : pseudoPack;
+                            const mediaRulePack = t.stringLiteral(mediaRule ? `${mediaRule}{${themePack}}` : themePack);
+                            expressions.push(defaultMediaRule !== '0'
+                                ? t.arrayExpression([t.numericLiteral(parseInt(defaultMediaRule)), mediaRulePack])
+                                : mediaRulePack);
+                        }
+                    }
+                }
+            }
+            prop.get("value").replaceWith(t.arrayExpression(expressions));
+        }
+        return true;
+    }
+    return false;
+}

package/lib-node/mesh.js

@@ -139,11 +139,20 @@ function meshExpression(nodePath, internal) {
             meshAllUnknown(path.get("elements"), internal);
             break;
         }
-        case "CallExpression": {
+        case "CallExpression":
+        case "OptionalCallExpression": {
             const path = nodePath;
             const callsFn = (0, call_1.calls)(path.node, call_1.composeOnly, internal);
+            const callsStyleHint = (0, call_1.calls)(path.node, call_1.styleOnly, internal);
+            const callsStyleCreate = (0, call_1.calls)(path.node, ["webStyleSheet"], internal);
             if (callsFn) {
-                throw path.buildCodeFrameError(`Vasille: Usage of function "${callsFn}" is restricted here`);
+                throw path.buildCodeFrameError(`Vasille: Usage of hint "${callsFn}" is restricted here`);
+            }
+            if (callsStyleHint) {
+                throw path.buildCodeFrameError(`Vasille: Usage of style hint "${callsStyleHint}" is restricted here`);
+            }
+            if (callsStyleCreate) {
+                throw path.buildCodeFrameError("Vasille: Styles can be created in moldule level code only");
             }
             meshOrIgnoreExpression(path.get("callee"), internal);
             meshAllUnknown(path.get("arguments"), internal);
@@ -155,12 +164,6 @@ function meshExpression(nodePath, internal) {
             }
             break;
         }
-        case "OptionalCallExpression": {
-            const path = nodePath;
-            meshExpression(path.get("callee"), internal);
-            meshAllUnknown(path.get("arguments"), internal);
-            break;
-        }
         case "AssignmentExpression": {
             const path = nodePath;
             const left = path.node.left;

package/lib-node/transformer.js

@@ -27,6 +27,7 @@ exports.trProgram = trProgram;
 const t = __importStar(require("@babel/types"));
 const internal_1 = require("./internal");
 const mesh_1 = require("./mesh");
+const css_transformer_1 = require("./css-transformer");
 const imports = new Map([
     ["vasille-dx", "VasilleDX"],
     ["vasille-web", "VasilleWeb"],
@@ -41,12 +42,20 @@ const ignoreMembers = new Set([
     "mapModel",
     "reactiveObject",
     "setModel",
+    "theme",
+    "dark",
+    "mobile",
+    "tablet",
+    "laptop",
+    "prefersDark",
+    "prefersLight",
 ]);
 function extractText(node) {
     return t.isIdentifier(node) ? node.name : node.value;
 }
 function trProgram(path, devMode) {
     let id;
+    let stylesConnected = false;
     const internal = {
         get id() {
             this.internalUsed = true;
@@ -58,6 +67,7 @@ function trProgram(path, devMode) {
         stack: new internal_1.StackedStates(),
         mapping: new Map(),
         global: "",
+        cssGlobal: "",
         prefix: "Vasille_",
         importStatement: null,
         internalUsed: false,
@@ -72,12 +82,19 @@ function trProgram(path, devMode) {
                 for (const specifier of statement.specifiers) {
                     if (t.isImportNamespaceSpecifier(specifier)) {
                         internal.global = specifier.local.name;
+                        if (statement.source.value === "vasille-web") {
+                            internal.cssGlobal = internal.global;
+                            stylesConnected = true;
+                        }
                         id = t.memberExpression(t.identifier(internal.global), t.identifier("$"));
                     }
                     else if (t.isImportSpecifier(specifier)) {
                         const imported = extractText(specifier.imported);
                         const local = specifier.local.name;
                         internal.mapping.set(local, imported);
+                        if (imported === "webStyleSheet") {
+                            stylesConnected = true;
+                        }
                         if (!id) {
                             id = t.identifier(name);
                         }
@@ -93,12 +110,36 @@ function trProgram(path, devMode) {
                     }
                 });
             }
+            else if (statement.source.value === "vasille-css") {
+                for (const specifier of statement.specifiers) {
+                    if (t.isImportSpecifier(specifier)) {
+                        internal.mapping.set(specifier.local.name, extractText(specifier.imported));
+                    }
+                    else if (t.isImportNamespaceSpecifier(specifier)) {
+                        internal.cssGlobal = specifier.local.name;
+                    }
+                }
+                statement.specifiers = statement.specifiers.filter(spec => {
+                    if (!t.isImportSpecifier(spec)) {
+                        return true;
+                    }
+                    else {
+                        return !ignoreMembers.has(extractText(spec.imported));
+                    }
+                });
+                stylesConnected = true;
+            }
         }
         else {
             if (!id) {
+                if (stylesConnected) {
+                    (0, css_transformer_1.findStyleInNode)(statementPath, internal);
+                }
                 return;
             }
-            (0, mesh_1.meshStatement)(statementPath, internal);
+            if (!stylesConnected || !(0, css_transformer_1.findStyleInNode)(statementPath, internal)) {
+                (0, mesh_1.meshStatement)(statementPath, internal);
+            }
         }
     }
     if (internal.internalUsed && !internal.global && internal.importStatement) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "babel-plugin-vasille",
-  "version": "0.99.2",
-  "description": "",
+  "version": "0.99.3",
+  "description": "Convert Vasille Meta Language code to pure JavaScript",
   "main": "lib-node/index.js",
   "type": "commonjs",
   "exports": {
@@ -21,7 +21,9 @@
   "keywords": [
     "front-end",
     "framework",
-    "dx"
+    "web",
+    "compiler",
+    "babel"
   ],
   "author": "lixcode",
   "license": "MIT",
@@ -29,9 +31,6 @@
     "url": "https://github.com/vasille-js/vasille-js/issues"
   },
   "homepage": "https://github.com/vasille-js/vasille-js#readme",
-  "dependencies": {
-    "vasille-dx": "^3.0.3"
-  },
   "devDependencies": {
     "@babel/parser": "^7.26.1",
     "@babel/plugin-syntax-jsx": "^7.25.9",
@@ -46,6 +45,8 @@
     "path": "^0.12.7",
     "prettier": "^3.3.3",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "vasille-css": "^3.0.3",
+    "vasille-dx": "^3.0.3"
   }
 }