feat: support css in bundless mode (#206)

.prettierignore

@@ -7,4 +7,7 @@ doc_build
 **/*.js
 **/*.ts
 **/*.jsx
-**/*.tsx
+**/*.tsx
+
+# ignore pnpm-lock
+pnpm-lock.yaml

.vscode/settings.json

@@ -38,5 +38,14 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[sass]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[less]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "typescript.tsdk": "node_modules/typescript/lib"
 }

biome.json

@@ -34,6 +34,11 @@
       "enabled": false
     }
   },
+  "css": {
+    "formatter": {
+      "enabled": false
+    }
+  },
   "linter": {
     "enabled": true,
     "ignore": ["./tests/integration/**/*/src/*"],

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

@@ -0,0 +1,20 @@
+{
+  "name": "@examples/react-component-bundle-false",
+  "private": true,
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/cjs/index.d.ts",
+  "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": "*"
+  }
+}

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

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

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

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

examples/react-component/src/CounterButton.tsx → examples/react-component-bundle-false/src/components/CounterButton/index.tsx

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

examples/react-component-bundle-false/src/env.d.ts

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

examples/react-component-bundle-false/src/index.scss

@@ -0,0 +1,3 @@
+.counter-text {
+  font-size: 50px;
+}

examples/react-component/src/index.tsx → examples/react-component-bundle-false/src/index.tsx

@@ -1,12 +1,13 @@
-import { CounterButton } from './CounterButton';
+import { CounterButton } from './components/CounterButton/index';
 import { useCounter } from './useCounter';
+import './index.scss';
 
 export const Counter: React.FC = () => {
   const { count, increment, decrement } = useCounter();
 
   return (
     <div>
-      <h2>Counter: {count}</h2>
+      <h2 className="counter-text">Counter: {count}</h2>
       <CounterButton onClick={decrement} label="-" />
       <CounterButton onClick={increment} label="+" />
     </div>

examples/react-component-bundle-false/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": ".",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "exclude": ["**/node_modules"],
+  "include": ["src"]
+}

examples/react-component-bundle/README.md

@@ -0,0 +1,3 @@
+# @examples/react-component
+
+This example demonstrates how to use Rslib to build a simple React component.

examples/react-component/package.json → examples/react-component-bundle/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@examples/react-component",
+  "name": "@examples/react-component-bundle",
   "private": true,
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.mjs",
@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@rsbuild/plugin-react": "1.0.3",
+    "@rsbuild/plugin-sass": "^1.0.1",
     "@rslib/core": "workspace:*",
     "@types/react": "^18.3.11",
     "react": "^18.3.1"

examples/react-component/rslib.config.ts → examples/react-component-bundle/rslib.config.ts

@@ -1,4 +1,5 @@
 import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginSass } from '@rsbuild/plugin-sass';
 import { defineConfig } from '@rslib/core';
 
 const shared = {
@@ -15,6 +16,8 @@ export default defineConfig({
       output: {
         distPath: {
           root: './dist/esm',
+          css: '.',
+          cssAsync: '.',
         },
       },
     },
@@ -24,9 +27,11 @@ export default defineConfig({
       output: {
         distPath: {
           root: './dist/cjs',
+          css: '.',
+          cssAsync: '.',
         },
       },
     },
   ],
-  plugins: [pluginReact()],
+  plugins: [pluginReact(), pluginSass()],
 });

examples/react-component-bundle/src/components/CounterButton/index.module.scss

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

examples/react-component-bundle/src/components/CounterButton/index.tsx

@@ -0,0 +1,14 @@
+import styles from './index.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/src/env.d.ts

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

examples/react-component-bundle/src/index.scss

@@ -0,0 +1,3 @@
+.counter-text {
+  font-size: 50px;
+}

examples/react-component-bundle/src/index.tsx

@@ -0,0 +1,15 @@
+import { CounterButton } from './components/CounterButton/index';
+import { useCounter } from './useCounter';
+import './index.scss';
+
+export const Counter: React.FC = () => {
+  const { count, increment, decrement } = useCounter();
+
+  return (
+    <div>
+      <h2 className="counter-text">Counter: {count}</h2>
+      <CounterButton onClick={decrement} label="-" />
+      <CounterButton onClick={increment} label="+" />
+    </div>
+  );
+};

examples/react-component-bundle/src/useCounter.tsx

@@ -0,0 +1,10 @@
+import { useState } from 'react';
+
+export const useCounter = (initialValue = 0) => {
+  const [count, setCount] = useState(initialValue);
+
+  const increment = () => setCount((prev) => prev + 1);
+  const decrement = () => setCount((prev) => prev - 1);
+
+  return { count, increment, decrement };
+};

examples/react-component-bundle/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": ".",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "exclude": ["**/node_modules"],
+  "include": ["src"]
+}

packages/core/package.json

@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@rslib/tsconfig": "workspace:*",
+    "@rspack/core": "1.0.8",
     "@types/fs-extra": "^11.0.4",
     "commander": "^12.1.0",
     "fast-glob": "^3.3.2",

packages/core/rslib.config.ts

@@ -12,6 +12,10 @@ export default defineConfig({
     },
   ],
   source: {
+    entry: {
+      index: './src/index.ts',
+      libCssExtractLoader: './src/css/libCssExtractLoader.ts',
+    },
     define: {
       RSLIB_VERSION: JSON.stringify(require('./package.json').version),
     },