@teleporthq/teleport-plugin-common - npm Package Compare versions

Comparing version 0.20.6 to 0.21.0

dist/cjs/builders/style-builders.d.ts

 import * as types from '@babel/types';
-import { UIDLDynamicReference, UIDLStyleSetDefinition } from '@teleporthq/teleport-types';
+import { HastNode, UIDLAttributeValue, UIDLDynamicReference, UIDLStyleSetDefinition } from '@teleporthq/teleport-types';
 import ParsedASTNode from '../utils/parsed-ast';
@@ -8,3 +8,14 @@ export declare const createCSSClass: (key: string, styleObject: Record<string, string | number>) => string;
 export declare const createDynamicStyleExpression: (styleValue: UIDLDynamicReference, propsPrefix?: string, t?: typeof types) => string | ParsedASTNode;
-export declare const generateMediaStyle: (mediaStylesMap: Record<string, Record<string, unknown>>) => string[];
-export declare const generateStylesFromStyleSetDefinitions: (styleSetDefinitions: Record<string, UIDLStyleSetDefinition>, cssMap: string[], mediaStylesMap: Record<string, Record<string, unknown>>, componentFileName: string, forceScoping?: boolean) => void;
+export declare const generateMediaStyle: (styleMap: Record<string, {
+    [x: string]: Record<string, string | number>;
+}[]>) => string[];
+export declare const generateStylesFromStyleSetDefinitions: (styleSetDefinitions: Record<string, UIDLStyleSetDefinition>, cssMap: string[], mediaStylesMap: Record<string, {
+    [x: string]: Record<string, string | number>;
+}[]>, className: (val: string) => string) => void;
+export declare const setPropValueForCompStyle: (params: {
+    attrs: Record<string, UIDLAttributeValue>;
+    key: string;
+    jsxNodesLookup: Record<string, types.JSXElement | HastNode>;
+    templateStyle?: 'jsx' | 'html';
+    getClassName: (str: string) => string;
+}) => void;

dist/cjs/builders/style-builders.js

@@ -40,3 +40,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateStylesFromStyleSetDefinitions = exports.generateMediaStyle = exports.createDynamicStyleExpression = exports.createCSSClassWithMediaQuery = exports.createCSSClassWithSelector = exports.createCSSClass = void 0;
+exports.setPropValueForCompStyle = exports.generateStylesFromStyleSetDefinitions = exports.generateMediaStyle = exports.createDynamicStyleExpression = exports.createCSSClassWithMediaQuery = exports.createCSSClassWithSelector = exports.createCSSClass = void 0;
 var jss_1 = __importDefault(require("jss"));
@@ -97,11 +97,12 @@ var jss_preset_default_1 = __importDefault(require("jss-preset-default"));
 exports.createDynamicStyleExpression = createDynamicStyleExpression;
