feat: support css

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

@@ -0,0 +1,16 @@
+{
+ "name": "@examples/react-component-bundle-false",
+ "private": true,
+ "scripts": {
+ "build": "rslib build"
+ },
+ "devDependencies": {
+ "@rsbuild/plugin-react": "1.0.1-rc.4",
+ "@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,53 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+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,
+ // },
+ ],
+ // tools: {
+ // bundlerChain(config, {CHAIN_ID}) {
+ // const cssExtract = CHAIN_ID.PLUGIN.MINI_CSS_EXTRACT
+ // config.plugins.delete(cssExtract)
+
+ // },
+ // cssExtract: {
+ // loaderOptions: {
+ // rootDir: './src',
+ // },
+ // },
+ // },
+ plugins: [pluginReact()],
+});

examples/react-component-bundle-false/src/CounterButton.module.css

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

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

@@ -1,3 +1,4 @@
+import styles from './CounterButton.module.css';
 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.css' {
+ const classes: { [key: string]: string };
+ export default classes;
+}

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

@@ -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/src/reset.css

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

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

@@ -0,0 +1,7 @@
+{
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "strict": true
+ },
+ "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,
  "scripts": {
  "build": "rslib build"

examples/react-component-bundle/src/CounterButton.module.css

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

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

@@ -0,0 +1,14 @@
+import styles from './CounterButton.module.css';
+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.css' {
+ const classes: { [key: string]: string };
+ export default classes;
+}

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

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

examples/react-component-bundle/src/reset.css

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

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 };
+};

packages/core/package.json

@@ -38,6 +38,7 @@
  },
  "dependencies": {
  "@rsbuild/core": "1.0.4",
+ "@rslib/lib-css-extract-loader": "workspace:*",
  "rsbuild-plugin-dts": "workspace:*"
  },
  "devDependencies": {

packages/core/src/config.ts

@@ -1,4 +1,5 @@
 import fs from 'node:fs';
+import { createRequire } from 'node:module';
 import path, { dirname, extname, isAbsolute, join } from 'node:path';
 import {
  type RsbuildConfig,
@@ -9,6 +10,7 @@ import {
  mergeRsbuildConfig,
  rspack,
 } from '@rsbuild/core';
+import type { RsbuildPlugin } from '@rsbuild/core';
 import glob from 'fast-glob';
 import {
  DEFAULT_CONFIG_NAME,
@@ -47,6 +49,8 @@ import {
 } from './utils/syntax';
 import { loadTsconfig } from './utils/tsconfig';
 
+const require = createRequire(import.meta.url);
+
 /**
  * This function helps you to autocomplete configuration types.
  * It accepts a Rslib config object, or a function that returns a config.
@@ -605,6 +609,41 @@ const composeSyntaxConfig = (
  };
 };
 
+const pluginName = 'rsbuild:lib-css';
+
+const pluginLibCss = (rootDir: string): RsbuildPlugin => ({
+ name: pluginName,
+ setup(api) {
+ api.modifyBundlerChain((config, { CHAIN_ID }) => {
+ const cssExtract = CHAIN_ID.PLUGIN.MINI_CSS_EXTRACT;
+ config.plugins.delete(cssExtract);
+
+ for (const ruleId of [
+ CHAIN_ID.RULE.CSS,
+ CHAIN_ID.RULE.SASS,
+ CHAIN_ID.RULE.LESS,
+ CHAIN_ID.RULE.STYLUS,
+ ]) {
+ const rule = config.module.rule(ruleId);
+ if (rule.uses.has(CHAIN_ID.USE.MINI_CSS_EXTRACT)) {
+ rule
+ .use(CHAIN_ID.USE.MINI_CSS_EXTRACT)
+ .loader(require.resolve('@rslib/lib-css-extract-loader'))
+ .options({
+ rootDir,
+ });
+ }
+ }
+ });
+ },
+});
+
+const composeCssConfig = (rootDir: string): RsbuildConfig => {
+ return {
+ plugins: [pluginLibCss(rootDir)],
+ };
+};
+
 const composeEntryConfig = async (
  entries: NonNullable<RsbuildConfig['source']>['entry'],
  bundle: LibConfig['bundle'],
@@ -665,11 +704,16 @@ const composeEntryConfig = async (
  }
  }
 
- return {
+ const lcp = await calcLongestCommonPath(Object.values(resolvedEntries));
+ const cssConfig = composeCssConfig(lcp === null ? root : lcp);
+
+ const entryConfig: RsbuildConfig = {
  source: {
  entry: resolvedEntries,
  },
  };
+
+ return mergeRsbuildConfig(entryConfig, cssConfig);
 };
 
 const composeBundleConfig = (
@@ -691,8 +735,12 @@ const composeBundleConfig = (
  // If data.request already have an extension, we replace it with new extension
  // This may result in a change in semantics,
  // user should use copy to keep origin file or use another separate entry to deal this
- let request = data.request;
+ let request: string = data.request;
  if (request[0] === '.') {
+ if (request.includes('compiled/css-loader')) {
+ return callback();
+ }
+
  request = extname(request)
  ? request.replace(/\.[^.]+$/, jsExtension)
  : `${request}${jsExtension}`;

packages/core/src/types/config/index.ts

@@ -49,11 +49,19 @@ export type BannerAndFooter = {
  dts?: string;
 };
 
+// export type Redirect = {
+// alias?: boolean;
+// style?: boolean;
+// asset?: boolean;
+// autoExtension?: boolean;
+// };
+
 export interface LibConfig extends RsbuildConfig {
  bundle?: boolean;
  format?: Format;
  autoExtension?: boolean;
  autoExternal?: AutoExternal;
+ // redirect?: Redirect;
  /** Support esX and browserslist query */
  syntax?: Syntax;
  externalHelpers?: boolean;

packages/lib-css-extract-loader/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present Bytedance, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/lib-css-extract-loader/README.md

@@ -0,0 +1,19 @@
+<picture>
+ <img alt="Rslib Banner" src="https://assets.rspack.dev/rslib/rslib-banner.png">
+</picture>
+
+# Rslib
+
+Rslib is a library build tool powered by [Rsbuild](https://rsbuild.dev). It allows library developers to leverage the knowledge and ecosystem of webpack and Rspack.
+
+<!-- ## Documentation
+
+https://rslib.dev/ -->
+
+## Contributing
+
+Please read the [Contributing Guide](https://github.com/web-infra-dev/rslib/blob/main/CONTRIBUTING.md).
+
+## License
+
+Rslib is [MIT licensed](https://github.com/web-infra-dev/rslib/blob/main/LICENSE).