fix(plugin): ensure external plugin css do not require physical file

Closes #2622
ionic-team · Aug 12, 2020 · b5a2536 · b5a2536
1 parent 0b71cdd
commit b5a2536
Show file tree

Hide file tree

Showing 8 changed files with 2,437 additions and 63 deletions.
diff --git a/src/compiler/bundle/ext-transforms-plugin.ts b/src/compiler/bundle/ext-transforms-plugin.ts
@@ -21,6 +21,10 @@ export const extTransformsPlugin = (config: d.Config, compilerCtx: d.CompilerCtx
         let cmp: d.ComponentCompilerMeta;
         const filePath = normalizeFsPath(id);
         const code = await compilerCtx.fs.readFile(filePath);
+        if (typeof code !== 'string') {
+          return null;
+        }
+
         const pluginTransforms = await runPluginTransformsEsmImports(config, compilerCtx, buildCtx, code, filePath);
         const commentOriginalSelector = bundleOpts.platform === 'hydrate' && data.encapsulation === 'shadow';
 

diff --git a/test/end-to-end/package-lock.json b/test/end-to-end/package-lock.json
diff --git a/test/end-to-end/package.json b/test/end-to-end/package.json
@@ -19,15 +19,17 @@
     "preset": "../../testing/jest-preset.js"
   },
   "devDependencies": {
-    "@stencil/react-output-target": "^0.0.7",
+    "@stencil/react-output-target": "^0.0.9",
     "@types/file-saver": "^2.0.1",
-    "@types/lodash": "^4.14.157",
+    "@types/lodash": "^4.14.159",
     "@types/lodash-es": "^4.17.3",
     "@types/video.js": "^7.3.10",
     "file-saver": "^2.0.2",
-    "lodash": "^4.17.15",
+    "linaria": "^1.3.3",
+    "lodash": "^4.17.19",
     "lodash-es": "^4.17.15",
+    "rollup-plugin-css-only": "^2.1.0",
     "rollup-plugin-node-builtins": "^2.1.2",
-    "video.js": "^7.8.3"
+    "video.js": "^7.8.4"
   }
 }
diff --git a/test/end-to-end/src/app-root/app-root.e2e.ts b/test/end-to-end/src/app-root/app-root.e2e.ts
@@ -58,7 +58,7 @@ describe('goto root url', () => {
 
   it('should apply global style when setting html', async () => {
     const page = await newE2EPage({
-      html: '<app-root></app-root>',
+      url: '/',
     });
 
     const elm = await page.find('app-root');
@@ -67,5 +67,15 @@ describe('goto root url', () => {
     expect(elmStyle.borderColor).toBe('rgb(255, 0, 0)');
     expect(elmStyle.borderWidth).toBe('5px');
     expect(elmStyle.borderStyle).toBe('dotted');
+
+    const videoElm = await page.find('#video');
+    const videoStyle = await videoElm.getComputedStyle();
+
+    // @Component() styles
+    expect(videoStyle.borderColor).toBe('rgb(0, 0, 255)');
+    expect(videoStyle.borderWidth).toBe('2px');
+
+    // linaria styles
+    expect(videoStyle.backgroundColor).toBe('rgba(0, 0, 255, 0.1)');
   });
 });
diff --git a/test/end-to-end/src/app-root/app-root.spec.ts b/test/end-to-end/src/app-root/app-root.spec.ts
diff --git a/test/end-to-end/src/app-root/app-root.tsx b/test/end-to-end/src/app-root/app-root.tsx
@@ -2,13 +2,30 @@ import { Component, State, h, Host, Listen } from '@stencil/core';
 import _ from 'lodash';
 import _es from 'lodash-es';
 import videojs from 'video.js';
+import { css } from 'linaria';
+
+const linariaCss = css`
+  background-color: rgba(0, 0, 255, 0.1);
+`;
+
+const styles = `
+  #video {
+    position: absolute;
+    top: 400px;
+    width: 80%;
+    height: 300px;
+    border: 2px solid blue;
+    padding: 10px;
+  }
+`;
 
 function format(target: any, propertyKey: string) {
   console.log(target, propertyKey);
 }
 
 @Component({
   tag: 'app-root',
+  styles,
 })
 export class AppRoot {
   @format something = '12';
@@ -36,7 +53,7 @@ export class AppRoot {
     return (
       <Host>
         <prop-cmp first={this.first} lastName={this.last} mode="ios" />
-        <div id="video"></div>
+        <div id="video" class={linariaCss}></div>
       </Host>
     );
   }

diff --git a/test/end-to-end/src/index.html b/test/end-to-end/src/index.html
@@ -1,8 +1,14 @@
-<!doctype html>
-<meta charset="UTF-8">
-
-<link rel="stylesheet" href="/build/endtoend.css">
-<script type="module" src="/build/endtoend.esm.js"></script>
-<script nomodule src="/build/endtoend.js"></script>
-
-<app-root></app-root>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>E2E</title>
+    <link rel="stylesheet" href="/linaria.css" />
+    <link rel="stylesheet" href="/build/endtoend.css" />
+    <script type="module" src="/build/endtoend.esm.js"></script>
+    <script nomodule src="/build/endtoend.js"></script>
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/test/end-to-end/stencil.config.ts b/test/end-to-end/stencil.config.ts
@@ -1,12 +1,23 @@
 import { Config } from '../../internal';
 import builtins from 'rollup-plugin-node-builtins';
+import linaria from 'linaria/rollup';
+import css from 'rollup-plugin-css-only';
 import { reactOutputTarget } from '@stencil/react-output-target';
+import path from 'path';
 
 export const config: Config = {
   namespace: 'EndToEnd',
   globalScript: './src/global.ts',
   globalStyle: './src/global.css',
   plugins: [builtins()],
+  rollupPlugins: {
+    after: [
+      linaria(),
+      css({
+        output: path.join(__dirname, 'www', 'linaria.css'),
+      }),
+    ],
+  },
 
   testing: {
     moduleNameMapper: {
@@ -16,6 +27,7 @@ export const config: Config = {
   outputTargets: [
     {
       type: 'www',
+      empty: false,
       serviceWorker: null,
     },
     {
@@ -29,11 +41,6 @@ export const config: Config = {
       proxiesFile: './dist-react/components.ts',
     }),
   ],
-  commonjs: {
-    namedExports: {
-      'file-saver': ['saveAs'],
-    },
-  },
   hydratedFlag: {
     name: 'custom-hydrate-flag',
     selector: 'attribute',