Skip to content

Commit f62e404

Browse files
cossssmincossssmin
committed
fix: support commas in css selectors
1 parent 808481a commit f62e404

File tree

10 files changed

+48
-22
lines changed

10 files changed

+48
-22
lines changed

‎lib/index.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const postcss = require('postcss')
2-
const cssescape = require('css.escape')
2+
const cssEscape = require('css.escape')
33

44
const headCSSRegex = needle => new RegExp(`\\\\[${needle}]`, 'g')
55
const classAttrRegex = needle => new RegExp(`\\${needle}`, 'g')
@@ -8,7 +8,9 @@ const postcssSafeCSS = (options = {}) => root => {
88
root.walkDecls(decl => {
99
if (decl.parent.selector) {
1010
Object.entries(options.replacements).forEach(([from, to]) => {
11-
decl.parent.selector = decl.parent.selector.replace(headCSSRegex(cssescape(from)), to)
11+
decl.parent.selector = decl.parent.selector
12+
.replace(headCSSRegex(cssEscape(from)), to)
13+
.replace('\\2c ', '_')
1214
})
1315
}
1416
})
@@ -52,12 +54,14 @@ module.exports = (options = {}) => tree => {
5254

5355
const process = node => {
5456
if (node.tag === 'style' && node.content) {
57+
const content = Array.isArray(node.content) ? node.content.join('') : node.content
58+
5559
node.content = postcss([
5660
postcssSafeCSS({
5761
replacements: options.replacements
5862
})
5963
])
60-
.process(node.content.join('').trim())
64+
.process(content)
6165
.css
6266
}
6367

‎test/expected/custom.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<style>.foo-w-2_5 {
4+
<style>
5+
.foo-w-2_5 {
56
width: .625rem;
6-
}</style>
7+
}
8+
</style>
79
</head>
810
<body>
911
<div class="foo-w-2_5">

‎test/expected/empty-style.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<style></style>
4+
<style> </style>
55
</head>
66
<body>
77
</body>

‎test/expected/font-face.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<style>.foo-w-3-5 {
4+
<style>
5+
.foo-w-3-5 {
56
width: 60%;
67
}
78
@font-face {
@@ -12,7 +13,8 @@
1213
}
1314
.foo-italic {
1415
font-style: italic;
15-
}</style>
16+
}
17+
</style>
1618
</head>
1719
<body>
1820
<div class="foo foo-open-sans foo-w-3-5">

‎test/expected/media-queries.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<style>.foo {
4+
<style>
5+
.foo {
56
font-style: normal;
67
}
78
@media (max-width: 600px) {
@@ -17,7 +18,8 @@
1718
.sm-w-2_5 {
1819
width: .625rem;
1920
}
20-
}</style>
21+
}
22+
</style>
2123
</head>
2224
<body>
2325
<div class="foo sm-italic sm-w-3-5 sm-w-50pc sm-w-2_5">

‎test/expected/multiple-style.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<style>.foo-italic {
4+
<style>
5+
.foo-italic {
56
font-style: italic;
67
}
78
.foo-w-3-5 {
89
width: 60%;
9-
}</style>
10-
<style>.foo-w-50pc {
10+
}
11+
</style>
12+
<style>
13+
.foo-w-50pc {
1114
width: 50%;
1215
}
1316
.foo-w-2_5 {
1417
width: .625rem;
15-
}</style>
18+
}
19+
</style>
1620
</head>
1721
<body>
1822
<div class="foo foo-italic foo-w-3-5 foo-w-50pc foo-w-2_5">

‎test/expected/override.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<style>.foo__italic {
4+
<style>
5+
.foo__italic {
56
font-style: italic;
67
}
78
.foo__w-3-5 {
@@ -12,7 +13,8 @@
1213
}
1314
.foo__w-2_5 {
1415
width: .625rem;
15-
}</style>
16+
}
17+
</style>
1618
</head>
1719
<body>
1820
<div class="foo foo__italic foo__w-3-5 foo__w-50pc foo__w-2_5">

‎test/expected/sanity.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<style>/* A comment that includes a <tag> inside */
4+
<style>
5+
/* A comment that includes a <tag> inside */
56
.foo-italic {
67
font-style: italic; /* 1 */
78
}
@@ -28,12 +29,16 @@
2829
}
2930
.foo-mt--40px {
3031
margin-top: -40px;
31-
}</style>
32+
}
33+
.bg-rgba0_0_0_0_75 {
34+
background-color: rgba(0,0,0,0.75);
35+
}
36+
</style>
3237
</head>
3338
<body>
3439
<div class="foo foo-italic foo-w-3-5 foo-w-50pc foo-w-2_5 foo-w-600px">
3540
<div class="important-w-600 foo-important-w-600px bg-_1da1f1 foo-mt--40px">
36-
test
41+
<div class="bg-rgba0_0_0_0_75">test</div>
3742
</div>
3843
</div>
3944
</body>

‎test/expected/style-only.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<style>.foo-italic {
4+
<style>
5+
.foo-italic {
56
font-style: italic;
67
}
78
.foo-w-3-5 {
@@ -12,7 +13,8 @@
1213
}
1314
.foo-w-2_5 {
1415
width: .625rem;
15-
}</style>
16+
}
17+
</style>
1618
</head>
1719
<body>
1820
</body>

‎test/fixtures/sanity.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,15 @@
3030
.foo\:mt-\[-40px\] {
3131
margin-top: -40px;
3232
}
33+
.bg-\[rgba\(0\2c 0\2c 0\2c 0\.75\)\] {
34+
background-color: rgba(0,0,0,0.75);
35+
}
3336
</style>
3437
</head>
3538
<body>
3639
<div class="foo foo:italic foo:w-3/5 foo:w-50% foo:w-2.5 foo:w-[600px]">
3740
<div class="!w-600 foo:!w-[600px] bg-[#1da1f1] foo:mt-[-40px]">
38-
test
41+
<div class="bg-[rgba(0,0,0,0.75)]">test</div>
3942
</div>
4043
</div>
4144
</body>

0 commit comments

Comments
 (0)