-
-
Notifications
You must be signed in to change notification settings - Fork 64
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
Option to skip formatting CSS #160
Comments
Thank you for the kind words, @helgenlechner. Much appreciated, and happy to hear the ponyfill has worked well for you. The behavior in the First, I've copied the // 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 css-vars-ponyfill/src/parse-css.js Lines 107 to 157 in b16b784
Feel free to check out the branch, run |
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! |
Published as 2.4.6. The feature branch has been removed, so be sure to update your |
Thank you for this great library! We've been using it for a couple years now. I've been doing some performance debugging recently and noticed that quite a lot of time is spent on "sanitizing" the CSS.
parseCss
alone takes around 2.5 seconds in our case. Since we always roll out minified CSS, all the cleaning and trimming in the functionselector
, for example, doesn't result in a change. I've tried simply skipping that step and was able to reduce the time needed byparseCss
by over 50%.I believe that minifying CSS is quite a common use case these days. What do you think about adding an option to the ponyfill that would skip all these sanitizing steps? Maybe it could even be recommended as a best practice in the ReadMe, since this would improve runtime performance considerably.
I'm happy to work on this, since the improvements would be worthwhile for our projects. Do you perhaps have a sense of what parts of the code could be skipped with this option?
The text was updated successfully, but these errors were encountered: