feat: support css in bundless mode (#206)

Author: SoonIter

.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/README.md renamed to examples/react-component-bundle-false/README.md

@@ -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/package.json

@@ -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/rslib.config.ts

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

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

@@ -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/src/CounterButton.tsx renamed to examples/react-component-bundle-false/src/components/CounterButton/index.tsx

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

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

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