How does Rspack handle CSS?

Rspack's CSS processing capability is an important part of its frontend build functionality, providing powerful CSS handling and optimization features. Here's a detailed explanation of Rspack's CSS processing:

CSS Processing Methods

Rspack provides multiple CSS processing methods, allowing you to choose the appropriate solution based on project needs:

1. CSS Modules:

   • Supports modular CSS
   • Automatically generates unique class names
   • Avoids style conflicts

2. CSS-in-JS:

   • Supports various CSS-in-JS libraries
   • Such as styled-components, emotion, etc.
   • Maintains close association between styles and components

3. Native CSS:

   • Supports standard CSS files
   • Supports CSS preprocessors
   • Supports PostCSS

CSS Configuration

Basic Configuration

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

Extract CSS to Separate Files

javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css',
      chunkFilename: 'css/[id].[contenthash].css'
    })
  ]
}

CSS Modules Configuration

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]--[hash:base64:5]'
              }
            }
          }
        ]
      }
    ]
  }
}

CSS Preprocessor Support

Rspack supports multiple CSS preprocessors:

Sass/SCSS

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

Less

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}

Stylus

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader'
        ]
      }
    ]
  }
}

PostCSS Integration

PostCSS is a powerful CSS processing tool, and Rspack can easily integrate it:

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer'),
                  require('cssnano')
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

PostCSS Configuration File

Create postcss.config.js:

javascript
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['> 1%', 'last 2 versions']
    }),
    require('cssnano')({
      preset: 'default'
    })
  ]
}

CSS Optimization

Rspack provides multiple CSS optimization features:

1. Code Minification:

   • Use cssnano to compress CSS
   • Remove comments and whitespace
   • Optimize selectors

2. Deduplication:

   • Remove duplicate style rules
   • Merge identical declarations
   • Reduce final bundle size

3. Tree Shaking:

   • Remove unused CSS
   • Analyze class name references in JavaScript
   • Keep only used styles

CSS Optimization Configuration

javascript
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            'default',
            {
              discardComments: { removeAll: true },
              normalizeWhitespace: false
            }
          ]
        }
      })
    ]
  }
}

CSS-in-JS Support

Rspack provides good support for various CSS-in-JS libraries:

styled-components

javascript
// Install dependencies
// npm install styled-components babel-plugin-styled-components

// Configuration
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              transform: {
                react: {
                  runtime: 'automatic'
                }
              }
            }
          }
        }
      }
    ]
  }
}

emotion

javascript
// Install dependencies
// npm install @emotion/react @emotion/styled

// Configuration
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              transform: {
                react: {
                  runtime: 'automatic',
                  importSource: '@emotion/react'
                }
              }
            }
          }
        }
      }
    ]
  }
}

CSS Loading Optimization

1. On-demand Loading:

   • Use dynamic imports to load CSS
   • Reduce initial CSS load size
   • Improve first-screen load speed

2. Critical CSS:

   • Extract critical CSS and inline it in HTML
   • Asynchronously load non-critical CSS
   • Optimize rendering performance

3. CSS Caching:

   • Use contenthash to generate filenames
   • Utilize browser caching
   • Reduce redundant downloads

Best Practices

1. Choose Appropriate CSS Solution:

   • Small projects: Use native CSS or CSS Modules
   • Medium projects: Consider CSS Modules or CSS-in-JS
   • Large projects: Recommend CSS-in-JS or design systems

2. Optimize CSS Size:

   • Remove unused CSS
   • Compress CSS files
   • Merge duplicate styles

3. Improve Load Performance:

   • Load CSS on demand
   • Inline critical CSS
   • Use CDN acceleration

4. Maintainability Considerations:

   • Use CSS Modules to avoid conflicts
   • Use preprocessors to improve maintainability
   • Establish unified CSS standards

Rspack's CSS processing features provide developers with flexible and powerful style handling capabilities. Through reasonable configuration and optimization, you can build high-performance, maintainable frontend applications.