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.
- package/README.md +26 -27
- package/index.js +18 -18
- package/package.json +12 -6
package/README.md
CHANGED
|
@@ -8,25 +8,25 @@
|
|
|
8
8
|
|
|
9
9
|
```css
|
|
10
10
|
.phone {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
21
|
-
|
|
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
|
-
|
|
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
|
-
|
|
38
|
+
width: 500px;
|
|
39
39
|
}
|
|
40
40
|
@media (max-width: 500px) {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
.phone_title {
|
|
42
|
+
width: auto;
|
|
43
|
+
}
|
|
44
44
|
}
|
|
45
45
|
body.is_dark .phone_title {
|
|
46
|
-
|
|
46
|
+
color: white;
|
|
47
47
|
}
|
|
48
48
|
.phone img {
|
|
49
|
-
|
|
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
|
-
|
|
62
|
+
- Use [`postcss-current-selector`] **after** this plugin if you want
|
|
63
63
|
to use current selector in properties or variables values.
|
|
64
|
-
|
|
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
|
-
|
|
70
|
-
|
|
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`]:
|
|
80
|
-
[`postcss-nesting`]:
|
|
81
|
-
[CSSWG draft]:
|
|
82
|
-
[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 {
|
|
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
|
-
|
|
122
|
-
|
|
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'
|
|
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
|
-
|
|
169
|
-
|
|
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 {
|
|
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({
|
|
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
|
|
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
|
-
|
|
20
|
-
|
|
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.
|
|
32
|
+
"postcss-selector-parser": "^6.1.1"
|
|
27
33
|
}
|
|
28
34
|
}
|