{"id":22165,"library":"rollup-plugin-postcss-inject-to-css","title":"rollup-plugin-postcss-inject-to-css","description":"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.","status":"maintenance","version":"1.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/heiazu/rollup-plugin-postcss-inject-to-css-","tags":["javascript","postcss"],"install":[{"cmd":"npm install rollup-plugin-postcss-inject-to-css","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-postcss-inject-to-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-postcss-inject-to-css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This plugin depends on the `inject` mode of rollup-plugin-postcss to replace the generated JS wrappers with direct .css imports.","package":"rollup-plugin-postcss","optional":false}],"imports":[{"note":"ESM-only; does not provide a CommonJS export.","wrong":"const rollupPluginPostcssInjectToCss = require('rollup-plugin-postcss-inject-to-css')","symbol":"default","correct":"import rollupPluginPostcssInjectToCss from 'rollup-plugin-postcss-inject-to-css'"},{"note":"Default export only; no named export.","wrong":"import { rollupPluginPostcssInjectToCss } from 'rollup-plugin-postcss-inject-to-css'","symbol":"rollupPluginPostcssInjectToCss","correct":"import rollupPluginPostcssInjectToCss from 'rollup-plugin-postcss-inject-to-css'"},{"note":"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.","wrong":"","symbol":"plugin (in rollup config)","correct":"import rollupPluginPostcssInjectToCss from 'rollup-plugin-postcss-inject-to-css';\nexport default { plugins: [rollupPluginPostcssInjectToCss()] }"}],"quickstart":{"code":"// rollup.config.js\nimport postcss from 'rollup-plugin-postcss';\nimport injectToCss from 'rollup-plugin-postcss-inject-to-css';\n\nexport default {\n  input: 'src/index.js',\n  output: {\n    dir: 'dist',\n    format: 'esm',\n    preserveModules: true,\n  },\n  plugins: [\n    postcss({\n      modules: false,\n      extract: false,\n      inject: true,\n    }),\n    injectToCss(),\n  ],\n};","lang":"javascript","description":"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."},"warnings":[{"fix":"Ensure rollup-plugin-postcss-inject-to-css is listed after rollup-plugin-postcss in the plugins array.","message":"Plugin must be placed after rollup-plugin-postcss in the plugins array; otherwise it will not find the .scss.js files to transform.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Set rollup-plugin-postcss options: { inject: true, extract: false }.","message":"Only works with rollup-plugin-postcss 'inject' mode (inject: true) and extract: false. Incorrect options will cause no transformation.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Consider alternative approaches or fork the plugin to update dependencies.","message":"Package last updated in 2021; no recent maintenance, may not work with newer Rollup or postcss versions.","severity":"deprecated","affected_versions":"1.0.x"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install -D rollup-plugin-postcss-inject-to-css' or use correct import path.","cause":"Package not installed or import path incorrect.","error":"Cannot find module 'rollup-plugin-postcss-inject-to-css'"},{"fix":"Use default import: import injectToCss from 'rollup-plugin-postcss-inject-to-css'","cause":"Using named import instead of default import.","error":"TypeError: (0 , _rollupPluginPostcssInjectToCss.default) is not a function"},{"fix":"Call the default export as a function in plugins array: plugins: [postcss({...}), injectToCss()]","cause":"Called as a function incorrectly or wrong import type.","error":"The plugin 'rollup-plugin-postcss-inject-to-css' does not seem to return a function."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}