babel-plugin-vasille 0.99.1 → 0.99.3

package/README.md

@@ -47,7 +47,7 @@ $ npx degit vasille-js/example-javascript my-project
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
-* [JavaScript Example](https://github.com/vas[README.md](..%2Ftest%2Fmy-app%2FREADME.md)ille-js/example-javascript)
+* [JavaScript Example](https://github.com/vasille-js/example-javascript)
 
 <hr>
 
@@ -104,8 +104,8 @@ All of these are supported:
 * [x] `100%` Test Coverage for the JSX library.
 * [x] Develop the `Vasille Babel Plugin`.
 * [ ] `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.
 * [ ] Develop dev-tools extension for debugging.
 * [ ] Develop a lot of libraries for the framework.

package/lib/call.js

@@ -1,5 +1,5 @@
 import * as t from "@babel/types";
-import { ctx } from "./internal.js";
+import { ctx } from "./internal";
 export const composeOnly = [
     "forward",
     "watch",
@@ -11,6 +11,16 @@ export const composeOnly = [
     "setModel",
     "reactiveObject",
 ];
+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) {
@@ -27,9 +37,10 @@ export function calls(node, names, internal) {
             }
             return false;
         }
-        // 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;
         }
         const propName = t.isMemberExpression(callee)
             ? t.isIdentifier(callee.property)
@@ -39,12 +50,15 @@ export function calls(node, names, internal) {
                     : null
             : null;
         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(ctx);
                 }
                 return callee.object.name;
             }
+            if (cssGlobal && callee.object.name === internal.cssGlobal && set.has(propName)) {
+                return callee.object.name;
+            }
         }
     }
     return false;

package/lib/css-transformer.js

@@ -0,0 +1,206 @@
+import * as t from "@babel/types";
+import { calls } from "./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 (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 (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 = 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);
+}
+export 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 &&
+        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/expression.js

@@ -1,5 +1,5 @@
 import * as t from "@babel/types";
-import { StackedStates } from "./internal.js";
+import { StackedStates } from "./internal";
 export function encodeName(name) {
     return t.identifier(`Vasille_${name}`);
 }

package/lib/index.js

@@ -1,10 +1,10 @@
-import { trProgram } from "./transformer.js";
+import { trProgram } from "./transformer";
 export default function () {
     return {
         name: "Vasille",
         visitor: {
             Program(path, params) {
-                trProgram(path, params.devMode !== false);
+                trProgram(path, params.opts.devMode !== false);
             },
         },
     };

package/lib/jsx.js

@@ -1,8 +1,8 @@
 import * as t from "@babel/types";
-import { ctx } from "./internal.js";
-import { exprCall } from "./lib.js";
-import { compose, meshExpression } from "./mesh.js";
-import { bodyHasJsx } from "./jsx-detect.js";
+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)) {
         return [transformJsxElement(path, internal)];
@@ -21,12 +21,31 @@ export function transformJsxArray(paths, internal) {
                     .replace(/\n\s+$/m, "")
                     .replace(/^\s*\n\s+/m, "")
                     .replace(/\s*\n\s*/gm, "\n");
-                result.push(t.expressionStatement(t.callExpression(t.memberExpression(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;
+                if (call.loc) {
+                    for (const char of path.node.value) {
+                        if (!/\s/.test(char)) {
+                            break;
+                        }
+                        if (char === "\n") {
+                            call.loc.start.column = 0;
+                            call.loc.start.line++;
+                        }
+                        else {
+                            call.loc.start.column++;
+                        }
+                        call.loc.start.index++;
+                    }
+                }
+                result.push(t.expressionStatement(call));
             }
         }
         else if (t.isJSXExpressionContainer(path.node)) {
             const value = transformJsxExpressionContainer(path, internal, false, false);
-            result.push(t.expressionStatement(t.callExpression(t.memberExpression(ctx, t.identifier("text")), [value])));
+            const call = t.callExpression(t.memberExpression(ctx, t.identifier("text")), [value]);
+            call.loc = value.loc;
+            result.push(t.expressionStatement(call));
         }
         else {
             throw path.buildCodeFrameError("Vasille: Spread child is not supported");
@@ -38,6 +57,7 @@ function transformJsxExpressionContainer(path, internal, acceptSlots, isInternal
     if (!t.isExpression(path.node.expression)) {
         return t.booleanLiteral(true);
     }
+    const loc = path.node.expression.loc;
     if (acceptSlots &&
         (t.isFunctionExpression(path.node.expression) || t.isArrowFunctionExpression(path.node.expression)) &&
         bodyHasJsx(path.node.expression.body)) {
@@ -51,6 +71,7 @@ function transformJsxExpressionContainer(path, internal, acceptSlots, isInternal
         else {
             path.node.expression.params.unshift(ctx);
         }
+        path.node.expression.loc = loc;
         return path.node.expression;
     }
     else if (isInternalSlot &&
@@ -63,15 +84,24 @@ function transformJsxExpressionContainer(path, internal, acceptSlots, isInternal
         internal.stack.get(path.node.expression.name) === 3 /* VariableState.ReactiveObject */) {
         call = t.callExpression(t.memberExpression(internal.id, t.identifier("rop")), [path.node.expression]);
     }
-    return call !== null && call !== void 0 ? call : path.node.expression;
+    const result = call !== null && call !== void 0 ? call : path.node.expression;
+    result.loc = loc;
+    return result;
 }
-function id(str) {
+function idToProp(id, value, from) {
+    let str = t.isIdentifier(id) || t.isJSXIdentifier(id) ? id.name : id.value;
+    let expr;
+    if (from) {
+        str = str.substring(from);
+    }
     if (/^[\w_]+$/.test(str)) {
-        return t.identifier(str);
+        expr = t.identifier(str);
     }
     else {
-        return t.stringLiteral(str);
+        expr = t.stringLiteral(str);
     }
+    expr.loc = id.loc;
+    return t.objectProperty(expr, value);
 }
 function transformJsxElement(path, internal) {
     var _a, _b;
@@ -97,7 +127,7 @@ function transformJsxElement(path, internal) {
                             if (t.isExpression(path.node.expression)) {
                                 meshExpression(path.get("expression"), internal);
                             }
-                            events.push(t.objectProperty(id(name.name.substring(2)), path.node.expression));
+                            events.push(idToProp(name, path.node.expression, 2));
                         }
                         else {
                             throw attrPath
@@ -116,7 +146,7 @@ function transformJsxElement(path, internal) {
                                     // class={[cond && "string"]}
                                     if (t.isLogicalExpression(item) && item.operator === "&&" && t.isStringLiteral(item.right)) {
                                         const call = exprCall(elementPath.get("left"), item.left, internal);
-                                        classObject.push(t.objectProperty(id(item.right.value), call !== null && call !== void 0 ? call : item.left));
+                                        classObject.push(idToProp(item.right, call !== null && call !== void 0 ? call : item.left));
                                     }
                                     // class={[{..}]}
                                     else if (t.isObjectExpression(item)) {
@@ -142,7 +172,7 @@ function transformJsxElement(path, internal) {
                                     }
                                     // class={[".."]}
                                     else if (t.isStringLiteral(elementPath.node)) {
-                                        classStatic.push(elementPath.node.value);
+                                        classStatic.push(elementPath.node);
                                     }
                                     // class={[..]}
                                     else {
@@ -172,10 +202,7 @@ function transformJsxElement(path, internal) {
                         }
                         // class="a b"
                         else if (t.isStringLiteral(attr.value)) {
-                            const splitted = attr.value.value.split(" ");
-                            for (const item of splitted) {
-                                classStatic.push(item);
-                            }
+                            classStatic.push(attr.value);
                         }
                         // class=<div/>
                         else {
@@ -253,10 +280,10 @@ function transformJsxElement(path, internal) {
                     }
                     else {
                         if (t.isJSXExpressionContainer(attr.value)) {
-                            attrs.push(t.objectProperty(id(name.name), t.isExpression(attr.value.expression) ? attr.value.expression : t.booleanLiteral(true)));
+                            attrs.push(idToProp(name, t.isExpression(attr.value.expression) ? attr.value.expression : t.booleanLiteral(true)));
                         }
                         else if (t.isStringLiteral(attr.value)) {
-                            attrs.push(t.objectProperty(id(name.name), attr.value));
+                            attrs.push(idToProp(name, attr.value));
                         }
                         else {
                             throw attrPath.buildCodeFrameError("Vasille: Value of bind must be an expression or string");
@@ -269,10 +296,10 @@ function transformJsxElement(path, internal) {
                             const value = t.isExpression(attr.value.expression)
                                 ? exprCall(attrPath.get("value"), attr.value.expression, internal)
                                 : undefined;
-                            bind.push(t.objectProperty(id(name.name.name), value !== null && value !== void 0 ? value : (t.isExpression(attr.value.expression) ? attr.value.expression : t.booleanLiteral(true))));
+                            bind.push(idToProp(name.name, value !== null && value !== void 0 ? value : (t.isExpression(attr.value.expression) ? attr.value.expression : t.booleanLiteral(true))));
                         }
                         else if (t.isStringLiteral(attr.value)) {
-                            bind.push(t.objectProperty(id(name.name.name), attr.value));
+                            bind.push(idToProp(name.name, attr.value));
                         }
                         else {
                             throw attrPath.buildCodeFrameError("Vasille: Value of bind must be an expression or string");
@@ -288,13 +315,16 @@ function transformJsxElement(path, internal) {
             }
         }
         if (classStatic.length > 0) {
-            attrs.push(t.objectProperty(t.identifier("class"), t.stringLiteral(classStatic.join(" "))));
+            const first = classStatic[0];
+            const value = classStatic.length === 1 ? classStatic[0] : t.stringLiteral(classStatic.map(item => item.value).join(" "));
+            value.loc = first.loc;
+            attrs.push(t.objectProperty(t.identifier("class"), value));
         }
         if (styleStatic.length > 0) {
             attrs.push(t.objectProperty(t.identifier("style"), t.stringLiteral(styleStatic.map(([id, value]) => `${id.name}:${value.value}`).join(";"))));
         }
         const statements = transformJsxArray(path.get("children"), internal);
-        return t.expressionStatement(t.callExpression(t.memberExpression(ctx, t.identifier("tag")), [
+        const call = t.callExpression(t.memberExpression(ctx, t.identifier("tag")), [
             t.stringLiteral(name.name),
             t.objectExpression([
                 ...(attrs.length > 0 ? [t.objectProperty(t.identifier("attr"), t.objectExpression(attrs))] : []),
@@ -311,26 +341,32 @@ function transformJsxElement(path, internal) {
                 ...(styleObject.length > 0 ? [t.objectProperty(t.identifier("style"), t.objectExpression(styleObject))] : []),
             ]),
             ...(statements.length > 0 ? [t.arrowFunctionExpression([ctx], t.blockStatement(statements))] : []),
-        ]));
+        ]);
+        call.loc = path.node.loc;
+        return t.expressionStatement(call);
     }
     if (t.isJSXIdentifier(name)) {
         const element = path.node;
         const opening = path.get("openingElement");
         const props = [];
         let run;
+        const mapped = internal.mapping.get(name.name);
+        if (mapped === "Debug" && internal.stack.get(name.name) === undefined && !internal.devMode) {
+            return t.emptyStatement();
+        }
         for (const attrPath of opening.get("attributes")) {
             const attr = attrPath.node;
             // <A prop=../>
             if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
                 // <A prop=".."/>
                 if (t.isStringLiteral(attr.value)) {
-                    props.push(t.objectProperty(id(attr.name.name), attr.value));
+                    props.push(idToProp(attr.name, attr.value));
                 }
                 // <A prop={..}/>
                 else if (t.isJSXExpressionContainer(attr.value)) {
                     const isSystem = internal.mapping.has(name.name);
                     const value = transformJsxExpressionContainer(attrPath.get("value"), internal, !isSystem || attr.name.name === "slot", isSystem && attr.name.name === "slot");
-                    props.push(t.objectProperty(id(attr.name.name), value));
+                    props.push(idToProp(attr.name, value));
                 }
                 else {
                     throw attrPath.buildCodeFrameError("Vasille: JSX Elements/Fragments are not supported here");
@@ -358,7 +394,9 @@ function transformJsxElement(path, internal) {
                 run = t.arrowFunctionExpression([ctx], t.blockStatement(statements));
             }
         }
-        return t.expressionStatement(t.callExpression(t.identifier(name.name), [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;
+        return t.expressionStatement(call);
     }
     throw path.buildCodeFrameError("Vasille: Unsupported tag detected, html lowercase tagnames and components are accepted");
 }

package/lib/lib.js

@@ -1,7 +1,7 @@
 import * as t from "@babel/types";
-import { checkNode, encodeName } from "./expression.js";
-import { ctx } from "./internal.js";
-import { calls } from "./call.js";
+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) {

package/lib/mesh.js

@@ -1,9 +1,9 @@
 import * as t from "@babel/types";
-import { calls, composeOnly } from "./call.js";
-import { ctx } from "./internal.js";
-import { bodyHasJsx } from "./jsx-detect.js";
-import { arrayModel, exprCall, forwardOnlyExpr, mapModel, own, parseCalculateCall, reactiveObject, ref, setModel, } from "./lib.js";
-import { transformJsx } from "./jsx.js";
+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) {
         if (t.isExpression(path.node)) {
@@ -97,11 +97,20 @@ export function meshExpression(nodePath, internal) {
             meshAllUnknown(path.get("elements"), internal);
             break;
         }
-        case "CallExpression": {
+        case "CallExpression":
+        case "OptionalCallExpression": {
             const path = nodePath;
             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);
@@ -113,12 +122,6 @@ export 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;