Registry / devops / rollup-plugin-postcss-inject-to-css

rollup-plugin-postcss-inject-to-css

library1.0.2jsnpmunverified

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.

devops

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

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-POST

rollup-plugin-postcss-inject-to-css

devopsjavascriptv1.0.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

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

ESM-only; does not provide a CommonJS export.

rollupPluginPostcssInjectToCss

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

✗ 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.

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(), ], };

Debug

Known issues

gotchaPlugin 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.

affects: >=1.0

gotchaOnly 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 }.

affects: >=1.0

deprecatedPackage 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.

affects: 1.0.x

Errors

Common errors & fixes

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

Package not installed or import path incorrect.

fix

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

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

Using named import instead of default import.

fix

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

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

Called as a function incorrectly or wrong import type.

fix

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

Upgrade

Version history

1.0.2latest on npm

Audit

Dependencies

rollup-plugin-postcssrequiredThis plugin depends on the `inject` mode of rollup-plugin-postcss to replace the generated JS wrappers with direct .css imports.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/heiazu/rollup-plugin-postcss-inject-to-css- ↗

packagehttps://www.npmjs.com/package/rollup-plugin-postcss-inject-to-css ↗