Option to skip formatting CSS about css-vars-ponyfill HOT 3 CLOSED

Thank you for the kind words, @helgenlechner. Much appreciated, and happy to hear the ponyfill has worked well for you.

The behavior in the selector() function you are referring to is used to detect individual selectors within in a comma-separated list of selectors. Sanitized CSS is a side effect, not the goal. There are definitely optimizations that can be done though.

First, I've copied the selector() source below and added comments to explain each mutation:

// Match selector
const m = match(/^(("(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^{])+)/);

if (m) {
    return m[0]
        .trim()
        // Remove comments
        .replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '')
        // Replace comma in comma-separated lists with marker
        .replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, function(m) {
            return m.replace(/,/g, '\u200C');
        })
        // Create array from comma-separated list of selectors
        .split(/\s*(?![^(]*\)),\s*/)
        // Restore comma in comma-separated lists
        .map(function(s) {
            return s.replace(/\u200C/g, ',');
        });
}

Here are a few CSS selector examples that would trip up the parser without the code above:

html,
/* :root, */
body {
 ...
}

.foo,
.bar, /* Comment, with a comma */
.baz {
  ...
}

body[attr="foo,bar"] { ... }

One issue with the selector() code above is that it processes all selectors the same way. Performance can be improved by implementing simple checks first to determine if more complex mutations need to be done. For example, if a simple test for /* within the selector string fails, we don't need execute a complex regular expression to replace all comments in a selector. The end result is that complex selectors may take bit longer, but simple selectors will be processed much faster. I've implemented these changes in branch 160:

Feel free to check out the branch, run npm build, and test the results of the optimizations with your project. For reference, I ran a few rudimentary tests locally and saw a 50% increase in selector() performance. If all goes well, I'm happy to merge these changes and publish an update.

from css-vars-ponyfill.

Hi @jhildenbiddle! Looks like a great solution! I'm getting a nice performance improvement as well. Nice that a new option isn't needed either. Thank you for the quick help!

from css-vars-ponyfill.

@helgenlechner --

Published as 2.4.6. The feature branch has been removed, so be sure to update your package.json accordingly.

from css-vars-ponyfill.