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

Comparing version 0.20.3 to 0.20.6

__tests__/component-scoped.ts

@@ -40,3 +40,3 @@ /* tslint:disable no-string-literal */
     expect(styleChunk.content).toContain(`primary-navbar`)
-    expect(styleChunk.content).toContain('secondaryNavbar')
+    expect(styleChunk.content).toContain('secondary-navbar')
   })
@@ -43,0 +43,0 @@

__tests__/referenced-styles.ts

@@ -103,3 +103,3 @@ import { staticNode, component, elementNode } from '@teleporthq/teleport-uidl-builders'
     expect(cssFile.content).toContain('@media(max-width: 991px)')
-    expect(nodeReference.properties.class).toBe('container primaryButton')
+    expect(nodeReference.properties.class).toBe('container primary-button')
   })
@@ -106,0 +106,0 @@ })

__tests__/style-sheet.ts

@@ -87,3 +87,3 @@ import {
 `)
-    expect(content).toContain(`.conditionalButton:hover {
+    expect(content).toContain(`.conditional-button:hover {
   background: var(--blue-500);
@@ -93,5 +93,5 @@ }
     expect(content).toContain(`color: var(--red-500)`)
-    expect(content).toContain('.primaryButton')
-    expect(content).toContain('secondaryButton')
-    expect(content).toContain('.conditionalButton:hover')
+    expect(content).toContain('.primary-button')
+    expect(content).toContain('secondary-button')
+    expect(content).toContain('.conditional-button:hover')
     expect(content).toContain('@media(max-width: 991px)')
@@ -98,0 +98,0 @@ expect(content).not.toContain('5ecfa1233b8e50f60ea2b64b')

dist/cjs/index.js

@@ -218,3 +218,3 @@ "use strict";
                             }
-                            classNamesToAppend.add(content.referenceId);
+                            classNamesToAppend.add(teleport_shared_1.StringUtils.camelCaseToDashCase(content.referenceId));
                             return;
@@ -221,0 +221,0 @@ }

dist/cjs/style-sheet.d.ts

 import { ComponentPluginFactory } from '@teleporthq/teleport-types';
 interface StyleSheetPlugin {
     fileName?: string;
+    forceScoping?: boolean;
 }
 export declare const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin>;
 export {};

dist/cjs/style-sheet.js

@@ -44,3 +44,3 @@ "use strict";
 var createStyleSheetPlugin = function (config) {
-    var fileName = (config || { fileName: 'style' }).fileName;
+    var _a = config || { fileName: 'style', forceScoping: false }, fileName = _a.fileName, _b = _a.forceScoping, forceScoping = _b === void 0 ? false : _b;
     var styleSheetPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
@@ -61,3 +61,3 @@ var uidl, chunks, _a, styleSetDefinitions, _b, _c, _d, tokens, cssMap, mediaStylesMap;
             if (Object.keys(styleSetDefinitions).length > 0) {
-                teleport_plugin_common_1.StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap, teleport_shared_1.UIDLUtils.getComponentClassName(uidl));
+                teleport_plugin_common_1.StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap, teleport_shared_1.UIDLUtils.getComponentClassName(uidl), forceScoping);
             }
@@ -64,0 +64,0 @@ cssMap.push.apply(cssMap, teleport_plugin_common_1.StyleBuilders.generateMediaStyle(mediaStylesMap));

dist/esm/index.js

@@ -191,3 +191,3 @@ var __assign = (this && this.__assign) || function () {
                             }
-                            classNamesToAppend.add(content.referenceId);
+                            classNamesToAppend.add(StringUtils.camelCaseToDashCase(content.referenceId));
                             return;
@@ -194,0 +194,0 @@ }

dist/esm/style-sheet.d.ts

 import { ComponentPluginFactory } from '@teleporthq/teleport-types';
 interface StyleSheetPlugin {
     fileName?: string;
+    forceScoping?: boolean;
 }
 export declare const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin>;
 export {};

dist/esm/style-sheet.js

@@ -41,3 +41,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 export var createStyleSheetPlugin = function (config) {
-    var fileName = (config || { fileName: 'style' }).fileName;
+    var _a = config || { fileName: 'style', forceScoping: false }, fileName = _a.fileName, _b = _a.forceScoping, forceScoping = _b === void 0 ? false : _b;
     var styleSheetPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
@@ -58,3 +58,3 @@ var uidl, chunks, _a, styleSetDefinitions, _b, _c, _d, tokens, cssMap, mediaStylesMap;
             if (Object.keys(styleSetDefinitions).length > 0) {
-                StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap, UIDLUtils.getComponentClassName(uidl));
+                StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap, UIDLUtils.getComponentClassName(uidl), forceScoping);
             }
@@ -61,0 +61,0 @@ cssMap.push.apply(cssMap, StyleBuilders.generateMediaStyle(mediaStylesMap));

package.json

 {
   "name": "@teleporthq/teleport-plugin-css",
-  "version": "0.20.3",
+  "version": "0.20.6",
   "description": "A plugin for creating the styles into external css files",
@@ -28,7 +28,7 @@ "author": "teleportHQ",
     "@babel/types": "^7.5.5",
-    "@teleporthq/teleport-plugin-common": "^0.20.3",
+    "@teleporthq/teleport-plugin-common": "^0.20.6",
     "@teleporthq/teleport-shared": "^0.20.3",
     "@teleporthq/teleport-types": "^0.20.3"
   },
-  "gitHead": "d52238e7e039a95ebc78e5f6f7cffa8ce20675e0"
+  "gitHead": "71111c77c83c2b8794a8c1fa038a560653eea6c1"
 }

src/index.ts

@@ -268,3 +268,3 @@ import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
             }
-            classNamesToAppend.add(content.referenceId)
+            classNamesToAppend.add(StringUtils.camelCaseToDashCase(content.referenceId))
             return
@@ -271,0 +271,0 @@ }

src/style-sheet.ts

@@ -12,6 +12,7 @@ import { StyleUtils, StyleBuilders } from '@teleporthq/teleport-plugin-common'
   fileName?: string
+  forceScoping?: boolean
 }
 
 export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> = (config) => {
-  const { fileName } = config || { fileName: 'style' }
+  const { fileName, forceScoping = false } = config || { fileName: 'style', forceScoping: false }
   const styleSheetPlugin: ComponentPlugin = async (structure) => {
@@ -46,3 +47,4 @@ const { uidl, chunks } = structure
         mediaStylesMap,
-        UIDLUtils.getComponentClassName(uidl)
+        UIDLUtils.getComponentClassName(uidl),
+        forceScoping
       )
@@ -49,0 +51,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

146722

0.46%

Lines of code

1778

0.23%

Dependency changes

• Updated

  @teleporthq/teleport-plugin-common@^0.20.6