mirror of
https://github.com/svg/svgo.git
synced 2025-07-31 07:44:22 +03:00
make unused styles removal safe
- avoid using usage data when document contains <script> or on* attributes - implemented usage.force option to force usage data using
This commit is contained in:
@ -8,10 +8,10 @@ exports.description = 'minifies styles and removes unused styles based on usage
|
||||
|
||||
exports.params = {
|
||||
// ... CSSO options goes here
|
||||
svgo: {},
|
||||
|
||||
// additional
|
||||
usage: {
|
||||
force: false, // force to use usage data even if it unsafe (document contains <script> or on* attributes)
|
||||
ids: true,
|
||||
classes: true,
|
||||
tags: true
|
||||
@ -110,6 +110,10 @@ function collectUsageData(ast, options) {
|
||||
walk(item, usageData);
|
||||
}
|
||||
|
||||
if (item.isElem('script')) {
|
||||
safe = false;
|
||||
}
|
||||
|
||||
if (item.isElem()) {
|
||||
usageData.tags[item.elem] = true;
|
||||
|
||||
@ -122,26 +126,35 @@ function collectUsageData(ast, options) {
|
||||
usageData.classes[className] = true;
|
||||
});
|
||||
}
|
||||
|
||||
if (item.attrs && Object.keys(item.attrs).some(function(name) { return /^on/i.test(name); })) {
|
||||
safe = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return usageData;
|
||||
}
|
||||
|
||||
var safe = true;
|
||||
var usageData = {};
|
||||
var hasData = false;
|
||||
var usageData = walk(ast, {
|
||||
var rawData = walk(ast, {
|
||||
ids: Object.create(null),
|
||||
classes: Object.create(null),
|
||||
tags: Object.create(null)
|
||||
});
|
||||
|
||||
for (var key in usageData) {
|
||||
usageData[key] = shouldFilter(options, key) && Object.keys(usageData[key]);
|
||||
if (!safe && options.usage && options.usage.force) {
|
||||
safe = true;
|
||||
}
|
||||
|
||||
if (usageData[key]) {
|
||||
for (var key in rawData) {
|
||||
if (shouldFilter(options, key)) {
|
||||
usageData[key] = Object.keys(rawData[key]);
|
||||
hasData = true;
|
||||
}
|
||||
}
|
||||
|
||||
return hasData ? usageData : null;
|
||||
return safe && hasData ? usageData : null;
|
||||
}
|
||||
|
26
test/plugins/minifyStyles.07.svg
Normal file
26
test/plugins/minifyStyles.07.svg
Normal file
@ -0,0 +1,26 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.used { p: 1 }
|
||||
.unused { p: 2 }
|
||||
</style>
|
||||
<script>
|
||||
/* script element prevents removing unused styles */
|
||||
</script>
|
||||
<g class="used">
|
||||
test
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@@@
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.used{p:1}.unused{p:2}
|
||||
</style>
|
||||
<script>
|
||||
/* script element prevents removing unused styles */
|
||||
</script>
|
||||
<g class="used">
|
||||
test
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 493 B |
20
test/plugins/minifyStyles.08.svg
Normal file
20
test/plugins/minifyStyles.08.svg
Normal file
@ -0,0 +1,20 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.used { p: 1 }
|
||||
.unused { p: 2 }
|
||||
</style>
|
||||
<g class="used" onclick="/* on* attributes prevents removing unused styles */">
|
||||
test
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@@@
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.used{p:1}.unused{p:2}
|
||||
</style>
|
||||
<g class="used" onclick="/* on* attributes prevents removing unused styles */">
|
||||
test
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 443 B |
29
test/plugins/minifyStyles.09.svg
Normal file
29
test/plugins/minifyStyles.09.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.used { p: 1 }
|
||||
.unused { p: 2 }
|
||||
</style>
|
||||
<script>
|
||||
/* with usage.force=true script element does not prevent removing unused styles */
|
||||
</script>
|
||||
<g class="used" onclick="/* with usage.force=true on* attributes doesn't prevent removing unused styles */">
|
||||
test
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@@@
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.used{p:1}
|
||||
</style>
|
||||
<script>
|
||||
/* with usage.force=true script element does not prevent removing unused styles */
|
||||
</script>
|
||||
<g class="used" onclick="/* with usage.force=true on* attributes doesn't prevent removing unused styles */">
|
||||
test
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@@@
|
||||
{ "usage": { "force": true } }
|
After Width: | Height: | Size: 760 B |
Reference in New Issue
Block a user