mirror of
https://github.com/svg/svgo.git
synced 2025-07-31 07:44:22 +03:00
Add minifyStyles plugin, test and dependencies.
This commit is contained in:
@ -22,6 +22,7 @@ plugins:
|
||||
- removeMetadata
|
||||
- removeEditorsNSData
|
||||
- cleanupAttrs
|
||||
- minifyStyles
|
||||
- convertStyleToAttrs
|
||||
- cleanupIDs
|
||||
- removeRasterImages
|
||||
|
@ -44,7 +44,8 @@
|
||||
"js-yaml": "~3.3.1",
|
||||
"colors": "~1.1.2",
|
||||
"whet.extend": "~0.9.9",
|
||||
"mkdirp": "~0.5.1"
|
||||
"mkdirp": "~0.5.1",
|
||||
"csso": "~1.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"mocha": "~2.2.5",
|
||||
|
71
plugins/minifyStyles.js
Executable file
71
plugins/minifyStyles.js
Executable file
@ -0,0 +1,71 @@
|
||||
'use strict';
|
||||
|
||||
exports.type = 'perItem';
|
||||
|
||||
exports.active = true;
|
||||
|
||||
exports.params = {
|
||||
svgo: {}
|
||||
};
|
||||
|
||||
exports.description = 'minifies existing styles in svg';
|
||||
|
||||
var csso = require('csso');
|
||||
|
||||
|
||||
// wraps css rules into a selector to make it parseable
|
||||
var rulesToDummySelector = function(str) {
|
||||
return '.dummy { ' + str + ' }';
|
||||
};
|
||||
|
||||
// helper to extract css rules from full css selector
|
||||
var extractRuleCss = function(str) {
|
||||
var strEx = str.match(/\.dummy{(.*)}/i)[1];
|
||||
return strEx;
|
||||
};
|
||||
|
||||
// minifies css using csso
|
||||
var minifyCss = function(css, options) {
|
||||
return csso.minify(css);
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Minifies styles (<style> element + style attribute) using svgo
|
||||
*
|
||||
* @param {Object} item current iteration item
|
||||
* @return {Boolean} if false, item will be filtered out
|
||||
*
|
||||
* @author strarsis <strarsis@gmail.com>
|
||||
*/
|
||||
exports.fn = function(item, svgoOptions) {
|
||||
|
||||
if(item.elem) {
|
||||
if(item.isElem('style')) {
|
||||
var styleCss = item.content[0].text;
|
||||
if(styleCss.length > 0) {
|
||||
var styleCssMinified = minifyCss(styleCss, svgoOptions);
|
||||
item.content[0].text = styleCssMinified;
|
||||
}
|
||||
}
|
||||
|
||||
if(item.hasAttr('style')) {
|
||||
var itemCss = item.attr('style').value;
|
||||
if(itemCss.length > 0) {
|
||||
var itemCssMinified =
|
||||
extractRuleCss(
|
||||
minifyCss(
|
||||
rulesToDummySelector(
|
||||
itemCss
|
||||
),
|
||||
svgoOptions
|
||||
)
|
||||
);
|
||||
item.attr('style').value = itemCssMinified;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return item;
|
||||
};
|
15
test/plugins/minifyStyles.01.svg
Executable file
15
test/plugins/minifyStyles.01.svg
Executable file
@ -0,0 +1,15 @@
|
||||
<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<style>
|
||||
.st0{ fill:red; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; } @media screen and (max-width: 200px) { .st1 { display: none; } }
|
||||
</style>
|
||||
<rect width="100" height="100" class="st0" style="stroke-width:3; margin-top: 1em; margin-right: 1em; margin-bottom: 1em; margin-left: 1em;"/>
|
||||
</svg>
|
||||
|
||||
@@@
|
||||
|
||||
<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<style>
|
||||
.st0{fill:red;padding:1em}@media screen and (max-width:200px){.st1{display:none}}
|
||||
</style>
|
||||
<rect width="100" height="100" class="st0" style="stroke-width:3;margin:1em"/>
|
||||
</svg>
|
After Width: | Height: | Size: 705 B |
Reference in New Issue
Block a user