Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minimalcss fails on CSS selectors with backslashes #422

Open
cappe opened this issue Aug 30, 2021 · 0 comments · May be fixed by #423
Open

Minimalcss fails on CSS selectors with backslashes #422

cappe opened this issue Aug 30, 2021 · 0 comments · May be fixed by #423

Comments

@cappe
Copy link

cappe commented 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:

// 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.

@cappe cappe changed the title Minimalcss fails on a CSS selector with a backslash Minimalcss fails on CSS selectors with backslashes Aug 30, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant