fix: Enable lit css importing (#9550)

Fixes #9532
vaadin · Dec 2, 2020 · ae47abc · ae47abc
1 parent 216dd53
commit ae47abc
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 0 deletions.
diff --git a/flow-server/src/main/resources/webpack.generated.js b/flow-server/src/main/resources/webpack.generated.js
@@ -168,6 +168,12 @@ module.exports = {
       {
         test: /\.css$/i,
         use: [
+          {
+            loader: "lit-css-loader"
+          },
+          {
+            loader: "extract-loader"
+          },
           {
             loader: 'css-loader',
             options: {

diff --git a/flow-tests/test-themes/frontend/index.html b/flow-tests/test-themes/frontend/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>My Project</title>
+    <style>
+      body {
+        margin: 0;
+        width: 100vw;
+        height: 100vh;
+      }
+
+      #outlet {
+        height: 100%;
+      }
+    </style>
+    <custom-style>
+      <style include="lumo-color lumo-typography"></style>
+    </custom-style>
+    <!-- index.ts is included here automatically (either by the dev server or during the build) -->
+  </head>
+
+  <body theme="light">
+    <div id="outlet"></div>
+  </body>
+</html>
diff --git a/flow-tests/test-themes/frontend/index.ts b/flow-tests/test-themes/frontend/index.ts
@@ -0,0 +1,23 @@
+import {Flow} from '@vaadin/flow-frontend/Flow';
+import {Router} from '@vaadin/router';
+
+const {serverSideRoutes} = new Flow({
+    imports: () => import('../target/frontend/generated-flow-imports'),
+});
+
+const routes = [
+    // for client-side, place routes below (more info https://vaadin.com/docs/v15/flow/typescript/creating-routes.html)
+    {
+        path: 'hello',
+        component: 'hello-world-view',
+        action: async () => {
+            await import('./typescript/hello-world-view');
+        },
+    },
+    // for server-side, the next magic line sends all unmatched routes:
+    ...serverSideRoutes, // IMPORTANT: this must be the last entry in the array
+]
+;
+
+export const router = new Router(document.querySelector('#outlet'));
+router.setRoutes(routes);
diff --git a/flow-tests/test-themes/frontend/typescript/hello-world-view.css b/flow-tests/test-themes/frontend/typescript/hello-world-view.css
@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  padding: 1em;
+  background-color: orange;
+}
diff --git a/flow-tests/test-themes/frontend/typescript/hello-world-view.ts b/flow-tests/test-themes/frontend/typescript/hello-world-view.ts
@@ -0,0 +1,20 @@
+import '@vaadin/vaadin-text-field';
+import { customElement, html, LitElement } from 'lit-element';
+import styles from './hello-world-view.css';
+
+
+@customElement('hello-world-view')
+export class HelloWorldView extends LitElement {
+  name: string = '';
+
+  static styles = [styles];
+
+  render() {
+    return html`
+      <vaadin-text-field label="Your name" @value-changed="${this.nameChanged}"></vaadin-text-field>
+    `;
+  }
+  nameChanged(e: CustomEvent) {
+    this.name = e.detail.value;
+  }
+}
diff --git a/flow-tests/test-themes/src/test/java/com/vaadin/flow/uitest/ui/theme/ThemeIT.java b/flow-tests/test-themes/src/test/java/com/vaadin/flow/uitest/ui/theme/ThemeIT.java
@@ -34,6 +34,22 @@
 
 public class ThemeIT extends ChromeBrowserTest {
 
+    @Test
+    public void typeScriptCssImport_stylesAreApplied() {
+        getDriver().get(getRootURL() + "/path/hello");
+
+        checkLogsForErrors();
+
+        final TestBenchElement helloWorld = $(TestBenchElement.class).first()
+            .findElement(By.tagName("hello-world-view"));
+
+        Assert.assertEquals("hello-world-view", helloWorld.getTagName());
+
+        Assert.assertEquals(
+            "CSS was not applied as background color was not as expected.",
+            "rgba(255, 165, 0, 1)", helloWorld.getCssValue("background-color"));
+    }
+
     @Test
     public void secondTheme_staticFilesNotCopied() {
         getDriver().get(getRootURL() + "/path/VAADIN/static/img/bg.jpg");