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

Comparing version 0.31.0-alpha.0 to 0.31.0

__tests__/style-sheet.ts

@@ -8,3 +8,3 @@ import {
 import { createStyleSheetPlugin } from '../src/style-sheet'
-import { setUpStructureWithHASTChunk } from './mocks'
+import { setUpHASTChunk, setUpStructureWithHASTChunk } from './mocks'
 
@@ -44,11 +44,2 @@ describe('plugin-css-style-sheet', () => {
       },
-      someClassId: {
-        type: 'reusable-project-style-map',
-        content: {
-          background: staticNode('red'),
-          color: staticNode('blue'),
-        },
-        className: 'secondaryButton',
-        subselectors: ' h1',
-      },
       conditionalButton: {
@@ -106,3 +97,2 @@ type: 'reusable-project-style-map',
     expect(content).toContain('.conditionalButton:hover')
-    expect(content).toContain('.secondaryButton h1')
     expect(content).toContain('@media(max-width: 991px)')
@@ -117,5 +107,5 @@ expect(content).not.toContain('5ecfa1233b8e50f60ea2b64b')
     const result = await plugin(structure)
-
-    expect(result).toBe(undefined)
+    expect(result.chunks.length).toBe(1)
+    expect(result.chunks[0]).toEqual(setUpHASTChunk())
   })
 })

dist/cjs/index.js

@@ -51,3 +51,3 @@ "use strict";
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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;
@@ -54,0 +54,0 @@ if (y = 0, t) op = [op[0] & 2, t.value];

dist/cjs/style-sheet.d.ts

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

dist/cjs/style-sheet.js

 "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;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -17,3 +28,3 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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;
@@ -43,15 +54,37 @@ if (y = 0, t) op = [op[0] & 2, t.value];
 var teleport_types_1 = require("@teleporthq/teleport-types");
