{"id":21700,"library":"postcss-nested-once","title":"postcss-nested-once","description":"PostCSS plugin that unwraps nested CSS rules (Sass-like), specifically designed to work correctly with CSS Modules in rollup-plugin-styles. Version 1.0.0, stable. Unlike postcss-nested, it processes nested selectors with the ampersand (&) before CSS Modules scope resolution, ensuring exported class names like `list_item` are generated correctly. It uses the Once hook and the `@nest` at-rule behavior. Ships TypeScript types.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/k-g-a/postcss-nested-once","tags":["javascript","postcss","css","postcss-plugin","postcss-nested","sass","nested","typescript"],"install":[{"cmd":"npm install postcss-nested-once","lang":"bash","label":"npm"},{"cmd":"yarn add postcss-nested-once","lang":"bash","label":"yarn"},{"cmd":"pnpm add postcss-nested-once","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency, requires ^8.3.5","package":"postcss","optional":false}],"imports":[{"note":"Default export is a function that creates the PostCSS plugin.","wrong":"const postcssNestedOnce = require('postcss-nested-once').default","symbol":"default","correct":"import postcssNestedOnce from 'postcss-nested-once'"},{"note":"Must be called as a function to produce a plugin instance; passing the function directly will error.","wrong":"postcssNestedOnce (without calling as function)","symbol":"n/a (plugin factory)","correct":"postcssNestedOnce() in PostCSS plugins array"},{"note":"CJS import is straightforward; using .default is incorrect and yields undefined.","wrong":"const postcssNestedOnce = require('postcss-nested-once').default","symbol":"n/a (CommonJS)","correct":"const postcssNestedOnce = require('postcss-nested-once')"}],"quickstart":{"code":"// rollup.config.js\nimport styles from 'rollup-plugin-styles';\nimport postcssNestedOnce from 'postcss-nested-once';\n\nexport default {\n  plugins: [\n    styles({\n      mode: 'inject',\n      modules: true,\n      plugins: [\n        postcssNestedOnce(),\n      ],\n    }),\n  ],\n};","lang":"javascript","description":"Shows how to configure rollup-plugin-styles with postcss-nested-once for CSS Modules support with nested ampersand selectors."},"warnings":[{"fix":"Ensure plugin order: nested-once before modules scope resolution.","message":"Only works correctly when placed before CSS Modules plugins in the PostCSS pipeline (as done in rollup-plugin-styles). If used outside that context, behavior may differ.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Test your CSS; for full Sass nesting, use postcss-nested instead.","message":"Does not support all Sass-like nesting features. It focuses on ampersand-combined selectors (e.g., `&_item`). Complex nested rules without ampersand may not behave as expected.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update postcss to ^8.3.5.","message":"Requires PostCSS 8.3.5 or higher. Older PostCSS versions will not work.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Install: npm install postcss-nested-once --save-dev","cause":"Package not installed or incorrect import path.","error":"Cannot find module 'postcss-nested-once'"},{"fix":"Use postcssNestedOnce() (with parentheses) in plugins array.","cause":"Importing the package but not calling it as a function.","error":"TypeError: postcssNestedOnce is not a function"},{"fix":"Replace postcss-nested with postcss-nested-once in plugins.","cause":"Using postcss-nested instead of postcss-nested-once; ampersand-combined selectors not generating correct class names.","error":"Cannot read properties of undefined (reading 'list_item')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}