Skip to content

Commit

Permalink
Include all configuration in the <style /> element
Browse files Browse the repository at this point in the history
This fixes a bug in the prefixIds plugin.  It assumed that the <style />
element will have a single text fragment underneath.

So this works:
<style>
<!-- Leading comment ignored -->
.class1 {}
...
.classN {}
</style>

The above parses so that node.children[0] is a "text" node with all the
CSS classes where "node" is the style element.

And this fails:
<style>
<!-- Ignored comment -->
.class1 {}
<!-- comment -->
.class2 {}
</style>

This fails because only node.children[0] is processed and node.children
looks something like:
[
.class1 (type = "text")
comment (type = "comment")
.class2 (type = "text")
]
  • Loading branch information
john-neptune authored and SethFalco committed Dec 9, 2023
1 parent 2d9e101 commit 6c3eb09
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 51 deletions.
89 changes: 38 additions & 51 deletions plugins/prefixIds.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports.description = 'prefix IDs';
*/
const getBasename = (path) => {
// extract everything after latest slash or backslash
const matched = path.match(/[/\\]?([^/\\]+)$/);
const matched = /[/\\]?([^/\\]+)$/.exec(path);
if (matched) {
return matched[1];
}
Expand Down Expand Up @@ -118,7 +118,6 @@ const generatePrefix = (body, node, info, prefixGenerator, delim, history) => {
* Prefixes identifiers
*
* @author strarsis <[email protected]>
*
* @type {import('./plugins-types').Plugin<'prefixIds'>}
*/
exports.fn = (_root, params, info) => {
Expand Down Expand Up @@ -149,60 +148,48 @@ exports.fn = (_root, params, info) => {
return;
}

// parse styles
let cssText = '';
if (
node.children[0].type === 'text' ||
node.children[0].type === 'cdata'
) {
cssText = node.children[0].value;
}
/**
* @type {?csstree.CssNode}
*/
let cssAst = null;
try {
cssAst = csstree.parse(cssText, {
parseValue: true,
parseCustomProperty: false,
});
} catch {
return;
}
for (const child of node.children) {
if (child.type !== 'text' && child.type !== 'cdata') {
continue;
}

csstree.walk(cssAst, (node) => {
// #ID, .class selectors
if (
(prefixIds && node.type === 'IdSelector') ||
(prefixClassNames && node.type === 'ClassSelector')
) {
node.name = prefixId(prefixGenerator, node.name);
const cssText = child.value;
/** @type {?csstree.CssNode} */
let cssAst = null;
try {
cssAst = csstree.parse(cssText, {
parseValue: true,
parseCustomProperty: false,
});
} catch {
return;
}
// url(...) references
// csstree v2 changed this type
// @ts-ignore
if (node.type === 'Url' && node.value.length > 0) {
const prefixed = prefixReference(
prefixGenerator,
// @ts-ignore
unquote(node.value)
);
if (prefixed != null) {
// @ts-ignore
node.value = prefixed;

csstree.walk(cssAst, (node) => {
if (
(prefixIds && node.type === 'IdSelector') ||
(prefixClassNames && node.type === 'ClassSelector')
) {
node.name = prefixId(prefixGenerator, node.name);
return;
}
}
});
// @ts-ignore csstree v2 changed this type
if (node.type === 'Url' && node.value.length > 0) {
const prefixed = prefixReference(
prefixGenerator,
// @ts-ignore
unquote(node.value)
);
if (prefixed != null) {
// @ts-ignore
node.value = prefixed;
}
}
});

// update styles
if (
node.children[0].type === 'text' ||
node.children[0].type === 'cdata'
) {
node.children[0].value = csstree.generate(cssAst);
child.value = csstree.generate(cssAst);
return;
}
return;
}

// prefix an ID attribute value
Expand Down Expand Up @@ -243,7 +230,7 @@ exports.fn = (_root, params, info) => {
}
}

// prefix an URL attribute value
// prefix a URL attribute value
for (const name of referencesProps) {
if (
node.attributes[name] != null &&
Expand Down
20 changes: 20 additions & 0 deletions test/plugins/prefixIds.12.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6c3eb09

Please sign in to comment.