Registry / devops / postcss-nested-once

postcss-nested-once

library1.0.0jsnpmunverified

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.

devops

npm install postcss-nested-once

github ↗package ↗

INSTALL

IMPORT

SIG · POSTCSS-NESTED-ONC

postcss-nested-once

devopsjavascriptv1.0.0

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 postcssNestedOnce from 'postcss-nested-once'

✗ const postcssNestedOnce = require('postcss-nested-once').default

Default export is a function that creates the PostCSS plugin.

n/a (plugin factory)

✓ postcssNestedOnce() in PostCSS plugins array

✗ postcssNestedOnce (without calling as function)

Must be called as a function to produce a plugin instance; passing the function directly will error.

n/a (CommonJS)

✓ const postcssNestedOnce = require('postcss-nested-once')

✗ const postcssNestedOnce = require('postcss-nested-once').default

CJS import is straightforward; using .default is incorrect and yields undefined.

Shows how to configure rollup-plugin-styles with postcss-nested-once for CSS Modules support with nested ampersand selectors.

// rollup.config.js import styles from 'rollup-plugin-styles'; import postcssNestedOnce from 'postcss-nested-once'; export default { plugins: [ styles({ mode: 'inject', modules: true, plugins: [ postcssNestedOnce(), ], }), ], };

Debug

Known issues

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

fix

Ensure plugin order: nested-once before modules scope resolution.

affects: >=1.0.0

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

fix

Test your CSS; for full Sass nesting, use postcss-nested instead.

affects: >=1.0.0

gotchaRequires PostCSS 8.3.5 or higher. Older PostCSS versions will not work.

fix

Update postcss to ^8.3.5.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot find module 'postcss-nested-once'

Package not installed or incorrect import path.

fix

Install: npm install postcss-nested-once --save-dev

TypeError: postcssNestedOnce is not a function

Importing the package but not calling it as a function.

fix

Use postcssNestedOnce() (with parentheses) in plugins array.

Cannot read properties of undefined (reading 'list_item')

Using postcss-nested instead of postcss-nested-once; ampersand-combined selectors not generating correct class names.

fix

Replace postcss-nested with postcss-nested-once in plugins.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

postcssrequiredpeer dependency, requires ^8.3.5

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/k-g-a/postcss-nested-once ↗

packagehttps://www.npmjs.com/package/postcss-nested-once ↗