New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@teleporthq/teleport-plugin-react-styled-components
Advanced tools
@teleporthq/teleport-plugin-react-styled-components - npm Package Compare versions
Comparing version 0.17.0 to 0.17.3
@@ -1,449 +0,270 @@ | ||
| 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-react-styled-components/src/index.ts | ||
| __markAsModule(exports); | ||
| __export(exports, { | ||
| createReactStyledComponentsPlugin: () => createReactStyledComponentsPlugin, | ||
| createStyleSheetPlugin: () => createStyleSheetPlugin, | ||
| default: () => src_default | ||
| }); | ||
| var types3 = __toModule(require("@babel/types")); | ||
| var import_teleport_types3 = __toModule(require("@teleporthq/teleport-types")); | ||
| var import_teleport_shared3 = __toModule(require("@teleporthq/teleport-shared")); | ||
| var import_teleport_plugin_common = __toModule(require("@teleporthq/teleport-plugin-common")); | ||
| // packages/teleport-plugin-react-styled-components/src/utils.ts | ||
| var types = __toModule(require("@babel/types")); | ||
| var import_teleport_shared = __toModule(require("@teleporthq/teleport-shared")); | ||
| var import_teleport_types = __toModule(require("@teleporthq/teleport-types")); | ||
| var generateStyledComponent = (params) => { | ||
| const { | ||
| name, | ||
| elementType, | ||
| styles, | ||
| propsReferred, | ||
| componentStyleReferences, | ||
| projectStyleReferences | ||
| } = params; | ||
| let styleExpressions = styles; | ||
| const expressionArguments = []; | ||
| if (propsReferred.size > 0) { | ||
| styleExpressions = types.arrowFunctionExpression([types.identifier("props")], styles); | ||
| } | ||
| if (projectStyleReferences.size > 0) { | ||
| expressionArguments.push(...Array.from(projectStyleReferences).map((ref) => types.identifier(ref))); | ||
| } | ||
| if (styles && styles.properties.length > 0) { | ||
| expressionArguments.push(styleExpressions); | ||
| } | ||
| if (componentStyleReferences.size > 0) { | ||
| expressionArguments.push(...Array.from(componentStyleReferences).map((ref) => types.identifier(ref))); | ||
| } | ||
| return types.variableDeclaration("const", [ | ||
| types.variableDeclarator(types.identifier(name), types.callExpression(types.callExpression(types.identifier("styled"), [types.stringLiteral(elementType)]), expressionArguments)) | ||
| ]); | ||
| 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()); | ||
| }); | ||
| }; | ||
| var removeUnusedDependencies = (dependencies, jsxNodesLookup) => { | ||
| Object.keys(dependencies).forEach((depKey) => { | ||
| const dependency = dependencies[depKey]; | ||
| if (dependency.type === "library" && dependency.path === "react-native") { | ||
| const dependencyIsStillNeeded = Object.keys(jsxNodesLookup).some((elementKey) => { | ||
| const jsxNode = jsxNodesLookup[elementKey]; | ||
| return jsxNode.openingElement.name.name === depKey; | ||
| }); | ||
| if (!dependencyIsStillNeeded) { | ||
| delete dependencies[depKey]; | ||
| } | ||
| 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 }; | ||
| } | ||
| }); | ||
| }; | ||
| var generateStyledComponentStyles = (params) => { | ||
| const { | ||
| styles, | ||
| tokensReferred, | ||
| propsReferred, | ||
| propsPrefix = "props", | ||
| tokensPrefix = "TOKENS" | ||
| } = params; | ||
| const properties = Object.keys(styles).reduce((acc, styleId) => { | ||
| const style = styles[styleId]; | ||
| const styleKey = types.stringLiteral(import_teleport_shared.StringUtils.camelCaseToDashCase(styleId)); | ||
| if (style.type === "static") { | ||
| const styleContent = typeof style.content === "string" ? types.stringLiteral(style.content) : types.numericLiteral(Number(style.content)); | ||
| acc.push(types.objectProperty(styleKey, styleContent)); | ||
| } | ||
| if (style.type === "dynamic" && style.content.referenceType === "state") { | ||
| throw new import_teleport_types.PluginStyledComponent(`Error running transformDynamicStyles in reactStyledComponentsPlugin. | ||
| Unsupported styleValue.content.referenceType value ${style.content.referenceType}`); | ||
| } | ||
| if (style.type === "dynamic" && style.content.referenceType === "prop") { | ||
| const isNestedProp = style.content.id.includes("."); | ||
| acc.push(types.objectProperty(styleKey, types.memberExpression(types.identifier(propsPrefix), isNestedProp ? types.identifier(style.content.id) : types.identifier(`'${style.content.id}'`), !isNestedProp))); | ||
| propsReferred == null ? void 0 : propsReferred.add(style.content.id); | ||
| } | ||
| if (style.type === "dynamic" && style.content.referenceType === "token") { | ||
| const usedToken = import_teleport_shared.StringUtils.capitalize(import_teleport_shared.StringUtils.dashCaseToCamelCase(style.content.id)); | ||
| acc.push(types.objectProperty(styleKey, types.memberExpression(types.identifier(tokensPrefix), types.identifier(usedToken)))); | ||
| tokensReferred == null ? void 0 : tokensReferred.add(usedToken); | ||
| } | ||
| return acc; | ||
| }, []); | ||
| return types.objectExpression(properties); | ||
| 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; | ||
| }; | ||
| var generateVariantsfromStyleSet = (styleSets, variantPropPrefix, variantPropKey, tokensReferred) => { | ||
| const variantExpressions = types.objectExpression(Object.keys(styleSets).reduce((acc, styleId) => { | ||
| const style = styleSets[styleId]; | ||
| const { content = {}, conditions = [] } = style; | ||
| const property = types.objectProperty(types.stringLiteral(styleId), generateStyledComponentStyles(__spreadValues({ | ||
| styles: content | ||
| }, tokensReferred && { tokensReferred }))); | ||
| conditions.forEach((cond) => { | ||
| const mediaProperty = types.objectProperty(cond.type === "screen-size" ? types.stringLiteral(`@media(max-width: ${cond.meta.maxWidth}px)`) : types.stringLiteral(`&:${cond.meta.state}`), generateStyledComponentStyles(__spreadValues({ | ||
| styles: cond.content | ||
| }, tokensReferred && { tokensReferred }))); | ||
| if (property.value.type === "ObjectExpression") { | ||
| property.value.properties.push(mediaProperty); | ||
| } | ||
| }); | ||
| acc.push(property); | ||
| return acc; | ||
| }, [])); | ||
| return types.variableDeclaration("const", [ | ||
| types.variableDeclarator(types.identifier(variantPropPrefix), types.callExpression(types.identifier("variant"), [ | ||
| types.objectExpression([ | ||
| types.objectProperty(types.identifier("prop"), types.stringLiteral(variantPropKey)), | ||
| types.objectProperty(types.identifier("variants"), variantExpressions) | ||
| ]) | ||
| ])) | ||
| ]); | ||
| }; | ||
| // packages/teleport-plugin-react-styled-components/src/style-sheet.ts | ||
| var types2 = __toModule(require("@babel/types")); | ||
| var import_teleport_types2 = __toModule(require("@teleporthq/teleport-types")); | ||
| var import_teleport_shared2 = __toModule(require("@teleporthq/teleport-shared")); | ||
| // packages/teleport-plugin-react-styled-components/src/constants.ts | ||
| var VARIANT_DEPENDENCY = { | ||
| type: "package", | ||
| path: "styled-system", | ||
| version: "^5.1.5", | ||
| meta: { | ||
| namedImport: true | ||
| } | ||
| }; | ||
| var componentVariantPropPrefix = "componentStyleVariants"; | ||
| var componentVariantPropKey = "compVariant"; | ||
| var projectVariantPropPrefix = "projectStyleVariants"; | ||
| var projectVariantPropKey = "projVariant"; | ||
| // packages/teleport-plugin-react-styled-components/src/style-sheet.ts | ||
| var createStyleSheetPlugin = (config) => { | ||
| const { fileName = "style" } = config || {}; | ||
| const styleSheetPlugin = (structure) => __async(void 0, null, function* () { | ||
| const { uidl, chunks, dependencies } = structure; | ||
| const { styleSetDefinitions = {}, designLanguage: { tokens = {} } = {} } = uidl; | ||
| if (Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0) { | ||
| return structure; | ||
| } | ||
| const tokensMap = Object.keys(tokens || {}).reduce((acc, key) => { | ||
| const style = tokens[key]; | ||
| const name = import_teleport_shared2.StringUtils.capitalize(import_teleport_shared2.StringUtils.dashCaseToCamelCase(key)); | ||
| acc[name] = style.content; | ||
| return acc; | ||
| }, {}); | ||
| if (Object.keys(styleSetDefinitions).length > 0) { | ||
| const variants = generateVariantsfromStyleSet(styleSetDefinitions, projectVariantPropPrefix, projectVariantPropKey); | ||
| chunks.push({ | ||
| name: fileName, | ||
| type: import_teleport_types2.ChunkType.AST, | ||
| content: types2.exportNamedDeclaration(variants), | ||
| fileType: import_teleport_types2.FileType.JS, | ||
| linkAfter: ["tokens-chunk"] | ||
| }); | ||
| dependencies.variant = VARIANT_DEPENDENCY; | ||
| } | ||
| if (Object.keys(tokensMap).length > 0) { | ||
| chunks.push({ | ||
| name: "tokens-chunk", | ||
| type: import_teleport_types2.ChunkType.AST, | ||
| fileType: import_teleport_types2.FileType.JS, | ||
| content: types2.exportNamedDeclaration(types2.variableDeclaration("const", [ | ||
| types2.variableDeclarator(types2.identifier("TOKENS"), types2.objectExpression(Object.keys(tokensMap).reduce((acc, token) => { | ||
| const value = typeof tokensMap[token] === "number" ? types2.numericLiteral(Number(tokensMap[token])) : types2.stringLiteral(String(tokensMap[token])); | ||
| acc.push(types2.objectProperty(types2.identifier(token), value)); | ||
| return acc; | ||
| }, []))) | ||
| ])), | ||
| linkAfter: ["import-local"] | ||
| }); | ||
| } | ||
| uidl.outputOptions = uidl.outputOptions || {}; | ||
| uidl.outputOptions.fileName = fileName; | ||
| return structure; | ||
| }); | ||
| return styleSheetPlugin; | ||
| }; | ||
| // packages/teleport-plugin-react-styled-components/src/index.ts | ||
| var createReactStyledComponentsPlugin = (config) => { | ||
| const { | ||
| componentChunkName = "jsx-component", | ||
| importChunkName = "import-local", | ||
| componentLibrary = "react", | ||
| illegalComponentNames = [], | ||
| classAttributeName = "className" | ||
| } = config || {}; | ||
| const reactStyledComponentsPlugin = (structure) => __async(void 0, null, function* () { | ||
| const { uidl, chunks, dependencies, options } = structure; | ||
| const { node, name, styleSetDefinitions: componentStyleSheet = {} } = uidl; | ||
| const { projectStyleSet } = options; | ||
| const componentChunk = chunks.find((chunk) => chunk.name === componentChunkName); | ||
| if (!componentChunk) { | ||
| return structure; | ||
| } | ||
| const jsxNodesLookup = componentChunk.meta.nodesLookup; | ||
| const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop; | ||
| const cssMap = {}; | ||
| const tokensReferred = new Set(); | ||
| if (Object.keys(componentStyleSheet).length > 0) { | ||
| const variants = generateVariantsfromStyleSet(componentStyleSheet, componentVariantPropPrefix, componentVariantPropKey, tokensReferred); | ||
| chunks.push({ | ||
| name: "variant", | ||
| type: import_teleport_types3.ChunkType.AST, | ||
| content: variants, | ||
| fileType: import_teleport_types3.FileType.JS, | ||
| linkAfter: ["jsx-component"] | ||
| }); | ||
| dependencies.variant = VARIANT_DEPENDENCY; | ||
| } | ||
| import_teleport_shared3.UIDLUtils.traverseElements(node, (element) => { | ||
| var _a; | ||
| const { style = {} } = element; | ||
| const { key, elementType, referencedStyles = {} } = element; | ||
| const propsReferred = new Set(); | ||
| const componentStyleReferences = new Set(); | ||
| const projectStyleReferences = new Set(); | ||
| const staticClasses = new Set(); | ||
| if (Object.keys(style).length === 0 && Object.keys(referencedStyles).length === 0) { | ||
| return; | ||
| } | ||
| const root = jsxNodesLookup[key]; | ||
| let className = import_teleport_shared3.StringUtils.dashCaseToUpperCamelCase(key); | ||
| if (style && Object.keys(style).length > 0) { | ||
| if (illegalComponentNames.includes(className) || import_teleport_shared3.StringUtils.dashCaseToUpperCamelCase(key) === name || Object.keys(dependencies).includes(className)) { | ||
| className = `Styled${className}`; | ||
| } | ||
| if (componentLibrary === "reactnative") { | ||
| if (referencedStyles && Object.keys(referencedStyles).length > 0) { | ||
| Object.keys(referencedStyles).forEach((styleId) => { | ||
| const styleRef = referencedStyles[styleId]; | ||
| if (styleRef.content.mapType === "inlined") { | ||
| referencedStyles[styleId] = __spreadProps(__spreadValues({}, referencedStyles[styleId]), { | ||
| content: __spreadProps(__spreadValues({}, referencedStyles[styleId].content), { | ||
| styles: styleRef.content.styles | ||
| }) | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var types = __importStar(require("@babel/types")); | ||
| var teleport_types_1 = require("@teleporthq/teleport-types"); | ||
| var teleport_shared_1 = require("@teleporthq/teleport-shared"); | ||
| var teleport_plugin_common_1 = require("@teleporthq/teleport-plugin-common"); | ||
| var utils_1 = require("./utils"); | ||
| var style_sheet_1 = require("./style-sheet"); | ||
| exports.createStyleSheetPlugin = style_sheet_1.createStyleSheetPlugin; | ||
| var constants_1 = require("./constants"); | ||
| exports.createReactStyledComponentsPlugin = function (config) { | ||
| var _a = config || {}, _b = _a.componentChunkName, componentChunkName = _b === void 0 ? 'jsx-component' : _b, _c = _a.importChunkName, importChunkName = _c === void 0 ? 'import-local' : _c, _d = _a.componentLibrary, componentLibrary = _d === void 0 ? 'react' : _d, _e = _a.illegalComponentNames, illegalComponentNames = _e === void 0 ? [] : _e, _f = _a.classAttributeName, classAttributeName = _f === void 0 ? 'className' : _f; | ||
| var reactStyledComponentsPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () { | ||
| var uidl, chunks, dependencies, options, node, name, _a, componentStyleSheet, projectStyleSet, componentChunk, jsxNodesLookup, propsPrefix, cssMap, tokensReferred, variants; | ||
| return __generator(this, function (_b) { | ||
| uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options; | ||
| node = uidl.node, name = uidl.name, _a = uidl.styleSetDefinitions, componentStyleSheet = _a === void 0 ? {} : _a; | ||
| projectStyleSet = options.projectStyleSet; | ||
| componentChunk = chunks.find(function (chunk) { return chunk.name === componentChunkName; }); | ||
| if (!componentChunk) { | ||
| return [2 /*return*/, structure]; | ||
| } | ||
| jsxNodesLookup = componentChunk.meta.nodesLookup; | ||
| propsPrefix = componentChunk.meta.dynamicRefPrefix.prop; | ||
| cssMap = {}; | ||
| tokensReferred = new Set(); | ||
| if (Object.keys(componentStyleSheet).length > 0) { | ||
| variants = utils_1.generateVariantsfromStyleSet(componentStyleSheet, constants_1.componentVariantPropPrefix, constants_1.componentVariantPropKey, tokensReferred); | ||
| chunks.push({ | ||
| name: 'variant', | ||
| type: teleport_types_1.ChunkType.AST, | ||
| content: variants, | ||
| fileType: teleport_types_1.FileType.JS, | ||
| linkAfter: ['jsx-component'], | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| cssMap[className] = generateStyledComponentStyles({ | ||
| styles: style, | ||
| propsReferred, | ||
| tokensReferred, | ||
| propsPrefix, | ||
| tokensPrefix: "TOKENS" | ||
| }); | ||
| } | ||
| if (referencedStyles && ((_a = Object.keys(referencedStyles)) == null ? void 0 : _a.length) > 0) { | ||
| Object.values(referencedStyles).forEach((styleRef) => { | ||
| var _a2; | ||
| switch ((_a2 = styleRef.content) == null ? void 0 : _a2.mapType) { | ||
| case "inlined": { | ||
| const { conditions } = styleRef.content; | ||
| const [condition] = conditions; | ||
| if (condition.conditionType === "screen-size") { | ||
| const nodeStyle = cssMap[className]; | ||
| const mediaStyles = types3.objectProperty(types3.stringLiteral(`@media(max-width: ${condition.maxWidth}px)`), generateStyledComponentStyles({ | ||
| styles: styleRef.content.styles, | ||
| propsReferred, | ||
| tokensReferred, | ||
| propsPrefix, | ||
| tokensPrefix: "TOKENS" | ||
| })); | ||
| if ((nodeStyle == null ? void 0 : nodeStyle.type) === "ObjectExpression") { | ||
| nodeStyle.properties.push(mediaStyles); | ||
| } else { | ||
| cssMap[className] = import_teleport_plugin_common.ASTUtils.wrapObjectPropertiesWithExpression([mediaStyles]); | ||
| dependencies.variant = constants_1.VARIANT_DEPENDENCY; | ||
| } | ||
| teleport_shared_1.UIDLUtils.traverseElements(node, function (element) { | ||
| var _a; | ||
| var _b = element.style, style = _b === void 0 ? {} : _b; | ||
| var key = element.key, elementType = element.elementType, _c = element.referencedStyles, referencedStyles = _c === void 0 ? {} : _c; | ||
| var propsReferred = new Set(); | ||
| var componentStyleReferences = new Set(); | ||
| var projectStyleReferences = new Set(); | ||
| var staticClasses = new Set(); | ||
| if (Object.keys(style).length === 0 && Object.keys(referencedStyles).length === 0) { | ||
| return; | ||
| } | ||
| } | ||
| if (condition.conditionType === "element-state") { | ||
| const nodeStyle = cssMap[className]; | ||
| const mediaStyles = types3.objectProperty(types3.stringLiteral(`&:${condition.content}`), generateStyledComponentStyles({ | ||
| styles: styleRef.content.styles, | ||
| propsReferred, | ||
| tokensReferred, | ||
| propsPrefix, | ||
| tokensPrefix: "TOKENS" | ||
| })); | ||
| if ((nodeStyle == null ? void 0 : nodeStyle.type) === "ObjectExpression") { | ||
| nodeStyle.properties.push(mediaStyles); | ||
| } else { | ||
| cssMap[className] = import_teleport_plugin_common.ASTUtils.wrapObjectPropertiesWithExpression([mediaStyles]); | ||
| var root = jsxNodesLookup[key]; | ||
| var className = teleport_shared_1.StringUtils.dashCaseToUpperCamelCase(key); | ||
| if (style && Object.keys(style).length > 0) { | ||
| /* Styled components might create an element that | ||
| clashes with native element (Text, View, Image, etc.) */ | ||
| if (illegalComponentNames.includes(className) || | ||
| teleport_shared_1.StringUtils.dashCaseToUpperCamelCase(key) === name || | ||
| Object.keys(dependencies).includes(className)) { | ||
| className = "Styled" + className; | ||
| } | ||
| if (componentLibrary === 'reactnative') { | ||
| if (referencedStyles && Object.keys(referencedStyles).length > 0) { | ||
| Object.keys(referencedStyles).forEach(function (styleId) { | ||
| var styleRef = referencedStyles[styleId]; | ||
| if (styleRef.content.mapType === 'inlined') { | ||
| referencedStyles[styleId] = __assign(__assign({}, referencedStyles[styleId]), { content: __assign(__assign({}, referencedStyles[styleId].content), { | ||
| // @ts-ignore | ||
| styles: styleRef.content.styles }) }); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| cssMap[className] = utils_1.generateStyledComponentStyles({ | ||
| styles: style, | ||
| propsReferred: propsReferred, | ||
| tokensReferred: tokensReferred, | ||
| propsPrefix: propsPrefix, | ||
| tokensPrefix: 'TOKENS', | ||
| }); | ||
| } | ||
| } | ||
| return; | ||
| if (referencedStyles && ((_a = Object.keys(referencedStyles)) === null || _a === void 0 ? void 0 : _a.length) > 0) { | ||
| Object.values(referencedStyles).forEach(function (styleRef) { | ||
| var _a, _b, _c; | ||
| switch ((_a = styleRef.content) === null || _a === void 0 ? void 0 : _a.mapType) { | ||
| case 'inlined': { | ||
| var conditions = styleRef.content.conditions; | ||
| var condition = conditions[0]; | ||
| if (condition.conditionType === 'screen-size') { | ||
| var nodeStyle = cssMap[className]; | ||
| var mediaStyles = types.objectProperty(types.stringLiteral("@media(max-width: " + condition.maxWidth + "px)"), utils_1.generateStyledComponentStyles({ | ||
| styles: styleRef.content.styles, | ||
| propsReferred: propsReferred, | ||
| tokensReferred: tokensReferred, | ||
| propsPrefix: propsPrefix, | ||
| tokensPrefix: 'TOKENS', | ||
| })); | ||
| if (((_b = nodeStyle) === null || _b === void 0 ? void 0 : _b.type) === 'ObjectExpression') { | ||
| nodeStyle.properties.push(mediaStyles); | ||
| } | ||
| else { | ||
| cssMap[className] = teleport_plugin_common_1.ASTUtils.wrapObjectPropertiesWithExpression([mediaStyles]); | ||
| } | ||
| } | ||
| if (condition.conditionType === 'element-state') { | ||
| var nodeStyle = cssMap[className]; | ||
| var mediaStyles = types.objectProperty(types.stringLiteral("&:" + condition.content), utils_1.generateStyledComponentStyles({ | ||
| styles: styleRef.content.styles, | ||
| propsReferred: propsReferred, | ||
| tokensReferred: tokensReferred, | ||
| propsPrefix: propsPrefix, | ||
| tokensPrefix: 'TOKENS', | ||
| })); | ||
| if (((_c = nodeStyle) === null || _c === void 0 ? void 0 : _c.type) === 'ObjectExpression') { | ||
| nodeStyle.properties.push(mediaStyles); | ||
| } | ||
| else { | ||
| cssMap[className] = teleport_plugin_common_1.ASTUtils.wrapObjectPropertiesWithExpression([mediaStyles]); | ||
| } | ||
| } | ||
| return; | ||
| } | ||
| case 'component-referenced': { | ||
| if (componentStyleReferences.size > 0) { | ||
| throw new teleport_types_1.PluginStyledComponent("Styled Component can have only one reference per node.\ni.e either a direct static reference from component style sheet or from props. Got both. " + JSON.stringify(Array.from(componentStyleReferences), null, 2)); | ||
| } | ||
| if (styleRef.content.content.type === 'static') { | ||
| staticClasses.add(types.identifier("'" + styleRef.content.content.content + "'")); | ||
| } | ||
| if (styleRef.content.content.type === 'dynamic' && | ||
| styleRef.content.content.content.referenceType === 'comp') { | ||
| componentStyleReferences.add(constants_1.componentVariantPropPrefix); | ||
| teleport_plugin_common_1.ASTUtils.addAttributeToJSXTag(root, constants_1.componentVariantPropKey, styleRef.content.content.content.id); | ||
| } | ||
| if (styleRef.content.content.type === 'dynamic' && | ||
| styleRef.content.content.content.referenceType === 'prop') { | ||
| componentStyleReferences.add(constants_1.componentVariantPropPrefix); | ||
| teleport_plugin_common_1.ASTUtils.addDynamicAttributeToJSXTag(root, constants_1.componentVariantPropKey, propsPrefix + "." + styleRef.content.content.content.id); | ||
| } | ||
| return; | ||
| } | ||
| case 'project-referenced': { | ||
| if (!projectStyleSet) { | ||
| throw new Error("Project Style Sheet is missing, but the node is referring to it " + element); | ||
| } | ||
| var content = styleRef.content; | ||
| var referedStyle = projectStyleSet.styleSetDefinitions[content.referenceId]; | ||
| if (!referedStyle) { | ||
| throw new Error("Style that is being used for reference is missing - " + content.referenceId); | ||
| } | ||
| dependencies[constants_1.projectVariantPropPrefix] = { | ||
| type: 'local', | ||
| path: projectStyleSet.path + "/" + projectStyleSet.fileName, | ||
| meta: { | ||
| namedImport: true, | ||
| }, | ||
| }; | ||
| projectStyleReferences.add(constants_1.projectVariantPropPrefix); | ||
| teleport_plugin_common_1.ASTUtils.addAttributeToJSXTag(root, constants_1.projectVariantPropKey, content.referenceId); | ||
| return; | ||
| } | ||
| default: { | ||
| throw new Error("\n We support only inlined and project-referenced styles as of now, received " + JSON.stringify(styleRef.content, null, 2) + "\n "); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| if (propsReferred.size > 0) { | ||
| teleport_plugin_common_1.ASTUtils.addSpreadAttributeToJSXTag(root, propsPrefix); | ||
| } | ||
| if (staticClasses.size > 0) { | ||
| teleport_plugin_common_1.ASTUtils.addMultipleDynamicAttributesToJSXTag(root, classAttributeName, Array.from(staticClasses)); | ||
| } | ||
| teleport_plugin_common_1.ASTUtils.renameJSXTag(root, className); | ||
| var code = { | ||
| type: teleport_types_1.ChunkType.AST, | ||
| fileType: teleport_types_1.FileType.JS, | ||
| name: className, | ||
| linkAfter: [importChunkName], | ||
| content: utils_1.generateStyledComponent({ | ||
| name: className, | ||
| styles: cssMap[className], | ||
| elementType: elementType, | ||
| propsReferred: propsReferred, | ||
| componentStyleReferences: componentStyleReferences, | ||
| projectStyleReferences: projectStyleReferences, | ||
| }), | ||
| }; | ||
| chunks.push(code); | ||
| }); | ||
| if (Object.keys(cssMap).length === 0) { | ||
| return [2 /*return*/, structure]; | ||
| } | ||
| case "component-referenced": { | ||
| if (componentStyleReferences.size > 0) { | ||
| throw new import_teleport_types3.PluginStyledComponent(`Styled Component can have only one reference per node. | ||
| i.e either a direct static reference from component style sheet or from props. Got both. ${JSON.stringify(Array.from(componentStyleReferences), null, 2)}`); | ||
| } | ||
| if (styleRef.content.content.type === "static") { | ||
| staticClasses.add(types3.identifier(`'${styleRef.content.content.content}'`)); | ||
| } | ||
| if (styleRef.content.content.type === "dynamic" && styleRef.content.content.content.referenceType === "comp") { | ||
| componentStyleReferences.add(componentVariantPropPrefix); | ||
| import_teleport_plugin_common.ASTUtils.addAttributeToJSXTag(root, componentVariantPropKey, styleRef.content.content.content.id); | ||
| } | ||
| if (styleRef.content.content.type === "dynamic" && styleRef.content.content.content.referenceType === "prop") { | ||
| componentStyleReferences.add(componentVariantPropPrefix); | ||
| import_teleport_plugin_common.ASTUtils.addDynamicAttributeToJSXTag(root, componentVariantPropKey, `${propsPrefix}.${styleRef.content.content.content.id}`); | ||
| } | ||
| return; | ||
| if (tokensReferred.size > 0) { | ||
| dependencies.TOKENS = { | ||
| type: 'local', | ||
| path: projectStyleSet.path + "/" + projectStyleSet.fileName, | ||
| meta: { | ||
| namedImport: true, | ||
| }, | ||
| }; | ||
| } | ||
| case "project-referenced": { | ||
| if (!projectStyleSet) { | ||
| throw new Error(`Project Style Sheet is missing, but the node is referring to it ${element}`); | ||
| } | ||
| const { content } = styleRef; | ||
| const referedStyle = projectStyleSet.styleSetDefinitions[content.referenceId]; | ||
| if (!referedStyle) { | ||
| throw new Error(`Style that is being used for reference is missing - ${content.referenceId}`); | ||
| } | ||
| dependencies[projectVariantPropPrefix] = { | ||
| type: "local", | ||
| path: `${projectStyleSet.path}/${projectStyleSet.fileName}`, | ||
| meta: { | ||
| namedImport: true | ||
| } | ||
| }; | ||
| projectStyleReferences.add(projectVariantPropPrefix); | ||
| import_teleport_plugin_common.ASTUtils.addAttributeToJSXTag(root, projectVariantPropKey, content.referenceId); | ||
| return; | ||
| dependencies.styled = { | ||
| type: 'package', | ||
| path: componentLibrary === 'react' ? 'styled-components' : 'styled-components/native', | ||
| version: '^5.3.0', | ||
| }; | ||
| /* React Native elements are imported from styled-components/native, | ||
| so direct dependency to `react-native` is removed */ | ||
| if (componentLibrary === 'reactnative') { | ||
| utils_1.removeUnusedDependencies(dependencies, jsxNodesLookup); | ||
| } | ||
| default: { | ||
| throw new Error(` | ||
| We support only inlined and project-referenced styles as of now, received ${JSON.stringify(styleRef.content, null, 2)} | ||
| `); | ||
| } | ||
| } | ||
| return [2 /*return*/, structure]; | ||
| }); | ||
| } | ||
| if (propsReferred.size > 0) { | ||
| import_teleport_plugin_common.ASTUtils.addSpreadAttributeToJSXTag(root, propsPrefix); | ||
| } | ||
| if (staticClasses.size > 0) { | ||
| import_teleport_plugin_common.ASTUtils.addMultipleDynamicAttributesToJSXTag(root, classAttributeName, Array.from(staticClasses)); | ||
| } | ||
| import_teleport_plugin_common.ASTUtils.renameJSXTag(root, className); | ||
| const code = { | ||
| type: import_teleport_types3.ChunkType.AST, | ||
| fileType: import_teleport_types3.FileType.JS, | ||
| name: className, | ||
| linkAfter: [importChunkName], | ||
| content: generateStyledComponent({ | ||
| name: className, | ||
| styles: cssMap[className], | ||
| elementType, | ||
| propsReferred, | ||
| componentStyleReferences, | ||
| projectStyleReferences | ||
| }) | ||
| }; | ||
| chunks.push(code); | ||
| }); | ||
| if (Object.keys(cssMap).length === 0) { | ||
| return structure; | ||
| } | ||
| if (tokensReferred.size > 0) { | ||
| dependencies.TOKENS = { | ||
| type: "local", | ||
| path: `${projectStyleSet.path}/${projectStyleSet.fileName}`, | ||
| meta: { | ||
| namedImport: true | ||
| } | ||
| }; | ||
| } | ||
| dependencies.styled = { | ||
| type: "package", | ||
| path: componentLibrary === "react" ? "styled-components" : "styled-components/native", | ||
| version: "^5.3.0" | ||
| }; | ||
| if (componentLibrary === "reactnative") { | ||
| removeUnusedDependencies(dependencies, jsxNodesLookup); | ||
| } | ||
| return structure; | ||
| }); | ||
| return reactStyledComponentsPlugin; | ||
| }); }; | ||
| return reactStyledComponentsPlugin; | ||
| }; | ||
| var src_default = createReactStyledComponentsPlugin(); | ||
| exports.default = exports.createReactStyledComponentsPlugin(); | ||
| //# sourceMappingURL=index.js.map |
@@ -1,461 +0,261 @@ | ||
| 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-react-styled-components/src/index.ts | ||
| import { | ||
| identifier as identifier3, | ||
| objectProperty as objectProperty3, | ||
| stringLiteral as stringLiteral3 | ||
| } from "@babel/types"; | ||
| import { | ||
| ChunkType as ChunkType2, | ||
| FileType as FileType2, | ||
| PluginStyledComponent as PluginStyledComponent2 | ||
| } from "@teleporthq/teleport-types"; | ||
| import { UIDLUtils, StringUtils as StringUtils3 } from "@teleporthq/teleport-shared"; | ||
| import { ASTUtils } from "@teleporthq/teleport-plugin-common"; | ||
| // packages/teleport-plugin-react-styled-components/src/utils.ts | ||
| import { | ||
| arrowFunctionExpression, | ||
| callExpression, | ||
| identifier, | ||
| memberExpression, | ||
| numericLiteral, | ||
| objectExpression, | ||
| objectProperty, | ||
| stringLiteral, | ||
| variableDeclaration, | ||
| variableDeclarator | ||
| } from "@babel/types"; | ||
| import { StringUtils } from "@teleporthq/teleport-shared"; | ||
| import { | ||
| PluginStyledComponent | ||
| } from "@teleporthq/teleport-types"; | ||
| var generateStyledComponent = (params) => { | ||
| const { | ||
| name, | ||
| elementType, | ||
| styles, | ||
| propsReferred, | ||
| componentStyleReferences, | ||
| projectStyleReferences | ||
| } = params; | ||
| let styleExpressions = styles; | ||
| const expressionArguments = []; | ||
| if (propsReferred.size > 0) { | ||
| styleExpressions = arrowFunctionExpression([identifier("props")], styles); | ||
| } | ||
| if (projectStyleReferences.size > 0) { | ||
| expressionArguments.push(...Array.from(projectStyleReferences).map((ref) => identifier(ref))); | ||
| } | ||
| if (styles && styles.properties.length > 0) { | ||
| expressionArguments.push(styleExpressions); | ||
| } | ||
| if (componentStyleReferences.size > 0) { | ||
| expressionArguments.push(...Array.from(componentStyleReferences).map((ref) => identifier(ref))); | ||
| } | ||
| return variableDeclaration("const", [ | ||
| variableDeclarator(identifier(name), callExpression(callExpression(identifier("styled"), [stringLiteral(elementType)]), expressionArguments)) | ||
| ]); | ||
| }; | ||
| var removeUnusedDependencies = (dependencies, jsxNodesLookup) => { | ||
| Object.keys(dependencies).forEach((depKey) => { | ||
| const dependency = dependencies[depKey]; | ||
| if (dependency.type === "library" && dependency.path === "react-native") { | ||
| const dependencyIsStillNeeded = Object.keys(jsxNodesLookup).some((elementKey) => { | ||
| const jsxNode = jsxNodesLookup[elementKey]; | ||
| return jsxNode.openingElement.name.name === depKey; | ||
| }); | ||
| if (!dependencyIsStillNeeded) { | ||
| delete dependencies[depKey]; | ||
| } | ||
| } | ||
| }); | ||
| }; | ||
| var generateStyledComponentStyles = (params) => { | ||
| const { | ||
| styles, | ||
| tokensReferred, | ||
| propsReferred, | ||
| propsPrefix = "props", | ||
| tokensPrefix = "TOKENS" | ||
| } = params; | ||
| const properties = Object.keys(styles).reduce((acc, styleId) => { | ||
| const style = styles[styleId]; | ||
| const styleKey = stringLiteral(StringUtils.camelCaseToDashCase(styleId)); | ||
| if (style.type === "static") { | ||
| const styleContent = typeof style.content === "string" ? stringLiteral(style.content) : numericLiteral(Number(style.content)); | ||
| acc.push(objectProperty(styleKey, styleContent)); | ||
| } | ||
| if (style.type === "dynamic" && style.content.referenceType === "state") { | ||
| throw new PluginStyledComponent(`Error running transformDynamicStyles in reactStyledComponentsPlugin. | ||
| Unsupported styleValue.content.referenceType value ${style.content.referenceType}`); | ||
| } | ||
| if (style.type === "dynamic" && style.content.referenceType === "prop") { | ||
| const isNestedProp = style.content.id.includes("."); | ||
| acc.push(objectProperty(styleKey, memberExpression(identifier(propsPrefix), isNestedProp ? identifier(style.content.id) : identifier(`'${style.content.id}'`), !isNestedProp))); | ||
| propsReferred == null ? void 0 : propsReferred.add(style.content.id); | ||
| } | ||
| if (style.type === "dynamic" && style.content.referenceType === "token") { | ||
| const usedToken = StringUtils.capitalize(StringUtils.dashCaseToCamelCase(style.content.id)); | ||
| acc.push(objectProperty(styleKey, memberExpression(identifier(tokensPrefix), identifier(usedToken)))); | ||
| tokensReferred == null ? void 0 : tokensReferred.add(usedToken); | ||
| } | ||
| return acc; | ||
| }, []); | ||
| return objectExpression(properties); | ||
| }; | ||
| var generateVariantsfromStyleSet = (styleSets, variantPropPrefix, variantPropKey, tokensReferred) => { | ||
| const variantExpressions = objectExpression(Object.keys(styleSets).reduce((acc, styleId) => { | ||
| const style = styleSets[styleId]; | ||
| const { content = {}, conditions = [] } = style; | ||
| const property = objectProperty(stringLiteral(styleId), generateStyledComponentStyles(__spreadValues({ | ||
| styles: content | ||
| }, tokensReferred && { tokensReferred }))); | ||
| conditions.forEach((cond) => { | ||
| const mediaProperty = objectProperty(cond.type === "screen-size" ? stringLiteral(`@media(max-width: ${cond.meta.maxWidth}px)`) : stringLiteral(`&:${cond.meta.state}`), generateStyledComponentStyles(__spreadValues({ | ||
| styles: cond.content | ||
| }, tokensReferred && { tokensReferred }))); | ||
| if (property.value.type === "ObjectExpression") { | ||
| property.value.properties.push(mediaProperty); | ||
| } | ||
| 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()); | ||
| }); | ||
| acc.push(property); | ||
| return acc; | ||
| }, [])); | ||
| return variableDeclaration("const", [ | ||
| variableDeclarator(identifier(variantPropPrefix), callExpression(identifier("variant"), [ | ||
| objectExpression([ | ||
| objectProperty(identifier("prop"), stringLiteral(variantPropKey)), | ||
| objectProperty(identifier("variants"), variantExpressions) | ||
| ]) | ||
| ])) | ||
| ]); | ||
| }; | ||
| // packages/teleport-plugin-react-styled-components/src/style-sheet.ts | ||
| import { | ||
| exportNamedDeclaration, | ||
| identifier as identifier2, | ||
| numericLiteral as numericLiteral2, | ||
| objectExpression as objectExpression2, | ||
| objectProperty as objectProperty2, | ||
| stringLiteral as stringLiteral2, | ||
| variableDeclaration as variableDeclaration2, | ||
| variableDeclarator as variableDeclarator2 | ||
| } from "@babel/types"; | ||
| import { | ||
| ChunkType, | ||
| FileType | ||
| } from "@teleporthq/teleport-types"; | ||
| import { StringUtils as StringUtils2 } from "@teleporthq/teleport-shared"; | ||
| // packages/teleport-plugin-react-styled-components/src/constants.ts | ||
| var VARIANT_DEPENDENCY = { | ||
| type: "package", | ||
| path: "styled-system", | ||
| version: "^5.1.5", | ||
| meta: { | ||
| namedImport: true | ||
| } | ||
| }; | ||
| var componentVariantPropPrefix = "componentStyleVariants"; | ||
| var componentVariantPropKey = "compVariant"; | ||
| var projectVariantPropPrefix = "projectStyleVariants"; | ||
| var projectVariantPropKey = "projVariant"; | ||
| // packages/teleport-plugin-react-styled-components/src/style-sheet.ts | ||
| var createStyleSheetPlugin = (config) => { | ||
| const { fileName = "style" } = config || {}; | ||
| const styleSheetPlugin = (structure) => __async(void 0, null, function* () { | ||
| const { uidl, chunks, dependencies } = structure; | ||
| const { styleSetDefinitions = {}, designLanguage: { tokens = {} } = {} } = uidl; | ||
| if (Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0) { | ||
| 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 tokensMap = Object.keys(tokens || {}).reduce((acc, key) => { | ||
| const style = tokens[key]; | ||
| const name = StringUtils2.capitalize(StringUtils2.dashCaseToCamelCase(key)); | ||
| acc[name] = style.content; | ||
| return acc; | ||
| }, {}); | ||
| if (Object.keys(styleSetDefinitions).length > 0) { | ||
| const variants = generateVariantsfromStyleSet(styleSetDefinitions, projectVariantPropPrefix, projectVariantPropKey); | ||
| chunks.push({ | ||
| name: fileName, | ||
| type: ChunkType.AST, | ||
| content: exportNamedDeclaration(variants), | ||
| fileType: FileType.JS, | ||
| linkAfter: ["tokens-chunk"] | ||
| }); | ||
| dependencies.variant = VARIANT_DEPENDENCY; | ||
| } | ||
| if (Object.keys(tokensMap).length > 0) { | ||
| chunks.push({ | ||
| name: "tokens-chunk", | ||
| type: ChunkType.AST, | ||
| fileType: FileType.JS, | ||
| content: exportNamedDeclaration(variableDeclaration2("const", [ | ||
| variableDeclarator2(identifier2("TOKENS"), objectExpression2(Object.keys(tokensMap).reduce((acc, token) => { | ||
| const value = typeof tokensMap[token] === "number" ? numericLiteral2(Number(tokensMap[token])) : stringLiteral2(String(tokensMap[token])); | ||
| acc.push(objectProperty2(identifier2(token), value)); | ||
| return acc; | ||
| }, []))) | ||
| ])), | ||
| linkAfter: ["import-local"] | ||
| }); | ||
| } | ||
| uidl.outputOptions = uidl.outputOptions || {}; | ||
| uidl.outputOptions.fileName = fileName; | ||
| return structure; | ||
| }); | ||
| return styleSheetPlugin; | ||
| }; | ||
| // packages/teleport-plugin-react-styled-components/src/index.ts | ||
| var createReactStyledComponentsPlugin = (config) => { | ||
| const { | ||
| componentChunkName = "jsx-component", | ||
| importChunkName = "import-local", | ||
| componentLibrary = "react", | ||
| illegalComponentNames = [], | ||
| classAttributeName = "className" | ||
| } = config || {}; | ||
| const reactStyledComponentsPlugin = (structure) => __async(void 0, null, function* () { | ||
| const { uidl, chunks, dependencies, options } = structure; | ||
| const { node, name, styleSetDefinitions: componentStyleSheet = {} } = uidl; | ||
| const { projectStyleSet } = options; | ||
| const componentChunk = chunks.find((chunk) => chunk.name === componentChunkName); | ||
| if (!componentChunk) { | ||
| return structure; | ||
| } | ||
| const jsxNodesLookup = componentChunk.meta.nodesLookup; | ||
| const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop; | ||
| const cssMap = {}; | ||
| const tokensReferred = new Set(); | ||
| if (Object.keys(componentStyleSheet).length > 0) { | ||
| const variants = generateVariantsfromStyleSet(componentStyleSheet, componentVariantPropPrefix, componentVariantPropKey, tokensReferred); | ||
| chunks.push({ | ||
| name: "variant", | ||
| type: ChunkType2.AST, | ||
| content: variants, | ||
| fileType: FileType2.JS, | ||
| linkAfter: ["jsx-component"] | ||
| }); | ||
| dependencies.variant = VARIANT_DEPENDENCY; | ||
| } | ||
| UIDLUtils.traverseElements(node, (element) => { | ||
| var _a; | ||
| const { style = {} } = element; | ||
| const { key, elementType, referencedStyles = {} } = element; | ||
| const propsReferred = new Set(); | ||
| const componentStyleReferences = new Set(); | ||
| const projectStyleReferences = new Set(); | ||
| const staticClasses = new Set(); | ||
| if (Object.keys(style).length === 0 && Object.keys(referencedStyles).length === 0) { | ||
| return; | ||
| } | ||
| const root = jsxNodesLookup[key]; | ||
| let className = StringUtils3.dashCaseToUpperCamelCase(key); | ||
| if (style && Object.keys(style).length > 0) { | ||
| if (illegalComponentNames.includes(className) || StringUtils3.dashCaseToUpperCamelCase(key) === name || Object.keys(dependencies).includes(className)) { | ||
| className = `Styled${className}`; | ||
| } | ||
| if (componentLibrary === "reactnative") { | ||
| if (referencedStyles && Object.keys(referencedStyles).length > 0) { | ||
| Object.keys(referencedStyles).forEach((styleId) => { | ||
| const styleRef = referencedStyles[styleId]; | ||
| if (styleRef.content.mapType === "inlined") { | ||
| referencedStyles[styleId] = __spreadProps(__spreadValues({}, referencedStyles[styleId]), { | ||
| content: __spreadProps(__spreadValues({}, referencedStyles[styleId].content), { | ||
| styles: styleRef.content.styles | ||
| }) | ||
| import * as types from '@babel/types'; | ||
| import { ChunkType, FileType, PluginStyledComponent, } from '@teleporthq/teleport-types'; | ||
| import { UIDLUtils, StringUtils } from '@teleporthq/teleport-shared'; | ||
| import { ASTUtils } from '@teleporthq/teleport-plugin-common'; | ||
| import { generateStyledComponent, removeUnusedDependencies, generateVariantsfromStyleSet, generateStyledComponentStyles, } from './utils'; | ||
| import { createStyleSheetPlugin } from './style-sheet'; | ||
| import { componentVariantPropKey, componentVariantPropPrefix, projectVariantPropKey, projectVariantPropPrefix, VARIANT_DEPENDENCY, } from './constants'; | ||
| export var createReactStyledComponentsPlugin = function (config) { | ||
| var _a = config || {}, _b = _a.componentChunkName, componentChunkName = _b === void 0 ? 'jsx-component' : _b, _c = _a.importChunkName, importChunkName = _c === void 0 ? 'import-local' : _c, _d = _a.componentLibrary, componentLibrary = _d === void 0 ? 'react' : _d, _e = _a.illegalComponentNames, illegalComponentNames = _e === void 0 ? [] : _e, _f = _a.classAttributeName, classAttributeName = _f === void 0 ? 'className' : _f; | ||
| var reactStyledComponentsPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () { | ||
| var uidl, chunks, dependencies, options, node, name, _a, componentStyleSheet, projectStyleSet, componentChunk, jsxNodesLookup, propsPrefix, cssMap, tokensReferred, variants; | ||
| return __generator(this, function (_b) { | ||
| uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options; | ||
| node = uidl.node, name = uidl.name, _a = uidl.styleSetDefinitions, componentStyleSheet = _a === void 0 ? {} : _a; | ||
| projectStyleSet = options.projectStyleSet; | ||
| componentChunk = chunks.find(function (chunk) { return chunk.name === componentChunkName; }); | ||
| if (!componentChunk) { | ||
| return [2 /*return*/, structure]; | ||
| } | ||
| jsxNodesLookup = componentChunk.meta.nodesLookup; | ||
| propsPrefix = componentChunk.meta.dynamicRefPrefix.prop; | ||
| cssMap = {}; | ||
| tokensReferred = new Set(); | ||
| if (Object.keys(componentStyleSheet).length > 0) { | ||
| variants = generateVariantsfromStyleSet(componentStyleSheet, componentVariantPropPrefix, componentVariantPropKey, tokensReferred); | ||
| chunks.push({ | ||
| name: 'variant', | ||
| type: ChunkType.AST, | ||
| content: variants, | ||
| fileType: FileType.JS, | ||
| linkAfter: ['jsx-component'], | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| cssMap[className] = generateStyledComponentStyles({ | ||
| styles: style, | ||
| propsReferred, | ||
| tokensReferred, | ||
| propsPrefix, | ||
| tokensPrefix: "TOKENS" | ||
| }); | ||
| } | ||
| if (referencedStyles && ((_a = Object.keys(referencedStyles)) == null ? void 0 : _a.length) > 0) { | ||
| Object.values(referencedStyles).forEach((styleRef) => { | ||
| var _a2; | ||
| switch ((_a2 = styleRef.content) == null ? void 0 : _a2.mapType) { | ||
| case "inlined": { | ||
| const { conditions } = styleRef.content; | ||
| const [condition] = conditions; | ||
| if (condition.conditionType === "screen-size") { | ||
| const nodeStyle = cssMap[className]; | ||
| const mediaStyles = objectProperty3(stringLiteral3(`@media(max-width: ${condition.maxWidth}px)`), generateStyledComponentStyles({ | ||
| styles: styleRef.content.styles, | ||
| propsReferred, | ||
| tokensReferred, | ||
| propsPrefix, | ||
| tokensPrefix: "TOKENS" | ||
| })); | ||
| if ((nodeStyle == null ? void 0 : nodeStyle.type) === "ObjectExpression") { | ||
| nodeStyle.properties.push(mediaStyles); | ||
| } else { | ||
| cssMap[className] = ASTUtils.wrapObjectPropertiesWithExpression([mediaStyles]); | ||
| dependencies.variant = VARIANT_DEPENDENCY; | ||
| } | ||
| UIDLUtils.traverseElements(node, function (element) { | ||
| var _a; | ||
| var _b = element.style, style = _b === void 0 ? {} : _b; | ||
| var key = element.key, elementType = element.elementType, _c = element.referencedStyles, referencedStyles = _c === void 0 ? {} : _c; | ||
| var propsReferred = new Set(); | ||
| var componentStyleReferences = new Set(); | ||
| var projectStyleReferences = new Set(); | ||
| var staticClasses = new Set(); | ||
| if (Object.keys(style).length === 0 && Object.keys(referencedStyles).length === 0) { | ||
| return; | ||
| } | ||
| } | ||
| if (condition.conditionType === "element-state") { | ||
| const nodeStyle = cssMap[className]; | ||
| const mediaStyles = objectProperty3(stringLiteral3(`&:${condition.content}`), generateStyledComponentStyles({ | ||
| styles: styleRef.content.styles, | ||
| propsReferred, | ||
| tokensReferred, | ||
| propsPrefix, | ||
| tokensPrefix: "TOKENS" | ||
| })); | ||
| if ((nodeStyle == null ? void 0 : nodeStyle.type) === "ObjectExpression") { | ||
| nodeStyle.properties.push(mediaStyles); | ||
| } else { | ||
| cssMap[className] = ASTUtils.wrapObjectPropertiesWithExpression([mediaStyles]); | ||
| var root = jsxNodesLookup[key]; | ||
| var className = StringUtils.dashCaseToUpperCamelCase(key); | ||
| if (style && Object.keys(style).length > 0) { | ||
| /* Styled components might create an element that | ||
| clashes with native element (Text, View, Image, etc.) */ | ||
| if (illegalComponentNames.includes(className) || | ||
| StringUtils.dashCaseToUpperCamelCase(key) === name || | ||
| Object.keys(dependencies).includes(className)) { | ||
| className = "Styled" + className; | ||
| } | ||
| if (componentLibrary === 'reactnative') { | ||
| if (referencedStyles && Object.keys(referencedStyles).length > 0) { | ||
| Object.keys(referencedStyles).forEach(function (styleId) { | ||
| var styleRef = referencedStyles[styleId]; | ||
| if (styleRef.content.mapType === 'inlined') { | ||
| referencedStyles[styleId] = __assign(__assign({}, referencedStyles[styleId]), { content: __assign(__assign({}, referencedStyles[styleId].content), { | ||
| // @ts-ignore | ||
| styles: styleRef.content.styles }) }); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| cssMap[className] = generateStyledComponentStyles({ | ||
| styles: style, | ||
| propsReferred: propsReferred, | ||
| tokensReferred: tokensReferred, | ||
| propsPrefix: propsPrefix, | ||
| tokensPrefix: 'TOKENS', | ||
| }); | ||
| } | ||
| } | ||
| return; | ||
| if (referencedStyles && ((_a = Object.keys(referencedStyles)) === null || _a === void 0 ? void 0 : _a.length) > 0) { | ||
| Object.values(referencedStyles).forEach(function (styleRef) { | ||
| var _a, _b, _c; | ||
| switch ((_a = styleRef.content) === null || _a === void 0 ? void 0 : _a.mapType) { | ||
| case 'inlined': { | ||
| var conditions = styleRef.content.conditions; | ||
| var condition = conditions[0]; | ||
| if (condition.conditionType === 'screen-size') { | ||
| var nodeStyle = cssMap[className]; | ||
| var mediaStyles = types.objectProperty(types.stringLiteral("@media(max-width: " + condition.maxWidth + "px)"), generateStyledComponentStyles({ | ||
| styles: styleRef.content.styles, | ||
| propsReferred: propsReferred, | ||
| tokensReferred: tokensReferred, | ||
| propsPrefix: propsPrefix, | ||
| tokensPrefix: 'TOKENS', | ||
| })); | ||
| if (((_b = nodeStyle) === null || _b === void 0 ? void 0 : _b.type) === 'ObjectExpression') { | ||
| nodeStyle.properties.push(mediaStyles); | ||
| } | ||
| else { | ||
| cssMap[className] = ASTUtils.wrapObjectPropertiesWithExpression([mediaStyles]); | ||
| } | ||
| } | ||
| if (condition.conditionType === 'element-state') { | ||
| var nodeStyle = cssMap[className]; | ||
| var mediaStyles = types.objectProperty(types.stringLiteral("&:" + condition.content), generateStyledComponentStyles({ | ||
| styles: styleRef.content.styles, | ||
| propsReferred: propsReferred, | ||
| tokensReferred: tokensReferred, | ||
| propsPrefix: propsPrefix, | ||
| tokensPrefix: 'TOKENS', | ||
| })); | ||
| if (((_c = nodeStyle) === null || _c === void 0 ? void 0 : _c.type) === 'ObjectExpression') { | ||
| nodeStyle.properties.push(mediaStyles); | ||
| } | ||
| else { | ||
| cssMap[className] = ASTUtils.wrapObjectPropertiesWithExpression([mediaStyles]); | ||
| } | ||
| } | ||
| return; | ||
| } | ||
| case 'component-referenced': { | ||
| if (componentStyleReferences.size > 0) { | ||
| throw new PluginStyledComponent("Styled Component can have only one reference per node.\ni.e either a direct static reference from component style sheet or from props. Got both. " + JSON.stringify(Array.from(componentStyleReferences), null, 2)); | ||
| } | ||
| if (styleRef.content.content.type === 'static') { | ||
| staticClasses.add(types.identifier("'" + styleRef.content.content.content + "'")); | ||
| } | ||
| if (styleRef.content.content.type === 'dynamic' && | ||
| styleRef.content.content.content.referenceType === 'comp') { | ||
| componentStyleReferences.add(componentVariantPropPrefix); | ||
| ASTUtils.addAttributeToJSXTag(root, componentVariantPropKey, styleRef.content.content.content.id); | ||
| } | ||
| if (styleRef.content.content.type === 'dynamic' && | ||
| styleRef.content.content.content.referenceType === 'prop') { | ||
| componentStyleReferences.add(componentVariantPropPrefix); | ||
| ASTUtils.addDynamicAttributeToJSXTag(root, componentVariantPropKey, propsPrefix + "." + styleRef.content.content.content.id); | ||
| } | ||
| return; | ||
| } | ||
| case 'project-referenced': { | ||
| if (!projectStyleSet) { | ||
| throw new Error("Project Style Sheet is missing, but the node is referring to it " + element); | ||
| } | ||
| var content = styleRef.content; | ||
| var referedStyle = projectStyleSet.styleSetDefinitions[content.referenceId]; | ||
| if (!referedStyle) { | ||
| throw new Error("Style that is being used for reference is missing - " + content.referenceId); | ||
| } | ||
| dependencies[projectVariantPropPrefix] = { | ||
| type: 'local', | ||
| path: projectStyleSet.path + "/" + projectStyleSet.fileName, | ||
| meta: { | ||
| namedImport: true, | ||
| }, | ||
| }; | ||
| projectStyleReferences.add(projectVariantPropPrefix); | ||
| ASTUtils.addAttributeToJSXTag(root, projectVariantPropKey, content.referenceId); | ||
| return; | ||
| } | ||
| default: { | ||
| throw new Error("\n We support only inlined and project-referenced styles as of now, received " + JSON.stringify(styleRef.content, null, 2) + "\n "); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| if (propsReferred.size > 0) { | ||
| ASTUtils.addSpreadAttributeToJSXTag(root, propsPrefix); | ||
| } | ||
| if (staticClasses.size > 0) { | ||
| ASTUtils.addMultipleDynamicAttributesToJSXTag(root, classAttributeName, Array.from(staticClasses)); | ||
| } | ||
| ASTUtils.renameJSXTag(root, className); | ||
| var code = { | ||
| type: ChunkType.AST, | ||
| fileType: FileType.JS, | ||
| name: className, | ||
| linkAfter: [importChunkName], | ||
| content: generateStyledComponent({ | ||
| name: className, | ||
| styles: cssMap[className], | ||
| elementType: elementType, | ||
| propsReferred: propsReferred, | ||
| componentStyleReferences: componentStyleReferences, | ||
| projectStyleReferences: projectStyleReferences, | ||
| }), | ||
| }; | ||
| chunks.push(code); | ||
| }); | ||
| if (Object.keys(cssMap).length === 0) { | ||
| return [2 /*return*/, structure]; | ||
| } | ||
| case "component-referenced": { | ||
| if (componentStyleReferences.size > 0) { | ||
| throw new PluginStyledComponent2(`Styled Component can have only one reference per node. | ||
| i.e either a direct static reference from component style sheet or from props. Got both. ${JSON.stringify(Array.from(componentStyleReferences), null, 2)}`); | ||
| } | ||
| if (styleRef.content.content.type === "static") { | ||
| staticClasses.add(identifier3(`'${styleRef.content.content.content}'`)); | ||
| } | ||
| if (styleRef.content.content.type === "dynamic" && styleRef.content.content.content.referenceType === "comp") { | ||
| componentStyleReferences.add(componentVariantPropPrefix); | ||
| ASTUtils.addAttributeToJSXTag(root, componentVariantPropKey, styleRef.content.content.content.id); | ||
| } | ||
| if (styleRef.content.content.type === "dynamic" && styleRef.content.content.content.referenceType === "prop") { | ||
| componentStyleReferences.add(componentVariantPropPrefix); | ||
| ASTUtils.addDynamicAttributeToJSXTag(root, componentVariantPropKey, `${propsPrefix}.${styleRef.content.content.content.id}`); | ||
| } | ||
| return; | ||
| if (tokensReferred.size > 0) { | ||
| dependencies.TOKENS = { | ||
| type: 'local', | ||
| path: projectStyleSet.path + "/" + projectStyleSet.fileName, | ||
| meta: { | ||
| namedImport: true, | ||
| }, | ||
| }; | ||
| } | ||
| case "project-referenced": { | ||
| if (!projectStyleSet) { | ||
| throw new Error(`Project Style Sheet is missing, but the node is referring to it ${element}`); | ||
| } | ||
| const { content } = styleRef; | ||
| const referedStyle = projectStyleSet.styleSetDefinitions[content.referenceId]; | ||
| if (!referedStyle) { | ||
| throw new Error(`Style that is being used for reference is missing - ${content.referenceId}`); | ||
| } | ||
| dependencies[projectVariantPropPrefix] = { | ||
| type: "local", | ||
| path: `${projectStyleSet.path}/${projectStyleSet.fileName}`, | ||
| meta: { | ||
| namedImport: true | ||
| } | ||
| }; | ||
| projectStyleReferences.add(projectVariantPropPrefix); | ||
| ASTUtils.addAttributeToJSXTag(root, projectVariantPropKey, content.referenceId); | ||
| return; | ||
| dependencies.styled = { | ||
| type: 'package', | ||
| path: componentLibrary === 'react' ? 'styled-components' : 'styled-components/native', | ||
| version: '^5.3.0', | ||
| }; | ||
| /* React Native elements are imported from styled-components/native, | ||
| so direct dependency to `react-native` is removed */ | ||
| if (componentLibrary === 'reactnative') { | ||
| removeUnusedDependencies(dependencies, jsxNodesLookup); | ||
| } | ||
| default: { | ||
| throw new Error(` | ||
| We support only inlined and project-referenced styles as of now, received ${JSON.stringify(styleRef.content, null, 2)} | ||
| `); | ||
| } | ||
| } | ||
| return [2 /*return*/, structure]; | ||
| }); | ||
| } | ||
| if (propsReferred.size > 0) { | ||
| ASTUtils.addSpreadAttributeToJSXTag(root, propsPrefix); | ||
| } | ||
| if (staticClasses.size > 0) { | ||
| ASTUtils.addMultipleDynamicAttributesToJSXTag(root, classAttributeName, Array.from(staticClasses)); | ||
| } | ||
| ASTUtils.renameJSXTag(root, className); | ||
| const code = { | ||
| type: ChunkType2.AST, | ||
| fileType: FileType2.JS, | ||
| name: className, | ||
| linkAfter: [importChunkName], | ||
| content: generateStyledComponent({ | ||
| name: className, | ||
| styles: cssMap[className], | ||
| elementType, | ||
| propsReferred, | ||
| componentStyleReferences, | ||
| projectStyleReferences | ||
| }) | ||
| }; | ||
| chunks.push(code); | ||
| }); | ||
| if (Object.keys(cssMap).length === 0) { | ||
| return structure; | ||
| } | ||
| if (tokensReferred.size > 0) { | ||
| dependencies.TOKENS = { | ||
| type: "local", | ||
| path: `${projectStyleSet.path}/${projectStyleSet.fileName}`, | ||
| meta: { | ||
| namedImport: true | ||
| } | ||
| }; | ||
| } | ||
| dependencies.styled = { | ||
| type: "package", | ||
| path: componentLibrary === "react" ? "styled-components" : "styled-components/native", | ||
| version: "^5.3.0" | ||
| }; | ||
| if (componentLibrary === "reactnative") { | ||
| removeUnusedDependencies(dependencies, jsxNodesLookup); | ||
| } | ||
| return structure; | ||
| }); | ||
| return reactStyledComponentsPlugin; | ||
| }); }; | ||
| return reactStyledComponentsPlugin; | ||
| }; | ||
| var src_default = createReactStyledComponentsPlugin(); | ||
| export { | ||
| createReactStyledComponentsPlugin, | ||
| createStyleSheetPlugin, | ||
| src_default as default | ||
| }; | ||
| export { createStyleSheetPlugin }; | ||
| export default createReactStyledComponentsPlugin(); | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "@teleporthq/teleport-plugin-react-styled-components", | ||
| "version": "0.17.0", | ||
| "version": "0.17.3", | ||
| "description": "A plugin for injecting the styles through styled-components inside React components", | ||
@@ -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
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
276419
78.57%- Number of package files
39
95%- Lines of code
2078
5.7%- Number of medium supply chain risk alerts
0
-100%