rollup-plugin-postcss-inject-to-css

1.0.2 verified Mon Apr 27 auth: no javascript maintenance

A Rollup plugin that transforms .scss.js files generated by rollup-plugin-postcss in inject mode into .css files, enabling proper CSS file imports for on-demand component loading. Currently at v1.0.2, it was last updated in 2021 and appears to be in maintenance mode with no recent commits. It solely depends on rollup-plugin-postcss and is designed for scenarios where `preserveModules` and `babel-plugin-import` are used for component-level code splitting, solving the issue of conflicting style weights between inline <style> tags and <link> imports. Not actively maintained; limited documentation and niche use case.

Common errors

error Cannot find module 'rollup-plugin-postcss-inject-to-css' ↓

cause Package not installed or import path incorrect.

fix

Run 'npm install -D rollup-plugin-postcss-inject-to-css' or use correct import path.

error TypeError: (0 , _rollupPluginPostcssInjectToCss.default) is not a function ↓

cause Using named import instead of default import.

fix

Use default import: import injectToCss from 'rollup-plugin-postcss-inject-to-css'

error The plugin 'rollup-plugin-postcss-inject-to-css' does not seem to return a function. ↓

cause Called as a function incorrectly or wrong import type.

fix

Call the default export as a function in plugins array: plugins: [postcss({...}), injectToCss()]

Warnings

gotcha Plugin must be placed after rollup-plugin-postcss in the plugins array; otherwise it will not find the .scss.js files to transform. ↓

fix Ensure rollup-plugin-postcss-inject-to-css is listed after rollup-plugin-postcss in the plugins array.

gotcha Only works with rollup-plugin-postcss 'inject' mode (inject: true) and extract: false. Incorrect options will cause no transformation. ↓

fix Set rollup-plugin-postcss options: { inject: true, extract: false }.

deprecated Package last updated in 2021; no recent maintenance, may not work with newer Rollup or postcss versions. ↓

fix Consider alternative approaches or fork the plugin to update dependencies.

Install

npm install rollup-plugin-postcss-inject-to-css

yarn add rollup-plugin-postcss-inject-to-css

pnpm add rollup-plugin-postcss-inject-to-css

Imports

default

wrong

const rollupPluginPostcssInjectToCss = require('rollup-plugin-postcss-inject-to-css')

correct

import rollupPluginPostcssInjectToCss from 'rollup-plugin-postcss-inject-to-css'

ESM-only; does not provide a CommonJS export.

rollupPluginPostcssInjectToCss

wrong

import { rollupPluginPostcssInjectToCss } from 'rollup-plugin-postcss-inject-to-css'

correct

import rollupPluginPostcssInjectToCss from 'rollup-plugin-postcss-inject-to-css'

Default export only; no named export.

plugin (in rollup config)
```
import rollupPluginPostcssInjectToCss from 'rollup-plugin-postcss-inject-to-css';
export default { plugins: [rollupPluginPostcssInjectToCss()] }
```
Must be called as a function in the plugins array; the plugin expects the output to be in inject mode and generate .scss.js files.

Quickstart

Configures Rollup to use rollup-plugin-postcss in inject mode and then transforms the generated .scss.js files into .css files for on-demand loading.

// rollup.config.js
import postcss from 'rollup-plugin-postcss';
import injectToCss from 'rollup-plugin-postcss-inject-to-css';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'esm',
    preserveModules: true,
  },
  plugins: [
    postcss({
      modules: false,
      extract: false,
      inject: true,
    }),
    injectToCss(),
  ],
};