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
|
- removeMetadata
|
||||||
- removeEditorsNSData
|
- removeEditorsNSData
|
||||||
- cleanupAttrs
|
- cleanupAttrs
|
||||||
|
- minifyStyles
|
||||||
- convertStyleToAttrs
|
- convertStyleToAttrs
|
||||||
- cleanupIDs
|
- cleanupIDs
|
||||||
- removeRasterImages
|
- removeRasterImages
|
||||||
|
@ -44,7 +44,8 @@
|
|||||||
"js-yaml": "~3.3.1",
|
"js-yaml": "~3.3.1",
|
||||||
"colors": "~1.1.2",
|
"colors": "~1.1.2",
|
||||||
"whet.extend": "~0.9.9",
|
"whet.extend": "~0.9.9",
|
||||||
"mkdirp": "~0.5.1"
|
"mkdirp": "~0.5.1",
|
||||||
|
"csso": "~1.4.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"mocha": "~2.2.5",
|
"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