feat: configurable theme.json autoInjectComponents property (#15154)

* feat: added support for theme.json autoInjectComponents flag

Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>

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

@@ -109,17 +109,22 @@ export const injectGlobalCss = (css, target, first) => {
 function generateThemeFile(themeFolder, themeName, themeProperties, productionMode) {
   const styles = path.resolve(themeFolder, stylesCssFile);
   const document = path.resolve(themeFolder, documentCssFile);
-  const componentsFiles = glob.sync('*.css', {
-    cwd: path.resolve(themeFolder, themeComponentsFolder),
-    nodir: true
-  });
-
+  const autoInjectComponents = themeProperties.autoInjectComponents ?? true;
   let themeFile = headerImport;
+  var componentsFiles;
+
+  if (autoInjectComponents) {
+      componentsFiles = glob.sync('*.css', {
+        cwd: path.resolve(themeFolder, themeComponentsFolder),
+        nodir: true
+      });
 
-  if (componentsFiles.length > 0) {
-    themeFile += "import { unsafeCSS, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\n";
+      if (componentsFiles.length > 0) {
+        themeFile += "import { unsafeCSS, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\n";
+      }
   }
 
+
   if (themeProperties.parent) {
     themeFile += `import {applyTheme as applyBaseTheme} from './theme-${themeProperties.parent}.generated.js';\n`;
   }
@@ -213,19 +218,21 @@ function generateThemeFile(themeFolder, themeName, themeProperties, productionMo
     });
   }
 
-  componentsFiles.forEach((componentCss) => {
-    const filename = path.basename(componentCss);
-    const tag = filename.replace('.css', '');
-    const variable = camelCase(filename);
-    imports.push(`import ${variable} from 'themes/${themeName}/${themeComponentsFolder}/${filename}?inline';\n`);
-    // Don't format as the generated file formatting will get wonky!
-    const componentString = `registerStyles(
-      '${tag}',
-      unsafeCSS(${variable}.toString())
-    );
-    `;
-    componentCssCode.push(componentString);
-  });
+  if (autoInjectComponents) {
+    componentsFiles.forEach((componentCss) => {
+      const filename = path.basename(componentCss);
+      const tag = filename.replace('.css', '');
+      const variable = camelCase(filename);
+      imports.push(`import ${variable} from 'themes/${themeName}/${themeComponentsFolder}/${filename}?inline';\n`);
+      // Don't format as the generated file formatting will get wonky!
+      const componentString = `registerStyles(
+        '${tag}',
+        unsafeCSS(${variable}.toString())
+      );
+      `;
+      componentCssCode.push(componentString);
+    });
+  }
 
   themeFile += imports.join('');
   themeFile += `

flow-tests/test-frontend/vite-basics/frontend/themes/vite-basics/components/vaadin-text-field.css

@@ -0,0 +1,3 @@
+[part="input-field"] {
+    border: 10px solid rgb(255, 0, 0);
+}

flow-tests/test-frontend/vite-basics/frontend/themes/vite-basics/theme.json

@@ -1 +1,4 @@
-{"lumoImports":["typography","color","spacing","badge","utility"]}
+{
+  "lumoImports":["typography","color","spacing","badge","utility"],
+  "autoInjectComponents": false
+}

flow-tests/test-frontend/vite-basics/src/test/java/com/vaadin/viteapp/ThemeIT.java

@@ -42,6 +42,13 @@ public void cssImportAnnotationForComponent() {
         Assert.assertEquals("rgb(173, 216, 230)", fieldBackground);
     }
 
+    @Test
+    public void autoInjectComponentsIsFalse_cssNotImported() {
+        String fieldBorder = (String) executeScript(
+                "return getComputedStyle(document.querySelector('#themedfield').shadowRoot.querySelector('[part=input-field]')).border");
+        Assert.assertNotEquals("10px solid rgb(255, 0, 0)", fieldBorder);
+    }
+
     @Test
     public void documentCssImport_externalAddedToHeadAsLink() {
         checkLogsForErrors();