test: add tailwind postcss lightningcss

SoonIter · SoonIter · commit ee0ecf6a8299 · 2024-10-09T19:17:23.000+08:00
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/integration/style/css-modules/index.test.ts b/tests/integration/style/css-modules/index.test.ts
@@ -1,16 +1,8 @@
 import { join } from 'node:path';
-import { buildAndGetResults, getFileBySuffix } from 'test-helper';
+import { buildAndGetResults } from 'test-helper';
+import { expectFileContainContent } from 'test-helper/vitest';
 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');
diff --git a/tests/integration/style/css/__fixtures__/basic/src/import.css b/tests/integration/style/css/__fixtures__/basic/src/import.css
diff --git a/tests/integration/style/css/__fixtures__/basic/src/lib1.css b/tests/integration/style/css/__fixtures__/basic/src/lib1.css
diff --git a/tests/integration/style/css/__fixtures__/basic/src/lib2.css b/tests/integration/style/css/__fixtures__/basic/src/lib2.css
diff --git a/tests/integration/style/css/__fixtures__/basic/tsconfig.json b/tests/integration/style/css/__fixtures__/basic/tsconfig.json
diff --git a/tests/integration/style/css/bundle-false/rslib.config.ts b/tests/integration/style/css/bundle-false/rslib.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
   ],
   source: {
     entry: {
-      index: ['../__fixtures__/src/**/*.css'],
+      index: ['../__fixtures__/basic/src/**/*.css'],
     },
   },
 });
diff --git a/tests/integration/style/css/bundle/rslib.config.ts b/tests/integration/style/css/bundle/rslib.config.ts
@@ -5,7 +5,7 @@ export default defineConfig({
   lib: [generateBundleEsmConfig(), generateBundleCjsConfig()],
   source: {
     entry: {
-      index: '../__fixtures__/src/import.css',
+      index: '../__fixtures__/basic/src/import.css',
     },
   },
 });
