web-test-runner.config.mjs

import fs from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";

import { fromRollup } from "@web/dev-server-rollup";
import rollupCommonjs from "@rollup/plugin-commonjs";
import rollupNodeResolve from "@rollup/plugin-node-resolve";
import rollupReplace from "@rollup/plugin-replace";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const pluginCommonjs = fromRollup(rollupCommonjs, {
  plugins: [
    rollupNodeResolve({
      browser: true,
      preferBuiltins: false,
    }),
  ],
});

const replace = fromRollup(rollupReplace);

async function generateDarkCss() {
  const { default: postcss } = await import("postcss");
  const { postcssFomanticDarkPlugin } = await import("./index.mjs");

  const semanticPath = path.resolve(
    __dirname,
    "node_modules/fomantic-ui/dist/semantic.css",
  );
  const semantic = fs.readFileSync(semanticPath, "utf-8");
  const result = await postcss([postcssFomanticDarkPlugin()]).process(
    semantic,
    {
      from: undefined,
    },
  );
  return result.css;
}

let cachedDarkCss = null;

export default {
  rootDir: ".",
  files: ["tests/**/*.test.{js,mjs,html}"],
  testFramework: {
    config: {
      timeout: "10000",
    },
  },
  concurrency: 1,
  preserveSymlinks: true,
  nodeResolve: {
    browser: true,
    preferBuiltins: false,
  },
  mimeTypes: {
    "**/*.cjs": "js",
  },
  plugins: [
    replace({
      include: ["node_modules/postcss/**/*.js"],
      preventAssignment: true,
      "process.env.NODE_ENV": '"test"',
    }),
    pluginCommonjs({
      include: ["node_modules/**"],
      esmExternals: true,
      defaultIsModuleExports: true,
      requireReturnsDefault: true,
      strictRequires: false,
    }),
    {
      name: "dark-theme-css",
      async serve(context) {
        if (context.path === "/generated/dark-theme.css") {
          if (!cachedDarkCss) {
            cachedDarkCss = await generateDarkCss();
          }
          return {
            body: cachedDarkCss,
            type: "css",
            contentType: "text/css",
          };
        }
      },
    },
  ],
};