mirror of
https://github.com/svg/svgo.git
synced 2025-07-31 07:44:22 +03:00
Add options to prefixIds plugin for selectively prefixing IDs and/or classes.
This commit is contained in:
@ -5,7 +5,9 @@ exports.type = 'perItem';
|
||||
exports.active = false;
|
||||
|
||||
exports.params = {
|
||||
delim: '__'
|
||||
delim: '__',
|
||||
prefixIds: true,
|
||||
prefixClassNames: true,
|
||||
};
|
||||
|
||||
exports.description = 'prefix IDs';
|
||||
@ -173,8 +175,8 @@ exports.fn = function(node, opts, extra) {
|
||||
csstree.walk(cssAst, function(node) {
|
||||
|
||||
// #ID, .class
|
||||
if ((node.type === 'IdSelector' ||
|
||||
node.type === 'ClassSelector') &&
|
||||
if (((opts.prefixIds && node.type === 'IdSelector') ||
|
||||
(opts.prefixClassNames && node.type === 'ClassSelector')) &&
|
||||
node.name) {
|
||||
node.name = addPrefix(node.name);
|
||||
return;
|
||||
@ -204,11 +206,21 @@ exports.fn = function(node, opts, extra) {
|
||||
return node;
|
||||
}
|
||||
|
||||
// ID
|
||||
addPrefixToIdAttr(node.attrs.id);
|
||||
|
||||
// Class
|
||||
addPrefixToClassAttr(node.attrs.class);
|
||||
// Nodes
|
||||
|
||||
if(opts.prefixIds) {
|
||||
// ID
|
||||
addPrefixToIdAttr(node.attrs.id);
|
||||
}
|
||||
|
||||
if(opts.prefixClassNames) {
|
||||
// Class
|
||||
addPrefixToClassAttr(node.attrs.class);
|
||||
}
|
||||
|
||||
|
||||
// References
|
||||
|
||||
// href
|
||||
addPrefixToHrefAttr(node.attrs.href);
|
||||
@ -216,7 +228,7 @@ exports.fn = function(node, opts, extra) {
|
||||
// (xlink:)href (deprecated, must be still supported)
|
||||
addPrefixToHrefAttr(node.attrs['xlink:href']);
|
||||
|
||||
// referenceable properties
|
||||
// (referenceable) properties
|
||||
for (var referencesProp of referencesProps) {
|
||||
addPrefixToUrlAttr(node.attrs[referencesProp]);
|
||||
}
|
||||
|
27
test/plugins/prefixIds.07.svg
Normal file
27
test/plugins/prefixIds.07.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
#test {
|
||||
color: red;
|
||||
}
|
||||
|
||||
</style>
|
||||
<rect class="test" x="10" y="10" width="100" height="100"/>
|
||||
<rect class="" id="test" x="10" y="10" width="100" height="100"/>
|
||||
</svg>
|
||||
|
||||
@@@
|
||||
|
||||
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.prefixIds_07_svg__test{color:blue}#test{color:red}
|
||||
</style>
|
||||
<rect class="prefixIds_07_svg__test" x="10" y="10" width="100" height="100"/>
|
||||
<rect class="" id="test" x="10" y="10" width="100" height="100"/>
|
||||
</svg>
|
||||
|
||||
@@@
|
||||
|
||||
{"prefixIds":false}
|
After Width: | Height: | Size: 676 B |
27
test/plugins/prefixIds.08.svg
Normal file
27
test/plugins/prefixIds.08.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
#test {
|
||||
color: red;
|
||||
}
|
||||
|
||||
</style>
|
||||
<rect class="test" x="10" y="10" width="100" height="100"/>
|
||||
<rect class="" id="test" x="10" y="10" width="100" height="100"/>
|
||||
</svg>
|
||||
|
||||
@@@
|
||||
|
||||
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.test{color:blue}#prefixIds_08_svg__test{color:red}
|
||||
</style>
|
||||
<rect class="test" x="10" y="10" width="100" height="100"/>
|
||||
<rect class="" id="prefixIds_08_svg__test" x="10" y="10" width="100" height="100"/>
|
||||
</svg>
|
||||
|
||||
@@@
|
||||
|
||||
{"prefixClassNames":false}
|
After Width: | Height: | Size: 683 B |
27
test/plugins/prefixIds.09.svg
Normal file
27
test/plugins/prefixIds.09.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.test {
|
||||
color: blue;
|
||||
}
|
||||
#test {
|
||||
color: red;
|
||||
}
|
||||
|
||||
</style>
|
||||
<rect class="test" x="10" y="10" width="100" height="100"/>
|
||||
<rect class="" id="test" x="10" y="10" width="100" height="100"/>
|
||||
</svg>
|
||||
|
||||
@@@
|
||||
|
||||
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.test{color:blue}#test{color:red}
|
||||
</style>
|
||||
<rect class="test" x="10" y="10" width="100" height="100"/>
|
||||
<rect class="" id="test" x="10" y="10" width="100" height="100"/>
|
||||
</svg>
|
||||
|
||||
@@@
|
||||
|
||||
{"prefixIds":false,"prefixClassNames":false}
|
After Width: | Height: | Size: 665 B |
Reference in New Issue
Block a user