postcss-global-nested

PostCSS plugin to better support Svelte's :global in nesting [context]

button {
    & > :global-nested(.foo) {
        &:focus {
            outline: #f66 dashed;
        }
    }
}

button > :global(.foo:focus) {
    outline: #f66 dashed;
}

Limitations

When :global-nested is the first selector, it is just replaced by :global without wrapping the nested selectors. A warning will be shown.

Usage

Step 1: Install plugin:

npm install --save-dev @oat-sa/postcss-global-nested

Step 2: Configure it

For example with postcss-preset-env:

module.exports = {
  plugins: [
    require('postcss-preset-env')({
        stage: 1,
        features: {
            'nesting-rules': {
                noIsPseudoSelector: true
            }
        },
        insertAfter: {
            'nesting-rules': require('postcss-global-nested')
        }
    })
    require('autoprefixer')
  ]
}

Options

• globalNestedPseudo : the pattern to search for, :global-nested by default
• globalPseudo : the replacement pseudo for the wrapper, :global by default

License

Copyright (c) 2022 Open Assessment Technologies SA

Licensed under the terms of the GNU GPL v2