postcss-nested 6.0.1 → 6.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +26 -27
  2. package/index.js +18 -18
  3. package/package.json +12 -6
package/README.md CHANGED
@@ -8,25 +8,25 @@
8
8
 
9
9
  ```css
10
10
  .phone {
11
- &_title {
12
- width: 500px;
13
- @media (max-width: 500px) {
14
- width: auto;
15
- }
16
- body.is_dark & {
17
- color: white;
18
- }
11
+ &_title {
12
+ width: 500px;
13
+ @media (max-width: 500px) {
14
+ width: auto;
19
15
  }
20
- img {
21
- display: block;
16
+ body.is_dark & {
17
+ color: white;
22
18
  }
19
+ }
20
+ img {
21
+ display: block;
22
+ }
23
23
  }
24
24
 
25
25
  .title {
26
26
  font-size: var(--font);
27
27
 
28
28
  @at-root html {
29
- --font: 16px
29
+ --font: 16px;
30
30
  }
31
31
  }
32
32
  ```
@@ -35,39 +35,39 @@ will be processed to:
35
35
 
36
36
  ```css
37
37
  .phone_title {
38
- width: 500px;
38
+ width: 500px;
39
39
  }
40
40
  @media (max-width: 500px) {
41
- .phone_title {
42
- width: auto;
43
- }
41
+ .phone_title {
42
+ width: auto;
43
+ }
44
44
  }
45
45
  body.is_dark .phone_title {
46
- color: white;
46
+ color: white;
47
47
  }
48
48
  .phone img {
49
- display: block;
49
+ display: block;
50
50
  }
51
51
 
52
52
  .title {
53
53
  font-size: var(--font);
54
54
  }
55
55
  html {
56
- --font: 16px
56
+ --font: 16px;
57
57
  }
58
58
  ```
59
59
 
60
60
  Related plugins:
61
61
 
62
- * Use [`postcss-current-selector`] **after** this plugin if you want
62
+ - Use [`postcss-current-selector`] **after** this plugin if you want
63
63
  to use current selector in properties or variables values.
64
- * Use [`postcss-nested-ancestors`] **before** this plugin if you want
64
+ - Use [`postcss-nested-ancestors`] **before** this plugin if you want
65
65
  to reference any ancestor element directly in your selectors with `^&`.
66
66
 
67
67
  Alternatives:
68
68
 
69
- * See also [`postcss-nesting`], which implements [CSSWG draft].
70
- * [`postcss-nested-props`] for nested properties like `font-size`.
69
+ - See also [`postcss-nesting`], which implements [CSSWG draft].
70
+ - [`postcss-nested-props`] for nested properties like `font-size`.
71
71
 
72
72
  <a href="https://evilmartians.com/?utm_source=postcss-nested">
73
73
  <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
@@ -76,11 +76,10 @@ Alternatives:
76
76
 
77
77
  [`postcss-current-selector`]: https://github.com/komlev/postcss-current-selector
78
78
  [`postcss-nested-ancestors`]: https://github.com/toomuchdesign/postcss-nested-ancestors
