@teleporthq/teleport-plugin-css 0.43.0-alpha.0 → 0.43.3

package/dist/esm/index.js

@@ -45,20 +45,39 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+import { join, relative } from 'path';
 import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared';
-import { StyleUtils, StyleBuilders, HASTUtils, ASTUtils } from '@teleporthq/teleport-plugin-common';
+import { StyleUtils, StyleBuilders, HASTUtils, HASTBuilders, ASTUtils, createBinaryExpression, } from '@teleporthq/teleport-plugin-common';
 import * as types from '@babel/types';
 import { ChunkType, FileType, PluginCSS, } from '@teleporthq/teleport-types';
 import { createStyleSheetPlugin } from './style-sheet';
+import { createConditionalStatement } from './utils';
+var prefixUrlPathsInCss = function (css, folderPath) {
+    var relativePrefix = relative(join.apply(void 0, folderPath), './');
+    if (!relativePrefix) {
+        return css;
+    }
+    return css.replace(/url\(["']?(.*?)["']?\)/g, function (match, url) {
+        if (url.startsWith('http') ||
+            url.startsWith('data:') ||
+            url.startsWith('../') ||
+            url.startsWith('#')) {
+            return match;
+        }
+        return "url(\"".concat(join(relativePrefix, url), "\")");
+    });
+};
 var createCSSPlugin = function (config) {
-    var _a = config || {}, _b = _a.chunkName, chunkName = _b === void 0 ? 'style-chunk' : _b, _c = _a.templateChunkName, templateChunkName = _c === void 0 ? 'template-chunk' : _c, _d = _a.componentDecoratorChunkName, componentDecoratorChunkName = _d === void 0 ? 'component-decorator' : _d, _e = _a.inlineStyleAttributeKey, inlineStyleAttributeKey = _e === void 0 ? 'style' : _e, _f = _a.classAttributeName, classAttributeName = _f === void 0 ? 'class' : _f, _g = _a.templateStyle, templateStyle = _g === void 0 ? 'html' : _g, _h = _a.declareDependency, declareDependency = _h === void 0 ? 'none' : _h, _j = _a.forceScoping, forceScoping = _j === void 0 ? false : _j, dynamicVariantPrefix = _a.dynamicVariantPrefix, _k = _a.staticPropReferences, staticPropReferences = _k === void 0 ? false : _k;
+    var _a = config || {}, _b = _a.chunkName, chunkName = _b === void 0 ? 'style-chunk' : _b, _c = _a.templateChunkName, templateChunkName = _c === void 0 ? 'template-chunk' : _c, _d = _a.componentDecoratorChunkName, componentDecoratorChunkName = _d === void 0 ? 'component-decorator' : _d, _e = _a.inlineStyleAttributeKey, inlineStyleAttributeKey = _e === void 0 ? 'style' : _e, _f = _a.classAttributeName, classAttributeName = _f === void 0 ? 'class' : _f, _g = _a.templateStyle, templateStyle = _g === void 0 ? 'html' : _g, _h = _a.declareDependency, declareDependency = _h === void 0 ? 'none' : _h, dynamicVariantPrefix = _a.dynamicVariantPrefix, _j = _a.staticPropReferences, staticPropReferences = _j === void 0 ? false : _j, _k = _a.standaloneHtmlComponents, standaloneHtmlComponents = _k === void 0 ? false : _k;
     var cssPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, dependencies, options, node, _a, componentStyleSet, _b, propDefinitions, _c, projectStyleSet, _d, _e, _f, tokens, isRootComponent, _g, _h, styleSetDefinitions, projectStyleSheetName, projectStyleSheetPath, templateChunk, componentDecoratorChunk, templateLookup, propsPrefix, cssMap, mediaStylesMap, cssFileName, decoratorAST, decoratorParam;
-        return __generator(this, function (_j) {
+        var uidl, chunks, dependencies, options, node, _a, componentStyleSet, _b, propDefinitions, _c, stateDefinitions, _d, projectStyleSet, _e, _f, _g, tokens, isRootComponent, _h, globalStateDefinitions, prefixInlineClasses, _j, _k, styleSetDefinitions, projectStyleSheetName, projectStyleSheetPath, templateChunk, componentDecoratorChunk, jsxNodesLookup, propsPrefix, cssMap, mediaStylesMap, usedProjectStyleIds, generateStylesForElementNode, _i, _l, prop, inlineCssMap, hasTokens, hasUsedProjectStyles, globalAssets, scopedRootClass_1, scopeCssSelectors_1, inlineStyleAssets, _m, inlineStyleAssets_1, styleAsset, css, tokenSelector, usedProjectStyles_1, filteredDefinitions, projectStylesCssMap, projectMediaStylesMap, scopedProjectStyles, mediaStyles, scopedMediaStyles, scopedCssMap, fontAssets, fontLinkNodes, _o, fontAssets_1, fontAsset, linkNode, _p, _q, _r, attrKey, attrValue, value, nodesToPrepend, styleNode, cssContent, cssFileName, decoratorAST, decoratorParam, folderPath_1, cssContent;
+        var _s;
+        var _t, _u;
+        return __generator(this, function (_v) {
             uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
-            node = uidl.node, _a = uidl.styleSetDefinitions, componentStyleSet = _a === void 0 ? {} : _a, _b = uidl.propDefinitions, propDefinitions = _b === void 0 ? {} : _b;
-            _c = options || {}, projectStyleSet = _c.projectStyleSet, _d = _c.designLanguage, _e = _d === void 0 ? {} : _d, _f = _e.tokens, tokens = _f === void 0 ? {} : _f, isRootComponent = _c.isRootComponent;
-            _g = projectStyleSet || {}, _h = _g.styleSetDefinitions, styleSetDefinitions = _h === void 0 ? {} : _h, projectStyleSheetName = _g.fileName, projectStyleSheetPath = _g.path;
+            node = uidl.node, _a = uidl.styleSetDefinitions, componentStyleSet = _a === void 0 ? {} : _a, _b = uidl.propDefinitions, propDefinitions = _b === void 0 ? {} : _b, _c = uidl.stateDefinitions, stateDefinitions = _c === void 0 ? {} : _c;
+            _d = options || {}, projectStyleSet = _d.projectStyleSet, _e = _d.designLanguage, _f = _e === void 0 ? {} : _e, _g = _f.tokens, tokens = _g === void 0 ? {} : _g, isRootComponent = _d.isRootComponent, _h = _d.globalStateDefinitions, globalStateDefinitions = _h === void 0 ? {} : _h, prefixInlineClasses = _d.prefixInlineClasses;
+            _j = projectStyleSet || {}, _k = _j.styleSetDefinitions, styleSetDefinitions = _k === void 0 ? {} : _k, projectStyleSheetName = _j.fileName, projectStyleSheetPath = _j.path;
             if (isRootComponent) {
                 if (Object.keys(tokens).length > 0 || Object.keys(styleSetDefinitions).length > 0) {
                     dependencies[projectStyleSheetName] = {
@@ -73,62 +92,104 @@ var createCSSPlugin = function (config) {
             }
             templateChunk = chunks.find(function (chunk) { return chunk.name === templateChunkName; });
             componentDecoratorChunk = chunks.find(function (chunk) { return chunk.name === componentDecoratorChunkName; });
-            templateLookup = templateChunk.meta.nodesLookup;
+            jsxNodesLookup = templateChunk.meta.nodesLookup;
             propsPrefix = templateChunk.meta.dynamicRefPrefix
                 ? templateChunk.meta.dynamicRefPrefix.prop
                 : '';
             cssMap = [];
             mediaStylesMap = {};
-            UIDLUtils.traverseElements(node, function (element) {
+            usedProjectStyleIds = new Set();
+            generateStylesForElementNode = function (element) {
                 var _a, _b;
                 var classNamesToAppend = new Set();
                 var dynamicVariantsToAppend = new Set();
-                var _c = element.style, style = _c === void 0 ? {} : _c, key = element.key, _d = element.referencedStyles, referencedStyles = _d === void 0 ? {} : _d, dependency = element.dependency, _e = element.attrs, attrs = _e === void 0 ? {} : _e, elementType = element.elementType;
-                var elementClassName = StringUtils.camelCaseToDashCase(key);
-                if (forceScoping && (dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local') {
+                var _c = element.style, style = _c === void 0 ? {} : _c, key = element.key, _d = element.referencedStyles, referencedStyles = _d === void 0 ? {} : _d, _e = element.attrs, attrs = _e === void 0 ? {} : _e, elementType = element.elementType, dependency = element.dependency;
+                var dynamicStyleBindings = element.dynamicStyleBindings;
+                var hasDynamicBindings = dynamicStyleBindings && Object.keys(dynamicStyleBindings).length > 0;
+                var root = jsxNodesLookup[key];
+                if (!root) {
+                    return;
+                }
+                // Refer to line 323 all component scoped styles are appended with component name by default
+                if ((dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local') {
                     StyleBuilders.setPropValueForCompStyle({
                         attrs: attrs,
-                        key: key,
-                        jsxNodesLookup: templateLookup,
+                        root: root,
                         templateStyle: templateStyle,
+                        // elementType is used here in-order to target the component name that the class is actually defined.
+                        // Here we are appendigng to the node where the component is being called.
                         getClassName: function (styleName) {
-                            return getClassName(forceScoping, StringUtils.camelCaseToDashCase(elementType), styleName);
+                            return StringUtils.camelCaseToDashCase(elementType + styleName);
                         },
                     });
                 }
                 if (Object.keys(style).length === 0 &&
                     Object.keys(referencedStyles).length === 0 &&
-                    Object.keys(componentStyleSet).length === 0) {
+                    Object.keys(componentStyleSet).length === 0 &&
+                    !hasDynamicBindings) {
                     return;
                 }
-                var root = templateLookup[key];
-                if (!root) {
-                    throw new PluginCSS("Node - ".concat(key, " is missing from the template chunk"));
-                }
-                var className = getClassName(forceScoping, uidl.name, elementClassName);
+                // Inline (node-key-derived) classes can share a name with a real project
+                // class. When `prefixInlineClasses` is set (AI editor codegen only), tag
+                // every inline class so the consumer can tell fake from real by name.
+                var className = prefixInlineClasses
+                    ? "".concat(prefixInlineClasses).concat(StringUtils.camelCaseToDashCase(key))
+                    : StringUtils.camelCaseToDashCase(key);
                 var _f = UIDLUtils.splitDynamicAndStaticStyles(style), staticStyles = _f.staticStyles, dynamicStyles = _f.dynamicStyles, tokenStyles = _f.tokenStyles;
                 if (Object.keys(staticStyles).length > 0 || Object.keys(tokenStyles).length > 0) {
                     var collectedStyles = __assign(__assign({}, StyleUtils.getContentOfStyleObject(staticStyles)), StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles));
                     cssMap.push(StyleBuilders.createCSSClass(className, collectedStyles));
                     classNamesToAppend.add(className);
                 }
+                var jsxInlineStyles = null;
                 if (Object.keys(dynamicStyles).length > 0) {
+                    for (var _i = 0, _g = Object.values(dynamicStyles); _i < _g.length; _i++) {
+                        var styleValue = _g[_i];
+                        if (styleValue.type === 'dynamic' &&
+                            styleValue.content.referenceType === 'global' &&
+                            templateChunk.meta.globalReferences) {
+                            ;
+                            templateChunk.meta.globalReferences.push(styleValue.content.id);
+                        }
+                    }
                     /* If dynamic styles are on nested-styles they are unfortunately lost,
                       since inline style does not support that */
                     if (templateStyle === 'html') {
                         var inlineStyles = createDynamicInlineStyle(dynamicStyles);
-                        HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, "{".concat(inlineStyles, "}"));
+                        var bindingParts = hasDynamicBindings
+                            ? createDynamicBindingInlineStyle(dynamicStyleBindings)
+                            : '';
+                        var combined = bindingParts ? "".concat(inlineStyles, ", ").concat(bindingParts) : inlineStyles;
+                        HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, "{".concat(combined, "}"));
                     }
                     else {
-                        var inlineStyles = UIDLUtils.transformDynamicStyles(dynamicStyles, function (styleValue) {
+                        jsxInlineStyles = UIDLUtils.transformDynamicStyles(dynamicStyles, function (styleValue) {
                             return StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix);
                         });
-                        ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles);
                     }
                 }
+                else if (hasDynamicBindings && templateStyle === 'html') {
+                    var bindingParts = createDynamicBindingInlineStyle(dynamicStyleBindings);
+                    HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, "{".concat(bindingParts, "}"));
+                }
+                if (hasDynamicBindings && templateStyle !== 'html') {
+                    if (!jsxInlineStyles) {
+                        jsxInlineStyles = {};
+                    }
+                    for (var _h = 0, _j = Object.entries(dynamicStyleBindings); _h < _j.length; _h++) {
+                        var _k = _j[_h], cssProperty = _k[0], binding = _k[1];
+                        var camelCaseProperty = cssProperty.replace(/-([a-z])/g, function (_, letter) {
+                            return letter.toUpperCase();
+                        });
+                        jsxInlineStyles[camelCaseProperty] = StyleBuilders.createDynamicBindingExpression(binding);
+                    }
+                }
+                if (jsxInlineStyles) {
+                    ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, jsxInlineStyles);
+                }
                 Object.values(referencedStyles).forEach(function (styleRef) {
                     var _a;
-                    var _b;
+                    var _b, _c;
                     switch (styleRef.content.mapType) {
                         case 'inlined': {
                             var filtredStyles = UIDLUtils.splitDynamicAndStaticStyles(styleRef.content.styles);
@@ -156,17 +217,18 @@ var createCSSPlugin = function (config) {
                                 styleRef.content.content.content.referenceType === 'prop') {
                                 var defaultPropValue = (_b = propDefinitions[styleRef.content.content.content.id]) === null || _b === void 0 ? void 0 : _b.defaultValue;
                                 if (defaultPropValue) {
-                                    /* Changing the default value of the prop.
-                                      When forceScoping is enabled the classnames change. So, we need to change the default prop too. */
-                                    propDefinitions[styleRef.content.content.content.id].defaultValue = getClassName(forceScoping, uidl.name, String(defaultPropValue));
+                                    propDefinitions[styleRef.content.content.content.id].defaultValue =
+                                        StringUtils.camelCaseToDashCase(String(defaultPropValue));
                                 }
+                                // staticPropReferences flag is only used for just html-code generation.
+                                // This is used to append the class name to the node where the component is being called.
+                                // Instead of how frameworks handle them using props at runtime. This makes the props
+                                // to behave statically during the generation time instead by appending them directly.
                                 if (staticPropReferences) {
-                                    if (!defaultPropValue) {
+                                    if (defaultPropValue === undefined || typeof defaultPropValue !== 'string') {
                                         return;
                                     }
-                                    if (staticPropReferences) {
-                                        classNamesToAppend.add(getClassName(forceScoping, uidl.name, String(defaultPropValue)));
-                                    }
+                                    classNamesToAppend.add(StringUtils.camelCaseToDashCase(uidl.name + defaultPropValue));
                                 }
                                 else {
                                     dynamicVariantsToAppend.add(styleRef.content.content.content.id);
@@ -177,7 +239,7 @@ var createCSSPlugin = function (config) {
                                 if (!componentStyleSet[styleRef.content.content.content.id]) {
                                     throw new PluginCSS("Node ".concat(elementType, " is referring to a comp style instance ").concat(styleRef.content.content.content.id, " which is missing."));
                                 }
-                                classNamesToAppend.add(getClassName(forceScoping, uidl.name, String(styleRef.content.content.content.id)));
+                                classNamesToAppend.add(StringUtils.camelCaseToDashCase(uidl.name + styleRef.content.content.content.id));
                             }
                             return;
                         }
@@ -185,9 +247,195 @@ var createCSSPlugin = function (config) {
                             var content = styleRef.content;
                             var referedStyle = styleSetDefinitions[content.referenceId];
                             if (!referedStyle) {
-                                throw new PluginCSS("Style used from global stylesheet is missing - ".concat(content.referenceId));
+                                return;
+                            }
+                            usedProjectStyleIds.add(content.referenceId);
+                            if (styleRef.content.condition) {
+                                if (templateStyle === 'html') {
+                                    var _d = styleRef.content.condition, staticValue = _d.value, reference = _d.reference, _e = _d.expression, conditions = _e.conditions, matchingCriteria = _e.matchingCriteria;
+                                    var _f = reference.content, referenceType = _f.referenceType, id = _f.id, _g = _f.refPath, refPath = _g === void 0 ? [] : _g;
+                                    switch (referenceType) {
+                                        case 'prop': {
+                                            var usedProp = propDefinitions[id];
+                                            if (usedProp === undefined || usedProp.defaultValue === undefined) {
+                                                throw new PluginCSS("Prop with ".concat(id, " is missing in the propDefinitions."));
+                                            }
+                                            var defaultValue = usedProp.defaultValue;
+                                            var operandDefaultValue = void 0;
+                                            for (var _i = 0, refPath_1 = refPath; _i < refPath_1.length; _i++) {
+                                                var path = refPath_1[_i];
+                                                defaultValue = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[path];
+                                            }
+                                            // If defaultValue is undefined or null after path traversal, use original default
+                                            defaultValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : usedProp.defaultValue;
+                                            // our conditions can be of type 'expr' or they can be a dynamic reference
+                                            var rightSideCondition = conditions[0].operand;
+                                            var rightSideConditionType = typeof rightSideCondition;
+                                            if (rightSideConditionType === 'object') {
+                                                var type = rightSideCondition.type;
+                                                if (type === 'dynamic') {
+                                                    var dynamicRef = rightSideCondition;
+                                                    if (dynamicRef.content.referenceType === 'prop') {
+                                                        var prop = propDefinitions[dynamicRef.content.id];
+                                                        if (prop && prop.defaultValue) {
+                                                            operandDefaultValue = prop.defaultValue;
+                                                        }
+                                                    }
+                                                    if (dynamicRef.content.referenceType === 'state') {
+                                                        var state = stateDefinitions[dynamicRef.content.id];
+                                                        if (state && state.defaultValue) {
+                                                            defaultValue = state.defaultValue;
+                                                        }
+                                                    }
+                                                }
+                                                if (type === 'expr') {
+                                                    operandDefaultValue = rightSideCondition.content;
+                                                }
+                                            }
+                                            else {
+                                                operandDefaultValue = rightSideCondition;
+                                            }
+                                            // Since we know the operand and the default value from the prop.
+                                            // We can try building the condition and check if the condition is true or false.
+                                            // @todo: You can only use a 'value' in UIDL or 'conditions' but not both.
+                                            // UIDL validations need to be improved on this aspect.
+                                            var resolvedConditions = [
+                                                {
+                                                    operation: conditions[0].operation,
+                                                    operand: operandDefaultValue,
+                                                },
+                                            ];
+                                            var dynamicConditions = createConditionalStatement(staticValue !== undefined
+                                                ? [{ operand: staticValue, operation: '===' }]
+                                                : resolvedConditions, defaultValue);
+                                            var matchCondition = matchingCriteria && matchingCriteria === 'all' ? '&&' : '||';
+                                            var conditionString = dynamicConditions.join(" ".concat(matchCondition, " "));
+                                            // tslint:disable-next-line function-constructor
+                                            var isConditionPassing = new Function("return ".concat(conditionString))();
+                                            if (isConditionPassing) {
+                                                classNamesToAppend.add(styleRef.content.referenceId);
+                                                return;
+                                            }
+                                            return;
+                                        }
+                                        case 'state': {
+                                            var usedState = stateDefinitions[id];
+                                            if (usedState === undefined || usedState.defaultValue === undefined) {
+                                                throw new PluginCSS("State with ".concat(id, " is missing in the stateDefinitions."));
+                                            }
+                                            var defaultValue = usedState.defaultValue;
+                                            for (var _h = 0, refPath_2 = refPath; _h < refPath_2.length; _h++) {
+                                                var path = refPath_2[_h];
+                                                defaultValue = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[path];
+                                            }
+                                            if (typeof defaultValue === 'object' &&
+                                                defaultValue !== null &&
+                                                'type' in defaultValue &&
+                                                'content' in defaultValue) {
+                                                var entry = defaultValue;
+                                                if (entry.type === 'static') {
+                                                    defaultValue = entry.content;
+                                                }
+                                            }
+                                            defaultValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : usedState.defaultValue;
+                                            var dynamicConditions = createConditionalStatement(staticValue !== undefined
+                                                ? [{ operand: staticValue, operation: '===' }]
+                                                : conditions, defaultValue);
+                                            var matchCondition = matchingCriteria && matchingCriteria === 'all' ? '&&' : '||';
+                                            var conditionString = dynamicConditions.join(" ".concat(matchCondition, " "));
+                                            // tslint:disable-next-line function-constructor
+                                            var isConditionPassing = new Function("return ".concat(conditionString))();
+                                            if (isConditionPassing) {
+                                                classNamesToAppend.add(styleRef.content.referenceId);
+                                                return;
+                                            }
+                                            return;
+                                        }
+                                        case 'globalState': {
+                                            var gsDef = findGlobalStateDefinitionById(id, globalStateDefinitions);
+                                            if (!gsDef) {
+                                                classNamesToAppend.add(styleRef.content.referenceId);
+                                                return;
+                                            }
+                                            var defaultValue = gsDef.defaultValue;
+                                            for (var _j = 0, refPath_3 = refPath; _j < refPath_3.length; _j++) {
+                                                var path = refPath_3[_j];
+                                                defaultValue = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[path];
+                                            }
+                                            defaultValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : gsDef.defaultValue;
+                                            var dynamicConditions = createConditionalStatement(staticValue !== undefined
+                                                ? [{ operand: staticValue, operation: '===' }]
+                                                : conditions, defaultValue);
+                                            var matchCondition = matchingCriteria && matchingCriteria === 'all' ? '&&' : '||';
+                                            var conditionString = dynamicConditions.join(" ".concat(matchCondition, " "));
+                                            // tslint:disable-next-line function-constructor
+                                            var isConditionPassing = new Function("return ".concat(conditionString))();
+                                            if (isConditionPassing) {
+                                                classNamesToAppend.add(styleRef.content.referenceId);
+                                                return;
+                                            }
+                                            return;
+                                        }
+                                        default: {
+                                            classNamesToAppend.add(styleRef.content.referenceId);
+                                            return;
+                                        }
+                                    }
+                                }
+                                else {
+                                    var referenceContent = styleRef.content.condition.reference.content;
+                                    var referenceType = referenceContent.referenceType;
+                                    var nameToAppend = referenceType === 'local' && ((_c = referenceContent.refPath) === null || _c === void 0 ? void 0 : _c.length)
+                                        ? referenceContent.refPath.join('.')
+                                        : referenceContent.id;
+                                    var conditions = styleRef.content.condition.expression.conditions;
+                                    var operator = conditions[0].operation;
+                                    var right = conditions[0].operand;
+                                    var binaryExpressionType = '';
+                                    switch (referenceType) {
+                                        case 'prop': {
+                                            binaryExpressionType = propDefinitions[nameToAppend].type;
+                                            break;
+                                        }
+                                        case 'state': {
+                                            binaryExpressionType = stateDefinitions[nameToAppend].type;
+                                            break;
+                                        }
+                                        case 'local': {
+                                            binaryExpressionType = typeof right;
+                                            break;
+                                        }
+                                        default: {
+                                            if (referenceType === 'globalState') {
+                                                var gsDef = findGlobalStateDefinitionById(nameToAppend, globalStateDefinitions);
+                                                if (gsDef) {
+                                                    binaryExpressionType = gsDef.type;
+                                                }
+                                                break;
+                                            }
+                                            throw new PluginCSS("Un-supported reference type ".concat(referenceType, " for ").concat(nameToAppend));
+                                        }
+                                    }
+                                    var binaryKey = nameToAppend;
+                                    if (referenceType === 'prop') {
+                                        binaryKey = 'props?.' + nameToAppend;
+                                    }
+                                    else if (referenceType === 'globalState') {
+                                        var gsDef = findGlobalStateDefinitionById(nameToAppend, globalStateDefinitions);
+                                        binaryKey = gsDef ? gsDef.name : nameToAppend;
+                                    }
+                                    var binaryExpression = createBinaryExpression({ operation: operator, operand: right }, {
+                                        key: binaryKey,
+                                        type: binaryExpressionType,
+                                    });
+                                    var conditionalExpression = types.conditionalExpression(binaryExpression, types.stringLiteral(content.referenceId), types.stringLiteral(''));
+                                    dynamicVariantsToAppend.add(conditionalExpression);
+                                    return;
+                                }
+                            }
+                            else {
+                                classNamesToAppend.add(content.referenceId);
                             }
-                            classNamesToAppend.add(content.referenceId);
                             return;
                         }
                         default: {
@@ -211,17 +459,200 @@ var createCSSPlugin = function (config) {
                         var dynamicAttrValueIdentifier = dynamicVariantPrefix
                             ? types.identifier(dynamicVariantPrefix)
                             : types.identifier(propsPrefix);
-                        return types.memberExpression(dynamicAttrValueIdentifier, types.identifier(variant));
+                        if (typeof variant === 'string') {
+                            return types.memberExpression(dynamicAttrValueIdentifier, types.identifier(variant));
+                        }
+                        else {
+                            // variant is a ConditionalExpression, so return it directly
+                            return variant;
+                        }
                     }));
                 }
-            });
+            };
+            UIDLUtils.traverseElements(node, generateStylesForElementNode);
+            for (_i = 0, _l = Object.values(propDefinitions); _i < _l.length; _i++) {
+                prop = _l[_i];
+                if (prop.type === 'element' && prop.defaultValue) {
+                    UIDLUtils.traverseElements(prop.defaultValue, generateStylesForElementNode);
+                }
+            }
             if (Object.keys(componentStyleSet).length > 0) {
-                StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap, function (styleName) { return getClassName(forceScoping, uidl.name, styleName); });
+                StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap, function (styleName) {
+                    return StringUtils.camelCaseToDashCase(uidl.name + styleName);
+                });
             }
             if (Object.keys(mediaStylesMap).length > 0) {
                 cssMap.push.apply(cssMap, StyleBuilders.generateMediaStyle(mediaStylesMap));
             }
-            if (cssMap.length > 0) {
+            // Handle inline style tag for HTML templates (self-contained fragments)
+            if (standaloneHtmlComponents && templateStyle === 'html' && templateChunk) {
+                inlineCssMap = [];
+                hasTokens = Object.keys(tokens).length > 0;
+                hasUsedProjectStyles = usedProjectStyleIds.size > 0;
+                globalAssets = options.globalAssets || [];
+                scopedRootClass_1 = (_t = templateChunk.meta) === null || _t === void 0 ? void 0 : _t.scopedRootClass;
+                scopeCssSelectors_1 = function (css, rootSelector) {
+                    // Replace :root with scoped root class
+                    var scopedCss = css.replace(/:root\s*\{/g, "".concat(rootSelector, " {"));
+                    // Scope regular selectors (but not inside @media or @keyframes)
+                    // This regex matches CSS rules outside of @ blocks
+                    scopedCss = scopedCss.replace(/(?:^|\})\s*([^@{}]+?)\s*\{/gm, function (match, selectors) {
+                        // Skip if it's just closing brace or empty
+                        if (!selectors || selectors.trim() === '') {
+                            return match;
+                        }
+                        // Skip if selector is already the root class
+                        if (selectors.trim() === rootSelector) {
+                            return match;
+                        }
+                        // Handle multiple selectors (comma-separated)
+                        var scopedSelectors = selectors
+                            .split(',')
+                            .map(function (sel) {
+                            var trimmedSel = sel.trim();
+                            // Skip empty selectors
+                            if (!trimmedSel) {
+                                return '';
+                            }
+                            // Skip if already scoped
+                            if (trimmedSel.startsWith(rootSelector)) {
+                                return trimmedSel;
+                            }
+                            // Replace html/body with root selector
+                            if (trimmedSel === 'html' || trimmedSel === 'body') {
+                                return rootSelector;
+                            }
+                            // For universal selector, scope it
+                            if (trimmedSel === '*') {
+                                return "".concat(rootSelector, " *");
+                            }
+                            // Prefix other selectors with root
+                            return "".concat(rootSelector, " ").concat(trimmedSel);
+                        })
+                            .filter(Boolean)
+                            .join(', ');
+                        return match.replace(selectors, scopedSelectors);
+                    });
+                    return scopedCss;
+                };
+                inlineStyleAssets = globalAssets.filter(function (asset) { return asset.type === 'style' && 'content' in asset; });
+                for (_m = 0, inlineStyleAssets_1 = inlineStyleAssets; _m < inlineStyleAssets_1.length; _m++) {
+                    styleAsset = inlineStyleAssets_1[_m];
+                    if (styleAsset.content) {
+                        css = scopedRootClass_1
+                            ? scopeCssSelectors_1(styleAsset.content, ".".concat(scopedRootClass_1))
+                            : styleAsset.content;
+                        inlineCssMap.push(css);
+                    }
+                }
+                // 1. Add CSS variables (tokens) - scoped to root class instead of :root
+                if (hasTokens) {
+                    tokenSelector = scopedRootClass_1 ? ".".concat(scopedRootClass_1) : ':root';
+                    inlineCssMap.push(StyleBuilders.createCSSClassWithSelector('@global', tokenSelector, StyleUtils.getTokensContentFromTokensObject(tokens)));
+                }
+                // 2. Add project-referenced styles that this component uses (scoped)
+                if (hasUsedProjectStyles) {
+                    usedProjectStyles_1 = Array.from(usedProjectStyleIds);
+                    filteredDefinitions = Object.fromEntries(Object.entries(styleSetDefinitions).filter(function (_a) {
+                        var key = _a[0], definition = _a[1];
+                        // Include if exact match
+                        if (usedProjectStyles_1.includes(key)) {
+                            return true;
+                        }
+                        // Include compound selectors where className matches a used project style
+                        // e.g., "navigation-mobile-overlay.navigation-mobile-overlay-active" has className "navigation-mobile-overlay"
+                        var className = definition.className;
+                        if (className && usedProjectStyles_1.includes(className)) {
+                            return true;
+                        }
+                        // Include compound selectors where the base class (before the dot or space) is a used style
+                        // e.g., "dashboard-sidebar.collapsed" should be included if "dashboard-sidebar" is used
+                        // e.g., "dashboard-sidebar.collapsed .sidebar-brand-text" should also be included
+                        var dotIdx = key.indexOf('.');
+                        var spaceIdx = key.indexOf(' ');
+                        if (dotIdx > 0) {
+                            var baseClass = key.substring(0, dotIdx);
+                            if (usedProjectStyles_1.includes(baseClass)) {
+                                return true;
+                            }
+                        }
+                        if (spaceIdx > 0 && dotIdx < 0) {
+                            var baseClass = key.substring(0, spaceIdx);
+                            if (usedProjectStyles_1.includes(baseClass)) {
+                                return true;
+                            }
+                        }
+                        return false;
+                    }));
+                    projectStylesCssMap = [];
+                    projectMediaStylesMap = {};
+                    StyleBuilders.generateStylesFromStyleSetDefinitions(filteredDefinitions, projectStylesCssMap, projectMediaStylesMap, function (styleName) { return styleName; });
+                    // Scope the project styles if scoped root class is available
+                    if (scopedRootClass_1) {
+                        scopedProjectStyles = projectStylesCssMap.map(function (css) {
+                            return scopeCssSelectors_1(css, ".".concat(scopedRootClass_1));
+                        });
+                        inlineCssMap.push.apply(inlineCssMap, scopedProjectStyles);
+                    }
+                    else {
+                        inlineCssMap.push.apply(inlineCssMap, projectStylesCssMap);
+                    }
+                    if (Object.keys(projectMediaStylesMap).length > 0) {
+                        mediaStyles = StyleBuilders.generateMediaStyle(projectMediaStylesMap);
+                        if (scopedRootClass_1) {
+                            scopedMediaStyles = mediaStyles.map(function (css) {
+                                return scopeCssSelectors_1(css, ".".concat(scopedRootClass_1));
+                            });
+                            inlineCssMap.push.apply(inlineCssMap, scopedMediaStyles);
+                        }
+                        else {
+                            inlineCssMap.push.apply(inlineCssMap, mediaStyles);
+                        }
+                    }
+                }
+                // 3. Add component-specific styles (scoped)
+                if (scopedRootClass_1) {
+                    scopedCssMap = cssMap.map(function (css) { return scopeCssSelectors_1(css, ".".concat(scopedRootClass_1)); });
+                    inlineCssMap.push.apply(inlineCssMap, scopedCssMap);
+                }
+                else {
+                    inlineCssMap.push.apply(inlineCssMap, cssMap);
+                }
+                fontAssets = globalAssets.filter(function (asset) { return asset.type === 'font' && 'path' in asset; });
+                fontLinkNodes = [];
+                for (_o = 0, fontAssets_1 = fontAssets; _o < fontAssets_1.length; _o++) {
+                    fontAsset = fontAssets_1[_o];
+                    linkNode = HASTBuilders.createHTMLNode('link');
+                    HASTUtils.addAttributeToNode(linkNode, 'rel', 'stylesheet');
+                    HASTUtils.addAttributeToNode(linkNode, 'href', fontAsset.path);
+                    if (fontAsset.attrs) {
+                        for (_p = 0, _q = Object.entries(fontAsset.attrs); _p < _q.length; _p++) {
+                            _r = _q[_p], attrKey = _r[0], attrValue = _r[1];
+                            value = typeof attrValue === 'object' && 'content' in attrValue
+                                ? String(attrValue.content)
+                                : String(attrValue);
+                            HASTUtils.addAttributeToNode(linkNode, attrKey, value);
+                        }
+                    }
+                    fontLinkNodes.push(linkNode);
+                }
+                // 5. Create <style> node and prepend to HTML (fonts first, then styles)
+                if (inlineCssMap.length > 0 || fontLinkNodes.length > 0) {
+                    nodesToPrepend = [];
+                    // Add font links first
+                    nodesToPrepend.push.apply(nodesToPrepend, fontLinkNodes);
+                    // Add style tag with all CSS
+                    if (inlineCssMap.length > 0) {
+                        styleNode = HASTBuilders.createHTMLNode('style');
+                        cssContent = HASTBuilders.createTextNode(inlineCssMap.join('\n\n'));
+                        styleNode.children.push(cssContent);
+                        nodesToPrepend.push(styleNode);
+                    }
+                    ;
+                    (_s = templateChunk.content.children).unshift.apply(_s, nodesToPrepend);
+                }
+            }
+            else if (cssMap.length > 0) {
                 cssFileName = UIDLUtils.getStyleFileName(uidl);
                 if (declareDependency === 'decorator' && componentDecoratorChunk) {
                     decoratorAST = componentDecoratorChunk.content;
@@ -241,11 +672,15 @@ var createCSSPlugin = function (config) {
                         },
                     };
                 }
+                folderPath_1 = (_u = uidl.outputOptions) === null || _u === void 0 ? void 0 : _u.folderPath;
+                cssContent = (folderPath_1 === null || folderPath_1 === void 0 ? void 0 : folderPath_1.length) > 0
+                    ? cssMap.map(function (css) { return prefixUrlPathsInCss(css, folderPath_1); }).join('\n \n')
+                    : cssMap.join('\n \n');
                 chunks.push({
                     type: ChunkType.STRING,
                     name: chunkName,
                     fileType: FileType.CSS,
-                    content: cssMap.join('\n'),
+                    content: cssContent,
                     linkAfter: [],
                 });
             }
@@ -256,6 +691,15 @@ var createCSSPlugin = function (config) {
 };
 export { createStyleSheetPlugin, createCSSPlugin };
 export default createCSSPlugin();
+var findGlobalStateDefinitionById = function (id, definitions) {
+    for (var _i = 0, _a = Object.values(definitions); _i < _a.length; _i++) {
+        var def = _a[_i];
+        if (def.id === id) {
+            return def;
+        }
+    }
+    return undefined;
+};
 var createDynamicInlineStyle = function (styles) {
     return Object.keys(styles)
         .map(function (styleKey) {
@@ -263,9 +707,15 @@ var createDynamicInlineStyle = function (styles) {
     })
         .join(', ');
 };
-var getClassName = function (scoping, uidlName, nodeStyleName) {
-    return scoping
-        ? StringUtils.camelCaseToDashCase("".concat(uidlName, "-").concat(nodeStyleName))
-        : StringUtils.camelCaseToDashCase(nodeStyleName);
+var createDynamicBindingInlineStyle = function (bindings) {
+    return Object.entries(bindings)
+        .map(function (_a) {
+        var prop = _a[0], binding = _a[1];
+        var value = binding.referenceType === 'ctx' && binding.contextName
+            ? "".concat(binding.contextName, ".").concat(binding.stateKey)
+            : binding.stateKey;
+        return "".concat(prop, ": ").concat(value, " != null ? ").concat(value, " : '").concat(binding.defaultValue || '', "'");
+    })
+        .join(', ');
 };
 //# sourceMappingURL=index.js.map