-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
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
Add mergeStyles plugin #1381
Add mergeStyles plugin #1381
Conversation
Hm, strange, the CI test fails (https://github.com/svg/svgo/pull/1381/checks?check_run_id=2087136821#step:6:469). |
I migrated ast to xast https://github.com/syntax-tree/xast |
@TrySound: Oh, this would explain the issue. The docs hadn't been updated yet, right? |
I never updated how-it-works 😅 |
Update package lockfile.
4b73611
to
37a0be2
Compare
@TrySound: Ready to merge! |
I meant revert whole package-lock.json. We are not on npm 7 yet. |
Still here. |
plugins/mergeStyles.js
Outdated
const style = styles[styleNo]; | ||
|
||
if (style.mq) { | ||
const wrappedStyles = `@media ${style.mq} { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
\n
instead of newlines please
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Replaced with one line. This has the added benefit of saving some space characters.
`@media ${style.mq}{${style.cssStr}}`
package-lock.json
Outdated
"version": "7.12.13", | ||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz", | ||
"integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==", | ||
"version": "7.12.11", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why I still see package-lock changes here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤔 From where should I revert the package-lock? Should I use the current one from svgo or from a previous commit of this branch? npm install
seems to update the package lock on its own.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
git checkout HEAD~48 -- package-lock.json
Thank you! |
|
||
<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> | ||
<style> | ||
</style> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A great job. There are a few tips:
The test case should include:
<style>/* test */</style>
<style />
<style type="text/css"></style>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@yisibl do you want to send PR?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@TrySound Do we now have an API to recognize CSS comments?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The minifyStyles plugin can handle this before and after this plugin.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What if we merge styles after minifying? I asked to move before first because there was unwanted newlines though @strarsis removed them and maybe it makes sense to merge after now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, merging after minification is nice. The minifier removed all comments and only left the bare minimum.
In the next PR, do you plan to remove unused CSS? |
Maybe eventually |
This PR adds the mergeStyles plugin that merges
<style>
elements into one,preserving media queries by the
<style>
media
attribute.You can already try this feature branch by installing it using this npm command:
npm install github:strarsis/svgo#mergeStyles-plugin
The plugin would also be enabled by default in this PR as it can help with compression by subsequent plugins.
Outdated, closed PR: #1278