New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@teleporthq/teleport-plugin-css
Advanced tools
@teleporthq/teleport-plugin-css - npm Package Compare versions
Comparing version 0.17.0 to 0.17.3
@@ -1,288 +0,242 @@ | ||
| var __create = Object.create; | ||
| var __defProp = Object.defineProperty; | ||
| var __defProps = Object.defineProperties; | ||
| var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
| var __getOwnPropDescs = Object.getOwnPropertyDescriptors; | ||
| var __getOwnPropNames = Object.getOwnPropertyNames; | ||
| var __getOwnPropSymbols = Object.getOwnPropertySymbols; | ||
| var __getProtoOf = Object.getPrototypeOf; | ||
| var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
| var __propIsEnum = Object.prototype.propertyIsEnumerable; | ||
| var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; | ||
| var __spreadValues = (a, b) => { | ||
| for (var prop in b || (b = {})) | ||
| if (__hasOwnProp.call(b, prop)) | ||
| __defNormalProp(a, prop, b[prop]); | ||
| if (__getOwnPropSymbols) | ||
| for (var prop of __getOwnPropSymbols(b)) { | ||
| if (__propIsEnum.call(b, prop)) | ||
| __defNormalProp(a, prop, b[prop]); | ||
| } | ||
| return a; | ||
| }; | ||
| var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b)); | ||
| var __markAsModule = (target) => __defProp(target, "__esModule", { value: true }); | ||
| var __export = (target, all) => { | ||
| for (var name in all) | ||
| __defProp(target, name, { get: all[name], enumerable: true }); | ||
| }; | ||
| var __reExport = (target, module2, desc) => { | ||
| if (module2 && typeof module2 === "object" || typeof module2 === "function") { | ||
| for (let key of __getOwnPropNames(module2)) | ||
| if (!__hasOwnProp.call(target, key) && key !== "default") | ||
| __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable }); | ||
| } | ||
| return target; | ||
| }; | ||
| var __toModule = (module2) => { | ||
| return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2); | ||
| }; | ||
| var __async = (__this, __arguments, generator) => { | ||
| return new Promise((resolve, reject) => { | ||
| var fulfilled = (value) => { | ||
| try { | ||
| step(generator.next(value)); | ||
| } catch (e) { | ||
| reject(e); | ||
| } | ||
| "use strict"; | ||
| var __assign = (this && this.__assign) || function () { | ||
| __assign = Object.assign || function(t) { | ||
| for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
| s = arguments[i]; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) | ||
| t[p] = s[p]; | ||
| } | ||
| return t; | ||
| }; | ||
| var rejected = (value) => { | ||
| try { | ||
| step(generator.throw(value)); | ||
| } catch (e) { | ||
| reject(e); | ||
| } | ||
| }; | ||
| var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); | ||
| step((generator = generator.apply(__this, __arguments)).next()); | ||
| }); | ||
| return __assign.apply(this, arguments); | ||
| }; | ||
| // packages/teleport-plugin-css/src/index.ts | ||
| __markAsModule(exports); | ||
| __export(exports, { | ||
| createCSSPlugin: () => createCSSPlugin, | ||
| createStyleSheetPlugin: () => createStyleSheetPlugin, | ||
| default: () => src_default | ||
| }); | ||
| var import_teleport_shared = __toModule(require("@teleporthq/teleport-shared")); | ||
| var import_teleport_plugin_common2 = __toModule(require("@teleporthq/teleport-plugin-common")); | ||
| var types = __toModule(require("@babel/types")); | ||
| var import_teleport_types2 = __toModule(require("@teleporthq/teleport-types")); | ||
| // packages/teleport-plugin-css/src/style-sheet.ts | ||
| var import_teleport_plugin_common = __toModule(require("@teleporthq/teleport-plugin-common")); | ||
| var import_teleport_types = __toModule(require("@teleporthq/teleport-types")); | ||
| var createStyleSheetPlugin = (config) => { | ||
| const { fileName } = config || { fileName: "style" }; | ||
| const styleSheetPlugin = (structure) => __async(void 0, null, function* () { | ||
| const { uidl, chunks } = structure; | ||
| const { styleSetDefinitions = {}, designLanguage: { tokens = {} } = {} } = uidl; | ||
| if (!styleSetDefinitions && !tokens || Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0) { | ||
| return; | ||
| } | ||
| const cssMap = []; | ||
| const mediaStylesMap = {}; | ||
| if (Object.keys(tokens).length > 0) { | ||
| cssMap.push(import_teleport_plugin_common.StyleBuilders.createCSSClassWithSelector("@global", ":root", import_teleport_plugin_common.StyleUtils.getTokensContentFromTokensObject(tokens))); | ||
| } | ||
| if (Object.keys(styleSetDefinitions).length > 0) { | ||
| import_teleport_plugin_common.StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap); | ||
| } | ||
| cssMap.push(...import_teleport_plugin_common.StyleBuilders.generateMediaStyle(mediaStylesMap)); | ||
| if (cssMap.length === 0) { | ||
| return structure; | ||
| } | ||
| uidl.outputOptions = uidl.outputOptions || {}; | ||
| uidl.outputOptions.styleFileName = fileName; | ||
| chunks.push({ | ||
| name: fileName, | ||
| type: import_teleport_types.ChunkType.STRING, | ||
| fileType: import_teleport_types.FileType.CSS, | ||
| content: cssMap.join("\n"), | ||
| linkAfter: [] | ||
| var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
| function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
| return new (P || (P = Promise))(function (resolve, reject) { | ||
| function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
| function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
| function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
| step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
| }); | ||
| return structure; | ||
| }); | ||
| return styleSheetPlugin; | ||
| }; | ||
| // packages/teleport-plugin-css/src/index.ts | ||
| var createCSSPlugin = (config) => { | ||
| const { | ||
| chunkName = "style-chunk", | ||
| templateChunkName = "template-chunk", | ||
| componentDecoratorChunkName = "component-decorator", | ||
| inlineStyleAttributeKey = "style", | ||
| classAttributeName = "class", | ||
| templateStyle = "html", | ||
| declareDependency = "none", | ||
| forceScoping = false, | ||
| dynamicVariantPrefix | ||
| } = config || {}; | ||
| const cssPlugin = (structure) => __async(void 0, null, function* () { | ||
| const { uidl, chunks, dependencies, options } = structure; | ||
| const { node, styleSetDefinitions: componentStyleSet = {} } = uidl; | ||
| const { projectStyleSet, designLanguage: { tokens = {} } = {}, isRootComponent } = options || {}; | ||
| const { | ||
| styleSetDefinitions = {}, | ||
| fileName: projectStyleSheetName, | ||
| path | ||
| } = projectStyleSet || {}; | ||
| if (isRootComponent) { | ||
| if (Object.keys(tokens).length > 0 || Object.keys(styleSetDefinitions).length > 0) { | ||
| dependencies[projectStyleSheetName] = { | ||
| type: "local", | ||
| path: `${path}/${projectStyleSheetName}.${import_teleport_types2.FileType.CSS}`, | ||
| meta: { | ||
| importJustPath: true | ||
| } | ||
| }; | ||
| } | ||
| return structure; | ||
| var __generator = (this && this.__generator) || function (thisArg, body) { | ||
| var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; | ||
| return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; | ||
| function verb(n) { return function (v) { return step([n, v]); }; } | ||
| function step(op) { | ||
| if (f) throw new TypeError("Generator is already executing."); | ||
| while (_) try { | ||
| if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
| if (y = 0, t) op = [op[0] & 2, t.value]; | ||
| switch (op[0]) { | ||
| case 0: case 1: t = op; break; | ||
| case 4: _.label++; return { value: op[1], done: false }; | ||
| case 5: _.label++; y = op[1]; op = [0]; continue; | ||
| case 7: op = _.ops.pop(); _.trys.pop(); continue; | ||
| default: | ||
| if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } | ||
| if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } | ||
| if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } | ||
| if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } | ||
| if (t[2]) _.ops.pop(); | ||
| _.trys.pop(); continue; | ||
| } | ||
| op = body.call(thisArg, _); | ||
| } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } | ||
| if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; | ||
| } | ||
| const templateChunk = chunks.find((chunk) => chunk.name === templateChunkName); | ||
| const componentDecoratorChunk = chunks.find((chunk) => chunk.name === componentDecoratorChunkName); | ||
| const templateLookup = templateChunk.meta.nodesLookup; | ||
| const propsPrefix = templateChunk.meta.dynamicRefPrefix ? templateChunk.meta.dynamicRefPrefix.prop : ""; | ||
| const cssMap = []; | ||
| const mediaStylesMap = {}; | ||
| import_teleport_shared.UIDLUtils.traverseElements(node, (element) => { | ||
| var _a, _b; | ||
| const classNamesToAppend = new Set(); | ||
| const dynamicVariantsToAppend = new Set(); | ||
| const { style = {}, key, referencedStyles = {} } = element; | ||
| if (!style && !referencedStyles) { | ||
| return; | ||
| } | ||
| const root = templateLookup[key]; | ||
| const elementClassName = import_teleport_shared.StringUtils.camelCaseToDashCase(key); | ||
| const componentFileName = import_teleport_shared.UIDLUtils.getComponentFileName(uidl); | ||
| const className = forceScoping ? `${componentFileName}-${elementClassName}` : elementClassName; | ||
| const { staticStyles, dynamicStyles, tokenStyles } = import_teleport_shared.UIDLUtils.splitDynamicAndStaticStyles(style); | ||
| if (Object.keys(staticStyles).length > 0 || Object.keys(tokenStyles).length > 0) { | ||
| const collectedStyles = __spreadValues(__spreadValues({}, import_teleport_plugin_common2.StyleUtils.getContentOfStyleObject(staticStyles)), import_teleport_plugin_common2.StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles)); | ||
| cssMap.push(import_teleport_plugin_common2.StyleBuilders.createCSSClass(className, collectedStyles)); | ||
| classNamesToAppend.add(className); | ||
| } | ||
| if (Object.keys(dynamicStyles).length > 0) { | ||
| if (templateStyle === "html") { | ||
| const inlineStyles = createDynamicInlineStyle(dynamicStyles); | ||
| import_teleport_plugin_common2.HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, `{${inlineStyles}}`); | ||
| } else { | ||
| const inlineStyles = import_teleport_shared.UIDLUtils.transformDynamicStyles(dynamicStyles, (styleValue) => import_teleport_plugin_common2.StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)); | ||
| import_teleport_plugin_common2.ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles); | ||
| } | ||
| } | ||
| Object.values(referencedStyles).forEach((styleRef) => { | ||
| switch (styleRef.content.mapType) { | ||
| case "inlined": { | ||
| const filtredStyles = import_teleport_shared.UIDLUtils.splitDynamicAndStaticStyles(styleRef.content.styles); | ||
| const collectedStyles = __spreadValues(__spreadValues({}, import_teleport_plugin_common2.StyleUtils.getContentOfStyleObject(filtredStyles.staticStyles)), import_teleport_plugin_common2.StyleUtils.getCSSVariablesContentFromTokenStyles(filtredStyles.tokenStyles)); | ||
| const condition = styleRef.content.conditions[0]; | ||
| const { conditionType } = condition; | ||
| if (conditionType === "screen-size") { | ||
| const { maxWidth } = condition; | ||
| mediaStylesMap[maxWidth] = __spreadProps(__spreadValues({}, mediaStylesMap[maxWidth]), { | ||
| [className]: collectedStyles | ||
| }); | ||
| }; | ||
| var __importStar = (this && this.__importStar) || function (mod) { | ||
| if (mod && mod.__esModule) return mod; | ||
| var result = {}; | ||
| if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; | ||
| result["default"] = mod; | ||
| return result; | ||
| }; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var teleport_shared_1 = require("@teleporthq/teleport-shared"); | ||
| var teleport_plugin_common_1 = require("@teleporthq/teleport-plugin-common"); | ||
| var types = __importStar(require("@babel/types")); | ||
| var teleport_types_1 = require("@teleporthq/teleport-types"); | ||
| var style_sheet_1 = require("./style-sheet"); | ||
| exports.createStyleSheetPlugin = style_sheet_1.createStyleSheetPlugin; | ||
| exports.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; | ||
| var cssPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () { | ||
| var uidl, chunks, dependencies, options, node, _a, componentStyleSet, _b, projectStyleSet, _c, _d, tokens, isRootComponent, _e, _f, styleSetDefinitions, projectStyleSheetName, path, templateChunk, componentDecoratorChunk, templateLookup, propsPrefix, cssMap, mediaStylesMap, cssFileName, decoratorAST, decoratorParam; | ||
| return __generator(this, function (_g) { | ||
| uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options; | ||
| node = uidl.node, _a = uidl.styleSetDefinitions, componentStyleSet = _a === void 0 ? {} : _a; | ||
| _b = options || {}, projectStyleSet = _b.projectStyleSet, _c = _b.designLanguage, _d = (_c === void 0 ? {} : _c).tokens, tokens = _d === void 0 ? {} : _d, isRootComponent = _b.isRootComponent; | ||
| _e = projectStyleSet || {}, _f = _e.styleSetDefinitions, styleSetDefinitions = _f === void 0 ? {} : _f, projectStyleSheetName = _e.fileName, path = _e.path; | ||
| if (isRootComponent) { | ||
| if (Object.keys(tokens).length > 0 || Object.keys(styleSetDefinitions).length > 0) { | ||
| dependencies[projectStyleSheetName] = { | ||
| type: 'local', | ||
| path: path + "/" + projectStyleSheetName + "." + teleport_types_1.FileType.CSS, | ||
| meta: { | ||
| importJustPath: true, | ||
| }, | ||
| }; | ||
| } | ||
| return [2 /*return*/, structure]; | ||
| } | ||
| if (condition.conditionType === "element-state") { | ||
| cssMap.push(import_teleport_plugin_common2.StyleBuilders.createCSSClassWithSelector(className, `&:${condition.content}`, collectedStyles)); | ||
| templateChunk = chunks.find(function (chunk) { return chunk.name === templateChunkName; }); | ||
| componentDecoratorChunk = chunks.find(function (chunk) { return chunk.name === componentDecoratorChunkName; }); | ||
| templateLookup = templateChunk.meta.nodesLookup; | ||
| propsPrefix = templateChunk.meta.dynamicRefPrefix | ||
| ? templateChunk.meta.dynamicRefPrefix.prop | ||
| : ''; | ||
| cssMap = []; | ||
| mediaStylesMap = {}; | ||
| teleport_shared_1.UIDLUtils.traverseElements(node, 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; | ||
| if (!style && !referencedStyles) { | ||
| return; | ||
| } | ||
| var root = templateLookup[key]; | ||
| var elementClassName = teleport_shared_1.StringUtils.camelCaseToDashCase(key); | ||
| var componentFileName = teleport_shared_1.UIDLUtils.getComponentFileName(uidl); // Filename used to enforce dash case naming | ||
| var className = forceScoping // when the framework doesn't provide automating scoping for classNames | ||
| ? componentFileName + "-" + elementClassName | ||
| : elementClassName; | ||
| var _e = teleport_shared_1.UIDLUtils.splitDynamicAndStaticStyles(style), staticStyles = _e.staticStyles, dynamicStyles = _e.dynamicStyles, tokenStyles = _e.tokenStyles; | ||
| if (Object.keys(staticStyles).length > 0 || Object.keys(tokenStyles).length > 0) { | ||
| var collectedStyles = __assign(__assign({}, teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(staticStyles)), teleport_plugin_common_1.StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles)); | ||
| cssMap.push(teleport_plugin_common_1.StyleBuilders.createCSSClass(className, collectedStyles)); | ||
| classNamesToAppend.add(className); | ||
| } | ||
| if (Object.keys(dynamicStyles).length > 0) { | ||
| /* 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); | ||
| teleport_plugin_common_1.HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, "{" + inlineStyles + "}"); | ||
| } | ||
| else { | ||
| var inlineStyles = teleport_shared_1.UIDLUtils.transformDynamicStyles(dynamicStyles, function (styleValue) { | ||
| return teleport_plugin_common_1.StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix); | ||
| }); | ||
| teleport_plugin_common_1.ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles); | ||
| } | ||
| } | ||
| Object.values(referencedStyles).forEach(function (styleRef) { | ||
| var _a; | ||
| switch (styleRef.content.mapType) { | ||
| case 'inlined': { | ||
| var filtredStyles = teleport_shared_1.UIDLUtils.splitDynamicAndStaticStyles(styleRef.content.styles); | ||
| var collectedStyles = __assign(__assign({}, teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(filtredStyles.staticStyles)), teleport_plugin_common_1.StyleUtils.getCSSVariablesContentFromTokenStyles(filtredStyles.tokenStyles)); | ||
| var condition = styleRef.content.conditions[0]; | ||
| var conditionType = condition.conditionType; | ||
| if (conditionType === 'screen-size') { | ||
| var maxWidth = condition.maxWidth; | ||
| mediaStylesMap[maxWidth] = __assign(__assign({}, mediaStylesMap[maxWidth]), (_a = {}, _a[className] = collectedStyles, _a)); | ||
| } | ||
| if (condition.conditionType === 'element-state') { | ||
| cssMap.push(teleport_plugin_common_1.StyleBuilders.createCSSClassWithSelector(className, "&:" + condition.content, collectedStyles)); | ||
| } | ||
| classNamesToAppend.add(className); | ||
| return; | ||
| } | ||
| case 'component-referenced': { | ||
| if (styleRef.content.content.type === 'static') { | ||
| classNamesToAppend.add(String(styleRef.content.content.content)); | ||
| } | ||
| if (styleRef.content.content.type === 'dynamic' && | ||
| styleRef.content.content.content.referenceType === 'prop') { | ||
| if (!dynamicVariantPrefix && templateStyle === 'html') { | ||
| throw new teleport_types_1.PluginCSS("Node " + (element.name || element.key) + " is using dynamic variant based on prop. But \"dynamicVariantPrefix\" is not defiend.\n " + JSON.stringify(styleRef.content.content, null, 2)); | ||
| } | ||
| dynamicVariantsToAppend.add(styleRef.content.content.content.id); | ||
| } | ||
| if (styleRef.content.content.type === 'dynamic' && | ||
| styleRef.content.content.content.referenceType === 'comp') { | ||
| classNamesToAppend.add(styleRef.content.content.content.id); | ||
| } | ||
| return; | ||
| } | ||
| case 'project-referenced': { | ||
| var content = styleRef.content; | ||
| var referedStyle = styleSetDefinitions[content.referenceId]; | ||
| if (!referedStyle) { | ||
| throw new teleport_types_1.PluginCSS("Style used from global stylesheet is missing - " + content.referenceId); | ||
| } | ||
| classNamesToAppend.add(content.referenceId); | ||
| return; | ||
| } | ||
| default: { | ||
| throw new teleport_types_1.PluginCSS("We support only project-referenced or inlined, received " + JSON.stringify(styleRef.content, null, 2)); | ||
| } | ||
| } | ||
| }); | ||
| if (templateStyle === 'html') { | ||
| if (classNamesToAppend.size > 0) { | ||
| teleport_plugin_common_1.HASTUtils.addClassToNode(root, Array.from(classNamesToAppend).join(' ')); | ||
| } | ||
| if (dynamicVariantsToAppend.size > 1) { | ||
| throw new teleport_types_1.PluginCSS("Node " + (((_a = node.content) === null || _a === void 0 ? void 0 : _a.name) || ((_b = node.content) === null || _b === void 0 ? void 0 : _b.key)) + " is using multiple dynamic variants using propDefinitions.\n We can have only one dynamic variant at once"); | ||
| } | ||
| if (dynamicVariantPrefix && dynamicVariantsToAppend.size > 0) { | ||
| teleport_plugin_common_1.HASTUtils.addAttributeToNode(root, dynamicVariantPrefix, Array.from(dynamicVariantsToAppend).join(' ')); | ||
| } | ||
| } | ||
| else { | ||
| teleport_plugin_common_1.ASTUtils.addClassStringOnJSXTag(root, Array.from(classNamesToAppend).join(' '), classAttributeName, Array.from(dynamicVariantsToAppend).map(function (variant) { | ||
| var dynamicAttrValueIdentifier = dynamicVariantPrefix | ||
| ? types.identifier(dynamicVariantPrefix) | ||
| : types.identifier(propsPrefix); | ||
| return types.memberExpression(dynamicAttrValueIdentifier, types.identifier(variant)); | ||
| })); | ||
| } | ||
| }); | ||
| if (Object.keys(componentStyleSet).length > 0) { | ||
| teleport_plugin_common_1.StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap); | ||
| } | ||
| classNamesToAppend.add(className); | ||
| return; | ||
| } | ||
| case "component-referenced": { | ||
| if (styleRef.content.content.type === "static") { | ||
| classNamesToAppend.add(String(styleRef.content.content.content)); | ||
| if (Object.keys(mediaStylesMap).length > 0) { | ||
| cssMap.push.apply(cssMap, teleport_plugin_common_1.StyleBuilders.generateMediaStyle(mediaStylesMap)); | ||
| } | ||
| if (styleRef.content.content.type === "dynamic" && styleRef.content.content.content.referenceType === "prop") { | ||
| if (!dynamicVariantPrefix && templateStyle === "html") { | ||
| throw new import_teleport_types2.PluginCSS(`Node ${element.name || element.key} is using dynamic variant based on prop. But "dynamicVariantPrefix" is not defiend. | ||
| ${JSON.stringify(styleRef.content.content, null, 2)}`); | ||
| } | ||
| dynamicVariantsToAppend.add(styleRef.content.content.content.id); | ||
| if (cssMap.length > 0) { | ||
| cssFileName = teleport_shared_1.UIDLUtils.getStyleFileName(uidl); | ||
| if (declareDependency === 'decorator' && componentDecoratorChunk) { | ||
| decoratorAST = componentDecoratorChunk.content; | ||
| decoratorParam = decoratorAST.expression.arguments[0]; | ||
| teleport_plugin_common_1.ASTUtils.addPropertyToASTObject(decoratorParam, 'styleUrls', [ | ||
| cssFileName + "." + teleport_types_1.FileType.CSS, | ||
| ]); | ||
| cssMap.unshift(":host { \n display: contents; \n}"); | ||
| } | ||
| if (declareDependency === 'import') { | ||
| dependencies.styles = { | ||
| // styles will not be used in this case as we have importJustPath flag set | ||
| type: 'local', | ||
| path: "./" + cssFileName + "." + teleport_types_1.FileType.CSS, | ||
| meta: { | ||
| importJustPath: true, | ||
| }, | ||
| }; | ||
| } | ||
| chunks.push({ | ||
| type: teleport_types_1.ChunkType.STRING, | ||
| name: chunkName, | ||
| fileType: teleport_types_1.FileType.CSS, | ||
| content: cssMap.join('\n'), | ||
| linkAfter: [], | ||
| }); | ||
| } | ||
| if (styleRef.content.content.type === "dynamic" && styleRef.content.content.content.referenceType === "comp") { | ||
| classNamesToAppend.add(styleRef.content.content.content.id); | ||
| } | ||
| return; | ||
| } | ||
| case "project-referenced": { | ||
| const { content } = styleRef; | ||
| const referedStyle = styleSetDefinitions[content.referenceId]; | ||
| if (!referedStyle) { | ||
| throw new import_teleport_types2.PluginCSS(`Style used from global stylesheet is missing - ${content.referenceId}`); | ||
| } | ||
| classNamesToAppend.add(content.referenceId); | ||
| return; | ||
| } | ||
| default: { | ||
| throw new import_teleport_types2.PluginCSS(`We support only project-referenced or inlined, received ${JSON.stringify(styleRef.content, null, 2)}`); | ||
| } | ||
| } | ||
| }); | ||
| if (templateStyle === "html") { | ||
| if (classNamesToAppend.size > 0) { | ||
| import_teleport_plugin_common2.HASTUtils.addClassToNode(root, Array.from(classNamesToAppend).join(" ")); | ||
| } | ||
| if (dynamicVariantsToAppend.size > 1) { | ||
| throw new import_teleport_types2.PluginCSS(`Node ${((_a = node.content) == null ? void 0 : _a.name) || ((_b = node.content) == null ? void 0 : _b.key)} is using multiple dynamic variants using propDefinitions. | ||
| We can have only one dynamic variant at once`); | ||
| } | ||
| if (dynamicVariantPrefix && dynamicVariantsToAppend.size > 0) { | ||
| import_teleport_plugin_common2.HASTUtils.addAttributeToNode(root, dynamicVariantPrefix, Array.from(dynamicVariantsToAppend).join(" ")); | ||
| } | ||
| } else { | ||
| import_teleport_plugin_common2.ASTUtils.addClassStringOnJSXTag(root, Array.from(classNamesToAppend).join(" "), classAttributeName, Array.from(dynamicVariantsToAppend).map((variant) => { | ||
| const dynamicAttrValueIdentifier = dynamicVariantPrefix ? types.identifier(dynamicVariantPrefix) : types.identifier(propsPrefix); | ||
| return types.memberExpression(dynamicAttrValueIdentifier, types.identifier(variant)); | ||
| })); | ||
| } | ||
| }); | ||
| if (Object.keys(componentStyleSet).length > 0) { | ||
| import_teleport_plugin_common2.StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap); | ||
| } | ||
| if (Object.keys(mediaStylesMap).length > 0) { | ||
| cssMap.push(...import_teleport_plugin_common2.StyleBuilders.generateMediaStyle(mediaStylesMap)); | ||
| } | ||
| if (cssMap.length > 0) { | ||
| const cssFileName = import_teleport_shared.UIDLUtils.getStyleFileName(uidl); | ||
| if (declareDependency === "decorator" && componentDecoratorChunk) { | ||
| const decoratorAST = componentDecoratorChunk.content; | ||
| const decoratorParam = decoratorAST.expression.arguments[0]; | ||
| import_teleport_plugin_common2.ASTUtils.addPropertyToASTObject(decoratorParam, "styleUrls", [ | ||
| `${cssFileName}.${import_teleport_types2.FileType.CSS}` | ||
| ]); | ||
| cssMap.unshift(`:host { | ||
| display: contents; | ||
| }`); | ||
| } | ||
| if (declareDependency === "import") { | ||
| dependencies.styles = { | ||
| type: "local", | ||
| path: `./${cssFileName}.${import_teleport_types2.FileType.CSS}`, | ||
| meta: { | ||
| importJustPath: true | ||
| } | ||
| }; | ||
| } | ||
| chunks.push({ | ||
| type: import_teleport_types2.ChunkType.STRING, | ||
| name: chunkName, | ||
| fileType: import_teleport_types2.FileType.CSS, | ||
| content: cssMap.join("\n"), | ||
| linkAfter: [] | ||
| }); | ||
| } | ||
| return structure; | ||
| }); | ||
| return cssPlugin; | ||
| return [2 /*return*/, structure]; | ||
| }); | ||
| }); }; | ||
| return cssPlugin; | ||
| }; | ||
| var src_default = createCSSPlugin(); | ||
| var createDynamicInlineStyle = (styles) => { | ||
| return Object.keys(styles).map((styleKey) => { | ||
| return `${styleKey}: ${styles[styleKey].content.id}`; | ||
| }).join(", "); | ||
| exports.default = exports.createCSSPlugin(); | ||
| var createDynamicInlineStyle = function (styles) { | ||
| return Object.keys(styles) | ||
| .map(function (styleKey) { | ||
| return styleKey + ": " + styles[styleKey].content.id; | ||
| }) | ||
| .join(', '); | ||
| }; | ||
| //# sourceMappingURL=index.js.map |
@@ -1,277 +0,233 @@ | ||
| var __defProp = Object.defineProperty; | ||
| var __defProps = Object.defineProperties; | ||
| var __getOwnPropDescs = Object.getOwnPropertyDescriptors; | ||
| var __getOwnPropSymbols = Object.getOwnPropertySymbols; | ||
| var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
| var __propIsEnum = Object.prototype.propertyIsEnumerable; | ||
| var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; | ||
| var __spreadValues = (a, b) => { | ||
| for (var prop in b || (b = {})) | ||
| if (__hasOwnProp.call(b, prop)) | ||
| __defNormalProp(a, prop, b[prop]); | ||
| if (__getOwnPropSymbols) | ||
| for (var prop of __getOwnPropSymbols(b)) { | ||
| if (__propIsEnum.call(b, prop)) | ||
| __defNormalProp(a, prop, b[prop]); | ||
| } | ||
| return a; | ||
| }; | ||
| var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b)); | ||
| var __async = (__this, __arguments, generator) => { | ||
| return new Promise((resolve, reject) => { | ||
| var fulfilled = (value) => { | ||
| try { | ||
| step(generator.next(value)); | ||
| } catch (e) { | ||
| reject(e); | ||
| } | ||
| var __assign = (this && this.__assign) || function () { | ||
| __assign = Object.assign || function(t) { | ||
| for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
| s = arguments[i]; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) | ||
| t[p] = s[p]; | ||
| } | ||
| return t; | ||
| }; | ||
| var rejected = (value) => { | ||
| try { | ||
| step(generator.throw(value)); | ||
| } catch (e) { | ||
| reject(e); | ||
| } | ||
| }; | ||
| var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); | ||
| step((generator = generator.apply(__this, __arguments)).next()); | ||
| }); | ||
| return __assign.apply(this, arguments); | ||
| }; | ||
| // packages/teleport-plugin-css/src/index.ts | ||
| import { StringUtils, UIDLUtils } from "@teleporthq/teleport-shared"; | ||
| import { StyleUtils as StyleUtils2, StyleBuilders as StyleBuilders2, HASTUtils, ASTUtils } from "@teleporthq/teleport-plugin-common"; | ||
| import { | ||
| identifier, | ||
| memberExpression | ||
| } from "@babel/types"; | ||
| import { | ||
| ChunkType as ChunkType2, | ||
| FileType as FileType2, | ||
| PluginCSS | ||
| } from "@teleporthq/teleport-types"; | ||
| // packages/teleport-plugin-css/src/style-sheet.ts | ||
| import { StyleUtils, StyleBuilders } from "@teleporthq/teleport-plugin-common"; | ||
| import { | ||
| ChunkType, | ||
| FileType | ||
| } from "@teleporthq/teleport-types"; | ||
| var createStyleSheetPlugin = (config) => { | ||
| const { fileName } = config || { fileName: "style" }; | ||
| const styleSheetPlugin = (structure) => __async(void 0, null, function* () { | ||
| const { uidl, chunks } = structure; | ||
| const { styleSetDefinitions = {}, designLanguage: { tokens = {} } = {} } = uidl; | ||
| if (!styleSetDefinitions && !tokens || Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0) { | ||
| return; | ||
| } | ||
| const cssMap = []; | ||
| const mediaStylesMap = {}; | ||
| if (Object.keys(tokens).length > 0) { | ||
| cssMap.push(StyleBuilders.createCSSClassWithSelector("@global", ":root", StyleUtils.getTokensContentFromTokensObject(tokens))); | ||
| } | ||
| if (Object.keys(styleSetDefinitions).length > 0) { | ||
| StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap); | ||
| } | ||
| cssMap.push(...StyleBuilders.generateMediaStyle(mediaStylesMap)); | ||
| if (cssMap.length === 0) { | ||
| return structure; | ||
| } | ||
| uidl.outputOptions = uidl.outputOptions || {}; | ||
| uidl.outputOptions.styleFileName = fileName; | ||
| chunks.push({ | ||
| name: fileName, | ||
| type: ChunkType.STRING, | ||
| fileType: FileType.CSS, | ||
| content: cssMap.join("\n"), | ||
| linkAfter: [] | ||
| var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
| function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
| return new (P || (P = Promise))(function (resolve, reject) { | ||
| function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
| function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
| function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
| step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
| }); | ||
| return structure; | ||
| }); | ||
| return styleSheetPlugin; | ||
| }; | ||
| // packages/teleport-plugin-css/src/index.ts | ||
| var createCSSPlugin = (config) => { | ||
| const { | ||
| chunkName = "style-chunk", | ||
| templateChunkName = "template-chunk", | ||
| componentDecoratorChunkName = "component-decorator", | ||
| inlineStyleAttributeKey = "style", | ||
| classAttributeName = "class", | ||
| templateStyle = "html", | ||
| declareDependency = "none", | ||
| forceScoping = false, | ||
| dynamicVariantPrefix | ||
| } = config || {}; | ||
| const cssPlugin = (structure) => __async(void 0, null, function* () { | ||
| const { uidl, chunks, dependencies, options } = structure; | ||
| const { node, styleSetDefinitions: componentStyleSet = {} } = uidl; | ||
| const { projectStyleSet, designLanguage: { tokens = {} } = {}, isRootComponent } = options || {}; | ||
| const { | ||
| styleSetDefinitions = {}, | ||
| fileName: projectStyleSheetName, | ||
| path | ||
| } = projectStyleSet || {}; | ||
| if (isRootComponent) { | ||
| if (Object.keys(tokens).length > 0 || Object.keys(styleSetDefinitions).length > 0) { | ||
| dependencies[projectStyleSheetName] = { | ||
| type: "local", | ||
| path: `${path}/${projectStyleSheetName}.${FileType2.CSS}`, | ||
| meta: { | ||
| importJustPath: true | ||
| } | ||
| }; | ||
| } | ||
| return structure; | ||
| var __generator = (this && this.__generator) || function (thisArg, body) { | ||
| var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; | ||
| return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; | ||
| function verb(n) { return function (v) { return step([n, v]); }; } | ||
| function step(op) { | ||
| if (f) throw new TypeError("Generator is already executing."); | ||
| while (_) try { | ||
| if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
| if (y = 0, t) op = [op[0] & 2, t.value]; | ||
| switch (op[0]) { | ||
| case 0: case 1: t = op; break; | ||
| case 4: _.label++; return { value: op[1], done: false }; | ||
| case 5: _.label++; y = op[1]; op = [0]; continue; | ||
| case 7: op = _.ops.pop(); _.trys.pop(); continue; | ||
| default: | ||
| if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } | ||
| if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } | ||
| if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } | ||
| if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } | ||
| if (t[2]) _.ops.pop(); | ||
| _.trys.pop(); continue; | ||
| } | ||
| op = body.call(thisArg, _); | ||
| } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } | ||
| if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; | ||
| } | ||
| const templateChunk = chunks.find((chunk) => chunk.name === templateChunkName); | ||
| const componentDecoratorChunk = chunks.find((chunk) => chunk.name === componentDecoratorChunkName); | ||
| const templateLookup = templateChunk.meta.nodesLookup; | ||
| const propsPrefix = templateChunk.meta.dynamicRefPrefix ? templateChunk.meta.dynamicRefPrefix.prop : ""; | ||
| const cssMap = []; | ||
| const mediaStylesMap = {}; | ||
| UIDLUtils.traverseElements(node, (element) => { | ||
| var _a, _b; | ||
| const classNamesToAppend = new Set(); | ||
| const dynamicVariantsToAppend = new Set(); | ||
| const { style = {}, key, referencedStyles = {} } = element; | ||
| if (!style && !referencedStyles) { | ||
| return; | ||
| } | ||
| const root = templateLookup[key]; | ||
| const elementClassName = StringUtils.camelCaseToDashCase(key); | ||
| const componentFileName = UIDLUtils.getComponentFileName(uidl); | ||
| const className = forceScoping ? `${componentFileName}-${elementClassName}` : elementClassName; | ||
| const { staticStyles, dynamicStyles, tokenStyles } = UIDLUtils.splitDynamicAndStaticStyles(style); | ||
| if (Object.keys(staticStyles).length > 0 || Object.keys(tokenStyles).length > 0) { | ||
| const collectedStyles = __spreadValues(__spreadValues({}, StyleUtils2.getContentOfStyleObject(staticStyles)), StyleUtils2.getCSSVariablesContentFromTokenStyles(tokenStyles)); | ||
| cssMap.push(StyleBuilders2.createCSSClass(className, collectedStyles)); | ||
| classNamesToAppend.add(className); | ||
| } | ||
| if (Object.keys(dynamicStyles).length > 0) { | ||
| if (templateStyle === "html") { | ||
| const inlineStyles = createDynamicInlineStyle(dynamicStyles); | ||
| HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, `{${inlineStyles}}`); | ||
| } else { | ||
| const inlineStyles = UIDLUtils.transformDynamicStyles(dynamicStyles, (styleValue) => StyleBuilders2.createDynamicStyleExpression(styleValue, propsPrefix)); | ||
| ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles); | ||
| } | ||
| } | ||
| Object.values(referencedStyles).forEach((styleRef) => { | ||
| switch (styleRef.content.mapType) { | ||
| case "inlined": { | ||
| const filtredStyles = UIDLUtils.splitDynamicAndStaticStyles(styleRef.content.styles); | ||
| const collectedStyles = __spreadValues(__spreadValues({}, StyleUtils2.getContentOfStyleObject(filtredStyles.staticStyles)), StyleUtils2.getCSSVariablesContentFromTokenStyles(filtredStyles.tokenStyles)); | ||
| const condition = styleRef.content.conditions[0]; | ||
| const { conditionType } = condition; | ||
| if (conditionType === "screen-size") { | ||
| const { maxWidth } = condition; | ||
| mediaStylesMap[maxWidth] = __spreadProps(__spreadValues({}, mediaStylesMap[maxWidth]), { | ||
| [className]: collectedStyles | ||
| }); | ||
| }; | ||
| import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'; | ||
| import { StyleUtils, StyleBuilders, HASTUtils, ASTUtils } from '@teleporthq/teleport-plugin-common'; | ||
| import * as types from '@babel/types'; | ||
| import { ChunkType, FileType, PluginCSS, } from '@teleporthq/teleport-types'; | ||
| import { createStyleSheetPlugin } from './style-sheet'; | ||
| export 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; | ||
| var cssPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () { | ||
| var uidl, chunks, dependencies, options, node, _a, componentStyleSet, _b, projectStyleSet, _c, _d, tokens, isRootComponent, _e, _f, styleSetDefinitions, projectStyleSheetName, path, templateChunk, componentDecoratorChunk, templateLookup, propsPrefix, cssMap, mediaStylesMap, cssFileName, decoratorAST, decoratorParam; | ||
| return __generator(this, function (_g) { | ||
| uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options; | ||
| node = uidl.node, _a = uidl.styleSetDefinitions, componentStyleSet = _a === void 0 ? {} : _a; | ||
| _b = options || {}, projectStyleSet = _b.projectStyleSet, _c = _b.designLanguage, _d = (_c === void 0 ? {} : _c).tokens, tokens = _d === void 0 ? {} : _d, isRootComponent = _b.isRootComponent; | ||
| _e = projectStyleSet || {}, _f = _e.styleSetDefinitions, styleSetDefinitions = _f === void 0 ? {} : _f, projectStyleSheetName = _e.fileName, path = _e.path; | ||
| if (isRootComponent) { | ||
| if (Object.keys(tokens).length > 0 || Object.keys(styleSetDefinitions).length > 0) { | ||
| dependencies[projectStyleSheetName] = { | ||
| type: 'local', | ||
| path: path + "/" + projectStyleSheetName + "." + FileType.CSS, | ||
| meta: { | ||
| importJustPath: true, | ||
| }, | ||
| }; | ||
| } | ||
| return [2 /*return*/, structure]; | ||
| } | ||
| if (condition.conditionType === "element-state") { | ||
| cssMap.push(StyleBuilders2.createCSSClassWithSelector(className, `&:${condition.content}`, collectedStyles)); | ||
| templateChunk = chunks.find(function (chunk) { return chunk.name === templateChunkName; }); | ||
| componentDecoratorChunk = chunks.find(function (chunk) { return chunk.name === componentDecoratorChunkName; }); | ||
| templateLookup = templateChunk.meta.nodesLookup; | ||
| propsPrefix = templateChunk.meta.dynamicRefPrefix | ||
| ? templateChunk.meta.dynamicRefPrefix.prop | ||
| : ''; | ||
| cssMap = []; | ||
| mediaStylesMap = {}; | ||
| UIDLUtils.traverseElements(node, 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; | ||
| if (!style && !referencedStyles) { | ||
| return; | ||
| } | ||
| var root = templateLookup[key]; | ||
| var elementClassName = StringUtils.camelCaseToDashCase(key); | ||
| var componentFileName = UIDLUtils.getComponentFileName(uidl); // Filename used to enforce dash case naming | ||
| var className = forceScoping // when the framework doesn't provide automating scoping for classNames | ||
| ? componentFileName + "-" + elementClassName | ||
| : elementClassName; | ||
| var _e = UIDLUtils.splitDynamicAndStaticStyles(style), staticStyles = _e.staticStyles, dynamicStyles = _e.dynamicStyles, tokenStyles = _e.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); | ||
| } | ||
| if (Object.keys(dynamicStyles).length > 0) { | ||
| /* 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, "{" + inlineStyles + "}"); | ||
| } | ||
| else { | ||
| var inlineStyles = UIDLUtils.transformDynamicStyles(dynamicStyles, function (styleValue) { | ||
| return StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix); | ||
| }); | ||
| ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles); | ||
| } | ||
| } | ||
| Object.values(referencedStyles).forEach(function (styleRef) { | ||
| var _a; | ||
| switch (styleRef.content.mapType) { | ||
| case 'inlined': { | ||
| var filtredStyles = UIDLUtils.splitDynamicAndStaticStyles(styleRef.content.styles); | ||
| var collectedStyles = __assign(__assign({}, StyleUtils.getContentOfStyleObject(filtredStyles.staticStyles)), StyleUtils.getCSSVariablesContentFromTokenStyles(filtredStyles.tokenStyles)); | ||
| var condition = styleRef.content.conditions[0]; | ||
| var conditionType = condition.conditionType; | ||
| if (conditionType === 'screen-size') { | ||
| var maxWidth = condition.maxWidth; | ||
| mediaStylesMap[maxWidth] = __assign(__assign({}, mediaStylesMap[maxWidth]), (_a = {}, _a[className] = collectedStyles, _a)); | ||
| } | ||
| if (condition.conditionType === 'element-state') { | ||
| cssMap.push(StyleBuilders.createCSSClassWithSelector(className, "&:" + condition.content, collectedStyles)); | ||
| } | ||
| classNamesToAppend.add(className); | ||
| return; | ||
| } | ||
| case 'component-referenced': { | ||
| if (styleRef.content.content.type === 'static') { | ||
| classNamesToAppend.add(String(styleRef.content.content.content)); | ||
| } | ||
| if (styleRef.content.content.type === 'dynamic' && | ||
| styleRef.content.content.content.referenceType === 'prop') { | ||
| if (!dynamicVariantPrefix && templateStyle === 'html') { | ||
| throw new PluginCSS("Node " + (element.name || element.key) + " is using dynamic variant based on prop. But \"dynamicVariantPrefix\" is not defiend.\n " + JSON.stringify(styleRef.content.content, null, 2)); | ||
| } | ||
| dynamicVariantsToAppend.add(styleRef.content.content.content.id); | ||
| } | ||
| if (styleRef.content.content.type === 'dynamic' && | ||
| styleRef.content.content.content.referenceType === 'comp') { | ||
| classNamesToAppend.add(styleRef.content.content.content.id); | ||
| } | ||
| return; | ||
| } | ||
| case 'project-referenced': { | ||
| var content = styleRef.content; | ||
| var referedStyle = styleSetDefinitions[content.referenceId]; | ||
| if (!referedStyle) { | ||
| throw new PluginCSS("Style used from global stylesheet is missing - " + content.referenceId); | ||
| } | ||
| classNamesToAppend.add(content.referenceId); | ||
| return; | ||
| } | ||
| default: { | ||
| throw new PluginCSS("We support only project-referenced or inlined, received " + JSON.stringify(styleRef.content, null, 2)); | ||
| } | ||
| } | ||
| }); | ||
| if (templateStyle === 'html') { | ||
| if (classNamesToAppend.size > 0) { | ||
| HASTUtils.addClassToNode(root, Array.from(classNamesToAppend).join(' ')); | ||
| } | ||
| if (dynamicVariantsToAppend.size > 1) { | ||
| throw new PluginCSS("Node " + (((_a = node.content) === null || _a === void 0 ? void 0 : _a.name) || ((_b = node.content) === null || _b === void 0 ? void 0 : _b.key)) + " is using multiple dynamic variants using propDefinitions.\n We can have only one dynamic variant at once"); | ||
| } | ||
| if (dynamicVariantPrefix && dynamicVariantsToAppend.size > 0) { | ||
| HASTUtils.addAttributeToNode(root, dynamicVariantPrefix, Array.from(dynamicVariantsToAppend).join(' ')); | ||
| } | ||
| } | ||
| else { | ||
| ASTUtils.addClassStringOnJSXTag(root, Array.from(classNamesToAppend).join(' '), classAttributeName, Array.from(dynamicVariantsToAppend).map(function (variant) { | ||
| var dynamicAttrValueIdentifier = dynamicVariantPrefix | ||
| ? types.identifier(dynamicVariantPrefix) | ||
| : types.identifier(propsPrefix); | ||
| return types.memberExpression(dynamicAttrValueIdentifier, types.identifier(variant)); | ||
| })); | ||
| } | ||
| }); | ||
| if (Object.keys(componentStyleSet).length > 0) { | ||
| StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap); | ||
| } | ||
| classNamesToAppend.add(className); | ||
| return; | ||
| } | ||
| case "component-referenced": { | ||
| if (styleRef.content.content.type === "static") { | ||
| classNamesToAppend.add(String(styleRef.content.content.content)); | ||
| if (Object.keys(mediaStylesMap).length > 0) { | ||
| cssMap.push.apply(cssMap, StyleBuilders.generateMediaStyle(mediaStylesMap)); | ||
| } | ||
| if (styleRef.content.content.type === "dynamic" && styleRef.content.content.content.referenceType === "prop") { | ||
| if (!dynamicVariantPrefix && templateStyle === "html") { | ||
| throw new PluginCSS(`Node ${element.name || element.key} is using dynamic variant based on prop. But "dynamicVariantPrefix" is not defiend. | ||
| ${JSON.stringify(styleRef.content.content, null, 2)}`); | ||
| } | ||
| dynamicVariantsToAppend.add(styleRef.content.content.content.id); | ||
| if (cssMap.length > 0) { | ||
| cssFileName = UIDLUtils.getStyleFileName(uidl); | ||
| if (declareDependency === 'decorator' && componentDecoratorChunk) { | ||
| decoratorAST = componentDecoratorChunk.content; | ||
| decoratorParam = decoratorAST.expression.arguments[0]; | ||
| ASTUtils.addPropertyToASTObject(decoratorParam, 'styleUrls', [ | ||
| cssFileName + "." + FileType.CSS, | ||
| ]); | ||
| cssMap.unshift(":host { \n display: contents; \n}"); | ||
| } | ||
| if (declareDependency === 'import') { | ||
| dependencies.styles = { | ||
| // styles will not be used in this case as we have importJustPath flag set | ||
| type: 'local', | ||
| path: "./" + cssFileName + "." + FileType.CSS, | ||
| meta: { | ||
| importJustPath: true, | ||
| }, | ||
| }; | ||
| } | ||
| chunks.push({ | ||
| type: ChunkType.STRING, | ||
| name: chunkName, | ||
| fileType: FileType.CSS, | ||
| content: cssMap.join('\n'), | ||
| linkAfter: [], | ||
| }); | ||
| } | ||
| if (styleRef.content.content.type === "dynamic" && styleRef.content.content.content.referenceType === "comp") { | ||
| classNamesToAppend.add(styleRef.content.content.content.id); | ||
| } | ||
| return; | ||
| } | ||
| case "project-referenced": { | ||
| const { content } = styleRef; | ||
| const referedStyle = styleSetDefinitions[content.referenceId]; | ||
| if (!referedStyle) { | ||
| throw new PluginCSS(`Style used from global stylesheet is missing - ${content.referenceId}`); | ||
| } | ||
| classNamesToAppend.add(content.referenceId); | ||
| return; | ||
| } | ||
| default: { | ||
| throw new PluginCSS(`We support only project-referenced or inlined, received ${JSON.stringify(styleRef.content, null, 2)}`); | ||
| } | ||
| } | ||
| }); | ||
| if (templateStyle === "html") { | ||
| if (classNamesToAppend.size > 0) { | ||
| HASTUtils.addClassToNode(root, Array.from(classNamesToAppend).join(" ")); | ||
| } | ||
| if (dynamicVariantsToAppend.size > 1) { | ||
| throw new PluginCSS(`Node ${((_a = node.content) == null ? void 0 : _a.name) || ((_b = node.content) == null ? void 0 : _b.key)} is using multiple dynamic variants using propDefinitions. | ||
| We can have only one dynamic variant at once`); | ||
| } | ||
| if (dynamicVariantPrefix && dynamicVariantsToAppend.size > 0) { | ||
| HASTUtils.addAttributeToNode(root, dynamicVariantPrefix, Array.from(dynamicVariantsToAppend).join(" ")); | ||
| } | ||
| } else { | ||
| ASTUtils.addClassStringOnJSXTag(root, Array.from(classNamesToAppend).join(" "), classAttributeName, Array.from(dynamicVariantsToAppend).map((variant) => { | ||
| const dynamicAttrValueIdentifier = dynamicVariantPrefix ? identifier(dynamicVariantPrefix) : identifier(propsPrefix); | ||
| return memberExpression(dynamicAttrValueIdentifier, identifier(variant)); | ||
| })); | ||
| } | ||
| }); | ||
| if (Object.keys(componentStyleSet).length > 0) { | ||
| StyleBuilders2.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap); | ||
| } | ||
| if (Object.keys(mediaStylesMap).length > 0) { | ||
| cssMap.push(...StyleBuilders2.generateMediaStyle(mediaStylesMap)); | ||
| } | ||
| if (cssMap.length > 0) { | ||
| const cssFileName = UIDLUtils.getStyleFileName(uidl); | ||
| if (declareDependency === "decorator" && componentDecoratorChunk) { | ||
| const decoratorAST = componentDecoratorChunk.content; | ||
| const decoratorParam = decoratorAST.expression.arguments[0]; | ||
| ASTUtils.addPropertyToASTObject(decoratorParam, "styleUrls", [ | ||
| `${cssFileName}.${FileType2.CSS}` | ||
| ]); | ||
| cssMap.unshift(`:host { | ||
| display: contents; | ||
| }`); | ||
| } | ||
| if (declareDependency === "import") { | ||
| dependencies.styles = { | ||
| type: "local", | ||
| path: `./${cssFileName}.${FileType2.CSS}`, | ||
| meta: { | ||
| importJustPath: true | ||
| } | ||
| }; | ||
| } | ||
| chunks.push({ | ||
| type: ChunkType2.STRING, | ||
| name: chunkName, | ||
| fileType: FileType2.CSS, | ||
| content: cssMap.join("\n"), | ||
| linkAfter: [] | ||
| }); | ||
| } | ||
| return structure; | ||
| }); | ||
| return cssPlugin; | ||
| return [2 /*return*/, structure]; | ||
| }); | ||
| }); }; | ||
| return cssPlugin; | ||
| }; | ||
| var src_default = createCSSPlugin(); | ||
| var createDynamicInlineStyle = (styles) => { | ||
| return Object.keys(styles).map((styleKey) => { | ||
| return `${styleKey}: ${styles[styleKey].content.id}`; | ||
| }).join(", "); | ||
| export { createStyleSheetPlugin }; | ||
| export default createCSSPlugin(); | ||
| var createDynamicInlineStyle = function (styles) { | ||
| return Object.keys(styles) | ||
| .map(function (styleKey) { | ||
| return styleKey + ": " + styles[styleKey].content.id; | ||
| }) | ||
| .join(', '); | ||
| }; | ||
| export { | ||
| createCSSPlugin, | ||
| createStyleSheetPlugin, | ||
| src_default as default | ||
| }; | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "@teleporthq/teleport-plugin-css", | ||
| "version": "0.17.0", | ||
| "version": "0.17.3", | ||
| "description": "A plugin for creating the styles into external css files", | ||
@@ -9,9 +9,4 @@ "author": "teleportHQ", | ||
| "main": "dist/cjs/index.js", | ||
| "module": "dist/esm/index.js", | ||
| "types": "dist/cjs/index.d.ts", | ||
| "module": "dist/esm/index.js", | ||
| "exports": { | ||
| "module": "./dist/esm/index.js", | ||
| "require": "./dist/cjs/index.js", | ||
| "import": "./dist/esm/index.js" | ||
| }, | ||
| "sideEffects": false, | ||
@@ -30,11 +25,11 @@ "repository": { | ||
| "clean": "rimraf dist", | ||
| "types": "tsc -p tsconfig.json" | ||
| "build": "tsc -p tsconfig.json && tsc -p tsconfig.json --module commonjs --outDir dist/cjs" | ||
| }, | ||
| "dependencies": { | ||
| "@babel/types": "^7.5.5", | ||
| "@teleporthq/teleport-plugin-common": "^0.17.0", | ||
| "@teleporthq/teleport-shared": "^0.17.0", | ||
| "@teleporthq/teleport-types": "^0.17.0" | ||
| "@teleporthq/teleport-plugin-common": "^0.17.3", | ||
| "@teleporthq/teleport-shared": "^0.17.3", | ||
| "@teleporthq/teleport-types": "^0.17.3" | ||
| }, | ||
| "gitHead": "959317a18068b52ffd8b912e41d123f70d97e7bc" | ||
| "gitHead": "1a673d148f2626c5488092f3e88b3a9d7c9725b4" | ||
| } |
| { | ||
| "extends": "../../tsconfig.json", | ||
| "compilerOptions": { | ||
| "emitDeclarationOnly": true, | ||
| "outDir": "dist/cjs" | ||
| "outDir": "dist/esm" | ||
| }, | ||
@@ -7,0 +6,0 @@ "include": [ |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
236100
75.53%- Number of package files
25
56.25%- Lines of code
1611
6.13%