feat: Theme component with app theme.

flow-server/src/main/resources/plugins/application-theme-plugin/package.json

@@ -5,7 +5,7 @@
   ],
   "repository": "vaadin/flow",
   "name": "@vaadin/application-theme-plugin",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "application-theme-plugin.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",

flow-server/src/main/resources/plugins/application-theme-plugin/theme-generator.js

@@ -21,6 +21,8 @@
 const glob = require('glob');
 const path = require('path');
 
+// Special folder inside a theme for component themes that go inside the component shadow root
+const themeComponentsFolder = 'components';
 // The contents of a global CSS file with this name in a theme is always added to
 // the document. E.g. @font-face must be in this
 const themeFileAlwaysAddToDocument = 'document.css';
@@ -48,13 +50,22 @@ function generateThemeFile(themeFolder, themeName) {
     cwd: themeFolder,
     nodir: true,
   });
+  const componentsFiles = glob.sync('*.css', {
+    cwd: path.resolve(themeFolder, themeComponentsFolder),
+    nodir: true,
+  });
 
   let themeFile = headerImport;
 
+  if(componentsFiles.length > 0){
+    themeFile += 'import { css, unsafeCSS, registerStyles } from \'@vaadin/vaadin-themable-mixin/register-styles\';';
+  }
+
   themeFile += injectGlobalCssMethod;
 
   const imports = [];
   const globalCssCode = [];
