Open
Description
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.
Metadata
Metadata
Assignees
Labels
No labels