You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
HTML classes may include colons, e.g. <h1 class="md:title">Title</h1>.
As per the CSS spec, a corresponding CSS selector would be: .md\:title { font-size: 32px; }. Note that the colon is escaped by the backslash (\).
I found out that the minimalcss fails if the CSS includes selectors with backslashes:
// style.css
.md\:title {
font-size: 32px;
}
========
user@container:/app# minimalcss --nosandbox http://localhost:8000/ > critical.css
SyntaxError: Unexpected input
at Object.error (/app/node_modules/css-tree/lib/parser/create.js:239:19)
at Object.parse (/app/node_modules/css-tree/lib/parser/create.js:284:20)
at Object.getParentSelectors (/app/minimalcss/src/utils.js:61:31)
at List.<anonymous> (/app/minimalcss/src/run.js:576:43)
at List.each (/app/node_modules/css-tree/lib/common/List.js:158:12)
at Object.enter (/app/minimalcss/src/run.js:564:33)
at Object.<anonymous> (/app/node_modules/css-tree/lib/walker/create.js:11:16)
at List.walkNode (/app/node_modules/css-tree/lib/walker/create.js:161:19) {
source: '.md\\', <= THIS LINE RIGHT HERE
offset: 3,
line: 1,
column: 4,
sourceFragment: [Function (anonymous)],
parseError: { offset: 3, line: 1, column: 4 }
}
See the line source: '.md\\'
I double checked that the CSSTree can handle this case just fine so I dove into the source of minimalcss. I found the method in src/utils.js#reduceCSSSelector which seemed to cause the issue. I think I figured out a solution as well so happy to open up a PR.
Thanks for the great tool though. I was about to do it on my own but luckily stumbled upon this by googling around.
The text was updated successfully, but these errors were encountered:
cappe
changed the title
Minimalcss fails on a CSS selector with a backslash
Minimalcss fails on CSS selectors with backslashes
Aug 30, 2021
HTML classes may include colons, e.g.
<h1 class="md:title">Title</h1>
.As per the CSS spec, a corresponding CSS selector would be:
.md\:title { font-size: 32px; }
. Note that the colon is escaped by the backslash (\
).I found out that the
minimalcss
fails if the CSS includes selectors with backslashes:See the line
source: '.md\\'
I double checked that the
CSSTree
can handle this case just fine so I dove into the source of minimalcss. I found the method insrc/utils.js#reduceCSSSelector
which seemed to cause the issue. I think I figured out a solution as well so happy to open up a PR.Thanks for the great tool though. I was about to do it on my own but luckily stumbled upon this by googling around.
The text was updated successfully, but these errors were encountered: