babel-plugin-vasille - npm Package Compare versions

Comparing version 0.99.2 to 0.99.3

lib-node/call.js

@@ -26,3 +26,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.requiresContext = exports.composeOnly = void 0;
+exports.requiresContext = exports.styleOnly = exports.composeOnly = void 0;
 exports.calls = calls;
@@ -42,2 +42,12 @@ const t = __importStar(require("@babel/types"));
 ];
+exports.styleOnly = [
+    "theme",
+    "dark",
+    "mobile",
+    "tablet",
+    "laptop",
+    "prefersDark",
+    "prefersLight",
+    "webStyleSheet",
+];
 exports.requiresContext = ["awaited", "forward"];
@@ -59,5 +69,6 @@ const requiresContextSet = new Set(exports.requiresContext);
         }
-        // The global object is overrided
-        if (internal.stack.get(internal.global) !== undefined) {
-            return false;
+        const global = internal.stack.get(internal.global) === undefined;
+        const cssGlobal = internal.stack.get(internal.cssGlobal) === undefined;
+        if (!global && !cssGlobal) {
+            return;
         }
@@ -72,3 +83,3 @@ const propName = t.isMemberExpression(callee)
         if (t.isMemberExpression(callee) && t.isIdentifier(callee.object) && propName) {
-            if (callee.object.name === internal.global && set.has(propName)) {
+            if (global && callee.object.name === internal.global && set.has(propName)) {
                 if (requiresContextSet.has(callee.object.name) && t.isCallExpression(node)) {
@@ -79,2 +90,5 @@ node.arguments.unshift(internal_1.ctx);
             }
+            if (cssGlobal && callee.object.name === internal.cssGlobal && set.has(propName)) {
+                return callee.object.name;
+            }
         }
@@ -81,0 +95,0 @@ }

lib-node/mesh.js

@@ -142,8 +142,17 @@ "use strict";
         }
-        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);
@@ -159,8 +168,2 @@ meshAllUnknown(path.get("arguments"), internal);
         }
-        case "OptionalCallExpression": {
-            const path = nodePath;
-            meshExpression(path.get("callee"), internal);
-            meshAllUnknown(path.get("arguments"), internal);
-            break;
-        }
         case "AssignmentExpression": {
@@ -167,0 +170,0 @@ const path = nodePath;

lib-node/transformer.js

@@ -30,2 +30,3 @@ "use strict";
 const mesh_1 = require("./mesh");
+const css_transformer_1 = require("./css-transformer");
 const imports = new Map([
@@ -45,2 +46,9 @@ ["vasille-dx", "VasilleDX"],
     "setModel",
+    "theme",
+    "dark",
+    "mobile",
+    "tablet",
+    "laptop",
+    "prefersDark",
+    "prefersLight",
 ]);
@@ -52,2 +60,3 @@ function extractText(node) {
     let id;
+    let stylesConnected = false;
     const internal = {
@@ -64,2 +73,3 @@ get id() {
         global: "",
+        cssGlobal: "",
         prefix: "Vasille_",
@@ -79,2 +89,6 @@ importStatement: null,
                         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("$"));
@@ -86,2 +100,5 @@ }
                         internal.mapping.set(local, imported);
+                        if (imported === "webStyleSheet") {
+                            stylesConnected = true;
+                        }
                         if (!id) {
@@ -102,8 +119,32 @@ id = t.identifier(name);
             }
+            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);
+            }
         }
@@ -110,0 +151,0 @@ }

lib/call.js

@@ -1,31 +0,4 @@
-"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.requiresContext = exports.composeOnly = void 0;
-exports.calls = calls;
-const t = __importStar(require("@babel/types"));
-const internal_1 = require("./internal");
-exports.composeOnly = [
+import * as t from "@babel/types";
+import { ctx } from "./internal";
+export const composeOnly = [
     "forward",
@@ -41,5 +14,15 @@ "watch",
 ];
-exports.requiresContext = ["awaited", "forward"];
-const requiresContextSet = new Set(exports.requiresContext);
-function calls(node, names, internal) {
+export const styleOnly = [
+    "theme",
+    "dark",
+    "mobile",
+    "tablet",
+    "laptop",
+    "prefersDark",
+    "prefersLight",
+    "webStyleSheet",
+];
+export const requiresContext = ["awaited", "forward"];
+const requiresContextSet = new Set(requiresContext);
+export function calls(node, names, internal) {
     const set = new Set(names);
@@ -52,3 +35,3 @@ const callee = t.isCallExpression(node) ? node.callee : null;
                 if (requiresContextSet.has(callee.name) && t.isCallExpression(node)) {
-                    node.arguments.unshift(internal_1.ctx);
+                    node.arguments.unshift(ctx);
                 }
@@ -59,5 +42,6 @@ return mapped;
         }
-        // The global object is overrided
-        if (internal.stack.get(internal.global) !== undefined) {
-            return false;
+        const global = internal.stack.get(internal.global) === undefined;
+        const cssGlobal = internal.stack.get(internal.cssGlobal) === undefined;
+        if (!global && !cssGlobal) {
+            return;
         }
@@ -72,8 +56,11 @@ const propName = t.isMemberExpression(callee)
         if (t.isMemberExpression(callee) && t.isIdentifier(callee.object) && propName) {
-            if (callee.object.name === internal.global && set.has(propName)) {
+            if (global && callee.object.name === internal.global && set.has(propName)) {
                 if (requiresContextSet.has(callee.object.name) && t.isCallExpression(node)) {
-                    node.arguments.unshift(internal_1.ctx);
+                    node.arguments.unshift(ctx);
                 }
                 return callee.object.name;
             }
+            if (cssGlobal && callee.object.name === internal.cssGlobal && set.has(propName)) {
+                return callee.object.name;
+            }
         }
@@ -80,0 +67,0 @@ }

lib/expression.js

@@ -1,39 +0,4 @@
-"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.encodeName = encodeName;
-exports.checkNode = checkNode;
-exports.checkOrIgnoreAllExpressions = checkOrIgnoreAllExpressions;
-exports.checkAllExpressions = checkAllExpressions;
-exports.checkAllUnknown = checkAllUnknown;
-exports.chekOrIgnoreExpression = chekOrIgnoreExpression;
-exports.checkExpression = checkExpression;
-exports.checkStatements = checkStatements;
-exports.checkStatement = checkStatement;
-exports.checkFunction = checkFunction;
-const t = __importStar(require("@babel/types"));
-const internal_1 = require("./internal");
-function encodeName(name) {
+import * as t from "@babel/types";
+import { StackedStates } from "./internal";
+export function encodeName(name) {
     return t.identifier(`Vasille_${name}`);
@@ -122,3 +87,3 @@ }
 }
-function checkNode(path, internal) {
+export function checkNode(path, internal) {
     const search = {
@@ -128,3 +93,3 @@ external: internal,
         self: null,
-        stack: new internal_1.StackedStates(),
+        stack: new StackedStates(),
     };
@@ -154,3 +119,3 @@ if (t.isIdentifier(path.node)) {
 }
-function checkOrIgnoreAllExpressions(nodePaths, search) {
+export function checkOrIgnoreAllExpressions(nodePaths, search) {
     for (const path of nodePaths) {
@@ -162,3 +127,3 @@ if (t.isExpression(path.node)) {
 }
-function checkAllExpressions(nodePaths, search) {
+export function checkAllExpressions(nodePaths, search) {
     for (const path of nodePaths) {
@@ -168,3 +133,3 @@ checkExpression(path, search);
 }
-function checkAllUnknown(paths, internal) {
+export function checkAllUnknown(paths, internal) {
     for (const path of paths) {
@@ -179,3 +144,3 @@ if (t.isSpreadElement(path.node)) {
 }
-function chekOrIgnoreExpression(path, search) {
+export function chekOrIgnoreExpression(path, search) {
     if (t.isExpression(path.node)) {
@@ -185,3 +150,3 @@ checkExpression(path, search);
 }
-function checkExpression(nodePath, search) {
+export function checkExpression(nodePath, search) {
     const expr = nodePath.node;
@@ -387,3 +352,3 @@ if (!expr) {
 }
-function checkStatements(paths, search) {
+export function checkStatements(paths, search) {
     for (const path of paths) {
@@ -423,3 +388,3 @@ checkStatement(path, search);
 }
-function checkStatement(path, search) {
+export function checkStatement(path, search) {
     const statement = path.node;
@@ -552,3 +517,3 @@ if (!statement) {
 }
-function checkFunction(path, search) {
+export function checkFunction(path, search) {
     const node = path.node;
@@ -555,0 +520,0 @@ if (t.isExpression(node.body)) {

lib/index.js

@@ -1,6 +0,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
-const transformer_1 = require("./transformer");
-function default_1() {
+import { trProgram } from "./transformer";
+export default function () {
     return {
@@ -10,3 +7,3 @@ name: "Vasille",
             Program(path, params) {
-                (0, transformer_1.trProgram)(path, params.opts.devMode !== false);
+                trProgram(path, params.opts.devMode !== false);
             },
@@ -13,0 +10,0 @@ },

lib/internal.js

@@ -1,29 +0,3 @@
-"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.ctx = exports.StackedStates = void 0;
-const t = __importStar(require("@babel/types"));
-class StackedStates {
+import * as t from "@babel/types";
+export class StackedStates {
     constructor() {
@@ -51,3 +25,2 @@ this.maps = [];
 }
-exports.StackedStates = StackedStates;
-exports.ctx = t.identifier("Vasille");
+export const ctx = t.identifier("Vasille");

lib/jsx-detect.js

@@ -1,31 +0,3 @@
-"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.exprHasJsx = exprHasJsx;
-exports.statementHasJsx = statementHasJsx;
-exports.bodyHasJsx = bodyHasJsx;
-const t = __importStar(require("@babel/types"));
-function exprHasJsx(node) {
+import * as t from "@babel/types";
+export function exprHasJsx(node) {
     if (t.isBinaryExpression(node)) {
@@ -51,3 +23,3 @@ return (t.isExpression(node.left) && exprHasJsx(node.left)) || exprHasJsx(node.right);
 }
-function statementHasJsx(statement) {
+export function statementHasJsx(statement) {
     if (t.isExpressionStatement(statement)) {
@@ -84,3 +56,3 @@ return exprHasJsx(statement.expression);
 }
-function bodyHasJsx(node) {
+export function bodyHasJsx(node) {
     if (t.isExpression(node)) {
@@ -87,0 +59,0 @@ return exprHasJsx(node);

lib/jsx.js

@@ -1,34 +0,7 @@
-"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.transformJsx = transformJsx;
-exports.transformJsxArray = transformJsxArray;
-const t = __importStar(require("@babel/types"));
-const internal_1 = require("./internal");
-const lib_1 = require("./lib");
-const mesh_1 = require("./mesh");
-const jsx_detect_1 = require("./jsx-detect");
-function transformJsx(path, internal) {
+import * as t from "@babel/types";
+import { ctx } from "./internal";
+import { exprCall } from "./lib";
+import { compose, meshExpression } from "./mesh";
+import { bodyHasJsx } from "./jsx-detect";
+export function transformJsx(path, internal) {
     if (t.isJSXElement(path.node)) {
@@ -39,3 +12,3 @@ return [transformJsxElement(path, internal)];
 }
-function transformJsxArray(paths, internal) {
+export function transformJsxArray(paths, internal) {
     const result = [];
@@ -52,3 +25,3 @@ for (const path of paths) {
                     .replace(/\s*\n\s*/gm, "\n");
-                const call = t.callExpression(t.memberExpression(internal_1.ctx, t.identifier("text")), [t.stringLiteral(fixed)]);
+                const call = t.callExpression(t.memberExpression(ctx, t.identifier("text")), [t.stringLiteral(fixed)]);
                 call.loc = path.node.loc;
@@ -75,3 +48,3 @@ if (call.loc) {
             const value = transformJsxExpressionContainer(path, internal, false, false);
-            const call = t.callExpression(t.memberExpression(internal_1.ctx, t.identifier("text")), [value]);
+            const call = t.callExpression(t.memberExpression(ctx, t.identifier("text")), [value]);
             call.loc = value.loc;
@@ -93,4 +66,4 @@ result.push(t.expressionStatement(call));
         (t.isFunctionExpression(path.node.expression) || t.isArrowFunctionExpression(path.node.expression)) &&
-        (0, jsx_detect_1.bodyHasJsx)(path.node.expression.body)) {
-        (0, mesh_1.compose)(path.get("expression"), internal, isInternalSlot);
+        bodyHasJsx(path.node.expression.body)) {
+        compose(path.get("expression"), internal, isInternalSlot);
         if (!isInternalSlot) {
@@ -100,6 +73,6 @@ if (path.node.expression.params.length < 1) {
             }
-            path.node.expression.params.push(internal_1.ctx);
+            path.node.expression.params.push(ctx);
         }
         else {
-            path.node.expression.params.unshift(internal_1.ctx);
+            path.node.expression.params.unshift(ctx);
         }
@@ -111,5 +84,5 @@ path.node.expression.loc = loc;
         (t.isFunctionExpression(path.node.expression) || t.isArrowFunctionExpression(path.node.expression))) {
-        path.node.expression.params.unshift(internal_1.ctx);
+        path.node.expression.params.unshift(ctx);
     }
-    let call = (0, lib_1.exprCall)(path.get("expression"), path.node.expression, internal);
+    let call = exprCall(path.get("expression"), path.node.expression, internal);
     if (!call &&
@@ -161,3 +134,3 @@ t.isIdentifier(path.node.expression) &&
                             if (t.isExpression(path.node.expression)) {
-                                (0, mesh_1.meshExpression)(path.get("expression"), internal);
+                                meshExpression(path.get("expression"), internal);
                             }
@@ -182,3 +155,3 @@ events.push(idToProp(name, path.node.expression, 2));
                                     if (t.isLogicalExpression(item) && item.operator === "&&" && t.isStringLiteral(item.right)) {
-                                        const call = (0, lib_1.exprCall)(elementPath.get("left"), item.left, internal);
+                                        const call = exprCall(elementPath.get("left"), item.left, internal);
                                         classObject.push(idToProp(item.right, call !== null && call !== void 0 ? call : item.left));
@@ -192,5 +165,5 @@ }
                                                 const prop = propPath;
-                                                const value = (_a = (0, lib_1.exprCall)(prop.get("value"), prop.node.value, internal)) !== null && _a !== void 0 ? _a : prop.node.value;
+                                                const value = (_a = exprCall(prop.get("value"), prop.node.value, internal)) !== null && _a !== void 0 ? _a : prop.node.value;
                                                 if (t.isExpression(prop.node.key) && !t.isIdentifier(prop.node.key)) {
-                                                    (0, mesh_1.meshExpression)(prop.get("key"), internal);
+                                                    meshExpression(prop.get("key"), internal);
                                                 }
@@ -215,3 +188,3 @@ classObject.push(t.objectProperty(prop.node.key, value));
                                     else {
-                                        const call = (0, lib_1.exprCall)(elementPath, item, internal);
+                                        const call = exprCall(elementPath, item, internal);
                                         classElements.push(call !== null && call !== void 0 ? call : item);
@@ -234,3 +207,3 @@ }
                             const jsxContainerPath = jsxAttrPath.get("value");
-                            const value = (0, lib_1.exprCall)(jsxContainerPath.get("expression"), attr.value.expression, internal);
+                            const value = exprCall(jsxContainerPath.get("expression"), attr.value.expression, internal);
                             attrs.push(t.objectProperty(t.identifier("class"), value !== null && value !== void 0 ? value : attr.value.expression));
@@ -259,5 +232,5 @@ if (value) {
                                     const prop = propPath;
-                                    const value = (_b = (0, lib_1.exprCall)(prop.get("value"), prop.node.value, internal)) !== null && _b !== void 0 ? _b : prop.node.value;
+                                    const value = (_b = exprCall(prop.get("value"), prop.node.value, internal)) !== null && _b !== void 0 ? _b : prop.node.value;
                                     if (t.isExpression(prop.node.key) && !t.isIdentifier(prop.node.key)) {
-                                        (0, mesh_1.meshExpression)(prop.get("key"), internal);
+                                        meshExpression(prop.get("key"), internal);
                                     }
@@ -309,3 +282,3 @@ // style={{a: "b"}} -> static in compile time
                             const literalPath = jsxContainerPath.get("expression");
-                            const value = (0, lib_1.exprCall)(literalPath, attr.value.expression, internal);
+                            const value = exprCall(literalPath, attr.value.expression, internal);
                             attrs.push(t.objectProperty(t.identifier("style"), value !== null && value !== void 0 ? value : attr.value.expression));
@@ -337,3 +310,3 @@ if (value) {
                             const value = t.isExpression(attr.value.expression)
-                                ? (0, lib_1.exprCall)(attrPath.get("value"), attr.value.expression, internal)
+                                ? exprCall(attrPath.get("value"), attr.value.expression, internal)
                                 : undefined;
@@ -368,3 +341,3 @@ bind.push(idToProp(name.name, value !== null && value !== void 0 ? value : (t.isExpression(attr.value.expression) ? attr.value.expression : t.booleanLiteral(true))));
         const statements = transformJsxArray(path.get("children"), internal);
-        const call = t.callExpression(t.memberExpression(internal_1.ctx, t.identifier("tag")), [
+        const call = t.callExpression(t.memberExpression(ctx, t.identifier("tag")), [
             t.stringLiteral(name.name),
@@ -385,3 +358,3 @@ t.objectExpression([
             ]),
-            ...(statements.length > 0 ? [t.arrowFunctionExpression([internal_1.ctx], t.blockStatement(statements))] : []),
+            ...(statements.length > 0 ? [t.arrowFunctionExpression([ctx], t.blockStatement(statements))] : []),
         ]);
@@ -432,3 +405,3 @@ call.loc = path.node.loc;
             run = element.children[0].expression;
-            run.params.push(internal_1.ctx);
+            run.params.push(ctx);
         }
@@ -438,6 +411,6 @@ else {
             if (statements.length > 0) {
-                run = t.arrowFunctionExpression([internal_1.ctx], t.blockStatement(statements));
+                run = t.arrowFunctionExpression([ctx], t.blockStatement(statements));
             }
         }
-        const call = t.callExpression(t.identifier(name.name), [internal_1.ctx, t.objectExpression(props), ...(run ? [run] : [])]);
+        const call = t.callExpression(t.identifier(name.name), [ctx, t.objectExpression(props), ...(run ? [run] : [])]);
         call.loc = path.node.loc;
@@ -444,0 +417,0 @@ return t.expressionStatement(call);

lib/lib.js

@@ -1,41 +0,7 @@
-"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.parseCalculateCall = parseCalculateCall;
-exports.exprCall = exprCall;
-exports.forwardOnlyExpr = forwardOnlyExpr;
-exports.own = own;
-exports.ref = ref;
-exports.reactiveObject = reactiveObject;
-exports.arrayModel = arrayModel;
-exports.setModel = setModel;
-exports.mapModel = mapModel;
-const t = __importStar(require("@babel/types"));
-const expression_1 = require("./expression");
-const internal_1 = require("./internal");
-const call_1 = require("./call");
-function parseCalculateCall(path, internal) {
-    if (t.isCallExpression(path.node) && (0, call_1.calls)(path.node, ["calculate", "watch"], internal)) {
+import * as t from "@babel/types";
+import { checkNode, encodeName } from "./expression";
+import { ctx } from "./internal";
+import { calls } from "./call";
+export function parseCalculateCall(path, internal) {
+    if (t.isCallExpression(path.node) && calls(path.node, ["calculate", "watch"], internal)) {
         if (path.node.arguments.length !== 1) {
@@ -48,4 +14,4 @@ throw path.buildCodeFrameError("Vasille: Incorrect number of arguments");
             }
-            const exprData = (0, expression_1.checkNode)(path.get("arguments")[0], internal);
-            path.node.arguments[0].params = [...exprData.found.keys()].map(name => (0, expression_1.encodeName)(name));
+            const exprData = checkNode(path.get("arguments")[0], internal);
+            path.node.arguments[0].params = [...exprData.found.keys()].map(name => encodeName(name));
             return [path.node.arguments[0], ...exprData.found.values()];
@@ -59,13 +25,13 @@ }
 }
-function exprCall(path, expr, internal) {
+export function exprCall(path, expr, internal) {
     const calculateCall = parseCalculateCall(path, internal);
     if (calculateCall) {
-        return t.callExpression(t.memberExpression(internal_1.ctx, t.identifier("expr")), calculateCall);
+        return t.callExpression(t.memberExpression(ctx, t.identifier("expr")), calculateCall);
     }
-    const exprData = (0, expression_1.checkNode)(path, internal);
+    const exprData = checkNode(path, internal);
     return exprData.self
         ? exprData.self
         : exprData.found.size > 0 && expr
-            ? t.callExpression(t.memberExpression(internal_1.ctx, t.identifier("expr")), [
-                t.arrowFunctionExpression([...exprData.found.keys()].map(name => (0, expression_1.encodeName)(name)), expr),
+            ? t.callExpression(t.memberExpression(ctx, t.identifier("expr")), [
+                t.arrowFunctionExpression([...exprData.found.keys()].map(name => encodeName(name)), expr),
                 ...exprData.found.values(),
@@ -75,4 +41,4 @@ ])
 }
-function forwardOnlyExpr(path, expr, internal) {
-    if (t.isCallExpression(path.node) && (0, call_1.calls)(path.node, ["calculate"], internal)) {
+export function forwardOnlyExpr(path, expr, internal) {
+    if (t.isCallExpression(path.node) && calls(path.node, ["calculate"], internal)) {
         if (path.node.arguments.length !== 1) {
@@ -85,4 +51,4 @@ throw path.buildCodeFrameError("Vasille: Incorrect number of arguments");
             }
-            const exprData = (0, expression_1.checkNode)(path.get("arguments")[0], internal);
-            path.node.arguments[0].params = [...exprData.found.keys()].map(name => (0, expression_1.encodeName)(name));
+            const exprData = checkNode(path.get("arguments")[0], internal);
+            path.node.arguments[0].params = [...exprData.found.keys()].map(name => encodeName(name));
             return t.callExpression(t.memberExpression(internal.id, t.identifier("ex")), [
@@ -101,3 +67,3 @@ path.node.arguments[0],
     }
-    const exprData = (0, expression_1.checkNode)(path, internal);
+    const exprData = checkNode(path, internal);
     return exprData.self
@@ -107,3 +73,3 @@ ? t.callExpression(t.memberExpression(internal.id, t.identifier("fo")), [exprData.self])
             ? t.callExpression(t.memberExpression(internal.id, t.identifier("ex")), [
-                t.arrowFunctionExpression([...exprData.found.keys()].map(name => (0, expression_1.encodeName)(name)), expr),
+                t.arrowFunctionExpression([...exprData.found.keys()].map(name => encodeName(name)), expr),
                 ...exprData.found.values(),
@@ -113,19 +79,19 @@ ])
 }
-function own(expr) {
-    return t.callExpression(t.memberExpression(internal_1.ctx, t.identifier("own")), [expr]);
+export function own(expr) {
+    return t.callExpression(t.memberExpression(ctx, t.identifier("own")), [expr]);
 }
-function ref(expr) {
-    return t.callExpression(t.memberExpression(internal_1.ctx, t.identifier("ref")), expr ? [expr] : []);
+export function ref(expr) {
+    return t.callExpression(t.memberExpression(ctx, t.identifier("ref")), expr ? [expr] : []);
 }
-function reactiveObject(init, internal) {
-    return t.callExpression(t.memberExpression(internal.id, t.identifier("ro")), [internal_1.ctx, init]);
+export function reactiveObject(init, internal) {
+    return t.callExpression(t.memberExpression(internal.id, t.identifier("ro")), [ctx, init]);
 }
-function arrayModel(init, internal) {
-    return t.callExpression(t.memberExpression(internal.id, t.identifier("am")), [internal_1.ctx, ...(init ? [init] : [])]);
+export function arrayModel(init, internal) {
+    return t.callExpression(t.memberExpression(internal.id, t.identifier("am")), [ctx, ...(init ? [init] : [])]);
 }
-function setModel(args, internal) {
-    return t.callExpression(t.memberExpression(internal.id, t.identifier("sm")), [internal_1.ctx, ...args]);
+export function setModel(args, internal) {
+    return t.callExpression(t.memberExpression(internal.id, t.identifier("sm")), [ctx, ...args]);
 }
-function mapModel(args, internal) {
-    return t.callExpression(t.memberExpression(internal.id, t.identifier("mm")), [internal_1.ctx, ...args]);
+export function mapModel(args, internal) {
+    return t.callExpression(t.memberExpression(internal.id, t.identifier("mm")), [ctx, ...args]);
 }

lib/mesh.js

@@ -1,50 +0,8 @@
-"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.meshOrIgnoreAllExpressions = meshOrIgnoreAllExpressions;
-exports.meshAllExpressions = meshAllExpressions;
-exports.meshComposeCall = meshComposeCall;
-exports.meshAllUnknown = meshAllUnknown;
-exports.meshLValue = meshLValue;
-exports.meshOrIgnoreExpression = meshOrIgnoreExpression;
-exports.meshExpression = meshExpression;
-exports.meshBody = meshBody;
-exports.meshStatements = meshStatements;
-exports.ignoreParams = ignoreParams;
-exports.reactiveArrayPattern = reactiveArrayPattern;
-exports.meshStatement = meshStatement;
-exports.meshFunction = meshFunction;
-exports.composeExpression = composeExpression;
-exports.composeStatements = composeStatements;
-exports.composeStatement = composeStatement;
-exports.compose = compose;
-const t = __importStar(require("@babel/types"));
-const call_1 = require("./call");
-const internal_1 = require("./internal");
-const jsx_detect_1 = require("./jsx-detect");
-const lib_1 = require("./lib");
-const jsx_1 = require("./jsx");
-function meshOrIgnoreAllExpressions(nodePaths, internal) {
+import * as t from "@babel/types";
+import { calls, composeOnly, styleOnly } from "./call";
+import { ctx } from "./internal";
+import { bodyHasJsx } from "./jsx-detect";
+import { arrayModel, exprCall, forwardOnlyExpr, mapModel, own, parseCalculateCall, reactiveObject, ref, setModel, } from "./lib";
+import { transformJsx } from "./jsx";
+export function meshOrIgnoreAllExpressions(nodePaths, internal) {
     for (const path of nodePaths) {
@@ -56,3 +14,3 @@ if (t.isExpression(path.node)) {
 }
-function meshAllExpressions(nodePaths, internal) {
+export function meshAllExpressions(nodePaths, internal) {
     for (const path of nodePaths) {
@@ -62,3 +20,3 @@ meshExpression(path, internal);
 }
-function meshComposeCall(call, name, nodePath, internal) {
+export function meshComposeCall(call, name, nodePath, internal) {
     const arg = call.arguments[0];
@@ -70,3 +28,3 @@ if (call.arguments.length !== 1 || !(t.isFunctionExpression(arg) || t.isArrowFunctionExpression(arg))) {
     compose(fnPath, internal, false);
-    arg.params.unshift(internal_1.ctx);
+    arg.params.unshift(ctx);
     if (t.isArrowFunctionExpression(arg) && internal.devMode) {
@@ -79,3 +37,3 @@ fnPath.replaceWith(t.functionExpression(t.identifier(internal.prefix + (name ? name.name : "Default")), arg.params, t.isBlockStatement(arg.body) ? arg.body : t.blockStatement([t.returnStatement(arg.body)]), false, arg.async));
 }
-function meshAllUnknown(paths, internal) {
+export function meshAllUnknown(paths, internal) {
     for (const path of paths) {
@@ -90,3 +48,3 @@ if (t.isSpreadElement(path.node)) {
 }
-function meshLValue(path, internal) {
+export function meshLValue(path, internal) {
     const node = path.node;
@@ -102,3 +60,3 @@ if (t.isArrayPattern(node) ||
 }
-function meshOrIgnoreExpression(path, internal) {
+export function meshOrIgnoreExpression(path, internal) {
     if (t.isExpression(path.node)) {
@@ -108,3 +66,3 @@ meshExpression(path, internal);
 }
-function meshExpression(nodePath, internal) {
+export function meshExpression(nodePath, internal) {
     const expr = nodePath.node;
@@ -114,3 +72,3 @@ if (!expr) {
     }
-    if ((0, call_1.calls)(expr, ["compose", "extend"], internal)) {
+    if (calls(expr, ["compose", "extend"], internal)) {
         meshComposeCall(expr, null, nodePath, internal);
@@ -150,11 +108,20 @@ return;
         }
-        case "CallExpression": {
+        case "CallExpression":
+        case "OptionalCallExpression": {
             const path = nodePath;
-            const callsFn = (0, call_1.calls)(path.node, call_1.composeOnly, internal);
+            const callsFn = calls(path.node, composeOnly, internal);
+            const callsStyleHint = calls(path.node, styleOnly, internal);
+            const callsStyleCreate = 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);
-            if ((0, call_1.calls)(path.node, ["calculate"], internal)) {
+            if (calls(path.node, ["calculate"], internal)) {
                 if (path.node.arguments.length !== 1 && !t.isExpression(path.node.arguments[0])) {
@@ -167,8 +134,2 @@ throw path.buildCodeFrameError("Vasille: Incorrect calculate argument");
         }
-        case "OptionalCallExpression": {
-            const path = nodePath;
-            meshExpression(path.get("callee"), internal);
-            meshAllUnknown(path.get("arguments"), internal);
-            break;
-        }
         case "AssignmentExpression": {
@@ -179,3 +140,3 @@ const path = nodePath;
             if (t.isIdentifier(left) && internal.stack.get(left.name) === 4 /* VariableState.ReactivePointer */) {
-                const replaceWith = (0, lib_1.forwardOnlyExpr)(path.get("right"), path.node.right, internal);
+                const replaceWith = forwardOnlyExpr(path.get("right"), path.node.right, internal);
                 if (replaceWith) {
@@ -361,3 +322,3 @@ path.get("right").replaceWith(replaceWith);
 }
-function meshBody(path, internal) {
+export function meshBody(path, internal) {
     if (t.isExpression(path.node)) {
@@ -372,3 +333,3 @@ meshExpression(path, internal);
 }
-function meshStatements(paths, internal) {
+export function meshStatements(paths, internal) {
     for (const path of paths) {
@@ -378,3 +339,3 @@ meshStatement(path, internal);
 }
-function ignoreParams(val, internal) {
+export function ignoreParams(val, internal) {
     if (t.isAssignmentPattern(val)) {
@@ -404,3 +365,3 @@ val = val.left;
 }
-function reactiveArrayPattern(expr, internal) {
+export function reactiveArrayPattern(expr, internal) {
     if (t.isArrayPattern(expr)) {
@@ -421,3 +382,3 @@ for (const element of expr.elements) {
 }
-function meshStatement(path, internal) {
+export function meshStatement(path, internal) {
     const statement = path.node;
@@ -532,3 +493,3 @@ if (!statement) {
                 let ignore = true;
-                if (expr && t.isIdentifier(declaration.node.id) && (0, call_1.calls)(expr, ["compose", "extend"], internal)) {
+                if (expr && t.isIdentifier(declaration.node.id) && calls(expr, ["compose", "extend"], internal)) {
                     meshComposeCall(expr, declaration.node.id, declaration.get("init"), internal);
@@ -598,3 +559,3 @@ }
 }
-function meshFunction(path, internal) {
+export function meshFunction(path, internal) {
     if (t.isFunctionDeclaration(path.node) && path.node.id) {
@@ -620,3 +581,3 @@ internal.stack.set(path.node.id.name, 1 /* VariableState.Ignored */);
 }
-function composeExpression(path, internal) {
+export function composeExpression(path, internal) {
     const expr = path.node;
@@ -629,3 +590,3 @@ if (!expr) {
             const assign = expr;
-            if ((0, call_1.calls)(assign.right, ["awaited"], internal)) {
+            if (calls(assign.right, ["awaited"], internal)) {
                 reactiveArrayPattern(assign.left, internal);
@@ -642,13 +603,13 @@ }
             let replaced = false;
-            if ((0, call_1.calls)(call, ["watch"], internal)) {
-                const args = (0, lib_1.parseCalculateCall)(path, internal);
+            if (calls(call, ["watch"], internal)) {
+                const args = parseCalculateCall(path, internal);
                 if (args) {
-                    path.replaceWith(t.callExpression(t.memberExpression(internal_1.ctx, t.identifier("watch")), args));
+                    path.replaceWith(t.callExpression(t.memberExpression(ctx, t.identifier("watch")), args));
                     replaced = true;
                 }
             }
-            else if ((0, call_1.calls)(call, ["arrayModel"], internal)) {
+            else if (calls(call, ["arrayModel"], internal)) {
                 const value = call.arguments[0];
                 if (t.isArrayExpression(value)) {
-                    path.replaceWith((0, lib_1.arrayModel)(value, internal));
+                    path.replaceWith(arrayModel(value, internal));
                     replaced = true;
@@ -660,6 +621,6 @@ }
             }
-            else if ((0, call_1.calls)(call, ["mapModel", "setModel"], internal)) {
+            else if (calls(call, ["mapModel", "setModel"], internal)) {
                 const args = call.arguments;
-                const name = (0, call_1.calls)(call, ["mapModel", "setModel"], internal);
-                path.replaceWith(name === "mapModel" ? (0, lib_1.mapModel)(args, internal) : (0, lib_1.setModel)(args, internal));
+                const name = calls(call, ["mapModel", "setModel"], internal);
+                path.replaceWith(name === "mapModel" ? mapModel(args, internal) : setModel(args, internal));
                 replaced = true;
@@ -674,3 +635,3 @@ }
         case "JSXFragment":
-            path.replaceWithMultiple((0, jsx_1.transformJsx)(path, internal));
+            path.replaceWithMultiple(transformJsx(path, internal));
             break;
@@ -681,3 +642,3 @@ default:
 }
-function composeStatements(paths, internal) {
+export function composeStatements(paths, internal) {
     for (const path of paths) {
@@ -687,3 +648,3 @@ composeStatement(path, internal);
 }
-function composeStatement(path, internal) {
+export function composeStatement(path, internal) {
     const statement = path.node;
@@ -697,3 +658,3 @@ if (!statement) {
             const fn = _path.node;
-            if ((0, jsx_detect_1.bodyHasJsx)(fn.body)) {
+            if (bodyHasJsx(fn.body)) {
                 compose(_path, internal, false);
@@ -800,3 +761,3 @@ }
                 ignoreParams(declaration.node.id, internal);
-                if ((0, call_1.calls)(declaration.node.init, ["awaited"], internal)) {
+                if (calls(declaration.node.init, ["awaited"], internal)) {
                     reactiveArrayPattern(declaration.node.id, internal);
@@ -809,3 +770,3 @@ meshAllUnknown(declaration.get("init").get("arguments"), internal);
                     const init = declaration.node.init;
-                    if ((0, call_1.calls)(init, ["value"], internal)) {
+                    if (calls(init, ["value"], internal)) {
                         internal.stack.set(id.name, 1 /* VariableState.Ignored */);
@@ -815,11 +776,11 @@ declaration.get("init").replaceWith(init.arguments[0]);
                     }
-                    else if ((0, call_1.calls)(init, ["bind"], internal)) {
+                    else if (calls(init, ["bind"], internal)) {
                         const argument = init.arguments[0];
                         const replaceWith = declares === 2 /* VariableState.Reactive */
-                            ? (0, lib_1.forwardOnlyExpr)(declaration.get("init"), argument, internal)
-                            : (0, lib_1.exprCall)(declaration.get("init"), argument, internal);
-                        let insertNode = replaceWith !== null && replaceWith !== void 0 ? replaceWith : (0, lib_1.ref)(t.isExpression(argument) ? argument : null);
+                            ? forwardOnlyExpr(declaration.get("init"), argument, internal)
+                            : exprCall(declaration.get("init"), argument, internal);
+                        let insertNode = replaceWith !== null && replaceWith !== void 0 ? replaceWith : ref(t.isExpression(argument) ? argument : null);
                         if (declares === 2 /* VariableState.Reactive */) {
                             internal.stack.set(id.name, 4 /* VariableState.ReactivePointer */);
-                            insertNode = (0, lib_1.own)(insertNode);
+                            insertNode = own(insertNode);
                         }
@@ -832,8 +793,8 @@ else {
                     }
-                    else if ((0, call_1.calls)(init, ["ref"], internal)) {
+                    else if (calls(init, ["ref"], internal)) {
                         const argument = init.arguments[0];
                         internal.stack.set(id.name, 2 /* VariableState.Reactive */);
-                        declaration.get("init").replaceWith((0, lib_1.ref)(t.isExpression(argument) ? argument : null));
+                        declaration.get("init").replaceWith(ref(t.isExpression(argument) ? argument : null));
                     }
-                    else if ((0, call_1.calls)(init, ["reactiveObject"], internal)) {
+                    else if (calls(init, ["reactiveObject"], internal)) {
                         const value = init.arguments[0];
@@ -844,3 +805,3 @@ if (kind !== "const") {
                         if (t.isObjectExpression(value)) {
-                            declaration.get("init").replaceWith((0, lib_1.reactiveObject)(value, internal));
+                            declaration.get("init").replaceWith(reactiveObject(value, internal));
                             internal.stack.set(id.name, 3 /* VariableState.ReactiveObject */);
@@ -852,3 +813,3 @@ }
                     }
-                    else if ((0, call_1.calls)(init, ["arrayModel"], internal)) {
+                    else if (calls(init, ["arrayModel"], internal)) {
                         const value = init.arguments[0];
@@ -859,3 +820,3 @@ if (kind !== "const") {
                         if (t.isArrayExpression(value)) {
-                            declaration.get("init").replaceWith((0, lib_1.arrayModel)(value, internal));
+                            declaration.get("init").replaceWith(arrayModel(value, internal));
                         }
@@ -866,5 +827,5 @@ else {
                     }
-                    else if ((0, call_1.calls)(init, ["mapModel", "setModel"], internal)) {
+                    else if (calls(init, ["mapModel", "setModel"], internal)) {
                         const args = init.arguments;
-                        const name = (0, call_1.calls)(init, ["mapModel", "setModel"], internal);
+                        const name = calls(init, ["mapModel", "setModel"], internal);
                         if (kind !== "const") {
@@ -875,3 +836,3 @@ declaration.buildCodeFrameError(`Vasille: ${name === "mapModel" ? "Map" : "Set"} models must be declared as constants`);
                             .get("init")
-                            .replaceWith(name === "mapModel" ? (0, lib_1.mapModel)(args, internal) : (0, lib_1.setModel)(args, internal));
+                            .replaceWith(name === "mapModel" ? mapModel(args, internal) : setModel(args, internal));
                     }
@@ -882,3 +843,3 @@ else if (t.isObjectExpression(init)) {
                         }
-                        declaration.get("init").replaceWith((0, lib_1.reactiveObject)(init, internal));
+                        declaration.get("init").replaceWith(reactiveObject(init, internal));
                         internal.stack.set(id.name, 3 /* VariableState.ReactiveObject */);
@@ -890,3 +851,3 @@ }
                         }
-                        declaration.get("init").replaceWith((0, lib_1.arrayModel)(init, internal));
+                        declaration.get("init").replaceWith(arrayModel(init, internal));
                     }
@@ -900,13 +861,13 @@ else if (t.isNewExpression(init) && t.isIdentifier(init.callee)) {
                                 .get("init")
-                                .replaceWith(init.callee.name === "Map" ? (0, lib_1.mapModel)(init.arguments, internal) : (0, lib_1.setModel)(init.arguments, internal));
+                                .replaceWith(init.callee.name === "Map" ? mapModel(init.arguments, internal) : setModel(init.arguments, internal));
                         }
                     }
                     else if (declares === 2 /* VariableState.Reactive */) {
-                        const replaceWith = (0, lib_1.forwardOnlyExpr)(declaration.get("init"), declaration.node.init, internal);
+                        const replaceWith = forwardOnlyExpr(declaration.get("init"), declaration.node.init, internal);
                         meshInit = !replaceWith;
                         internal.stack.set(id.name, replaceWith ? 4 /* VariableState.ReactivePointer */ : 2 /* VariableState.Reactive */);
-                        declaration.get("init").replaceWith(replaceWith ? (0, lib_1.own)(replaceWith) : (0, lib_1.ref)(declaration.node.init));
+                        declaration.get("init").replaceWith(replaceWith ? own(replaceWith) : ref(declaration.node.init));
                     }
                     else {
-                        const replaceWith = (0, lib_1.exprCall)(declaration.get("init"), declaration.node.init, internal);
+                        const replaceWith = exprCall(declaration.get("init"), declaration.node.init, internal);
                         if (replaceWith) {
@@ -952,3 +913,3 @@ declaration.get("init").replaceWith(replaceWith);
 }
-function compose(path, internal, isInternalSlot) {
+export function compose(path, internal, isInternalSlot) {
     if (t.isFunctionDeclaration(path.node) && path.node.id) {
@@ -955,0 +916,0 @@ internal.stack.set(path.node.id.name, 1 /* VariableState.Ignored */);

lib/transformer.js

@@ -1,30 +0,5 @@
-"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.trProgram = trProgram;
-const t = __importStar(require("@babel/types"));
-const internal_1 = require("./internal");
-const mesh_1 = require("./mesh");
+import * as t from "@babel/types";
+import { StackedStates } from "./internal";
+import { meshStatement } from "./mesh";
+import { findStyleInNode } from "./css-transformer";
 const imports = new Map([
@@ -44,2 +19,9 @@ ["vasille-dx", "VasilleDX"],
     "setModel",
+    "theme",
+    "dark",
+    "mobile",
+    "tablet",
+    "laptop",
+    "prefersDark",
+    "prefersLight",
 ]);
@@ -49,4 +31,5 @@ function extractText(node) {
 }
-function trProgram(path, devMode) {
+export function trProgram(path, devMode) {
     let id;
+    let stylesConnected = false;
     const internal = {
@@ -60,5 +43,6 @@ get id() {
         },
-        stack: new internal_1.StackedStates(),
+        stack: new StackedStates(),
         mapping: new Map(),
         global: "",
+        cssGlobal: "",
         prefix: "Vasille_",
@@ -78,2 +62,6 @@ importStatement: null,
                         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("$"));
@@ -85,2 +73,5 @@ }
                         internal.mapping.set(local, imported);
+                        if (imported === "webStyleSheet") {
+                            stylesConnected = true;
+                        }
                         if (!id) {
@@ -101,8 +92,32 @@ id = t.identifier(name);
             }
+            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) {
+                    findStyleInNode(statementPath, internal);
+                }
                 return;
             }
-            (0, mesh_1.meshStatement)(statementPath, internal);
+            if (!stylesConnected || !findStyleInNode(statementPath, internal)) {
+                meshStatement(statementPath, internal);
+            }
         }
@@ -109,0 +124,0 @@ }

package.json

 {
   "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",
@@ -24,3 +24,5 @@ "type": "commonjs",
     "framework",
-    "dx"
+    "web",
+    "compiler",
+    "babel"
   ],
@@ -33,5 +35,2 @@ "author": "lixcode",
   "homepage": "https://github.com/vasille-js/vasille-js#readme",
-  "dependencies": {
-    "vasille-dx": "^3.0.3"
-  },
   "devDependencies": {
@@ -51,4 +50,6 @@ "@babel/parser": "^7.26.1",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "vasille-css": "^3.0.3",
+    "vasille-dx": "^3.0.3"
   }
 }

README.md

@@ -107,4 +107,4 @@ # Vasille
 * [ ] `100%` Test Coverage fot babel plugin.
-* [ ] Add CSS support (define styles in components).
-* [ ] Add custom `<input/>` components with 2-way value binding.
+* [x] Add CSS support (define styles in components).
+* [ ] Add custom `input` components with 2-way value binding.
 * [ ] Add router.
@@ -111,0 +111,0 @@ * [ ] Develop dev-tools extension for debugging.

No alert changes

Improved metrics

Total package byte prevSize

218389

increased by6.07%

Dependency count

0

decreased by-100%

Number of package files

22

increased by10%

Lines of code

5155

increased by6.29%

Worsened metrics

Dev dependency count

16

increased by14.29%

Dependency changes

• - Removedvasille-dx@^3.0.3

• - Removedvasille@3.0.2(transitive)

• - Removedvasille-dx@3.0.3(transitive)

• - Removedvasille-jsx@3.0.2(transitive)