chore: init basic needs

Author: SoonIter

e2e/cases/style/css/__fixtures__/src/import.css

@@ -0,0 +1,8 @@
+@import 'https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.css';
+@import url('https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.css');
+@import url('lib1.css');
+@import 'lib2.css';
+
+.import {
+  background-image: url('https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.css');
+}

e2e/cases/style/css/__fixtures__/src/lib1.css

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

e2e/cases/style/css/__fixtures__/src/lib2.css

@@ -0,0 +1,3 @@
+.lib2 {
+  color: green;
+}

e2e/cases/style/css/__fixtures__/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@rslib/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": "./"
+  },
+  "include": ["src"]
+}

e2e/cases/style/css/bundle-false/package.json

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

e2e/cases/style/css/bundle-false/rslib.config.ts

@@ -0,0 +1,14 @@
+import { generateBundleCjsConfig, generateBundleEsmConfig } from '@e2e/helper';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  lib: [
+    generateBundleEsmConfig({ bundle: false }),
+    generateBundleCjsConfig({ bundle: false }),
+  ],
+  source: {
+    entry: {
+      index: ['../__fixtures__/src/**/*.css'],
+    },
+  },
+});

e2e/cases/style/css/bundle/package.json

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

e2e/cases/style/css/bundle/rslib.config.ts

@@ -0,0 +1,11 @@
+import { generateBundleCjsConfig, generateBundleEsmConfig } from '@e2e/helper';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  lib: [generateBundleEsmConfig(), generateBundleCjsConfig()],
+  source: {
+    entry: {
+      index: '../__fixtures__/src/import.css',
+    },
+  },
+});

e2e/cases/style/css/index.test.ts

@@ -0,0 +1,44 @@
+import { join } from 'node:path';
+import { buildAndGetResults } from '@e2e/helper';
+import { expect, test } from 'vitest';
+
+test('should extract css when set bundle: true', async () => {
+  const fixturePath = join(__dirname, 'bundle');
+  const { contents } = await buildAndGetResults(fixturePath, 'css');
+  const esmFiles = Object.keys(contents.esm);
+  expect(esmFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/cases/style/css/bundle/dist/esm/static/css/index.css",
+    ]
+  `);
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/cases/style/css/bundle/dist/cjs/static/css/index.css",
+    ]
+  `);
+});
+
+test('should extract css when set 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>/cases/style/css/bundle-false/dist/esm/import.css",
+      "<ROOT>/cases/style/css/bundle-false/dist/esm/lib1.css",
+      "<ROOT>/cases/style/css/bundle-false/dist/esm/lib2.css",
+    ]
+  `);
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/cases/style/css/bundle-false/dist/cjs/import.css",
+      "<ROOT>/cases/style/css/bundle-false/dist/cjs/lib1.css",
+      "<ROOT>/cases/style/css/bundle-false/dist/cjs/lib2.css",
+    ]
+  `);
+});

e2e/cases/style/sass/__fixtures__/.gitignore

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

e2e/cases/style/sass/__fixtures__/node_modules/lib1/index.css

@@ -0,0 +1,4 @@
+code {
+  padding: 0.25em;
+  line-height: 0;
+}

e2e/cases/style/sass/__fixtures__/node_modules/lib1/package.json

@@ -0,0 +1,11 @@
+ul,
+ol {
+  text-align: left;
+
+  & & {
+    padding: {
+      bottom: 0;
+      left: 0;
+    }
+  }
+}

e2e/cases/style/sass/__fixtures__/src/foundation/_code.scss

@@ -0,0 +1,3 @@
+body {
+  // background: url(./logo.svg);
+}

e2e/cases/style/sass/__fixtures__/src/foundation/_lists.scss

@@ -0,0 +1,16 @@
+@import 'foundation/code', 'foundation/lists';
+// TODO: Error: Sass variables aren't allowed in plain CSS.
+// @import '~lib1/index.css';
+@import './foundation/index.scss';
+
+// TODO: asset support
+// $url: './foundation/logo.svg';
+$border-dark: rgba($base-color, 0.88);
+
+// .url-variable {
+//   background: url($url);
+// }
+
+.alert {
+  border: 1px solid $border-dark;
+}

e2e/cases/style/sass/__fixtures__/src/foundation/index.scss

@@ -0,0 +1,5 @@
+{
+  "name": "sass-bundle-false-test",
+  "version": "1.0.0",
+  "private": true
+}

e2e/cases/style/sass/__fixtures__/src/foundation/logo.svg

@@ -0,0 +1,27 @@
+import { generateBundleCjsConfig, generateBundleEsmConfig } from '@e2e/helper';
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  lib: [
+    generateBundleEsmConfig({ bundle: false }),
+    generateBundleCjsConfig({ bundle: false }),
+  ],
+  tools: {},
+  source: {
+    entry: {
+      index: [
+        '../__fixtures__/src/**/*.scss',
+        // TODO: assets support
+        // '../__fixtures__/foundation/logo.svg'
+      ],
+    },
+  },
+  plugins: [
+    pluginSass({
+      sassLoaderOptions: {
+        additionalData: '$base-color: #c6538c;',
+      },
+    }),
+  ],
+});

