Component libraries

The css tag throws Unexpected use of `css`. Make sure that solid-styled's plugin is setup correctly. if a module reaches the runtime without passing through the compiler. A library that uses solid-styled has two options.

Option 1: the app compiles the library

• Publish the library sources, with css calls left in place.
• Add the library to the app's filter.include.
• Replace the default filter.exclude, because the default skips all of node_modules.

// vite.config.js
import solid from '@solidjs/vite-plugin';
import solidStyled from 'unplugin-solid-styled';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    solid(),
    solidStyled.vite({
      filter: {
        include: ['src/**/*.{jsx,tsx}', '**/node_modules/my-lib/**/*.{js,jsx,ts,tsx}'],
        exclude: [],
      },
    }),
  ],
  optimizeDeps: {
    exclude: ['my-lib'],
  },
  ssr: {
    noExternal: ['my-lib'],
  },
});

• The **/node_modules/my-lib/** pattern also matches pnpm paths such as node_modules/.pnpm/my-lib@1.0.0/node_modules/my-lib/.
• Vite resolves workspace packages to their real path. For a workspace package, include that path instead, such as ../my-lib/src/**/*.tsx.
• optimizeDeps.exclude stops Vite from pre-bundling the library in dev. Pre-bundled code does not go through Vite plugins.
• ssr.noExternal stops Vite from leaving the library to Node during SSR. External code does not go through Vite plugins either.

Option 2: the library ships compiled output

• Compile the library with unplugin-solid-styled before publishing. The output calls the solid-styled runtime, such as useSolidStyled, instead of css.
• Use a prefix unique to the library, so its scope ids never collide with the app's.
• Keep solid-styled as a peer dependency, so the app and the library share one runtime. With two copies, the app's <StyleRegistry> does not collect the library's sheets.
• Run the plugin on every output the package exports. A JSX output for the solid export condition needs it too.

// rollup.config.js
import solidStyled from 'unplugin-solid-styled';

export default {
  input: 'src/index.tsx',
  external: ['solid-js', '@solidjs/web', 'solid-styled'],
  output: { dir: 'dist', format: 'es' },
  plugins: [
    // Must run before the plugin that compiles JSX.
    solidStyled.rollup({
      prefix: 'my-lib',
      filter: {
        include: 'src/**/*.{jsx,tsx}',
      },
    }),
    // ...then your TypeScript and Solid JSX plugins.
  ],
};

• solidStyled is not a Rollup plugin by itself. Call solidStyled.rollup(options).
• To check a build, search the output for css`. Any match is a module the plugin did not compile.