diff --git a/tests/integration/style/css/index.test.ts b/tests/integration/style/css/index.test.ts
@@ -6,7 +6,6 @@ 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);
-
   expect(esmFiles).toMatchInlineSnapshot(`
     [
       "<ROOT>/tests/integration/style/css/bundle/dist/esm/static/css/index.css",
@@ -25,7 +24,6 @@ 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);
-
   expect(esmFiles).toMatchInlineSnapshot(`
     [
       "<ROOT>/tests/integration/style/css/bundle-false/dist/esm/import.css",
diff --git a/tests/integration/style/less/index.test.ts b/tests/integration/style/less/index.test.ts
@@ -1,21 +1,13 @@
 import { join } from 'node:path';
-import { buildAndGetResults, getFileBySuffix } from 'test-helper';
+import { buildAndGetResults } from 'test-helper';
+import { expectFileContainContent } from 'test-helper/vitest';
 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 with pluginLess successfully in bundle-false', async () => {
   const fixturePath = join(__dirname, 'bundle-false');
   const { contents } = await buildAndGetResults(fixturePath, 'css');
-  const esmFiles = Object.keys(contents.esm);
 
+  const esmFiles = Object.keys(contents.esm);
   expect(esmFiles).toMatchInlineSnapshot(`
     [
       "<ROOT>/tests/integration/style/less/bundle-false/dist/esm/index.css",
@@ -37,6 +29,7 @@ test('should extract with pluginLess successfully in bundle-false', async () =>
 test('should extract css with pluginLess successfully in bundle', async () => {
   const fixturePath = join(__dirname, 'bundle');
   const { contents } = await buildAndGetResults(fixturePath, 'css');
+
   const esmFiles = Object.keys(contents.esm);
   expect(esmFiles).toMatchInlineSnapshot(`
     [
@@ -55,6 +48,7 @@ test('should extract css with pluginLess successfully in bundle', async () => {
 test('should extract css with pluginLess successfully in import case', async () => {
   const fixturePath = join(__dirname, 'bundle-import');
   const { contents } = await buildAndGetResults(fixturePath, 'css');
+
   const esmFiles = Object.keys(contents.esm);
   expect(esmFiles).toMatchInlineSnapshot(`
     [
diff --git a/tests/integration/style/lightningcss/__fixtures__/basic/src/index.css b/tests/integration/style/lightningcss/__fixtures__/basic/src/index.css
@@ -0,0 +1 @@
+@import 'prefix.css';
diff --git a/tests/integration/style/lightningcss/__fixtures__/basic/src/prefix.css b/tests/integration/style/lightningcss/__fixtures__/basic/src/prefix.css
@@ -0,0 +1,7 @@
+@media (min-resolution: 2dppx) {
+  .item {
+    transition: all 0.5s;
+    user-select: none;
+    background: linear-gradient(to bottom, white, black);
+  }
+}
diff --git a/tests/integration/style/lightningcss/bundle-false/.browserslistrc b/tests/integration/style/lightningcss/bundle-false/.browserslistrc
@@ -0,0 +1,3 @@
+Edge >= 12
+iOS >= 8
+Android >= 4.0
diff --git a/tests/integration/style/lightningcss/bundle-false/package.json b/tests/integration/style/lightningcss/bundle-false/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "lightningcss-bundle-false-test",
+  "private": true
+}
diff --git a/tests/integration/style/lightningcss/bundle-false/rslib.config.ts b/tests/integration/style/lightningcss/bundle-false/rslib.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [
+    generateBundleEsmConfig({ bundle: false }),
+    generateBundleCjsConfig({ bundle: false }),
+  ],
+  source: {
+    entry: {
+      index: ['../__fixtures__/basic/src/*.css'],
+    },
+  },
+});
diff --git a/tests/integration/style/lightningcss/bundle/.browserslistrc b/tests/integration/style/lightningcss/bundle/.browserslistrc
@@ -0,0 +1,3 @@
+Edge >= 12
+iOS >= 8
+Android >= 4.0
diff --git a/tests/integration/style/lightningcss/bundle/package.json b/tests/integration/style/lightningcss/bundle/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "lightningcss-bundle-test",
+  "private": true
+}
diff --git a/tests/integration/style/lightningcss/bundle/rslib.config.ts b/tests/integration/style/lightningcss/bundle/rslib.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [generateBundleEsmConfig(), generateBundleCjsConfig()],
+  source: {
+    entry: {
+      index: ['../__fixtures__/basic/src/index.css'],
+    },
+  },
+});
diff --git a/tests/integration/style/lightningcss/index.test.ts b/tests/integration/style/lightningcss/index.test.ts
@@ -0,0 +1,62 @@
+import { join } from 'node:path';
+import { buildAndGetResults } from 'test-helper';
+import { expectFileContainContent } from 'test-helper/vitest';
+import { expect, test } from 'vitest';
+
+test('should extract css with lightningcss-loader 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/lightningcss/bundle/dist/esm/static/css/index.css",
+    ]
+  `);
+  expectFileContainContent(
+    contents.esm,
+    'index.css',
+    '-webkit-user-select: none;',
+  );
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/lightningcss/bundle/dist/cjs/static/css/index.css",
+    ]
+  `);
+  expectFileContainContent(
+    contents.cjs,
+    'index.css',
+    '-webkit-user-select: none;',
+  );
+});
+
+test('should extract css with lightningcss-loader successfully in bundle-false', async () => {
+  const fixturePath = join(__dirname, 'bundle-false');
+  const { contents } = await buildAndGetResults(fixturePath, 'css');
+  const esmFiles = Object.keys(contents.esm);
+  expect(esmFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/lightningcss/bundle-false/dist/esm/index.css",
+      "<ROOT>/tests/integration/style/lightningcss/bundle-false/dist/esm/prefix.css",
+    ]
+  `);
+  expectFileContainContent(
+    contents.cjs,
+    'prefix.css',
+    '-webkit-user-select: none;',
+  );
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/lightningcss/bundle-false/dist/cjs/index.css",
+      "<ROOT>/tests/integration/style/lightningcss/bundle-false/dist/cjs/prefix.css",
+    ]
+  `);
+  expectFileContainContent(
+    contents.cjs,
+    'prefix.css',
+    '-webkit-user-select: none;',
+  );
+});
diff --git a/tests/integration/style/postcss/__fixtures__/basic/src/alias.css b/tests/integration/style/postcss/__fixtures__/basic/src/alias.css
@@ -0,0 +1,9 @@
+@alias {
+  fs: font-size;
+  bg: background;
+}
+
+.aliased {
+  fs: 16px;
+  bg: white;
+}
diff --git a/tests/integration/style/postcss/__fixtures__/basic/src/index.css b/tests/integration/style/postcss/__fixtures__/basic/src/index.css
@@ -0,0 +1 @@
+@import 'alias.css';
diff --git a/tests/integration/style/postcss/bundle-false/package.json b/tests/integration/style/postcss/bundle-false/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "postcss-bundle-false-test",
+  "private": true,
+  "devDependencies": {
+    "postcss-alias": "2.0.0"
+  }
+}
diff --git a/tests/integration/style/postcss/bundle-false/rslib.config.ts b/tests/integration/style/postcss/bundle-false/rslib.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [
+    generateBundleEsmConfig({ bundle: false }),
+    generateBundleCjsConfig({ bundle: false }),
+  ],
+  source: {
+    entry: {
+      index: ['../__fixtures__/basic/src/**/*.css'],
+    },
+  },
+  tools: {
+    lightningcssLoader: false,
+    postcss: {
+      postcssOptions: {
+        plugins: [require('postcss-alias')],
+      },
+    },
+  },
+});
diff --git a/tests/integration/style/postcss/bundle/package.json b/tests/integration/style/postcss/bundle/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "postcss-bundle-test",
+  "private": true,
+  "devDependencies": {
+    "postcss-alias": "2.0.0"
+  }
+}
diff --git a/tests/integration/style/postcss/bundle/rslib.config.ts b/tests/integration/style/postcss/bundle/rslib.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [generateBundleEsmConfig(), generateBundleCjsConfig()],
+  source: {
+    entry: {
+      index: ['../__fixtures__/basic/src/index.css'],
+    },
+  },
+  tools: {
+    lightningcssLoader: false,
+    postcss: {
+      postcssOptions: {
+        plugins: [require('postcss-alias')],
+      },
+    },
+  },
+});
diff --git a/tests/integration/style/postcss/index.test.ts b/tests/integration/style/postcss/index.test.ts
@@ -0,0 +1,48 @@
+import { join } from 'node:path';
+import { buildAndGetResults } from 'test-helper';
+import { expectFileContainContent } from 'test-helper/vitest';
+import { expect, test } from 'vitest';
+
+test('should extract css with postcss-loader 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/postcss/bundle/dist/esm/static/css/index.css",
+    ]
+  `);
+  expectFileContainContent(contents.esm, 'index.css', 'font-size: 16px;');
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/postcss/bundle/dist/cjs/static/css/index.css",
+    ]
+  `);
+  expectFileContainContent(contents.cjs, 'index.css', 'font-size: 16px;');
+});
+
+test('should extract css with postcss-loader successfully in bundle-false', async () => {
+  const fixturePath = join(__dirname, 'bundle-false');
+  const { contents } = await buildAndGetResults(fixturePath, 'css');
+
+  const esmFiles = Object.keys(contents.esm);
+  expect(esmFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/postcss/bundle-false/dist/esm/alias.css",
+      "<ROOT>/tests/integration/style/postcss/bundle-false/dist/esm/index.css",
+    ]
+  `);
+  expectFileContainContent(contents.esm, 'alias.css', 'font-size: 16px;');
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/tests/integration/style/postcss/bundle-false/dist/cjs/alias.css",
+      "<ROOT>/tests/integration/style/postcss/bundle-false/dist/cjs/index.css",
+    ]
+  `);
+  expectFileContainContent(contents.cjs, 'alias.css', 'font-size: 16px;');
+});
diff --git a/tests/integration/style/tailwindcss/bundle/package.json b/tests/integration/style/tailwindcss/bundle/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "tailwindcss-bundle-test",
+  "private": true,
+  "devDependencies": {
+    "tailwindcss": "^3.4.11"
+  }
+}
diff --git a/tests/integration/style/tailwindcss/bundle/postcss.config.ts b/tests/integration/style/tailwindcss/bundle/postcss.config.ts
@@ -0,0 +1,9 @@
+const path = require('node:path');
+
+export default {
+  plugins: {
+    tailwindcss: {
+      config: path.join(__dirname, './tailwind.config.cjs'),
+    },
+  },
+};
diff --git a/tests/integration/style/tailwindcss/bundle/rslib.config.ts b/tests/integration/style/tailwindcss/bundle/rslib.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [generateBundleEsmConfig(), generateBundleCjsConfig()],
+  source: {
+    entry: {
+      index: ['./src/index.ts'],
+    },
+  },
+  tools: {
+    lightningcssLoader: false,
+  },
+});
diff --git a/tests/integration/style/tailwindcss/bundle/src/index.css b/tests/integration/style/tailwindcss/bundle/src/index.css
@@ -0,0 +1 @@
+@tailwind utilities;
diff --git a/tests/integration/style/tailwindcss/bundle/src/index.ts b/tests/integration/style/tailwindcss/bundle/src/index.ts
@@ -0,0 +1,7 @@
+import './index.css';
+
+const div = document.createElement('div');
+
+div.classList.add('text-3xl', 'font-bold', 'underline');
+
+export { div };
diff --git a/tests/integration/style/tailwindcss/bundle/tailwind.config.cjs b/tests/integration/style/tailwindcss/bundle/tailwind.config.cjs
@@ -0,0 +1,10 @@
+const path = require('node:path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [path.join(__dirname, './src/**/*.{html,js,ts,jsx,tsx}')],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/tests/integration/style/tailwindcss/index.test.ts b/tests/integration/style/tailwindcss/index.test.ts
diff --git a/tests/scripts/vitest.ts b/tests/scripts/vitest.ts