e2e/cases/style/sass/__fixtures__/src/index.scss

@@ -0,0 +1,5 @@
+{
+  "name": "sass-bundle-test",
+  "version": "1.0.0",
+  "private": true
+}

e2e/cases/style/sass/bundle-false/package.json

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

e2e/cases/style/sass/bundle-false/rslib.config.ts

@@ -0,0 +1,44 @@
+import { join } from 'node:path';
+import { buildAndGetResults } from '@e2e/helper';
+import { expect, test } from 'vitest';
+
+test('should extract css with pluginSass when set bundle: true', async () => {
+  const fixturePath = join(__dirname, 'bundle');
+  const { contents } = await buildAndGetResults(fixturePath, 'css');
+  const esmFiles = Object.keys(contents.esm);
+  expect(esmFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/cases/style/sass/bundle/dist/esm/static/css/index.css",
+    ]
+  `);
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/cases/style/sass/bundle/dist/cjs/static/css/index.css",
+    ]
+  `);
+});
+
+test('should extract css with pluginSass when set 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>/cases/style/sass/bundle-false/dist/esm/foundation/_code.css",
+      "<ROOT>/cases/style/sass/bundle-false/dist/esm/foundation/_lists.css",
+      "<ROOT>/cases/style/sass/bundle-false/dist/esm/index.css",
+    ]
+  `);
+
+  const cjsFiles = Object.keys(contents.cjs);
+  expect(cjsFiles).toMatchInlineSnapshot(`
+    [
+      "<ROOT>/cases/style/sass/bundle-false/dist/cjs/foundation/_code.css",
+      "<ROOT>/cases/style/sass/bundle-false/dist/cjs/foundation/_lists.css",
+      "<ROOT>/cases/style/sass/bundle-false/dist/cjs/index.css",
+    ]
+  `);
+});

e2e/cases/style/sass/bundle/package.json

@@ -12,6 +12,7 @@
     "@e2e/helper": "workspace:*",
     "@playwright/test": "1.47.2",
     "@rsbuild/core": "1.0.5",
+    "@rsbuild/plugin-sass": "1.0.1",
     "@rslib/core": "workspace:*",
     "@rslib/tsconfig": "workspace:*",
     "@types/fs-extra": "^11.0.4",

e2e/cases/style/sass/bundle/rslib.config.ts

@@ -0,0 +1,17 @@
+{
+  "name": "@examples/react-component-bundle-false-sass",
+  "private": true,
+  "scripts": {
+    "build": "rslib build"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "1.0.2",
+    "@rsbuild/plugin-sass": "1.0.1",
+    "@rslib/core": "workspace:*",
+    "@types/react": "^18.3.5",
+    "react": "^18.3.1"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}

e2e/cases/style/sass/index.test.ts

@@ -0,0 +1,47 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { type LibConfig, defineConfig } from '@rslib/core';
+
+const shared: LibConfig = {
+  bundle: false,
+};
+
+export default defineConfig({
+  source: {
+    entry: {
+      index: ['./src/**', '!./src/env.d.ts'],
+    },
+  },
+  lib: [
+    {
+      ...shared,
+      format: 'esm',
+      output: {
+        distPath: {
+          root: './dist/esm',
+          // css: '.',
+          // cssAsync: '.',
+        },
+      },
+      bundle: false,
+    },
+    {
+      ...shared,
+      format: 'cjs',
+      output: {
+        distPath: {
+          root: './dist/cjs',
+          css: '.',
+          cssAsync: '.',
+        },
+      },
+      bundle: false,
+    },
+  ],
+  plugins: [pluginReact(), pluginSass()],
+  output: {
+    cssModules: {
+      localIdentName: '[hash:base64:4]',
+    },
+  },
+});

e2e/package.json

@@ -0,0 +1,3 @@
+.button {
+  background: blue;
+}

examples/react-component/README.md renamed to examples/react-component-bundle-false-sass/README.md

@@ -0,0 +1,14 @@
+import styles from './CounterButton.module.scss';
+interface CounterButtonProps {
+  onClick: () => void;
+  label: string;
+}
+
+export const CounterButton: React.FC<CounterButtonProps> = ({
+  onClick,
+  label,
+}) => (
+  <button type="button" className={styles.button} onClick={onClick}>
+    {label}
+  </button>
+);

examples/react-component-bundle-false-sass/package.json

@@ -0,0 +1,9 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

examples/react-component-bundle-false-sass/rslib.config.ts

@@ -1,5 +1,6 @@
 import { CounterButton } from './CounterButton';
 import { useCounter } from './useCounter';
+import './reset.css';
 
 export const Counter: React.FC = () => {
   const { count, increment, decrement } = useCounter();

examples/react-component-bundle-false-sass/src/CounterButton.module.scss

@@ -0,0 +1,3 @@
+.body {
+  background: red;
+}

examples/react-component-bundle-false-sass/src/CounterButton.tsx

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src/**/*"]
+}