CSS-No-Bundle for Vite

⚡ Use [Vite] for building without the bundling part.

🔥 Supports outputting independent css files for better tree shaking.

🚩 Supported output formats: es, cjs.

📝 vite-plugin-css-no-bundle requires Vite 5.

✅ Only support vite lib mode.

✅ Support style file: *.css, *.scss.

Installation

npm install -D vite-plugin-css-no-bundle

yarn add -D vite-plugin-css-no-bundle

pnpm install -D vite-plugin-css-no-bundle

Example

Here is a simple example to illustrate the effect of the plugin.

Project:
App.ts (import "app.css";)

app.css

When this plugin is not used, compiled result:

styles.css

App.js

Caller needs to manually import styles.css

When use vite-plugin-css-no-bundle, compiled result:

App.js (import "app.css.js";)

app.css.js (import "app.css";)

app.css

Advantage

More compiler friendly, supports on-demand loading, and does not require the caller to manually import style files.

Usage

Only support lib mode.

Usually, you can used with vite-plugin-css-no-bundle v4 plugin.

You need to put your local css file inside build.lib.entry.

import { defineConfig } from 'vite';
import noBundlePlugin from 'vite-plugin-no-bundle';
import noBundleCSSPlugin from 'vite-plugin-css-no-bundle';
import glob from 'fast-glob';

export default defineConfig({
  build: {
    lib: {
        formats: ['es', 'cjs'],
        entry: await glob('**/*.{.js,ts,tsx,css}', {
            cwd: path.resolve(__dirname, 'src'),
            absolute: true,
            onlyFiles: true,
        }),
        fileName: ()=> '[format]/[name].js',
    },
  },
  plugins: [
      noBundlePlugin(),
      noBundleCSSPlugin(),
  ],
});

Css in JS

Full support @linaria/core.

Supports using CSS in JS in lib mode with zero dependencies.

For more information, please refer to https://github.com/callstack/linaria

Demo

import {defineConfig} from 'vite';
import noBundlePlugin from 'vite-plugin-no-bundle';
import noBundleCSSPlugin from 'vite-plugin-css-no-bundle';
import dts from 'vite-plugin-dts';
import wyw from '@wyw-in-js/vite';
import * as path from 'path';
import glob from 'fast-glob';

export default defineConfig({
    mode: 'dev',
    build: {
        lib: {
            formats: ['es', 'cjs'],
            entry: await glob('**/*.{.js,ts,tsx,css}', {
                cwd: path.resolve(__dirname, 'src'),
                absolute: true,
                onlyFiles: true,
            }),
            fileName: ()=> '[format]/[name].js',
        },
        outDir: '.',
        minify: false,
    },
    plugins: [
        wyw({
            include: ['**/*.{ts,tsx}'],
            babelOptions: {
                presets: ['@babel/preset-typescript', '@babel/preset-react'],
            },
        }),
        noBundlePlugin(),
        noBundleCSSPlugin(),
        dts({
            include: [path.resolve(__dirname, 'src')],
            entryRoot: path.resolve(__dirname, 'src'),
            root: '.',
            outDir: ['es','cjs'],
            strictOutput: true,
        }),
    ],
});