-var generateMediaStyle = function (mediaStylesMap) {
+var generateMediaStyle = function (styleMap) {
     var styles = [];
-    Object.keys(mediaStylesMap)
-        .sort(function (a, b) { return Number(a) - Number(b); })
-        .reverse()
+    Object.keys(styleMap)
+        .map(function (id) { return Number(id); })
+        .sort(function (a, b) { return b - a; })
         .forEach(function (mediaOffset) {
-        styles.push((0, exports.createCSSClassWithMediaQuery)("max-width: ".concat(mediaOffset, "px"), 
-        // @ts-ignore
-        mediaStylesMap[mediaOffset]));
+        styles.push((0, exports.createCSSClassWithMediaQuery)("max-width: ".concat(mediaOffset, "px"), (styleMap[String(mediaOffset)] || []).reduce(function (acc, style) {
+            Object.assign(acc, style);
+            return acc;
+        }, {})));
     });
@@ -111,12 +112,15 @@ return styles;
 exports.generateMediaStyle = generateMediaStyle;
-var generateStylesFromStyleSetDefinitions = function (styleSetDefinitions, cssMap, mediaStylesMap, componentFileName, forceScoping) {
-    if (forceScoping === void 0) { forceScoping = false; }
+var generateStylesFromStyleSetDefinitions = function (styleSetDefinitions, cssMap, mediaStylesMap, className) {
     Object.keys(styleSetDefinitions).forEach(function (styleId) {
         var style = styleSetDefinitions[styleId];
-        var content = style.content, _a = style.conditions, conditions = _a === void 0 ? [] : _a;
-        var styleName = teleport_shared_1.StringUtils.camelCaseToDashCase(styleId);
-        var className = forceScoping ? "".concat(componentFileName, "-").concat(styleName) : styleName;
+        var content = style.content, _a = style.conditions, conditions = _a === void 0 ? [] : _a, type = style.type;
+        var name = className(styleId);
         var _b = teleport_shared_1.UIDLUtils.splitDynamicAndStaticStyles(content), staticStyles = _b.staticStyles, tokenStyles = _b.tokenStyles;
         var collectedStyles = __assign(__assign({}, (0, style_utils_1.getContentOfStyleObject)(staticStyles)), (0, style_utils_1.getCSSVariablesContentFromTokenStyles)(tokenStyles));
-        cssMap.push((0, exports.createCSSClass)(className, collectedStyles));
+        if (type === 'reusable-component-style-map') {
+            cssMap.unshift((0, exports.createCSSClass)(name, collectedStyles));
+        }
+        else {
+            cssMap.push((0, exports.createCSSClass)(name, collectedStyles));
+        }
         if (conditions.length === 0) {
@@ -126,10 +130,24 @@ return;
         conditions.forEach(function (styleRef) {
-            var _a;
-            var _b = teleport_shared_1.UIDLUtils.splitDynamicAndStaticStyles(styleRef.content), staticValues = _b.staticStyles, tokenValues = _b.tokenStyles;
+            var _a, _b;
+            var _c = teleport_shared_1.UIDLUtils.splitDynamicAndStaticStyles(styleRef.content), staticValues = _c.staticStyles, tokenValues = _c.tokenStyles;
             var collecedMediaStyles = __assign(__assign({}, (0, style_utils_1.getContentOfStyleObject)(staticValues)), (0, style_utils_1.getCSSVariablesContentFromTokenStyles)(tokenValues));
             if (styleRef.type === 'element-state') {
-                cssMap.push((0, exports.createCSSClassWithSelector)(className, "&:".concat(styleRef.meta.state), collecedMediaStyles));
+                if (type === 'reusable-component-style-map') {
+                    cssMap.unshift((0, exports.createCSSClassWithSelector)(name, "&:".concat(styleRef.meta.state), collecedMediaStyles));
+                }
+                else {
+                    cssMap.push((0, exports.createCSSClassWithSelector)(name, "&:".concat(styleRef.meta.state), collecedMediaStyles));
+                }
             }
             if (styleRef.type === 'screen-size') {
-                mediaStylesMap[styleRef.meta.maxWidth] = __assign(__assign({}, mediaStylesMap[styleRef.meta.maxWidth]), (_a = {}, _a[className] = collecedMediaStyles, _a));
+                var maxWidth = styleRef.meta.maxWidth;
+                if (!mediaStylesMap[String(maxWidth)]) {
+                    mediaStylesMap[String(maxWidth)] = [];
+                }
+                if (type === 'reusable-component-style-map') {
+                    mediaStylesMap[String(maxWidth)].unshift((_a = {}, _a[name] = collecedMediaStyles, _a));
+                }
+                else {
+                    mediaStylesMap[String(maxWidth)].push((_b = {}, _b[name] = collecedMediaStyles, _b));
+                }
             }
@@ -140,2 +158,29 @@ });
 exports.generateStylesFromStyleSetDefinitions = generateStylesFromStyleSetDefinitions;
+var setPropValueForCompStyle = function (params) {
+    var attrs = params.attrs, jsxNodesLookup = params.jsxNodesLookup, key = params.key, _a = params.templateStyle, templateStyle = _a === void 0 ? 'jsx' : _a, getClassName = params.getClassName;
+    Object.keys(attrs).forEach(function (attr) {
+        var _a;
+        if (attrs[attr].type !== 'comp-style') {
+            return;
+        }
+        if (templateStyle === 'jsx') {
+            var compInstanceNode = jsxNodesLookup[key];
+            (_a = compInstanceNode.openingElement) === null || _a === void 0 ? void 0 : _a.attributes.forEach(function (attribute) {
+                var _a, _b;
+                if (((_a = attribute.name) === null || _a === void 0 ? void 0 : _a.name) === attr && ((_b = attribute.value) === null || _b === void 0 ? void 0 : _b.value)) {
+                    ;
+                    attribute.value.value = getClassName(attribute.value.value);
+                }
+            });
+        }
+        if (templateStyle === 'html') {
+            var compInstanceNode = jsxNodesLookup[key];
+            if (!(compInstanceNode === null || compInstanceNode === void 0 ? void 0 : compInstanceNode.properties[attr])) {
+                return;
+            }
+            compInstanceNode.properties[attr] = getClassName(String(compInstanceNode.properties[attr]));
+        }
+    });
+};
+exports.setPropValueForCompStyle = setPropValueForCompStyle;
 //# sourceMappingURL=style-builders.js.map

dist/esm/builders/style-builders.d.ts

 import * as types from '@babel/types';
-import { UIDLDynamicReference, UIDLStyleSetDefinition } from '@teleporthq/teleport-types';
+import { HastNode, UIDLAttributeValue, UIDLDynamicReference, UIDLStyleSetDefinition } from '@teleporthq/teleport-types';
 import ParsedASTNode from '../utils/parsed-ast';
@@ -8,3 +8,14 @@ export declare const createCSSClass: (key: string, styleObject: Record<string, string | number>) => string;
 export declare const createDynamicStyleExpression: (styleValue: UIDLDynamicReference, propsPrefix?: string, t?: typeof types) => string | ParsedASTNode;
-export declare const generateMediaStyle: (mediaStylesMap: Record<string, Record<string, unknown>>) => string[];
-export declare const generateStylesFromStyleSetDefinitions: (styleSetDefinitions: Record<string, UIDLStyleSetDefinition>, cssMap: string[], mediaStylesMap: Record<string, Record<string, unknown>>, componentFileName: string, forceScoping?: boolean) => void;
+export declare const generateMediaStyle: (styleMap: Record<string, {
+    [x: string]: Record<string, string | number>;
+}[]>) => string[];
+export declare const generateStylesFromStyleSetDefinitions: (styleSetDefinitions: Record<string, UIDLStyleSetDefinition>, cssMap: string[], mediaStylesMap: Record<string, {
+    [x: string]: Record<string, string | number>;
+}[]>, className: (val: string) => string) => void;
+export declare const setPropValueForCompStyle: (params: {
+    attrs: Record<string, UIDLAttributeValue>;
+    key: string;
+    jsxNodesLookup: Record<string, types.JSXElement | HastNode>;
+    templateStyle?: 'jsx' | 'html';
+    getClassName: (str: string) => string;
+}) => void;

dist/esm/builders/style-builders.js

@@ -63,24 +63,28 @@ var __assign = (this && this.__assign) || function () {
 };
-export var generateMediaStyle = function (mediaStylesMap) {
+export var generateMediaStyle = function (styleMap) {
     var styles = [];
-    Object.keys(mediaStylesMap)
-        .sort(function (a, b) { return Number(a) - Number(b); })
-        .reverse()
+    Object.keys(styleMap)
+        .map(function (id) { return Number(id); })
+        .sort(function (a, b) { return b - a; })
         .forEach(function (mediaOffset) {
-        styles.push(createCSSClassWithMediaQuery("max-width: ".concat(mediaOffset, "px"), 
-        // @ts-ignore
-        mediaStylesMap[mediaOffset]));
+        styles.push(createCSSClassWithMediaQuery("max-width: ".concat(mediaOffset, "px"), (styleMap[String(mediaOffset)] || []).reduce(function (acc, style) {
+            Object.assign(acc, style);
+            return acc;
+        }, {})));
     });
     return styles;
 };
-export var generateStylesFromStyleSetDefinitions = function (styleSetDefinitions, cssMap, mediaStylesMap, componentFileName, forceScoping) {
-    if (forceScoping === void 0) { forceScoping = false; }
+export var generateStylesFromStyleSetDefinitions = function (styleSetDefinitions, cssMap, mediaStylesMap, className) {
     Object.keys(styleSetDefinitions).forEach(function (styleId) {
         var style = styleSetDefinitions[styleId];
-        var content = style.content, _a = style.conditions, conditions = _a === void 0 ? [] : _a;
-        var styleName = StringUtils.camelCaseToDashCase(styleId);
-        var className = forceScoping ? "".concat(componentFileName, "-").concat(styleName) : styleName;
+        var content = style.content, _a = style.conditions, conditions = _a === void 0 ? [] : _a, type = style.type;
+        var name = className(styleId);
         var _b = UIDLUtils.splitDynamicAndStaticStyles(content), staticStyles = _b.staticStyles, tokenStyles = _b.tokenStyles;
         var collectedStyles = __assign(__assign({}, getContentOfStyleObject(staticStyles)), getCSSVariablesContentFromTokenStyles(tokenStyles));
-        cssMap.push(createCSSClass(className, collectedStyles));
+        if (type === 'reusable-component-style-map') {
+            cssMap.unshift(createCSSClass(name, collectedStyles));
+        }
+        else {
+            cssMap.push(createCSSClass(name, collectedStyles));
+        }
         if (conditions.length === 0) {
@@ -90,10 +94,24 @@ return;
         conditions.forEach(function (styleRef) {
-            var _a;
-            var _b = UIDLUtils.splitDynamicAndStaticStyles(styleRef.content), staticValues = _b.staticStyles, tokenValues = _b.tokenStyles;
+            var _a, _b;
+            var _c = UIDLUtils.splitDynamicAndStaticStyles(styleRef.content), staticValues = _c.staticStyles, tokenValues = _c.tokenStyles;
             var collecedMediaStyles = __assign(__assign({}, getContentOfStyleObject(staticValues)), getCSSVariablesContentFromTokenStyles(tokenValues));
             if (styleRef.type === 'element-state') {
-                cssMap.push(createCSSClassWithSelector(className, "&:".concat(styleRef.meta.state), collecedMediaStyles));
+                if (type === 'reusable-component-style-map') {
+                    cssMap.unshift(createCSSClassWithSelector(name, "&:".concat(styleRef.meta.state), collecedMediaStyles));
+                }
+                else {
+                    cssMap.push(createCSSClassWithSelector(name, "&:".concat(styleRef.meta.state), collecedMediaStyles));
+                }
             }
             if (styleRef.type === 'screen-size') {
-                mediaStylesMap[styleRef.meta.maxWidth] = __assign(__assign({}, mediaStylesMap[styleRef.meta.maxWidth]), (_a = {}, _a[className] = collecedMediaStyles, _a));
+                var maxWidth = styleRef.meta.maxWidth;
+                if (!mediaStylesMap[String(maxWidth)]) {
+                    mediaStylesMap[String(maxWidth)] = [];
+                }
+                if (type === 'reusable-component-style-map') {
+                    mediaStylesMap[String(maxWidth)].unshift((_a = {}, _a[name] = collecedMediaStyles, _a));
+                }
+                else {
+                    mediaStylesMap[String(maxWidth)].push((_b = {}, _b[name] = collecedMediaStyles, _b));
+                }
             }
@@ -103,2 +121,28 @@ });
 };
+export var setPropValueForCompStyle = function (params) {
+    var attrs = params.attrs, jsxNodesLookup = params.jsxNodesLookup, key = params.key, _a = params.templateStyle, templateStyle = _a === void 0 ? 'jsx' : _a, getClassName = params.getClassName;
+    Object.keys(attrs).forEach(function (attr) {
+        var _a;
+        if (attrs[attr].type !== 'comp-style') {
+            return;
+        }
+        if (templateStyle === 'jsx') {
+            var compInstanceNode = jsxNodesLookup[key];
+            (_a = compInstanceNode.openingElement) === null || _a === void 0 ? void 0 : _a.attributes.forEach(function (attribute) {
+                var _a, _b;
+                if (((_a = attribute.name) === null || _a === void 0 ? void 0 : _a.name) === attr && ((_b = attribute.value) === null || _b === void 0 ? void 0 : _b.value)) {
+                    ;
+                    attribute.value.value = getClassName(attribute.value.value);
+                }
+            });
+        }
+        if (templateStyle === 'html') {
+            var compInstanceNode = jsxNodesLookup[key];
+            if (!(compInstanceNode === null || compInstanceNode === void 0 ? void 0 : compInstanceNode.properties[attr])) {
+                return;
+            }
+            compInstanceNode.properties[attr] = getClassName(String(compInstanceNode.properties[attr]));
+        }
+    });
+};
 //# sourceMappingURL=style-builders.js.map

package.json

 {
   "name": "@teleporthq/teleport-plugin-common",
-  "version": "0.20.6",
+  "version": "0.21.0",
   "description": "Common building and modelating functions for ASTs and HASTs",
@@ -28,8 +28,8 @@ "author": "teleportHQ",
     "@babel/types": "^7.14.5",
-    "@teleporthq/teleport-shared": "^0.20.3",
-    "@teleporthq/teleport-types": "^0.20.3",
+    "@teleporthq/teleport-shared": "^0.21.0",
+    "@teleporthq/teleport-types": "^0.21.0",
     "jss": "^10.0.0",
     "jss-preset-default": "^10.0.0"
   },
-  "gitHead": "71111c77c83c2b8794a8c1fa038a560653eea6c1"
+  "gitHead": "dd790cfb393fbdb560646eded5a9d6111e43b6ad"
 }

src/builders/style-builders.ts

 import jss from 'jss'
 import preset from 'jss-preset-default'
 import * as types from '@babel/types'
-import { UIDLDynamicReference, UIDLStyleSetDefinition } from '@teleporthq/teleport-types'
+import {
+  HastNode,
+  UIDLAttributeValue,
+  UIDLDynamicReference,
+  UIDLStyleSetDefinition,
+} from '@teleporthq/teleport-types'
 import ParsedASTNode from '../utils/parsed-ast'
@@ -82,13 +87,20 @@ import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
 
-export const generateMediaStyle = (mediaStylesMap: Record<string, Record<string, unknown>>) => {
+export const generateMediaStyle = (
+  styleMap: Record<string, Array<{ [x: string]: Record<string, string | number> }>>
+) => {
   const styles: string[] = []
-  Object.keys(mediaStylesMap)
-    .sort((a: string, b: string) => Number(a) - Number(b))
-    .reverse()
-    .forEach((mediaOffset: string) => {
+  Object.keys(styleMap)
+    .map((id) => Number(id))
+    .sort((a, b) => b - a)
+    .forEach((mediaOffset) => {
       styles.push(
         createCSSClassWithMediaQuery(
           `max-width: ${mediaOffset}px`,
-          // @ts-ignore
-          mediaStylesMap[mediaOffset]
+          (styleMap[String(mediaOffset)] || []).reduce(
+            (acc: Record<string, string | number>, style) => {
+              Object.assign(acc, style)
+              return acc
+            },
+            {}
+          )
         )
@@ -103,11 +115,9 @@ )
   cssMap: string[],
-  mediaStylesMap: Record<string, Record<string, unknown>>,
-  componentFileName: string,
-  forceScoping: boolean = false
+  mediaStylesMap: Record<string, Array<{ [x: string]: Record<string, string | number> }>>,
+  className: (val: string) => string
 ) => {
   Object.keys(styleSetDefinitions).forEach((styleId) => {
     const style = styleSetDefinitions[styleId]
-    const { content, conditions = [] } = style
-    const styleName = StringUtils.camelCaseToDashCase(styleId)
-    const className = forceScoping ? `${componentFileName}-${styleName}` : styleName
+    const { content, conditions = [], type } = style
+    const name = className(styleId)
 
@@ -119,4 +129,9 @@ const { staticStyles, tokenStyles } = UIDLUtils.splitDynamicAndStaticStyles(content)
     } as Record<string, string | number>
-    cssMap.push(createCSSClass(className, collectedStyles))
 
+    if (type === 'reusable-component-style-map') {
+      cssMap.unshift(createCSSClass(name, collectedStyles))
+    } else {
+      cssMap.push(createCSSClass(name, collectedStyles))
+    }
+
     if (conditions.length === 0) {
@@ -128,2 +143,3 @@ return
         UIDLUtils.splitDynamicAndStaticStyles(styleRef.content)
+
       const collecedMediaStyles = {
@@ -135,12 +151,24 @@ ...getContentOfStyleObject(staticValues),
       if (styleRef.type === 'element-state') {
-        cssMap.push(
-          createCSSClassWithSelector(className, `&:${styleRef.meta.state}`, collecedMediaStyles)
-        )
+        if (type === 'reusable-component-style-map') {
+          cssMap.unshift(
+            createCSSClassWithSelector(name, `&:${styleRef.meta.state}`, collecedMediaStyles)
+          )
+        } else {
+          cssMap.push(
+            createCSSClassWithSelector(name, `&:${styleRef.meta.state}`, collecedMediaStyles)
+          )
+        }
       }
 
       if (styleRef.type === 'screen-size') {
-        mediaStylesMap[styleRef.meta.maxWidth] = {
-          ...mediaStylesMap[styleRef.meta.maxWidth],
-          [className]: collecedMediaStyles,
+        const { maxWidth } = styleRef.meta
+        if (!mediaStylesMap[String(maxWidth)]) {
+          mediaStylesMap[String(maxWidth)] = []
         }
+
+        if (type === 'reusable-component-style-map') {
+          mediaStylesMap[String(maxWidth)].unshift({ [name]: collecedMediaStyles })
+        } else {
+          mediaStylesMap[String(maxWidth)].push({ [name]: collecedMediaStyles })
+        }
       }
@@ -150,1 +178,35 @@ })
 }
+
+export const setPropValueForCompStyle = (params: {
+  attrs: Record<string, UIDLAttributeValue>
+  key: string
+  jsxNodesLookup: Record<string, types.JSXElement | HastNode>
+  templateStyle?: 'jsx' | 'html'
+  getClassName: (str: string) => string
+}) => {
+  const { attrs, jsxNodesLookup, key, templateStyle = 'jsx', getClassName } = params
+  Object.keys(attrs).forEach((attr) => {
+    if (attrs[attr].type !== 'comp-style') {
+      return
+    }
+
+    if (templateStyle === 'jsx') {
+      const compInstanceNode = jsxNodesLookup[key] as types.JSXElement
+      compInstanceNode.openingElement?.attributes.forEach((attribute: types.JSXAttribute) => {
+        if (attribute.name?.name === attr && (attribute.value as types.StringLiteral)?.value) {
+          ;(attribute.value as types.StringLiteral).value = getClassName(
+            (attribute.value as types.StringLiteral).value
+          )
+        }
+      })
+    }
+
+    if (templateStyle === 'html') {
+      const compInstanceNode = jsxNodesLookup[key] as HastNode
+      if (!compInstanceNode?.properties[attr]) {
+        return
+      }
+      compInstanceNode.properties[attr] = getClassName(String(compInstanceNode.properties[attr]))
+    }
+  })
+}

No alert changes

Improved metrics

Total package byte prevSize

427822

2.41%

Lines of code

6142

2.79%

Dependency changes

• + Added

  @teleporthq/teleport-shared@0.21.7
  (transitive)

• + Added

  @teleporthq/teleport-types@0.21.7
  (transitive)

• - Removed

  @teleporthq/teleport-shared@0.20.3
  (transitive)

• - Removed

  @teleporthq/teleport-types@0.20.3
  (transitive)

• Updated

  @teleporthq/teleport-shared@^0.21.0

• Updated

  @teleporthq/teleport-types@^0.21.0