chore: add css-modules and less test cases

Author: SoonIter

tests/integration/style/css-modules/__fixtures__/basic/src/index.ts

@@ -1,5 +1,4 @@
 import button from './button/index';
-// @ts-ignore
-import stylesAuto from './reset.scss';
+import './reset.scss';
 
-export { stylesAuto, button };
+export { button };

tests/integration/style/css-modules/bundle/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "css-modules-bundle-test",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module"
+}

tests/integration/style/css-modules/bundle/rslib.config.ts

@@ -0,0 +1,19 @@
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { defineConfig } from '@rslib/core';
+import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [generateBundleEsmConfig(), generateBundleCjsConfig()],
+  source: {
+    entry: {
+      index: ['../__fixtures__/basic/src/index.ts'],
+    },
+  },
+  plugins: [
+    pluginSass({
+      sassLoaderOptions: {
+        additionalData: '$base-color: #c6538c;',
+      },
+    }),
+  ],
+});

tests/integration/style/css-modules/index.test.ts

@@ -0,0 +1,91 @@
+import { join } from 'node:path';
+import { buildAndGetResults, getFileBySuffix } from 'test-helper';
+import { expect, test } from 'vitest';
+
+function expectFileContainContent(
+  files: Record<string, string>,
+  suffix: string,
+  content: string,
+) {
+  const fileContent = getFileBySuffix(files, suffix);
+  expect(fileContent).toContain(content);
+}
+
+test('should extract css-modules successfully in bundle', async () => {
+  const fixturePath = join(__dirname, 'bundle');
+  const { contents } = await buildAndGetResults(fixturePath, 'css');
+
+  const esmFiles = Object.keys(contents.esm);
+  expect(esmFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/css-modules/bundle/dist/esm/static/css/index.css",
+    ]
+  `);
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/css-modules/bundle/dist/cjs/static/css/index.css",
+    ]
+  `);
+});
+
+test('should extract css-modules successfully in bundle-false', async () => {
+  const fixturePath = join(__dirname, 'bundle-false');
+  const { contents } = await buildAndGetResults(fixturePath, 'css');
+  const { contents: jsContents } = await buildAndGetResults(fixturePath, 'js');
+
+  const esmFiles = Object.keys(contents.esm);
+  expect(esmFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/css-modules/bundle-false/dist/esm/button/index_module.css",
+      "<ROOT>/tests/integration/style/css-modules/bundle-false/dist/esm/reset.css",
+    ]
+  `);
+  expectFileContainContent(
+    jsContents.esm,
+    'button/index.module.js',
+    'import "./index_module.css"',
+  );
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/css-modules/bundle-false/dist/cjs/button/index_module.css",
+      "<ROOT>/tests/integration/style/css-modules/bundle-false/dist/cjs/reset.css",
+    ]
+  `);
+  expectFileContainContent(
+    jsContents.cjs,
+    'button/index.module.cjs',
+    'require("./index_module.css")',
+  );
+});
+
+test('should extract css-modules successfully in bundle-false with output.cssModules.auto config', async () => {
+  const fixturePath = join(__dirname, 'bundle-false-auto');
+  const { contents } = await buildAndGetResults(fixturePath, 'css');
+  const { contents: jsContents } = await buildAndGetResults(fixturePath, 'js');
+
+  const esmFiles = Object.keys(contents.esm);
+  expect(esmFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/css-modules/bundle-false-auto/dist/esm/button/index_module.css",
+      "<ROOT>/tests/integration/style/css-modules/bundle-false-auto/dist/esm/reset.css",
+    ]
+  `);
+  expectFileContainContent(jsContents.esm, 'reset.js', 'import "./reset.css"');
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/css-modules/bundle-false-auto/dist/cjs/button/index_module.css",
+      "<ROOT>/tests/integration/style/css-modules/bundle-false-auto/dist/cjs/reset.css",
+    ]
+  `);
+  expectFileContainContent(
+    jsContents.cjs,
+    'reset.cjs',
+    'require("./reset.css")',
+  );
+});

tests/integration/style/css/index.test.ts

@@ -2,7 +2,7 @@ import { join } from 'node:path';
 import { buildAndGetResults } from 'test-helper';
 import { expect, test } from 'vitest';
 
-test('should extract css successfully when set bundle: true', async () => {
+test('should extract css successfully in bundle', async () => {
   const fixturePath = join(__dirname, 'bundle');
   const { contents } = await buildAndGetResults(fixturePath, 'css');
   const esmFiles = Object.keys(contents.esm);
@@ -21,7 +21,7 @@ test('should extract css successfully when set bundle: true', async () => {
   `);
 });
 
-test('should extract css successfully when set bundle: false', async () => {
+test('should extract css successfully in bundle-false', async () => {
   const fixturePath = join(__dirname, 'bundle-false');
   const { contents } = await buildAndGetResults(fixturePath, 'css');
   const esmFiles = Object.keys(contents.esm);

tests/integration/style/less/__fixtures__/.gitignore

@@ -0,0 +1,2 @@
+!node_modules
+node_modules/.*

tests/integration/style/less/__fixtures__/basic/src/assets/normal.ttf

@@ -0,0 +1,15 @@
+@import './nest/nest.less';
+@import '~/alias.css';
+
+@url: './assets/normal.ttf';
+
+.url-variable {
+  font-family: url(@url);
+}
+
+@border-dark: rgba(@base-color, 0.88);
+
+.alert {
+  border: 1px solid @border-dark;
+  margin: 10px / 2;
+}

tests/integration/style/less/__fixtures__/basic/src/index.less

@@ -0,0 +1,3 @@
+p {
+  color: red;
+}

tests/integration/style/less/__fixtures__/basic/src/nest/alias.css

@@ -0,0 +1,3 @@
+.div {
+  font-family: url('../assets/normal.ttf');
+}