test(e2e): add enableCssModuleTSDeclaration and disableCssExtract e2e cases (#3704)

* fix: add enableCssModuleTSDeclaration and disableCssExtract test case

* fix: migrate some css test case from tests/integration to  e2e/builder

* fix: remove repeated test case

Author: 9aoy

pnpm-lock.yaml

@@ -0,0 +1,4 @@
+dist-1
+dist-2
+*.d.ts
+!types.d.ts

tests/e2e/builder/cases/css/css-modules-dom/.gitignore

@@ -0,0 +1,19 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: nunito_for_arco, Helvetica Neue, Helvetica, PingFang SC,
+    Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+.description {
+  text-align: center;
+  line-height: 1.5;
+  font-size: 16px;
+}

tests/e2e/builder/cases/css/css-modules-dom/src/App.css

@@ -0,0 +1,5 @@
+.title {
+  text-align: center;
+  color: blue;
+  font-size: 20px;
+}

tests/e2e/builder/cases/css/css-modules-dom/src/App.module.less

@@ -0,0 +1,5 @@
+.header {
+  text-align: center;
+  color: red;
+  font-size: 20px;
+}

tests/e2e/builder/cases/css/css-modules-dom/src/App.module.scss

@@ -0,0 +1,20 @@
+import React from 'react';
+import './App.css';
+import stylesForSass from './App.module.scss';
+import stylesForLess from './App.module.less';
+
+const App = () => (
+  <div className="container">
+    <p className={stylesForSass.header} id="header">
+      header
+    </p>
+    <p className={stylesForLess.title} id="title">
+      title
+    </p>
+    <p className="description" id="description">
+      description
+    </p>
+  </div>
+);
+
+export default App;

tests/e2e/builder/cases/css/css-modules-dom/src/App.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { render } from 'react-dom';
+import App from './App';
+
+render(React.createElement(App), document.getElementById('root'));

tests/e2e/builder/cases/css/css-modules-dom/src/index.ts

@@ -0,0 +1,3 @@
+declare module '*.module.css';
+declare module '*.module.scss';
+declare module '*.module.less';

tests/e2e/builder/cases/css/css-modules-dom/src/types.d.ts

@@ -0,0 +1,93 @@
+import { join, resolve } from 'path';
+import { fs } from '@modern-js/utils';
+import { build, getHrefByEntryName } from '@scripts/shared';
+import { webpackOnlyTest } from '@scripts/helper';
+import { expect } from '@modern-js/e2e/playwright';
+
+const fixtures = resolve(__dirname, '../');
+
+webpackOnlyTest('enableCssModuleTSDeclaration', async () => {
+  fs.removeSync(join(fixtures, 'src/App.module.less.d.ts'));
+  fs.removeSync(join(fixtures, 'src/App.module.scss.d.ts'));
+  const buildOpts = {
+    cwd: fixtures,
+    entry: {
+      main: join(fixtures, 'src/index.ts'),
+    },
+  };
+
+  const builder = await build(
+    buildOpts,
+    {
+      output: {
+        enableCssModuleTSDeclaration: true,
+      },
+    },
+    false,
+  );
+
+  expect(
+    fs.existsSync(join(fixtures, 'src/App.module.less.d.ts')),
+  ).toBeTruthy();
+
+  expect(
+    fs
+      .readFileSync(join(fixtures, 'src/App.module.less.d.ts'), {
+        encoding: 'utf-8',
+      })
+      .includes(`'title': string;`),
+  ).toBeTruthy();
+
+  expect(
+    fs.existsSync(join(fixtures, 'src/App.module.scss.d.ts')),
+  ).toBeTruthy();
+
+  expect(
+    fs
+      .readFileSync(join(fixtures, 'src/App.module.scss.d.ts'), {
+        encoding: 'utf-8',
+      })
+      .includes(`'header': string;`),
+  ).toBeTruthy();
+
+  builder.close();
+});
+
+webpackOnlyTest('disableCssExtract', async ({ page }) => {
+  const buildOpts = {
+    cwd: fixtures,
+    entry: {
+      main: join(fixtures, 'src/index.ts'),
+    },
+  };
+
+  const builder = await build(buildOpts, {
+    output: {
+      disableCssExtract: true,
+    },
+  });
+
+  await page.goto(getHrefByEntryName('main', builder.port));
+
+  // disableCssExtract worked
+  const files = await builder.unwrapOutputJSON();
+  const cssFiles = Object.keys(files).filter(file => file.endsWith('.css'));
+
+  expect(cssFiles.length).toBe(0);
+
+  // scss worked
+  await expect(
+    page.evaluate(
+      `window.getComputedStyle(document.getElementById('header')).fontSize`,
+    ),
+  ).resolves.toBe('20px');
+
+  // less worked
+  await expect(
+    page.evaluate(
+      `window.getComputedStyle(document.getElementById('title')).fontSize`,
+    ),
+  ).resolves.toBe('20px');
+
+  builder.close();
+});

tests/e2e/builder/cases/css/css-modules-dom/tests/index.test.ts

@@ -0,0 +1,13 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "react-jsx",
+    "baseUrl": "./",
+    "outDir": "./dist",
+    "paths": {
+      "@scripts/*": ["../../../scripts/*"]
+    }
+  },
+  "include": ["src", "tests"]
+}