test: refactor some style tests

tests/integration/style/less/bundle-false/rslib.config.ts

@@ -22,10 +22,9 @@ export default defineConfig({
       },
     }),
   ],
-  root: resolve(__dirname, '../__fixtures__/basic'),
   source: {
     entry: {
-      index: ['./src/**'],
+      index: ['../__fixtures__/basic/src/**'],
     },
   },
   resolve: {

tests/integration/style/less/bundle-import/rslib.config.ts

@@ -20,10 +20,9 @@ export default defineConfig({
       },
     }),
   ],
-  root: resolve(__dirname, '../__fixtures__/import'),
   source: {
     entry: {
-      index: './src/index.ts',
+      index: '../__fixtures__/import/src/index.ts',
     },
   },
   output: {

tests/integration/style/less/bundle/rslib.config.ts

@@ -20,10 +20,9 @@ export default defineConfig({
       },
     }),
   ],
-  root: resolve(__dirname, '../__fixtures__/basic'),
   source: {
     entry: {
-      index: ['./src/index.less'],
+      index: ['../__fixtures__/basic/src/index.less'],
     },
   },
   resolve: {

tests/integration/style/postcss/bundle-false/rslib.config.ts

@@ -12,7 +12,6 @@ export default defineConfig({
     },
   },
   tools: {
-    lightningcssLoader: false,
     postcss: {
       postcssOptions: {
         plugins: [require('postcss-alias')],

tests/integration/style/postcss/bundle/rslib.config.ts

@@ -9,7 +9,6 @@ export default defineConfig({
     },
   },
   tools: {
-    lightningcssLoader: false,
     postcss: {
       postcssOptions: {
         plugins: [require('postcss-alias')],

tests/integration/style/sass/__fixtures__/src/index.scss

@@ -1,6 +1,5 @@
 @import 'foundation/code', 'foundation/lists';
-// TODO: Error: Sass variables aren't allowed in plain CSS.
-// @import '~lib1/index.css';
+@import '~lib1/index.css';
 @import './foundation/index.scss';
 
 $url: './foundation/logo.svg';

tests/integration/style/sass/__snapshots__/index.test.ts.snap

@@ -0,0 +1,167 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`should extract css with pluginSass in bundle 2`] = `
+[
+  ".lib1 {
+  font-size: 18px;
+}
+
+code {
+  padding: .25em;
+  line-height: 0;
+}
+
+ul, ol {
+  text-align: left;
+}
+
+ul ul, ul ol, ol ul, ol ol {
+  padding-bottom: 0;
+  padding-left: 0;
+}
+
+body, .url-variable {
+  background: url(./static/svg/logo.svg);
+}
+
+.alert {
+  border: 1px solid #c6538ce0;
+}
+
+",
+]
+`;
+
+exports[`should extract css with pluginSass in bundle 4`] = `
+[
+  ".lib1 {
+  font-size: 18px;
+}
+
+code {
+  padding: .25em;
+  line-height: 0;
+}
+
+ul, ol {
+  text-align: left;
+}
+
+ul ul, ul ol, ol ul, ol ol {
+  padding-bottom: 0;
+  padding-left: 0;
+}
+
+body, .url-variable {
+  background: url(./static/svg/logo.svg);
+}
+
+.alert {
+  border: 1px solid #c6538ce0;
+}
+
+",
+]
+`;
+
+exports[`should extract css with pluginSass in bundle-false 2`] = `
+[
+  "code {
+  padding: .25em;
+  line-height: 0;
+}
+
+",
+  "ul, ol {
+  text-align: left;
+}
+
+ul ul, ul ol, ol ul, ol ol {
+  padding-bottom: 0;
+  padding-left: 0;
+}
+
+",
+  "body {
+  background: url(../static/svg/logo.svg);
+}
+
+",
+  "@import "~lib1/index.css";
+
+code {
+  padding: .25em;
+  line-height: 0;
+}
+
+ul, ol {
+  text-align: left;
+}
+
+ul ul, ul ol, ol ul, ol ol {
+  padding-bottom: 0;
+  padding-left: 0;
+}
+
+body, .url-variable {
+  background: url(./static/svg/logo.svg);
+}
+
+.alert {
+  border: 1px solid #c6538ce0;
+}
+
+",
+]
+`;
+
+exports[`should extract css with pluginSass in bundle-false 4`] = `
+[
+  "code {
+  padding: .25em;
+  line-height: 0;
+}
+
+",
+  "ul, ol {
+  text-align: left;
+}
+
+ul ul, ul ol, ol ul, ol ol {
+  padding-bottom: 0;
+  padding-left: 0;
+}
+
+",
+  "body {
+  background: url(../static/svg/logo.svg);
+}
+
+",
+  "@import "~lib1/index.css";
+
+code {
+  padding: .25em;
+  line-height: 0;
+}
+
+ul, ol {
+  text-align: left;
+}
+
+ul ul, ul ol, ol ul, ol ol {
+  padding-bottom: 0;
+  padding-left: 0;
+}
+
+body, .url-variable {
+  background: url(./static/svg/logo.svg);
+}
+
+.alert {
+  border: 1px solid #c6538ce0;
+}
+
+",
+]
+`;

tests/integration/style/sass/bundle-false/rslib.config.ts

@@ -24,10 +24,12 @@ export default defineConfig({
   ],
   source: {
     entry: {
-      index: ['./src/**/*.scss', './foundation/logo.svg'],
+      index: [
+        '../__fixtures__/src/**/*.scss',
+        '../__fixtures__/foundation/logo.svg',
+      ],
     },
   },
-  root: resolve(__dirname, '../__fixtures__'),
   plugins: [
     pluginSass({
       sassLoaderOptions: {

tests/integration/style/sass/bundle/rslib.config.ts

@@ -12,7 +12,15 @@ export default defineConfig({
   plugins: [
     pluginSass({
       sassLoaderOptions: {
-        additionalData: '$base-color: #c6538c;',
+        additionalData(content, loaderContext) {
+          const contentStr =
+            typeof content === 'string' ? content : content.toString();
+
+          if (loaderContext.resourcePath.endsWith('.scss')) {
+            return `$base-color: #c6538c;${contentStr}`;
+          }
+          return contentStr;
+        },
       },
     }),
   ],

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

@@ -5,42 +5,52 @@ import { expect, test } from 'vitest';
 test('should extract css with pluginSass in bundle', async () => {
   const fixturePath = join(__dirname, 'bundle');
   const { contents } = await buildAndGetResults({ fixturePath, type: 'css' });
-  const esmFiles = Object.keys(contents.esm);
-  expect(esmFiles).toMatchInlineSnapshot(`
+
+  const esmFileNames = Object.keys(contents.esm);
+  const esmFileContents = Object.values(contents.esm);
+  expect(esmFileNames).toMatchInlineSnapshot(`
     [
       "<ROOT>/tests/integration/style/sass/bundle/dist/esm/index.css",
     ]
   `);
 
-  const cjsFiles = Object.keys(contents.cjs);
-  expect(cjsFiles).toMatchInlineSnapshot(`
+  expect(esmFileContents).toMatchSnapshot();
+
+  const cjsFileNames = Object.keys(contents.cjs);
+  const cjsFileContents = Object.values(contents.cjs);
+  expect(cjsFileNames).toMatchInlineSnapshot(`
     [
       "<ROOT>/tests/integration/style/sass/bundle/dist/cjs/index.css",
     ]
   `);
+  expect(cjsFileContents).toMatchSnapshot();
 });
 
 test('should extract css with pluginSass in bundle-false', async () => {
   const fixturePath = join(__dirname, 'bundle-false');
   const { contents } = await buildAndGetResults({ fixturePath, type: 'css' });
-  const esmFiles = Object.keys(contents.esm);
 
-  expect(esmFiles).toMatchInlineSnapshot(`
+  const esmFileNames = Object.keys(contents.esm);
+  const esmFileContents = Object.values(contents.esm);
+  expect(esmFileNames).toMatchInlineSnapshot(`
     [
       "<ROOT>/tests/integration/style/sass/bundle-false/dist/esm/foundation/_code.css",
       "<ROOT>/tests/integration/style/sass/bundle-false/dist/esm/foundation/_lists.css",
       "<ROOT>/tests/integration/style/sass/bundle-false/dist/esm/foundation/index.css",
       "<ROOT>/tests/integration/style/sass/bundle-false/dist/esm/index.css",
     ]
   `);
+  expect(esmFileContents).toMatchSnapshot();
 
-  const cjsFiles = Object.keys(contents.cjs);
-  expect(cjsFiles).toMatchInlineSnapshot(`
+  const cjsFileNames = Object.keys(contents.cjs);
+  const cjsFileContents = Object.values(contents.cjs);
+  expect(cjsFileNames).toMatchInlineSnapshot(`
     [
       "<ROOT>/tests/integration/style/sass/bundle-false/dist/cjs/foundation/_code.css",
       "<ROOT>/tests/integration/style/sass/bundle-false/dist/cjs/foundation/_lists.css",
       "<ROOT>/tests/integration/style/sass/bundle-false/dist/cjs/foundation/index.css",
       "<ROOT>/tests/integration/style/sass/bundle-false/dist/cjs/index.css",
     ]
   `);
+  expect(cjsFileContents).toMatchSnapshot();
 });

tests/integration/style/tailwindcss/bundle-false/postcss.config.ts → tests/integration/style/tailwindcss/bundle-false/postcss.config.cjs

@@ -1,6 +1,6 @@
 const path = require('node:path');
 
-export default {
+module.exports = {
   plugins: {
     tailwindcss: {
       config: path.join(__dirname, './tailwind.config.cjs'),

tests/integration/style/tailwindcss/bundle-false/rslib.config.ts

@@ -10,9 +10,6 @@ export default defineConfig({
       bundle: false,
     }),
   ],
-  tools: {
-    lightningcssLoader: false,
-  },
   output: {
     target: 'web',
   },

tests/integration/style/tailwindcss/bundle/postcss.config.ts → tests/integration/style/tailwindcss/bundle/postcss.config.cjs

@@ -1,6 +1,6 @@
 const path = require('node:path');
 
-export default {
+module.exports = {
   plugins: {
     tailwindcss: {
       config: path.join(__dirname, './tailwind.config.cjs'),

tests/integration/style/tailwindcss/bundle/rslib.config.ts

@@ -8,9 +8,6 @@ export default defineConfig({
       index: ['./src/index.ts'],
     },
   },
-  tools: {
-    lightningcssLoader: false,
-  },
   output: {
     target: 'web',
   },

tests/integration/umd/index.test.ts

@@ -20,7 +20,7 @@ test('throw error when using UMD with `bundle: false`', async () => {
     configPath: './rslibBundleFalse.config.ts',
   });
 
-  expect(build).rejects.toThrowErrorMatchingInlineSnapshot(
+  await expect(build).rejects.toThrowErrorMatchingInlineSnapshot(
     `[Error: When using "umd" format, "bundle" must be set to "true". Since the default value for "bundle" is "true", so you can either explicitly set it to "true" or remove the field entirely.]`,
   );
 });