https://github.com/a-x-/postcss-global-nested

Wrap styles into a :global like postcss-nested does it for usual selectors
https://github.com/a-x-/postcss-global-nested

postcss postcss-nested postcss-plugin

Last synced: 3 months ago
JSON representation

Wrap styles into a :global like postcss-nested does it for usual selectors

• Host: GitHub
• URL: https://github.com/a-x-/postcss-global-nested
• Owner: a-x-
• Created: 2017-08-24T14:39:00.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-05-07T03:02:38.000Z (over 1 year ago)
• Last Synced: 2024-09-28T09:22:39.540Z (3 months ago)
• Topics: postcss, postcss-nested, postcss-plugin
• Language: JavaScript
• Homepage: https://npmjs.com/package/postcss-global-nested
• Size: 71.3 KB
• Stars: 1
• Watchers: 2
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# postcss-global-nested [![Build Status](https://travis-ci.org/a-x-/postcss-global-nested.svg?branch=master)](https://travis-ci.org/a-x-/postcss-global-nested)

Wrap styles into a `:global` like [postcss-nested](https://github.com/postcss/postcss-nested) does it for usual selectors.

You should use `:global` as rare as you can.

## usage

test.css:

```css

:global {

  .foo {}

  .bar {}

}

```

### Use it with `postcss`, `postcss-nested` and `webpack`

```json5

{

  loader: 'postcss-loader',

  options: {

    plugins: [

      require('autoprefixer')({

        browsers: ['last 2 version'],

      }),

      require('postcss-nested')({}),

      require('postcss-global-nested')({}),

    ],

  },

}

```

### Use it w/ vanilla `postcss` and `postcss-nested`

```js

import pcss from 'postcss';

import nested from 'postcss-nested';

import globalNested from 'postcss-global-nested';

(async () => {

  const css = await util.promisify(fs.readFile)('test.css', 'utf8');

  const result = await pcss([nested, globalNested]).process(css);

  result.css // -> ':global(.foo) {} :global(.bar) {}'

 })();

```