experiment: enable using base styles in dev pages and visual tests (#9164)

Author: web-padawan

dev/common-base.js

@@ -0,0 +1,30 @@
+import '@vaadin/component-base/src/style-props.js';
+import { css } from 'lit';
+import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+addGlobalThemeStyles(
+  'dev-common',
+  css`
+    body {
+      font-family: system-ui, sans-serif;
+      line-height: 1.25;
+      color: var(--_vaadin-color);
+      background: var(--_vaadin-background);
+      margin: 2rem;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: var(--_vaadin-color-strong);
+      font-weight: 600;
+      font-size: calc(18 / 16 * 1rem);
+      line-height: calc(20 / 16 * 1rem);
+      margin: 2em 0 1.25em;
+      text-box: cap alphabetic;
+    }
+  `,
+);

package.json

@@ -19,15 +19,18 @@
     "prepare": "husky",
     "serve:dist": "web-dev-server --app-index dist/index.html --open",
     "start": "web-dev-server --node-resolve --open /dev",
+    "start:base": "web-dev-server --node-resolve --open /dev --base",
     "check-releases": "node ./scripts/check-releases.js && web-dev-server --node-resolve --open /scripts/check-releases.html",
     "test": "node scripts/generateLitTests.js && web-test-runner",
+    "test:base": "yarn test --config web-test-runner-base.config.js",
     "test:firefox": "yarn test --config web-test-runner-firefox.config.js",
     "test:it": "yarn test --config web-test-runner-it.config.js",
     "test:lumo": "yarn test --config web-test-runner-lumo.config.js",
     "test:local:lumo": "yarn test --config web-test-runner-lumo.config.js --local",
     "test:material": "yarn test --config web-test-runner-material.config.js",
     "test:snapshots": "yarn test --config web-test-runner-snapshots.config.js",
     "test:webkit": "yarn test --config web-test-runner-webkit.config.js",
+    "update:base": "TEST_ENV=update yarn test --config web-test-runner-base.config.js",
     "update:local:lumo": "TEST_ENV=update yarn test --config web-test-runner-lumo.config.js --local",
     "update:lumo": "TEST_ENV=update yarn test --config web-test-runner-lumo.config.js",
     "update:material": "TEST_ENV=update yarn test --config web-test-runner-material.config.js",

web-dev-server.config.js

@@ -3,6 +3,8 @@ import { esbuildPlugin } from '@web/dev-server-esbuild';
 import fs from 'node:fs';
 import path from 'node:path';
 
+const hasBaseParam = process.argv.includes('--base');
+
 /** @return {import('@web/test-runner').TestRunnerPlugin} */
 function generatedLitTestsPlugin() {
   return {
@@ -26,6 +28,23 @@ function generatedLitTestsPlugin() {
   };
 }
 
+/** @return {import('@web/test-runner').TestRunnerPlugin} */
+export function enforceBaseStylesPlugin() {
+  return {
+    name: 'enforce-base-styles',
+    transform(context) {
+      if (context.response.is('html')) {
+        return { body: context.body.replace('./common.js', './common-base.js') };
+      }
+    },
+    transformImport({ source }) {
+      source = source.replace('/theme/lumo/', '/src/');
+      source = source.replace(/(.+)-core-styles\.js/u, '$1-base-styles.js');
+      return source;
+    },
+  };
+}
+
 const preventFouc = `
   <style>
     body:not(.resolved) {
@@ -73,7 +92,9 @@ export default {
         }
       },
     },
+    // When passing --base flag to `yarn start` command, load base styles and not Lumo
+    hasBaseParam && enforceBaseStylesPlugin(),
     esbuildPlugin({ ts: true }),
     generatedLitTestsPlugin(),
-  ],
+  ].filter(Boolean),
 };

wtr-utils.js

@@ -9,6 +9,7 @@ import minimist from 'minimist';
 import { execSync } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
+import { enforceBaseStylesPlugin } from './web-dev-server.config.js';
 
 dotenv.config();
 
@@ -98,6 +99,15 @@ const getAllVisualPackages = () => {
     .filter((dir) => fs.statSync(`packages/${dir}`).isDirectory() && fs.existsSync(`packages/${dir}/test/visual`));
 };
 
+/**
+ * Get all available packages with visual tests for base styles.
+ */
+const getAllBasePackages = () => {
+  return fs
+    .readdirSync('packages')
+    .filter((dir) => fs.statSync(`packages/${dir}`).isDirectory() && fs.existsSync(`packages/${dir}/test/visual/base`));
+};
+
 /**
  * Get packages for running tests.
  */
@@ -163,7 +173,9 @@ const getUnitTestGroups = (packages) => {
 const getVisualTestGroups = (packages, theme) => {
   return packages
     .filter((pkg) => {
-      return !pkg.includes(theme === 'lumo' ? 'material' : 'lumo');
+      return theme === 'base'
+        ? !pkg.includes('lumo') && !pkg.includes('material')
+        : !pkg.includes(theme === 'lumo' ? 'material' : 'lumo');
     })
     .map((pkg) => {
       return {
@@ -218,7 +230,7 @@ const getScreenshotFileName = ({ name, testFile }, type, diff) => {
     folder = 'icons/test/visual/screenshots';
   } else {
     const match = testFile.match(/\/packages\/(.+)\.test\.(js|ts)/u);
-    folder = match[1].replace(/(lumo|material)/u, '$1/screenshots');
+    folder = match[1].replace(/(base|lumo|material)/u, '$1/screenshots');
   }
   return path.join(folder, type, diff ? `${name}-diff` : name);
 };
@@ -263,7 +275,7 @@ const createUnitTestsConfig = (config) => {
 };
 
 const createVisualTestsConfig = (theme, browserVersion) => {
-  const visualPackages = getAllVisualPackages();
+  const visualPackages = theme === 'base' ? getAllBasePackages() : getAllVisualPackages();
   const packages = getTestPackages(visualPackages);
   const groups = getVisualTestGroups(packages, theme);
 
@@ -321,7 +333,8 @@ const createVisualTestsConfig = (theme, browserVersion) => {
         failureThresholdType: 'percent',
         update: process.env.TEST_ENV === 'update',
       }),
-    ],
+      theme === 'base' && enforceBaseStylesPlugin(),
+    ].filter(Boolean),
     groups,
     testRunnerHtml: getTestRunnerHtml(theme),
     filterBrowserLogs,