79
- [`postcss-nested-props`]: https://github.com/jedmao/postcss-nested-props
80
- [`postcss-nesting`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
81
- [CSSWG draft]: https://drafts.csswg.org/css-nesting-1/
82
- [PostCSS]: https://github.com/postcss/postcss
83
-
79
+ [`postcss-nested-props`]: https://github.com/jedmao/postcss-nested-props
80
+ [`postcss-nesting`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
81
+ [CSSWG draft]: https://drafts.csswg.org/css-nesting-1/
82
+ [PostCSS]: https://github.com/postcss/postcss
84
83
 
85
84
  ## Docs
86
85
  Read full docs **[here](https://github.com/postcss/postcss-nested#readme)**.
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- const { Rule, AtRule } = require('postcss')
1
+ const { AtRule, Rule } = require('postcss')
2
2
  let parser = require('postcss-selector-parser')
3
3
 
4
4
  /**
@@ -118,8 +118,8 @@ function createFnAtruleChilds(bubble) {
118
118
 
119
119
  function pickDeclarations(selector, declarations, after) {
120
120
  let parent = new Rule({
121
- selector,
122
- nodes: []
121
+ nodes: [],
122
+ selector
123
123
  })
124
124
  parent.append(declarations)
125
125
  after.after(parent)
@@ -143,7 +143,7 @@ function parseRootRuleParams(params) {
143
143
  params = params.trim()
144
144
  let braceBlock = params.match(/^\((.*)\)$/)
145
145
  if (!braceBlock) {
146
- return { type: 'basic', selector: params }
146
+ return { selector: params, type: 'basic' }
147
147
  }
148
148
  let bits = braceBlock[1].match(/^(with(?:out)?):(.+)$/)
149
149
  if (bits) {
@@ -165,8 +165,8 @@ function parseRootRuleParams(params) {
165
165
  }
166
166
 
167
167
  return {
168
- type: 'withrules',
169
- escapes
168
+ escapes,
169
+ type: 'withrules'
170
170
  }
171
171
  }
172
172
  // Unrecognized brace block
@@ -250,14 +250,14 @@ const rootRuleEscapes = Symbol('rootRuleEscapes')
250
250
 
251
251
  function normalizeRootRule(rule) {
252
252
  let { params } = rule
253
- let { type, selector, escapes } = parseRootRuleParams(params)
253
+ let { escapes, selector, type } = parseRootRuleParams(params)
254
254
  if (type === 'unknown') {
255
255
  throw rule.error(
256
256
  `Unknown @${rule.name} parameter ${JSON.stringify(params)}`
257
257
  )
258
258
  }
259
259
  if (type === 'basic' && selector) {
260
- let selectorBlock = new Rule({ selector, nodes: rule.nodes })
260
+ let selectorBlock = new Rule({ nodes: rule.nodes, selector })
261
261
  rule.removeAll()
262
262
  rule.append(selectorBlock)
263
263
  }
@@ -269,7 +269,7 @@ const hasRootRule = Symbol('hasRootRule')
269
269
 
270
270
  module.exports = (opts = {}) => {
271
271
  let bubble = atruleNames(
272
- ['media', 'supports', 'layer', 'container'],
272
+ ['media', 'supports', 'layer', 'container', 'starting-style'],
273
273
  opts.bubble
274
274
  )
275
275
  let atruleChilds = createFnAtruleChilds(bubble)
@@ -287,8 +287,6 @@ module.exports = (opts = {}) => {
287
287
  let preserveEmpty = opts.preserveEmpty
288
288
 
289
289
  return {
290
- postcssPlugin: 'postcss-nested',
291
-
292
290
  Once(root) {
293
291
  root.walkAtRules(rootRuleName, node => {
294
292
  normalizeRootRule(node)
@@ -296,6 +294,15 @@ module.exports = (opts = {}) => {
296
294
  })
297
295
  },
298
296
 
297
+ postcssPlugin: 'postcss-nested',
298
+
299
+ RootExit(root) {
300
+ if (root[hasRootRule]) {
301
+ root.walkAtRules(rootRuleName, unwrapRootRule)
302
+ root[hasRootRule] = false
303
+ }
304
+ },
305
+
299
306
  Rule(rule) {
300
307
  let unwrapped = false
301
308
  let after = rule
@@ -348,13 +355,6 @@ module.exports = (opts = {}) => {
348
355
  rule.raws.semicolon = true
349
356
  if (rule.nodes.length === 0) rule.remove()
350
357
  }
351
- },
352
-
353
- RootExit(root) {
354
- if (root[hasRootRule]) {
355
- root.walkAtRules(rootRuleName, unwrapRootRule)
356
- root[hasRootRule] = false
357
- }
358
358
  }
359
359
  }
360
360
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "postcss-nested",
3
- "version": "6.0.1",
3
+ "version": "6.2.0",
4
4
  "description": "PostCSS plugin to unwrap nested rules like how Sass does it",
5
5
  "keywords": [
6
6
  "postcss",
@@ -15,14 +15,20 @@
15
15
  "engines": {
16
16
  "node": ">=12.0"
17
17
  },
18
- "funding": {
19
- "type": "opencollective",
20
- "url": "https://opencollective.com/postcss/"
21
- },
18
+ "funding": [
19
+ {
20
+ "type": "opencollective",
21
+ "url": "https://opencollective.com/postcss/"
22
+ },
23
+ {
24
+ "type": "github",
25
+ "url": "https://github.com/sponsors/ai"
26
+ }
27
+ ],
22
28
  "peerDependencies": {
23
29
  "postcss": "^8.2.14"
24
30
  },
25
31
  "dependencies": {
26
- "postcss-selector-parser": "^6.0.11"
32
+ "postcss-selector-parser": "^6.1.1"
27
33
  }
28
34
  }