Was just testing this with the CSS on apple.com for fun. The library will freeze and c

css selector parser cannot advance past unsupported pseudo classes with parenthesis about dropcss HOT 7 CLOSED

leeoniya commented on May 14, 2024

css selector parser cannot advance past unsupported pseudo classes with parenthesis

from dropcss.

Comments (7)

jamespsteinberg commented on May 14, 2024

I am still going through the library for how you get this so fast so maybe the "-body" names can't be handled. But I can parse all html tags pretty reliably by adding a space in front of every new line and checking for all unique selector signs before and after: https://www.w3schools.com/cssref/css_selectors.asp

i.e.

var lineText = ".anything-dash-body:lang(ar){"
lineText = " " + lineText;
var regex = new RegExp("(?<= |{|\\[|:|,|\\.|>|\\+|~|=|~=|\\||=|^=|$=|\\*=|\\*)" + escapeRegExp("body") + "(?= |{|\\[|:|,|\\.|>|\\+|~|=|~=|\\||=|^=|$=|\\*=|\\*)", "g");
var matches = lineText.match(regex);

from dropcss.

leeoniya commented on May 14, 2024

will take a look tomorrow

from dropcss.

leeoniya commented on May 14, 2024

i pushed an infinite loop guard in the selector parser so we can actually debug this 🤣

the problem is not with body, but with the :lang(ar) pseudo-selector; dropcss should strip or ignore these since there's no way to assert them from the markup.

<!doctype html>
<html>
  <head>
    <title>loopy</title>
    <script src="./dist/dropcss.iife.js"></script>
  </head>
  <body>
    <script>
      dropcss({
        html: '<a></a>',
        css: `
          a:lang(ar) {}
        `,
      });
    </script>
  </body>
</html>

from dropcss.

jamespsteinberg commented on May 14, 2024

I didn’t explain well. It seems to only hang on the combination of thinking it’s an html tag and the lang selector. It seems to work fine if either are present alone.

from dropcss.

jamespsteinberg commented on May 14, 2024

But that works awesome, I’ll test out a few more pages tomorrow. I suppose the class name part is a very minor separate issue

from dropcss.

leeoniya commented on May 14, 2024

fixed by attached commit.

from dropcss.

leeoniya commented on May 14, 2024

It seems to only hang on the combination of thinking it’s an html tag and the lang selector. It seems to work fine if either are present alone.

that's because the secondary, more-expensive selector parser only runs when there is matched html tags for the pre-parsing pass that pulls out only ids, classes and tag names. so it will first try to find .anything-dash-body, and only then will try parsing the full selector with the :lang(ar) pseudo, which is where it crashed.

from dropcss.

css selector parser cannot advance past unsupported pseudo classes with parenthesis about dropcss HOT 7 CLOSED

Comments (7)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent