1 | 'use strict';
|
---|
2 |
|
---|
3 | const csstree = require('css-tree');
|
---|
4 | const { referencesProps } = require('./_collections.js');
|
---|
5 |
|
---|
6 | /**
|
---|
7 | * @typedef {import('../lib/types').XastElement} XastElement
|
---|
8 | * @typedef {import('../lib/types').PluginInfo} PluginInfo
|
---|
9 | */
|
---|
10 |
|
---|
11 | exports.type = 'visitor';
|
---|
12 | exports.name = 'prefixIds';
|
---|
13 | exports.active = false;
|
---|
14 | exports.description = 'prefix IDs';
|
---|
15 |
|
---|
16 | /**
|
---|
17 | * extract basename from path
|
---|
18 | * @type {(path: string) => string}
|
---|
19 | */
|
---|
20 | const getBasename = (path) => {
|
---|
21 | // extract everything after latest slash or backslash
|
---|
22 | const matched = path.match(/[/\\]?([^/\\]+)$/);
|
---|
23 | if (matched) {
|
---|
24 | return matched[1];
|
---|
25 | }
|
---|
26 | return '';
|
---|
27 | };
|
---|
28 |
|
---|
29 | /**
|
---|
30 | * escapes a string for being used as ID
|
---|
31 | * @type {(string: string) => string}
|
---|
32 | */
|
---|
33 | const escapeIdentifierName = (str) => {
|
---|
34 | return str.replace(/[. ]/g, '_');
|
---|
35 | };
|
---|
36 |
|
---|
37 | /**
|
---|
38 | * @type {(string: string) => string}
|
---|
39 | */
|
---|
40 | const unquote = (string) => {
|
---|
41 | if (
|
---|
42 | (string.startsWith('"') && string.endsWith('"')) ||
|
---|
43 | (string.startsWith("'") && string.endsWith("'"))
|
---|
44 | ) {
|
---|
45 | return string.slice(1, -1);
|
---|
46 | }
|
---|
47 | return string;
|
---|
48 | };
|
---|
49 |
|
---|
50 | /**
|
---|
51 | * prefix an ID
|
---|
52 | * @type {(prefix: string, name: string) => string}
|
---|
53 | */
|
---|
54 | const prefixId = (prefix, value) => {
|
---|
55 | if (value.startsWith(prefix)) {
|
---|
56 | return value;
|
---|
57 | }
|
---|
58 | return prefix + value;
|
---|
59 | };
|
---|
60 |
|
---|
61 | /**
|
---|
62 | * prefix an #ID
|
---|
63 | * @type {(prefix: string, name: string) => string | null}
|
---|
64 | */
|
---|
65 | const prefixReference = (prefix, value) => {
|
---|
66 | if (value.startsWith('#')) {
|
---|
67 | return '#' + prefixId(prefix, value.slice(1));
|
---|
68 | }
|
---|
69 | return null;
|
---|
70 | };
|
---|
71 |
|
---|
72 | /**
|
---|
73 | * Prefixes identifiers
|
---|
74 | *
|
---|
75 | * @author strarsis <strarsis@gmail.com>
|
---|
76 | *
|
---|
77 | * @type {import('../lib/types').Plugin<{
|
---|
78 | * prefix?: boolean | string | ((node: XastElement, info: PluginInfo) => string),
|
---|
79 | * delim?: string,
|
---|
80 | * prefixIds?: boolean,
|
---|
81 | * prefixClassNames?: boolean,
|
---|
82 | * }>}
|
---|
83 | */
|
---|
84 | exports.fn = (_root, params, info) => {
|
---|
85 | const { delim = '__', prefixIds = true, prefixClassNames = true } = params;
|
---|
86 |
|
---|
87 | return {
|
---|
88 | element: {
|
---|
89 | enter: (node) => {
|
---|
90 | /**
|
---|
91 | * prefix, from file name or option
|
---|
92 | * @type {string}
|
---|
93 | */
|
---|
94 | let prefix = 'prefix' + delim;
|
---|
95 | if (typeof params.prefix === 'function') {
|
---|
96 | prefix = params.prefix(node, info) + delim;
|
---|
97 | } else if (typeof params.prefix === 'string') {
|
---|
98 | prefix = params.prefix + delim;
|
---|
99 | } else if (params.prefix === false) {
|
---|
100 | prefix = '';
|
---|
101 | } else if (info.path != null && info.path.length > 0) {
|
---|
102 | prefix = escapeIdentifierName(getBasename(info.path)) + delim;
|
---|
103 | }
|
---|
104 |
|
---|
105 | // prefix id/class selectors and url() references in styles
|
---|
106 | if (node.name === 'style') {
|
---|
107 | // skip empty <style/> elements
|
---|
108 | if (node.children.length === 0) {
|
---|
109 | return;
|
---|
110 | }
|
---|
111 |
|
---|
112 | // parse styles
|
---|
113 | let cssText = '';
|
---|
114 | if (
|
---|
115 | node.children[0].type === 'text' ||
|
---|
116 | node.children[0].type === 'cdata'
|
---|
117 | ) {
|
---|
118 | cssText = node.children[0].value;
|
---|
119 | }
|
---|
120 | /**
|
---|
121 | * @type {null | csstree.CssNode}
|
---|
122 | */
|
---|
123 | let cssAst = null;
|
---|
124 | try {
|
---|
125 | cssAst = csstree.parse(cssText, {
|
---|
126 | parseValue: true,
|
---|
127 | parseCustomProperty: false,
|
---|
128 | });
|
---|
129 | } catch {
|
---|
130 | return;
|
---|
131 | }
|
---|
132 |
|
---|
133 | csstree.walk(cssAst, (node) => {
|
---|
134 | // #ID, .class selectors
|
---|
135 | if (
|
---|
136 | (prefixIds && node.type === 'IdSelector') ||
|
---|
137 | (prefixClassNames && node.type === 'ClassSelector')
|
---|
138 | ) {
|
---|
139 | node.name = prefixId(prefix, node.name);
|
---|
140 | return;
|
---|
141 | }
|
---|
142 | // url(...) references
|
---|
143 | if (
|
---|
144 | node.type === 'Url' &&
|
---|
145 | node.value.value &&
|
---|
146 | node.value.value.length > 0
|
---|
147 | ) {
|
---|
148 | const prefixed = prefixReference(
|
---|
149 | prefix,
|
---|
150 | unquote(node.value.value)
|
---|
151 | );
|
---|
152 | if (prefixed != null) {
|
---|
153 | node.value.value = prefixed;
|
---|
154 | }
|
---|
155 | }
|
---|
156 | });
|
---|
157 |
|
---|
158 | // update styles
|
---|
159 | if (
|
---|
160 | node.children[0].type === 'text' ||
|
---|
161 | node.children[0].type === 'cdata'
|
---|
162 | ) {
|
---|
163 | node.children[0].value = csstree.generate(cssAst);
|
---|
164 | }
|
---|
165 | return;
|
---|
166 | }
|
---|
167 |
|
---|
168 | // prefix an ID attribute value
|
---|
169 | if (
|
---|
170 | prefixIds &&
|
---|
171 | node.attributes.id != null &&
|
---|
172 | node.attributes.id.length !== 0
|
---|
173 | ) {
|
---|
174 | node.attributes.id = prefixId(prefix, node.attributes.id);
|
---|
175 | }
|
---|
176 |
|
---|
177 | // prefix a class attribute value
|
---|
178 | if (
|
---|
179 | prefixClassNames &&
|
---|
180 | node.attributes.class != null &&
|
---|
181 | node.attributes.class.length !== 0
|
---|
182 | ) {
|
---|
183 | node.attributes.class = node.attributes.class
|
---|
184 | .split(/\s+/)
|
---|
185 | .map((name) => prefixId(prefix, name))
|
---|
186 | .join(' ');
|
---|
187 | }
|
---|
188 |
|
---|
189 | // prefix a href attribute value
|
---|
190 | // xlink:href is deprecated, must be still supported
|
---|
191 | for (const name of ['href', 'xlink:href']) {
|
---|
192 | if (
|
---|
193 | node.attributes[name] != null &&
|
---|
194 | node.attributes[name].length !== 0
|
---|
195 | ) {
|
---|
196 | const prefixed = prefixReference(prefix, node.attributes[name]);
|
---|
197 | if (prefixed != null) {
|
---|
198 | node.attributes[name] = prefixed;
|
---|
199 | }
|
---|
200 | }
|
---|
201 | }
|
---|
202 |
|
---|
203 | // prefix an URL attribute value
|
---|
204 | for (const name of referencesProps) {
|
---|
205 | if (
|
---|
206 | node.attributes[name] != null &&
|
---|
207 | node.attributes[name].length !== 0
|
---|
208 | ) {
|
---|
209 | // extract id reference from url(...) value
|
---|
210 | const matches = /url\((.*?)\)/gi.exec(node.attributes[name]);
|
---|
211 | if (matches != null) {
|
---|
212 | const value = matches[1];
|
---|
213 | const prefixed = prefixReference(prefix, value);
|
---|
214 | if (prefixed != null) {
|
---|
215 | node.attributes[name] = `url(${prefixed})`;
|
---|
216 | }
|
---|
217 | }
|
---|
218 | }
|
---|
219 | }
|
---|
220 |
|
---|
221 | // prefix begin/end attribute value
|
---|
222 | for (const name of ['begin', 'end']) {
|
---|
223 | if (
|
---|
224 | node.attributes[name] != null &&
|
---|
225 | node.attributes[name].length !== 0
|
---|
226 | ) {
|
---|
227 | const parts = node.attributes[name].split(/\s*;\s+/).map((val) => {
|
---|
228 | if (val.endsWith('.end') || val.endsWith('.start')) {
|
---|
229 | const [id, postfix] = val.split('.');
|
---|
230 | return `${prefixId(prefix, id)}.${postfix}`;
|
---|
231 | }
|
---|
232 | return val;
|
---|
233 | });
|
---|
234 | node.attributes[name] = parts.join('; ');
|
---|
235 | }
|
---|
236 | }
|
---|
237 | },
|
---|
238 | },
|
---|
239 | };
|
---|
240 | };
|
---|