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.
strarsis
force-pushed
the
mergeStyles-plugin-2
branch
from
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.
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.
Why I still see package-lock changes here?
There was a problem hiding this comment.
🤔 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.
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.
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.
@yisibl do you want to send PR?
There was a problem hiding this comment.
@TrySound Do we now have an API to recognize CSS comments?
There was a problem hiding this comment.
The minifyStyles plugin can handle this before and after this plugin.
There was a problem hiding this comment.
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.
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>mediaattribute.You can already try this feature branch by installing it using this npm command:
npm install github:strarsis/svgo#mergeStyles-pluginThe plugin would also be enabled by default in this PR as it can help with compression by subsequent plugins.
Outdated, closed PR: #1278