+  const componentCssCode = [];
 
   globalFiles.forEach((global) => {
     const filename = path.basename(global);
@@ -66,8 +77,27 @@ function generateThemeFile(themeFolder, themeName) {
     globalCssCode.push(`injectGlobalCss(${variable}.toString(), target);\n`);
   });
 
+  componentsFiles.forEach((componentCss) => {
+    const filename = path.basename(componentCss);
+    const tag = filename.replace('.css', '');
+    const variable = camelCase(filename);
+    imports.push(
+      `import ${variable} from './${themeComponentsFolder}/${filename}';\n`
+    );
+// Don't format as the generated file formatting will get wonky!
+    const componentString = `registerStyles(
+      '${tag}',
+      css\`
+        \${unsafeCSS(${variable}.toString())}
+      \`
+    );
+`;
+    componentCssCode.push(componentString);
+  });
+
   const themeIdentifier = '_vaadinds_' + themeName + '_';
   const globalCssFlag = themeIdentifier + 'globalCss';
+  const componentCssFlag = themeIdentifier + 'componentCss';
 
   themeFile += imports.join('');
 
@@ -77,6 +107,10 @@ function generateThemeFile(themeFolder, themeName) {
     ${globalCssCode.join('')}
     target['${globalCssFlag}'] = true;
   }
+  if (!document['${componentCssFlag}']) {
+    ${componentCssCode.join('')}
+    document['${componentCssFlag}'] = true;
+  }
 }
 `;
 
@@ -94,7 +128,7 @@ function generateThemeFile(themeFolder, themeName) {
 function camelCase(str) {
   return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
     return index === 0 ? word.toLowerCase() : word.toUpperCase();
-  }).replace(/\s+/g, '').replace(/\./g, '');
+  }).replace(/\s+/g, '').replace(/\.|\-/g, '');
 }
 
 module.exports = generateThemeFile;

flow-tests/test-themes/frontend/theme/app-theme/components/vaadin-radio-button.css

@@ -0,0 +1,3 @@
+[part='radio'] {
+    background-color: red;
+}

flow-tests/test-themes/frontend/theme/app-theme/components/vaadin-text-field.css

@@ -0,0 +1,3 @@
+[part="input-field"] {
+    background: red;
+}

flow-tests/test-themes/src/main/java/com/vaadin/flow/uitest/ui/theme/AppShell.java

@@ -16,11 +16,11 @@
 
 package com.vaadin.flow.uitest.ui.theme;
 
+import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.page.AppShellConfigurator;
-import com.vaadin.flow.server.PWA;
 import com.vaadin.flow.theme.Theme;
 
 @Theme(value ="app-theme")
-@PWA(name = "Project Base for Vaadin", shortName = "Project Base")
+@NpmPackage(value = "@vaadin/vaadin-themable-mixin", version = "1.6.1")
 public class AppShell implements AppShellConfigurator {
 }

flow-tests/test-themes/src/main/java/com/vaadin/flow/uitest/ui/theme/MyLitField.java

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2000-2020 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.flow.uitest.ui.theme;
+
+import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
+
+/**
+ * LIT version of vaadin radio button for testing component theming.
+ */
+@JsModule("@vaadin/vaadin-radio-button/vaadin-radio-button.ts")
+@Tag("vaadin-radio-button")
+@NpmPackage(value = "@vaadin/vaadin-radio-button", version = "2.0.0-alpha1")
+public class MyLitField extends Component {
+
+    /**
+     * Set the component id.
+     *
+     * @param id
+     *     value to set
+     * @return this component
+     */
+    public Component withId(String id) {
+        setId(id);
+        return this;
+    }
+}

flow-tests/test-themes/src/main/java/com/vaadin/flow/uitest/ui/theme/MyPolymerField.java

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2000-2020 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.flow.uitest.ui.theme;
+
+import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
+
+/**
+ * Polymer version of vaadin text field for testing component theming.
+ */
+@JsModule("@vaadin/vaadin-text-field/vaadin-text-field.js")
+@Tag("vaadin-text-field")
+@NpmPackage(value="@vaadin/vaadin-text-field", version = "2.7.1")
+public class MyPolymerField extends Component {
+
+    /**
+     * Set the component id.
+     *
+     * @param id
+     *     value to set
+     * @return this component
+     */
+    public Component withId(String id) {
+        setId(id);
+        return this;
+    }
+}

flow-tests/test-themes/src/main/java/com/vaadin/flow/uitest/ui/theme/ThemeView.java

@@ -20,10 +20,17 @@
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.router.Route;
 
-@Route("com.vaadin.flow.uitest.ui.theme.Theme")
+@Route("com.vaadin.flow.uitest.ui.theme.ThemeView")
 public class ThemeView extends Div {
 
+    public static final String MY_POLYMER_ID = "field";
+    public static final String MY_LIT_ID = "button";
+
     public ThemeView() {
         add(new Span("This is the theme test view"));
+        add(new Div());
+        add(new MyPolymerField().withId(MY_POLYMER_ID));
+        add(new Div());
+        add(new MyLitField().withId(MY_LIT_ID));
     }
 }

flow-tests/test-themes/src/test/java/com/vaadin/flow/uitest/ui/theme/ThemeIT.java

@@ -19,7 +19,12 @@
 import org.junit.Test;
 import org.openqa.selenium.By;
 
+import com.vaadin.flow.component.html.testbench.SpanElement;
 import com.vaadin.flow.testutil.ChromeBrowserTest;
+import com.vaadin.testbench.TestBenchElement;
+
+import static com.vaadin.flow.uitest.ui.theme.ThemeView.MY_LIT_ID;
+import static com.vaadin.flow.uitest.ui.theme.ThemeView.MY_POLYMER_ID;
 
 public class ThemeIT extends ChromeBrowserTest {
 
@@ -31,7 +36,8 @@ public void secondTheme_staticFilesNotCopied() {
 
         getDriver().get(getRootURL() + "/theme/no-copy/no-copy.txt");
         Assert.assertTrue("no-copy theme should not be handled",
-            driver.getPageSource().contains("Could not navigate to 'theme/no-copy/no-copy.txt'"));
+            driver.getPageSource()
+                .contains("Could not navigate to 'theme/no-copy/no-copy.txt'"));
     }
 
     @Test
@@ -49,6 +55,26 @@ public void applicationTheme_GlobalCss_isUsed() {
             driver.getPageSource().contains("Could not navigate"));
     }
 
+    @Test
+    public void componentThemeIsApplied_forPolymerAndLit() {
+        open();
+        TestBenchElement myField = $(TestBenchElement.class).id(MY_POLYMER_ID);
+        TestBenchElement input = myField.$(TestBenchElement.class)
+            .id("vaadin-text-field-input-0");
+        Assert.assertEquals("Polymer text field should have red background",
+            "rgba(255, 0, 0, 1)", input.getCssValue("background-color"));
+
+        myField = $(TestBenchElement.class).id(MY_LIT_ID);
+        final SpanElement radio = myField.$(SpanElement.class).all().stream()
+            .filter(element -> "radio".equals(element.getAttribute("part")))
+            .findFirst().orElseGet(null);
+
+        Assert.assertNotNull("Element with part='radio' was not found", radio);
+
+        Assert.assertEquals("Lit radiobutton should have red background",
+            "rgba(255, 0, 0, 1)", radio.getCssValue("background-color"));
+    }
+
     @Override
     protected String getTestPath() {
         String path = super.getTestPath();