+var path_1 = require("path");
 var createStyleSheetPlugin = function (config) {
-    var fileName = (config || { fileName: 'style' }).fileName;
+    var _a = config || {
+        fileName: 'style',
+        relativeFontPath: false,
+    }, _b = _a.fileName, fileName = _b === void 0 ? 'style' : _b, _c = _a.relativeFontPath, relativeFontPath = _c === void 0 ? false : _c;
     var styleSheetPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, _a, styleSetDefinitions, _b, _c, _d, tokens, cssMap, mediaStylesMap;
-        return __generator(this, function (_e) {
-            uidl = structure.uidl, chunks = structure.chunks;
+        var uidl, chunks, assets, _a, styleSetDefinitions, _b, _c, _d, tokens, _e, _f, localFonts, fontsFolder, assetIdentifier, canSkipThePlugin, cssMap, mediaStylesMap;
+        return __generator(this, function (_g) {
+            uidl = structure.uidl, chunks = structure.chunks, assets = structure.options.assets;
             _a = uidl.styleSetDefinitions, styleSetDefinitions = _a === void 0 ? {} : _a, _b = uidl.designLanguage, _c = _b === void 0 ? {} : _b, _d = _c.tokens, tokens = _d === void 0 ? {} : _d;
-            if ((!styleSetDefinitions && !tokens) ||
-                (Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0)) {
-                return [2 /*return*/];
+            _e = assets || { localFonts: [] }, _f = _e.localFonts, localFonts = _f === void 0 ? [] : _f, fontsFolder = _e.fontsFolder, assetIdentifier = _e.identifier;
+            canSkipThePlugin = (localFonts === null || localFonts === void 0 ? void 0 : localFonts.length) === 0 &&
+                Object.keys(styleSetDefinitions).length === 0 &&
+                Object.keys(tokens).length === 0;
+            if (canSkipThePlugin) {
+                return [2 /*return*/, structure];
             }
             cssMap = [];
             mediaStylesMap = {};
+            uidl.outputOptions = uidl.outputOptions || {};
+            uidl.outputOptions.styleFileName = fileName;
+            if (localFonts.length > 0) {
+                localFonts.forEach(function (font) {
+                    var _a;
+                    var properties = teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(font.properties);
+                    var format = (properties === null || properties === void 0 ? void 0 : properties.format) ? "format('".concat(properties.format, "')") : '';
+                    /* tslint:disable:no-string-literal */
+                    delete properties['format'];
+                    var fontPath = relativeFontPath
+                        ? (0, path_1.join)((0, path_1.relative)(path_1.join.apply(void 0, (((_a = uidl.outputOptions) === null || _a === void 0 ? void 0 : _a.folderPath) || [])), './'), (0, path_1.join)(fontsFolder || '', font.path))
+                        : (0, path_1.join)('/', assetIdentifier || '', 'fonts', font.path);
+                    cssMap.push(teleport_plugin_common_1.StyleBuilders.createFontDecleration(__assign(__assign({}, properties), { src: "url(\"".concat(fontPath, "\") ").concat(format) })));
+                });
+            }
             if (Object.keys(tokens).length > 0) {
@@ -67,4 +100,2 @@ cssMap.push(teleport_plugin_common_1.StyleBuilders.createCSSClassWithSelector('@global', ':root', teleport_plugin_common_1.StyleUtils.getTokensContentFromTokensObject(tokens)));
             }
-            uidl.outputOptions = uidl.outputOptions || {};
-            uidl.outputOptions.styleFileName = fileName;
             chunks.push({
@@ -71,0 +102,0 @@ name: fileName,

dist/esm/index.js

@@ -27,3 +27,3 @@ var __assign = (this && this.__assign) || function () {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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;
@@ -30,0 +30,0 @@ if (y = 0, t) op = [op[0] & 2, t.value];

dist/esm/style-sheet.d.ts

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

dist/esm/style-sheet.js

@@ -0,1 +1,12 @@
+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;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -16,3 +27,3 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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;
@@ -40,15 +51,37 @@ if (y = 0, t) op = [op[0] & 2, t.value];
 import { ChunkType, FileType, } from '@teleporthq/teleport-types';
+import { join, relative } from 'path';
 export var createStyleSheetPlugin = function (config) {
-    var fileName = (config || { fileName: 'style' }).fileName;
+    var _a = config || {
+        fileName: 'style',
+        relativeFontPath: false,
+    }, _b = _a.fileName, fileName = _b === void 0 ? 'style' : _b, _c = _a.relativeFontPath, relativeFontPath = _c === void 0 ? false : _c;
     var styleSheetPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, _a, styleSetDefinitions, _b, _c, _d, tokens, cssMap, mediaStylesMap;
-        return __generator(this, function (_e) {
-            uidl = structure.uidl, chunks = structure.chunks;
+        var uidl, chunks, assets, _a, styleSetDefinitions, _b, _c, _d, tokens, _e, _f, localFonts, fontsFolder, assetIdentifier, canSkipThePlugin, cssMap, mediaStylesMap;
+        return __generator(this, function (_g) {
+            uidl = structure.uidl, chunks = structure.chunks, assets = structure.options.assets;
             _a = uidl.styleSetDefinitions, styleSetDefinitions = _a === void 0 ? {} : _a, _b = uidl.designLanguage, _c = _b === void 0 ? {} : _b, _d = _c.tokens, tokens = _d === void 0 ? {} : _d;
-            if ((!styleSetDefinitions && !tokens) ||
-                (Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0)) {
-                return [2 /*return*/];
+            _e = assets || { localFonts: [] }, _f = _e.localFonts, localFonts = _f === void 0 ? [] : _f, fontsFolder = _e.fontsFolder, assetIdentifier = _e.identifier;
+            canSkipThePlugin = (localFonts === null || localFonts === void 0 ? void 0 : localFonts.length) === 0 &&
+                Object.keys(styleSetDefinitions).length === 0 &&
+                Object.keys(tokens).length === 0;
+            if (canSkipThePlugin) {
+                return [2 /*return*/, structure];
             }
             cssMap = [];
             mediaStylesMap = {};
+            uidl.outputOptions = uidl.outputOptions || {};
+            uidl.outputOptions.styleFileName = fileName;
+            if (localFonts.length > 0) {
+                localFonts.forEach(function (font) {
+                    var _a;
+                    var properties = StyleUtils.getContentOfStyleObject(font.properties);
+                    var format = (properties === null || properties === void 0 ? void 0 : properties.format) ? "format('".concat(properties.format, "')") : '';
+                    /* tslint:disable:no-string-literal */
+                    delete properties['format'];
+                    var fontPath = relativeFontPath
+                        ? join(relative(join.apply(void 0, (((_a = uidl.outputOptions) === null || _a === void 0 ? void 0 : _a.folderPath) || [])), './'), join(fontsFolder || '', font.path))
+                        : join('/', assetIdentifier || '', 'fonts', font.path);
+                    cssMap.push(StyleBuilders.createFontDecleration(__assign(__assign({}, properties), { src: "url(\"".concat(fontPath, "\") ").concat(format) })));
+                });
+            }
             if (Object.keys(tokens).length > 0) {
@@ -64,4 +97,2 @@ cssMap.push(StyleBuilders.createCSSClassWithSelector('@global', ':root', StyleUtils.getTokensContentFromTokensObject(tokens)));
             }
-            uidl.outputOptions = uidl.outputOptions || {};
-            uidl.outputOptions.styleFileName = fileName;
             chunks.push({
@@ -68,0 +99,0 @@ name: fileName,

package.json

 {
   "name": "@teleporthq/teleport-plugin-css",
-  "version": "0.31.0-alpha.0",
+  "version": "0.31.0",
   "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.31.0-alpha.0",
-    "@teleporthq/teleport-shared": "^0.31.0-alpha.0",
-    "@teleporthq/teleport-types": "^0.31.0-alpha.0"
+    "@teleporthq/teleport-plugin-common": "^0.31.0",
+    "@teleporthq/teleport-shared": "^0.31.0",
+    "@teleporthq/teleport-types": "^0.31.0"
   },
-  "gitHead": "a5289f88f2d0cf8aae4b93bf05777c5492dd86b2"
+  "gitHead": "37c3970566832845c57f0ef11088a9214af720b2"
 }

src/style-sheet.ts

@@ -8,18 +8,38 @@ import { StyleUtils, StyleBuilders } from '@teleporthq/teleport-plugin-common'
 } from '@teleporthq/teleport-types'
+import { join, relative } from 'path'
 
 interface StyleSheetPlugin {
   fileName?: string
+  /*
+    Frameworks with dev servers don't need relative path mapping.
+  */
+  relativeFontPath?: boolean
 }
 
 export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> = (config) => {
-  const { fileName } = config || { fileName: 'style' }
+  const { fileName = 'style', relativeFontPath = false } = config || {
+    fileName: 'style',
+    relativeFontPath: false,
+  }
+
   const styleSheetPlugin: ComponentPlugin = async (structure) => {
-    const { uidl, chunks } = structure
+    const {
+      uidl,
+      chunks,
+      options: { assets },
+    } = structure
     const { styleSetDefinitions = {}, designLanguage: { tokens = {} } = {} } = uidl
+    const {
+      localFonts = [],
+      fontsFolder,
+      identifier: assetIdentifier,
+    } = assets || { localFonts: [] }
 
-    if (
-      (!styleSetDefinitions && !tokens) ||
-      (Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0)
-    ) {
-      return
+    const canSkipThePlugin =
+      localFonts?.length === 0 &&
+      Object.keys(styleSetDefinitions).length === 0 &&
+      Object.keys(tokens).length === 0
+
+    if (canSkipThePlugin) {
+      return structure
     }
@@ -33,2 +53,31 @@
 
+    uidl.outputOptions = uidl.outputOptions || {}
+    uidl.outputOptions.styleFileName = fileName
+
+    if (localFonts.length > 0) {
+      localFonts.forEach((font) => {
+        const properties = StyleUtils.getContentOfStyleObject(font.properties) as Record<
+          string,
+          string | number
+        >
+        const format = properties?.format ? `format('${properties.format}')` : ''
+        /* tslint:disable:no-string-literal */
+        delete properties['format']
+
+        const fontPath = relativeFontPath
+          ? join(
+              relative(join(...(uidl.outputOptions?.folderPath || [])), './'),
+              join(fontsFolder || '', font.path)
+            )
+          : join('/', assetIdentifier || '', 'fonts', font.path)
+
+        cssMap.push(
+          StyleBuilders.createFontDecleration({
+            ...properties,
+            src: `url("${fontPath}") ${format}`,
+          })
+        )
+      })
+    }
+
     if (Object.keys(tokens).length > 0) {
@@ -59,5 +108,2 @@ cssMap.push(
 
-    uidl.outputOptions = uidl.outputOptions || {}
-    uidl.outputOptions.styleFileName = fileName
-
     chunks.push({
@@ -64,0 +110,0 @@ name: fileName,

No alert changes

Improved metrics

Total package byte prevSize

164839

increased by6.34%

Lines of code

1880

increased by5.38%

Dependency changes

• Updated@teleporthq/teleport-plugin-common@^0.31.0

• Updated@teleporthq/teleport-shared@^0.31.0

• Updated@teleporthq/teleport-types@^0.31.0