0|1|2|3)))$/;
243 | const str1 = "-inset-0";
244 | assert.equal(regex1.exec(str1).groups.negPos, "0");
245 | });
246 | });
247 |
248 | describe("getGroupIndex", function () {
249 | const targetProperties = {
250 | Backgrounds: [
251 | "Background Image URL",
252 | "Background Attachment",
253 | "Background Clip",
254 | "Background Color",
255 | "Deprecated Background Opacity",
256 | "Background Origin",
257 | "Background Position",
258 | "Background Repeat",
259 | "Background Size",
260 | "Background Image",
261 | "Gradient Color Stops",
262 | ],
263 | };
264 | const targetGroups = defaultGroups.filter((g) => Object.keys(targetProperties).includes(g.type));
265 |
266 | it("should have filtered `targetGroups`", function () {
267 | assert.equal(targetGroups.length, Object.keys(targetProperties).length);
268 | });
269 |
270 | it(`should parse classnames`, function () {
271 | let name, actual, expected;
272 | name = "md:bg-[url('/image-md.jpg')]";
273 | actual = groupUtil.parseClassname(name, targetGroups, mergedConfig, 0);
274 | expected = {
275 | index: 0,
276 | name: name,
277 | variants: "md:",
278 | parentType: "Backgrounds",
279 | body: "bg-[url('/",
280 | value: "'/image-md.jpg'",
281 | shorthand: "",
282 | leading: "",
283 | trailing: "",
284 | important: false,
285 | };
286 | assert.deepEqual(actual, expected);
287 | });
288 |
289 | it(`should get correct group index`, function () {
290 | let name, actual, expected;
291 | const groups = groupUtil.getGroups(targetGroups, mergedConfig);
292 | name = "md:bg-[url(some)]";
293 | actual = groupUtil.getGroupIndex(name, groups, mergedConfig.separator);
294 | expected = 0;
295 | assert.equal(actual, expected);
296 | });
297 | });
298 |
--------------------------------------------------------------------------------
/tests/lib/rules/migration-from-tailwind-2.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @fileoverview Detect obsolete classnames when upgrading to Tailwind CSS v3
3 | * @author François Massart
4 | */
5 | "use strict";
6 |
7 | //------------------------------------------------------------------------------
8 | // Requirements
9 | //------------------------------------------------------------------------------
10 |
11 | var rule = require("../../../lib/rules/migration-from-tailwind-2");
12 | var RuleTester = require("eslint").RuleTester;
13 |
14 | //------------------------------------------------------------------------------
15 | // Tests
16 | //------------------------------------------------------------------------------
17 |
18 | var parserOptions = {
19 | ecmaVersion: 2019,
20 | sourceType: "module",
21 | ecmaFeatures: {
22 | jsx: true,
23 | },
24 | };
25 |
26 | const skipClassAttributeOptions = [
27 | {
28 | skipClassAttribute: true,
29 | config: {
30 | theme: {},
31 | plugins: [],
32 | },
33 | },
34 | ];
35 |
36 | var ruleTester = new RuleTester({ parserOptions });
37 |
38 | ruleTester.run("migration-from-tailwind-2", rule, {
39 | valid: [
40 | {
41 | code: `Automatic transforms and filters
`,
42 | },
43 | {
44 | code: `transition-transform
`,
45 | },
46 | {
47 | code: `transition-[var(--transform)]
`,
48 | },
49 | {
50 | code: `No errors while typing
`,
51 | },
52 | ],
53 | invalid: [
54 | {
55 | code: `Automatic transform
`,
56 | output: `Automatic transform
`,
57 | errors: [
58 | {
59 | messageId: "classnameNotNeeded",
60 | data: {
61 | classnames: "transform",
62 | },
63 | },
64 | ],
65 | },
66 | {
67 | code: `Automatic transform
`,
68 | output: `Automatic transform
`,
69 | errors: [
70 | {
71 | messageId: "classnameNotNeeded",
72 | data: {
73 | classnames: "backdrop-filter",
74 | },
75 | },
76 | ],
77 | },
78 | {
79 | code: `Automatic transforms and filters
`,
80 | output: `Automatic transforms and filters
`,
81 | errors: [
82 | {
83 | messageId: "classnamesNotNeeded",
84 | data: {
85 | classnames: "transform, filter, backdrop-filter",
86 | },
87 | },
88 | ],
89 | },
90 | {
91 | code: `overflow-clip/ellipsis
`,
92 | output: `overflow-clip/ellipsis
`,
93 | errors: [
94 | {
95 | messageId: "classnameChanged",
96 | data: {
97 | deprecated: "overflow-clip",
98 | updated: "text-clip",
99 | },
100 | },
101 | ],
102 | },
103 | {
104 | code: `overflow-clip/ellipsis
`,
105 | output: `overflow-clip/ellipsis
`,
106 | errors: [
107 | {
108 | messageId: "classnameChanged",
109 | data: {
110 | deprecated: "overflow-ellipsis",
111 | updated: "text-ellipsis",
112 | },
113 | },
114 | ],
115 | },
116 | {
117 | code: `support named group/peer syntax
`,
118 | output: `support named group/peer syntax
`,
119 | errors: [
120 | {
121 | messageId: "classnameChanged",
122 | data: {
123 | deprecated: "group/name:overflow-ellipsis",
124 | updated: "group/name:text-ellipsis",
125 | },
126 | },
127 | ],
128 | },
129 | {
130 | code: `flex-grow/shrink
`,
131 | output: `flex-grow/shrink
`,
132 | errors: [
133 | {
134 | messageId: "classnameChanged",
135 | data: {
136 | deprecated: "flex-grow-0",
137 | updated: "grow-0",
138 | },
139 | },
140 | ],
141 | },
142 | {
143 | code: `flex-grow/shrink
`,
144 | output: `flex-grow/shrink
`,
145 | errors: [
146 | {
147 | messageId: "classnameChanged",
148 | data: {
149 | deprecated: "flex-shrink",
150 | updated: "shrink",
151 | },
152 | },
153 | ],
154 | },
155 | {
156 | code: `decoration-clone/slice
`,
157 | output: `decoration-clone/slice
`,
158 | errors: [
159 | {
160 | messageId: "classnameChanged",
161 | data: {
162 | deprecated: "decoration-clone",
163 | updated: "box-decoration-clone",
164 | },
165 | },
166 | ],
167 | },
168 | {
169 | code: `decoration-clone/slice
`,
170 | output: `decoration-clone/slice
`,
171 | errors: [
172 | {
173 | messageId: "classnameChanged",
174 | data: {
175 | deprecated: "decoration-slice",
176 | updated: "box-decoration-slice",
177 | },
178 | },
179 | ],
180 | },
181 | {
182 | code: `bg-opacity
`,
183 | errors: [
184 | {
185 | messageId: "classnameOpacityDeprecated",
186 | data: {
187 | classname: "bg-opacity-50",
188 | value: "50",
189 | },
190 | },
191 | ],
192 | },
193 | {
194 | code: `ring-opacity
`,
195 | errors: [
196 | {
197 | messageId: "classnameOpacityDeprecated",
198 | data: {
199 | classname: "ring-opacity-50",
200 | value: "50",
201 | },
202 | },
203 | {
204 | messageId: "classnameOpacityDeprecated",
205 | data: {
206 | classname: "border-opacity-50",
207 | value: "50",
208 | },
209 | },
210 | ],
211 | },
212 | {
213 | code: ``,
214 | output: ``,
215 | errors: [
216 | {
217 | messageId: "classnameChanged",
218 | data: {
219 | deprecated: "placeholder-red-900",
220 | updated: "placeholder:text-red-900",
221 | },
222 | },
223 | ],
224 | },
225 | {
226 | code: `classnames(["placeholder-red-900"])`,
227 | output: `classnames(["placeholder:text-red-900"])`,
228 | errors: [
229 | {
230 | messageId: "classnameChanged",
231 | data: {
232 | deprecated: "placeholder-red-900",
233 | updated: "placeholder:text-red-900",
234 | },
235 | },
236 | ],
237 | },
238 | {
239 | code: `classnames({"placeholder-red-900": true})`,
240 | output: `classnames({"placeholder:text-red-900": true})`,
241 | errors: [
242 | {
243 | messageId: "classnameChanged",
244 | data: {
245 | deprecated: "placeholder-red-900",
246 | updated: "placeholder:text-red-900",
247 | },
248 | },
249 | ],
250 | },
251 | {
252 | code: `
253 | @if (session()->has('status'))
254 |
255 | {{ session('status') }}
256 |
257 | @endif`,
258 | output: `
259 | @if (session()->has('status'))
260 |
261 | {{ session('status') }}
262 |
263 | @endif`,
264 | parser: require.resolve("@angular-eslint/template-parser"),
265 | errors: [
266 | {
267 | messageId: "classnameChanged",
268 | data: {
269 | deprecated: "flex-shrink",
270 | updated: "shrink",
271 | },
272 | },
273 | ],
274 | },
275 | {
276 | code: ``,
277 | output: ``,
278 | options: skipClassAttributeOptions,
279 | errors: [
280 | {
281 | messageId: "classnameChanged",
282 | data: {
283 | deprecated: "placeholder-red-900",
284 | updated: "placeholder:text-red-900",
285 | },
286 | },
287 | ],
288 | },
289 | {
290 | code: `
291 |
292 |
293 |
294 | `,
295 | output: `
296 |
297 |
298 |
299 | `,
300 | options: skipClassAttributeOptions,
301 | errors: [
302 | {
303 | messageId: "classnameChanged",
304 | data: {
305 | deprecated: "placeholder-red-900",
306 | updated: "placeholder:text-red-900",
307 | },
308 | },
309 | ],
310 | filename: "test.vue",
311 | parser: require.resolve("vue-eslint-parser"),
312 | },
313 | {
314 | code: `
315 |
316 |
317 |
318 | `,
319 | output: `
320 |
321 |
322 |
323 | `,
324 | options: skipClassAttributeOptions,
325 | errors: [
326 | {
327 | messageId: "classnameChanged",
328 | data: {
329 | deprecated: "flex-shrink",
330 | updated: "shrink",
331 | },
332 | },
333 | ],
334 | filename: "test.vue",
335 | parser: require.resolve("vue-eslint-parser"),
336 | },
337 | {
338 | code: `
339 |
340 |
341 |
342 | `,
343 | output: `
344 |
345 |
346 |
347 | `,
348 | options: skipClassAttributeOptions,
349 | errors: [
350 | {
351 | messageId: "classnameChanged",
352 | data: {
353 | deprecated: "decoration-slice",
354 | updated: "box-decoration-slice",
355 | },
356 | },
357 | ],
358 | filename: "test.vue",
359 | parser: require.resolve("vue-eslint-parser"),
360 | },
361 | {
362 | code: `
363 |
364 |
365 |
366 | `,
367 | output: `
368 |
369 |
370 |
371 | `,
372 | options: skipClassAttributeOptions,
373 | errors: [
374 | {
375 | messageId: "classnameChanged",
376 | data: {
377 | deprecated: "flex-grow-0",
378 | updated: "grow-0",
379 | },
380 | },
381 | ],
382 | filename: "test.vue",
383 | parser: require.resolve("vue-eslint-parser"),
384 | },
385 | ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].map(tag => ({
386 | code: `${tag}\`flex-grow-0\``,
387 | output: `${tag}\`grow-0\``,
388 | errors: [
389 | {
390 | messageId: "classnameChanged",
391 | data: {
392 | deprecated: "flex-grow-0",
393 | updated: "grow-0",
394 | },
395 | },
396 | ],
397 | options: [
398 | {
399 | tags: ["myTag"],
400 | },
401 | ],
402 | }))),
403 | ],
404 | });
405 |
--------------------------------------------------------------------------------
/lib/util/ast.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @fileoverview Utility functions for AST
3 | */
4 |
5 | 'use strict';
6 |
7 | const { separatorRegEx } = require('./regex');
8 | // context.parserPath
9 | // /.../eslint-plugin-tailwindcss/node_modules/espree/espree.js
10 | // /.../eslint-plugin-tailwindcss/node_modules/@angular-eslint/template-parser/dist/index.js
11 |
12 | const removeDuplicatesFromArray = require('./removeDuplicatesFromArray');
13 |
14 | function calleeToString(calleeNode) {
15 | if (calleeNode.type === 'Identifier') {
16 | return calleeNode.name;
17 | }
18 | if (calleeNode.type === 'MemberExpression') {
19 | return `${calleeNode.object.name}.${calleeNode.property.name}`;
20 | }
21 | }
22 |
23 | /**
24 | * Find out if node is `class` or `className`
25 | *
26 | * @param {ASTNode} node The AST node being checked
27 | * @param {String} classRegex Regex to test the attribute that is being checked against
28 | * @returns {Boolean}
29 | */
30 | function isClassAttribute(node, classRegex) {
31 | if (!node.name) {
32 | return false;
33 | }
34 | let name = '';
35 | switch (node.type) {
36 | case 'TextAttribute':
37 | name = node.name;
38 | break;
39 | case 'JSXAttribute':
40 | if (node.name.type === 'JSXNamespacedName') {
41 | const ns = node.name.namespace.name || '';
42 | name = (ns.length ? ns + ':' : '') + node.name.name.name;
43 | } else {
44 | name = node.name.name;
45 | }
46 | break;
47 | default:
48 | name = node.name.name;
49 | }
50 | return new RegExp(classRegex).test(name);
51 | }
52 |
53 | /**
54 | * Find out if node is `class`
55 | *
56 | * @param {ASTNode} node The AST node being checked
57 | * @param {String} classRegex Regex to test the attribute that is being checked against
58 | * @returns {Boolean}
59 | */
60 | function isVueClassAttribute(node, classRegex) {
61 | const re = new RegExp(classRegex);
62 | let name = '';
63 | switch (true) {
64 | case node.key && node.key.name && re.test(node.key.name):
65 | // class="vue-classes-as-litteral"
66 | return true;
67 | case node.key &&
68 | node.key.name &&
69 | node.key.name.name &&
70 | node.key.argument &&
71 | node.key.argument.name &&
72 | /^bind$/.test(node.key.name.name) &&
73 | re.test(node.key.argument.name):
74 | // v-bind:class="vue-classes-as-bind"
75 | // :class="vue-classes-as-bind"
76 | return true;
77 | default:
78 | return false;
79 | }
80 | }
81 |
82 | /**
83 | * Find out if node's value attribute is just simple text
84 | *
85 | * @param {ASTNode} node The AST node being checked
86 | * @returns {Boolean}
87 | */
88 | function isVLiteralValue(node) {
89 | return node.value && node.value.type === 'VLiteral';
90 | }
91 |
92 | /**
93 | * Find out if node's value attribute is an ArrayExpression
94 | *
95 | * @param {ASTNode} node The AST node being checked
96 | * @returns {Boolean}
97 | */
98 | function isArrayExpression(node) {
99 | return node.value && node.value.type === 'VExpressionContainer' && node.value.expression && node.value.expression.type === 'ArrayExpression';
100 | }
101 |
102 | /**
103 | * Find out if node's value attribute is an ObjectExpression
104 | *
105 | * @param {ASTNode} node The AST node being checked
106 | * @returns {Boolean}
107 | */
108 | function isObjectExpression(node) {
109 | return node.value && node.value.type === 'VExpressionContainer' && node.value.expression && node.value.expression.type === 'ObjectExpression';
110 | }
111 |
112 | /**
113 | * Find out if node's value attribute is just simple text
114 | *
115 | * @param {ASTNode} node The AST node being checked
116 | * @returns {Boolean}
117 | */
118 | function isVueValidAttributeValue(node) {
119 | switch (true) {
120 | case isVLiteralValue(node): // Simple string
121 | case isArrayExpression(node): // ['tw-unknown-class']
122 | case isObjectExpression(node): // {'tw-unknown-class': true}
123 | return true;
124 | default:
125 | return false;
126 | }
127 | }
128 |
129 | /**
130 | * Find out if node's value attribute is just simple text
131 | *
132 | * @param {ASTNode} node The AST node being checked
133 | * @returns {Boolean}
134 | */
135 | function isLiteralAttributeValue(node) {
136 | if (node.type === 'TextAttribute' && node.name === 'class' && typeof node.value === 'string') {
137 | return true;
138 | }
139 | if (node.value) {
140 | switch (node.value.type) {
141 | case 'Literal':
142 | // No support for dynamic or conditional...
143 | return !/\{|\?|\}/.test(node.value.value);
144 | case 'JSXExpressionContainer':
145 | // className={"..."}
146 | return node.value.expression.type === 'Literal';
147 | }
148 | }
149 | return false;
150 | }
151 |
152 | /**
153 | * Find out if the node is a valid candidate for our rules
154 | *
155 | * @param {ASTNode} node The AST node being checked
156 | * @param {String} classRegex Regex to test the attribute that is being checked against
157 | * @returns {Boolean}
158 | */
159 | function isValidJSXAttribute(node, classRegex) {
160 | if (!isClassAttribute(node, classRegex)) {
161 | // Only run for class[Name] attributes
162 | return false;
163 | }
164 | if (!isLiteralAttributeValue(node)) {
165 | // No support for dynamic or conditional classnames
166 | return false;
167 | }
168 | return true;
169 | }
170 |
171 | /**
172 | * Find out if the node is a valid candidate for our rules
173 | *
174 | * @param {ASTNode} node The AST node being checked
175 | * @param {String} classRegex Regex to test the attribute that is being checked against
176 | * @returns {Boolean}
177 | */
178 | function isValidVueAttribute(node, classRegex) {
179 | if (!isVueClassAttribute(node, classRegex)) {
180 | // Only run for class attributes
181 | return false;
182 | }
183 | if (!isVueValidAttributeValue(node)) {
184 | // No support for dynamic or conditional classnames
185 | return false;
186 | }
187 | return true;
188 | }
189 |
190 | function extractRangeFromNode(node) {
191 | if (node.type === 'TextAttribute' && node.name === 'class') {
192 | return [node.valueSpan.fullStart.offset, node.valueSpan.end.offset];
193 | }
194 | if (node.value === undefined) {
195 | return [0, 0];
196 | }
197 | switch (node.value.type) {
198 | case 'JSXExpressionContainer':
199 | return node.value.expression.range;
200 | default:
201 | return node.value.range;
202 | }
203 | }
204 |
205 | function extractValueFromNode(node) {
206 | if (node.type === 'TextAttribute' && node.name === 'class') {
207 | return node.value;
208 | }
209 | if (node.value === undefined) {
210 | return node.value;
211 | }
212 |
213 | switch (node.value.type) {
214 | case 'JSXExpressionContainer':
215 | return node.value.expression.value;
216 | case 'VExpressionContainer':
217 | switch (node.value.expression.type) {
218 | case 'ArrayExpression':
219 | return node.value.expression.elements;
220 | case 'ObjectExpression':
221 | return node.value.expression.properties;
222 | }
223 | return node.value.expression.value;
224 | default:
225 | return node.value.value;
226 | }
227 | }
228 |
229 | function extractClassnamesFromValue(classStr) {
230 | if (typeof classStr !== 'string') {
231 | return { classNames: [], whitespaces: [], headSpace: false, tailSpace: false };
232 | }
233 | let parts = classStr.split(separatorRegEx);
234 | if (parts[0] === '') {
235 | parts.shift();
236 | }
237 | if (parts[parts.length - 1] === '') {
238 | parts.pop();
239 | }
240 | let headSpace = separatorRegEx.test(parts[0]);
241 | let tailSpace = separatorRegEx.test(parts[parts.length - 1]);
242 | const isClass = (_, i) => (headSpace ? i % 2 !== 0 : i % 2 === 0);
243 | const isNotClass = (_, i) => (headSpace ? i % 2 === 0 : i % 2 !== 0);
244 | let classNames = parts.filter(isClass);
245 | let whitespaces = parts.filter(isNotClass);
246 | return { classNames: classNames, whitespaces: whitespaces, headSpace: headSpace, tailSpace: tailSpace };
247 | }
248 |
249 | /**
250 | * Inspect and parse an abstract syntax node and run a callback function
251 | *
252 | * @param {ASTNode} rootNode The current root node being parsed by eslint
253 | * @param {ASTNode} childNode The AST node child argument being checked
254 | * @param {Function} cb The callback function
255 | * @param {Boolean} skipConditional Optional, indicate distinct parsing for conditional nodes
256 | * @param {Boolean} isolate Optional, set internally to isolate parsing and validation on conditional children
257 | * @param {Array} ignoredKeys Optional, set object keys which should not be parsed e.g. for `cva`
258 | * @returns {void}
259 | */
260 | function parseNodeRecursive(rootNode, childNode, cb, skipConditional = false, isolate = false, ignoredKeys = []) {
261 | // TODO allow vue non litteral
262 | let originalClassNamesValue;
263 | let classNames;
264 | if (childNode === null) {
265 | originalClassNamesValue = extractValueFromNode(rootNode);
266 | ({ classNames } = extractClassnamesFromValue(originalClassNamesValue));
267 | classNames = removeDuplicatesFromArray(classNames);
268 | if (classNames.length === 0) {
269 | // Don't run for empty className
270 | return;
271 | }
272 | cb(classNames, rootNode);
273 | } else if (childNode === undefined) {
274 | // Ignore invalid child candidates (probably inside complex TemplateLiteral)
275 | return;
276 | } else {
277 | const forceIsolation = skipConditional ? true : isolate;
278 | let trim = false;
279 | switch (childNode.type) {
280 | case 'TemplateLiteral':
281 | childNode.expressions.forEach((exp) => {
282 | parseNodeRecursive(rootNode, exp, cb, skipConditional, forceIsolation, ignoredKeys);
283 | });
284 | childNode.quasis.forEach((quasis) => {
285 | parseNodeRecursive(rootNode, quasis, cb, skipConditional, isolate, ignoredKeys);
286 | });
287 | return;
288 | case 'ConditionalExpression':
289 | parseNodeRecursive(rootNode, childNode.consequent, cb, skipConditional, forceIsolation, ignoredKeys);
290 | parseNodeRecursive(rootNode, childNode.alternate, cb, skipConditional, forceIsolation, ignoredKeys);
291 | return;
292 | case 'LogicalExpression':
293 | parseNodeRecursive(rootNode, childNode.right, cb, skipConditional, forceIsolation, ignoredKeys);
294 | return;
295 | case 'ArrayExpression':
296 | childNode.elements.forEach((el) => {
297 | parseNodeRecursive(rootNode, el, cb, skipConditional, forceIsolation, ignoredKeys);
298 | });
299 | return;
300 | case 'ObjectExpression':
301 | childNode.properties.forEach((prop) => {
302 | const isUsedByClassNamesPlugin = (rootNode.callee && rootNode.callee.name === 'classnames') || rootNode.type === 'VAttribute';
303 |
304 | if (prop.type === 'SpreadElement') {
305 | // Ignore spread elements
306 | return;
307 | }
308 |
309 | if (prop.key.type === 'Identifier' && ignoredKeys.includes(prop.key.name)) {
310 | // Ignore specific keys defined in settings
311 | return;
312 | }
313 |
314 | parseNodeRecursive(
315 | rootNode,
316 | isUsedByClassNamesPlugin ? prop.key : prop.value,
317 | cb,
318 | skipConditional,
319 | forceIsolation,
320 | ignoredKeys
321 | );
322 | });
323 | return;
324 | case 'Property':
325 | parseNodeRecursive(rootNode, childNode.key, cb, skipConditional, forceIsolation, ignoredKeys);
326 | return;
327 | case 'Literal':
328 | trim = true;
329 | originalClassNamesValue = childNode.value;
330 | break;
331 | case 'TemplateElement':
332 | originalClassNamesValue = childNode.value.raw;
333 | break;
334 | }
335 | ({ classNames } = extractClassnamesFromValue(originalClassNamesValue));
336 | classNames = removeDuplicatesFromArray(classNames);
337 | if (classNames.length === 0) {
338 | // Don't run for empty className
339 | return;
340 | }
341 | const targetNode = isolate ? null : rootNode;
342 | cb(classNames, targetNode);
343 | }
344 | }
345 |
346 | function getTemplateElementPrefix(text, raw) {
347 | const idx = text.indexOf(raw);
348 | if (idx === 0) {
349 | return '';
350 | }
351 | return text.split(raw).shift();
352 | }
353 |
354 | function getTemplateElementSuffix(text, raw) {
355 | if (text.indexOf(raw) === -1) {
356 | return '';
357 | }
358 | return text.split(raw).pop();
359 | }
360 |
361 | function getTemplateElementBody(text, prefix, suffix) {
362 | let arr = text.split(prefix);
363 | arr.shift();
364 | let body = arr.join(prefix);
365 | arr = body.split(suffix);
366 | arr.pop();
367 | return arr.join(suffix);
368 | }
369 |
370 | module.exports = {
371 | calleeToString,
372 | extractRangeFromNode,
373 | extractValueFromNode,
374 | extractClassnamesFromValue,
375 | isClassAttribute,
376 | isLiteralAttributeValue,
377 | isArrayExpression,
378 | isObjectExpression,
379 | isValidJSXAttribute,
380 | isValidVueAttribute,
381 | isVLiteralValue,
382 | parseNodeRecursive,
383 | getTemplateElementPrefix,
384 | getTemplateElementSuffix,
385 | getTemplateElementBody,
386 | };
387 |
--------------------------------------------------------------------------------
/lib/rules/migration-from-tailwind-2.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @fileoverview Detect obsolete classnames when upgrading to Tailwind CSS v3
3 | * @author François Massart
4 | */
5 | 'use strict';
6 |
7 | const docsUrl = require('../util/docsUrl');
8 | const customConfig = require('../util/customConfig');
9 | const astUtil = require('../util/ast');
10 | const groupUtil = require('../util/groupMethods');
11 | const getOption = require('../util/settings');
12 | const parserUtil = require('../util/parser');
13 |
14 | //------------------------------------------------------------------------------
15 | // Rule Definition
16 | //------------------------------------------------------------------------------
17 |
18 | // Predefine message for use in context.report conditional.
19 | // messageId will still be usable in tests.
20 | const CLASSNAME_NOT_NEEDED_MSG = `Classname '{{classnames}}' is not needed in Tailwind CSS v3!`;
21 | const CLASSNAMES_NOT_NEEDED_MSG = `Classnames '{{classnames}}' are not needed in Tailwind CSS v3!`;
22 | const CLASSNAME_CHANGED_MSG = `Classname '{{deprecated}}' should be updated to '{{updated}}' in Tailwind CSS v3!`;
23 | const OPACITY_CLASS_DEPRECATED_MSG = `Classname '{{classname}}' should be replaced by an opacity suffix (eg. '/{{value}}')`;
24 |
25 | module.exports = {
26 | meta: {
27 | docs: {
28 | description: 'Detect obsolete classnames when upgrading to Tailwind CSS v3',
29 | category: 'Possible Errors',
30 | recommended: true,
31 | url: docsUrl('migration-from-tailwind-2'),
32 | },
33 | messages: {
34 | classnameNotNeeded: CLASSNAME_NOT_NEEDED_MSG,
35 | classnamesNotNeeded: CLASSNAMES_NOT_NEEDED_MSG,
36 | classnameChanged: CLASSNAME_CHANGED_MSG,
37 | classnameOpacityDeprecated: OPACITY_CLASS_DEPRECATED_MSG,
38 | },
39 | fixable: 'code',
40 | schema: [
41 | {
42 | type: 'object',
43 | properties: {
44 | callees: {
45 | type: 'array',
46 | items: { type: 'string', minLength: 0 },
47 | uniqueItems: true,
48 | },
49 | ignoredKeys: {
50 | type: 'array',
51 | items: { type: 'string', minLength: 0 },
52 | uniqueItems: true,
53 | },
54 | config: {
55 | // returned from `loadConfig()` utility
56 | type: ['string', 'object'],
57 | },
58 | tags: {
59 | type: 'array',
60 | items: { type: 'string', minLength: 0 },
61 | uniqueItems: true,
62 | },
63 | },
64 | },
65 | ],
66 | },
67 |
68 | create: function (context) {
69 | const callees = getOption(context, 'callees');
70 | const skipClassAttribute = getOption(context, 'skipClassAttribute');
71 | const tags = getOption(context, 'tags');
72 | const twConfig = getOption(context, 'config');
73 | const classRegex = getOption(context, 'classRegex');
74 |
75 | const mergedConfig = customConfig.resolve(twConfig);
76 |
77 | //----------------------------------------------------------------------
78 | // Helpers
79 | //----------------------------------------------------------------------
80 |
81 | /**
82 | * Recursive function crawling into child nodes
83 | * @param {ASTNode} node The root node of the current parsing
84 | * @param {ASTNode} arg The child node of node
85 | * @returns {void}
86 | */
87 | const parseForObsoleteClassNames = (node, arg = null) => {
88 | let originalClassNamesValue = null;
89 | let start = null;
90 | let end = null;
91 | let prefix = '';
92 | let suffix = '';
93 | if (arg === null) {
94 | originalClassNamesValue = astUtil.extractValueFromNode(node);
95 | const range = astUtil.extractRangeFromNode(node);
96 | if (node.type === 'TextAttribute') {
97 | start = range[0];
98 | end = range[1];
99 | } else {
100 | start = range[0] + 1;
101 | end = range[1] - 1;
102 | }
103 | } else {
104 | switch (arg.type) {
105 | case 'Identifier':
106 | return;
107 | case 'TemplateLiteral':
108 | arg.expressions.forEach((exp) => {
109 | parseForObsoleteClassNames(node, exp);
110 | });
111 | arg.quasis.forEach((quasis) => {
112 | parseForObsoleteClassNames(node, quasis);
113 | });
114 | return;
115 | case 'ConditionalExpression':
116 | parseForObsoleteClassNames(node, arg.consequent);
117 | parseForObsoleteClassNames(node, arg.alternate);
118 | return;
119 | case 'LogicalExpression':
120 | parseForObsoleteClassNames(node, arg.right);
121 | return;
122 | case 'ArrayExpression':
123 | arg.elements.forEach((el) => {
124 | parseForObsoleteClassNames(node, el);
125 | });
126 | return;
127 | case 'ObjectExpression':
128 | arg.properties.forEach((prop) => {
129 | parseForObsoleteClassNames(node, prop.key);
130 | });
131 | return;
132 | case 'Property':
133 | parseForObsoleteClassNames(node, arg.key);
134 | return;
135 | case 'Literal':
136 | originalClassNamesValue = arg.value;
137 | start = arg.range[0] + 1;
138 | end = arg.range[1] - 1;
139 | break;
140 | case 'TemplateElement':
141 | originalClassNamesValue = arg.value.raw;
142 | if (originalClassNamesValue === '') {
143 | return;
144 | }
145 | start = arg.range[0];
146 | end = arg.range[1];
147 | // https://github.com/eslint/eslint/issues/13360
148 | // The problem is that range computation includes the backticks (`test`)
149 | // but value.raw does not include them, so there is a mismatch.
150 | // start/end does not include the backticks, therefore it matches value.raw.
151 | const txt = context.getSourceCode().getText(arg);
152 | prefix = astUtil.getTemplateElementPrefix(txt, originalClassNamesValue);
153 | suffix = astUtil.getTemplateElementSuffix(txt, originalClassNamesValue);
154 | originalClassNamesValue = astUtil.getTemplateElementBody(txt, prefix, suffix);
155 | break;
156 | }
157 | }
158 |
159 | let { classNames, whitespaces, headSpace, tailSpace } =
160 | astUtil.extractClassnamesFromValue(originalClassNamesValue);
161 |
162 | const notNeeded = [];
163 | const outdated = [];
164 | const deprecatedBgOpacity = [];
165 | const filtered = classNames.filter((cls) => {
166 | const suffix = groupUtil.getSuffix(cls, mergedConfig.separator);
167 | if (/^((backdrop\-)?(filter|transform))$/i.test(suffix)) {
168 | notNeeded.push(cls);
169 | return false;
170 | }
171 | let overflowRes = /^overflow\-(?clip|ellipsis)$/i.exec(suffix);
172 | if (overflowRes && overflowRes.groups && overflowRes.groups.value) {
173 | outdated.push([cls, cls.replace(/overflow\-(clip|ellipsis)$/i, `text-${overflowRes.groups.value}`)]);
174 | }
175 | let growShrinkRes = /flex\-(?grow|shrink)(\-(?${flexVal}))?/i.exec(suffix);
176 | if (growShrinkRes && growShrinkRes.groups && growShrinkRes.groups.prop) {
177 | const prop = growShrinkRes.groups.prop;
178 | const flexVal = growShrinkRes.groups.flexVal;
179 | const optionalVal = flexVal ? `\-${flexVal}` : '';
180 | const fixRegex = new RegExp(`flex\-${prop}${optionalVal}`);
181 | outdated.push([cls, cls.replace(fixRegex, `${prop}${flexVal ? '-' + flexVal : ''}`)]);
182 | }
183 | let boxRes = /^decoration\-(?clone|slice)$/i.exec(suffix);
184 | if (boxRes && boxRes.groups && boxRes.groups.value) {
185 | const boxVal = boxRes.groups.value;
186 | const fixRegex = new RegExp(`decoration\-${boxVal}`);
187 | outdated.push([cls, cls.replace(fixRegex, `box-decoration\-${boxVal}`)]);
188 | }
189 | let bgOpacityRes = /^(bg|border|ring)\-opacity\-(?\d{1,})$/i.exec(suffix);
190 | if (bgOpacityRes && bgOpacityRes.groups && bgOpacityRes.groups.value) {
191 | const opacityVal = bgOpacityRes.groups.value;
192 | deprecatedBgOpacity.push([cls, opacityVal]);
193 | }
194 | let placeholderRes = /^placeholder\-(?.{1,})$/i.exec(suffix);
195 | if (placeholderRes && placeholderRes.groups && placeholderRes.groups.value) {
196 | const placeholderVal = placeholderRes.groups.value;
197 | const fixPlaceholderRegex = new RegExp(`placeholder\-${placeholderVal}$`);
198 | outdated.push([cls, cls.replace(fixPlaceholderRegex, `placeholder:text\-${placeholderVal}`)]);
199 | }
200 | return true;
201 | });
202 |
203 | if (notNeeded.length) {
204 | let validatedClassNamesValue = '';
205 | for (let i = 0; i < filtered.length; i++) {
206 | const isLast = i === filtered.length - 1;
207 | const w = whitespaces[i] ?? '';
208 | const cls = filtered[i];
209 | validatedClassNamesValue += headSpace ? `${w}${cls}` : isLast ? `${cls}` : `${cls}${w}`;
210 | if (headSpace && tailSpace && isLast) {
211 | validatedClassNamesValue += whitespaces[whitespaces.length - 1] ?? '';
212 | }
213 | }
214 | validatedClassNamesValue = prefix + validatedClassNamesValue + suffix;
215 | context.report({
216 | node,
217 | messageId: notNeeded.length === 1 ? 'classnameNotNeeded' : 'classnamesNotNeeded',
218 | data: {
219 | classnames: notNeeded.join(', '),
220 | },
221 | fix: function (fixer) {
222 | return fixer.replaceTextRange([start, end], validatedClassNamesValue);
223 | },
224 | });
225 | }
226 |
227 | outdated.forEach((outdatedClass) => {
228 | let validatedClassNamesValue = '';
229 | for (let i = 0; i < filtered.length; i++) {
230 | const w = whitespaces[i] ?? '';
231 | const cls = filtered[i];
232 | validatedClassNamesValue += headSpace ? `${w}${cls}` : `${cls}${w}`;
233 | if (headSpace && tailSpace && i === filtered.length - 1) {
234 | validatedClassNamesValue += whitespaces[whitespaces.length - 1] ?? '';
235 | }
236 | }
237 | validatedClassNamesValue =
238 | prefix + validatedClassNamesValue.replace(outdatedClass[0], outdatedClass[1]) + suffix;
239 | context.report({
240 | node,
241 | messageId: 'classnameChanged',
242 | data: {
243 | deprecated: outdatedClass[0],
244 | updated: outdatedClass[1],
245 | },
246 | fix: function (fixer) {
247 | return fixer.replaceTextRange([start, end], validatedClassNamesValue);
248 | },
249 | });
250 | });
251 | deprecatedBgOpacity.forEach((bgClass) => {
252 | context.report({
253 | node,
254 | messageId: 'classnameOpacityDeprecated',
255 | data: {
256 | classname: bgClass[0],
257 | value: bgClass[1],
258 | },
259 | });
260 | });
261 | };
262 |
263 | //----------------------------------------------------------------------
264 | // Public
265 | //----------------------------------------------------------------------
266 |
267 | const attributeVisitor = function (node) {
268 | if (!astUtil.isClassAttribute(node, classRegex) || skipClassAttribute) {
269 | return;
270 | }
271 | if (astUtil.isLiteralAttributeValue(node)) {
272 | parseForObsoleteClassNames(node);
273 | } else if (node.value && node.value.type === 'JSXExpressionContainer') {
274 | parseForObsoleteClassNames(node, node.value.expression);
275 | }
276 | };
277 |
278 | const callExpressionVisitor = function (node) {
279 | const calleeStr = astUtil.calleeToString(node.callee);
280 | if (callees.findIndex((name) => calleeStr === name) === -1) {
281 | return;
282 | }
283 | node.arguments.forEach((arg) => {
284 | parseForObsoleteClassNames(node, arg);
285 | });
286 | };
287 |
288 | const scriptVisitor = {
289 | JSXAttribute: attributeVisitor,
290 | TextAttribute: attributeVisitor,
291 | CallExpression: callExpressionVisitor,
292 | TaggedTemplateExpression: function (node) {
293 | if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
294 | return;
295 | }
296 | parseForObsoleteClassNames(node, node.quasi);
297 | },
298 | };
299 |
300 | const templateVisitor = {
301 | CallExpression: callExpressionVisitor,
302 | /*
303 | Tagged templates inside data bindings
304 | https://github.com/vuejs/vue/issues/9721
305 | */
306 | VAttribute: function (node) {
307 | switch (true) {
308 | case !astUtil.isValidVueAttribute(node, classRegex):
309 | return;
310 | case astUtil.isVLiteralValue(node):
311 | parseForObsoleteClassNames(node);
312 | break;
313 | case astUtil.isArrayExpression(node):
314 | node.value.expression.elements.forEach((arg) => {
315 | parseForObsoleteClassNames(node, arg);
316 | });
317 | break;
318 | case astUtil.isObjectExpression(node):
319 | node.value.expression.properties.forEach((prop) => {
320 | parseForObsoleteClassNames(node, prop);
321 | });
322 | break;
323 | }
324 | },
325 | };
326 |
327 | return parserUtil.defineTemplateBodyVisitor(context, templateVisitor, scriptVisitor);
328 | },
329 | };
330 |
--------------------------------------------------------------------------------
/lib/rules/no-unnecessary-arbitrary-value.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @fileoverview Detect arbitrary classnames which have an existing equivalent preset in the configuration
3 | * @author François Massart
4 | */
5 | 'use strict';
6 |
7 | const docsUrl = require('../util/docsUrl');
8 | const customConfig = require('../util/customConfig');
9 | const astUtil = require('../util/ast');
10 | const groupUtil = require('../util/groupMethods');
11 | const getOption = require('../util/settings');
12 | const parserUtil = require('../util/parser');
13 | const { validZeroRegEx } = require('../util/types/length');
14 | const defaultGroups = require('../config/groups').groups;
15 |
16 | // TODO get the correct value of start and end
17 | // TODO make rule fixable when only 1 match
18 | // TODO propose several fixes when multiple matches + priority to exact match
19 |
20 | //------------------------------------------------------------------------------
21 | // Rule Definition
22 | //------------------------------------------------------------------------------
23 |
24 | // Predefine message for use in context.report conditional.
25 | // messageId will still be usable in tests.
26 | const UNNECESSARY_ARBITRARY_VALUE_DETECTED_MSG = `The arbitrary class '{{classname}}' could be replaced by '{{presets}}'`;
27 |
28 | module.exports = {
29 | meta: {
30 | docs: {
31 | description: 'Forbid using arbitrary values in classnames when an equivalent preset exists',
32 | category: 'Best Practices',
33 | recommended: true,
34 | url: docsUrl('no-unnecessary-arbitrary-value'),
35 | },
36 | messages: {
37 | unnecessaryArbitraryValueDetected: UNNECESSARY_ARBITRARY_VALUE_DETECTED_MSG,
38 | },
39 | fixable: 'code',
40 | schema: [
41 | {
42 | type: 'object',
43 | properties: {
44 | callees: {
45 | type: 'array',
46 | items: { type: 'string', minLength: 0 },
47 | uniqueItems: true,
48 | },
49 | ignoredKeys: {
50 | type: 'array',
51 | items: { type: 'string', minLength: 0 },
52 | uniqueItems: true,
53 | },
54 | config: {
55 | // returned from `loadConfig()` utility
56 | type: ['string', 'object'],
57 | },
58 | tags: {
59 | type: 'array',
60 | items: { type: 'string', minLength: 0 },
61 | uniqueItems: true,
62 | },
63 | },
64 | },
65 | ],
66 | },
67 |
68 | create: function (context) {
69 | const callees = getOption(context, 'callees');
70 | const skipClassAttribute = getOption(context, 'skipClassAttribute');
71 | const tags = getOption(context, 'tags');
72 | const twConfig = getOption(context, 'config');
73 | const classRegex = getOption(context, 'classRegex');
74 |
75 | const mergedConfig = customConfig.resolve(twConfig);
76 | const groups = groupUtil.getGroups(defaultGroups, mergedConfig);
77 | const configKeys = groupUtil.getGroupConfigKeys(defaultGroups);
78 | let parentTemplateLiteral = null;
79 |
80 | //----------------------------------------------------------------------
81 | // Helpers
82 | //----------------------------------------------------------------------
83 |
84 | /**
85 | * Recursive function crawling into child nodes
86 | * @param {ASTNode} node The root node of the current parsing
87 | * @param {ASTNode} arg The child node of node
88 | * @returns {void}
89 | */
90 | const parseForArbitraryValues = (node, arg = null) => {
91 | let start = null;
92 | let end = null;
93 | let originalClassNamesValue = null;
94 | if (arg === null) {
95 | originalClassNamesValue = astUtil.extractValueFromNode(node);
96 | const range = astUtil.extractRangeFromNode(node);
97 | if (node.type === 'TextAttribute') {
98 | start = range[0];
99 | end = range[1];
100 | } else {
101 | start = range[0] + 1;
102 | end = range[1] - 1;
103 | }
104 | } else {
105 | switch (arg.type) {
106 | case 'Identifier':
107 | return;
108 | case 'TemplateLiteral':
109 | parentTemplateLiteral = arg;
110 | arg.expressions.forEach((exp) => {
111 | parseForArbitraryValues(node, exp);
112 | });
113 | arg.quasis.forEach((quasis) => {
114 | parseForArbitraryValues(node, quasis);
115 | });
116 | parentTemplateLiteral = null;
117 | return;
118 | case 'ConditionalExpression':
119 | parseForArbitraryValues(node, arg.consequent);
120 | parseForArbitraryValues(node, arg.alternate);
121 | return;
122 | case 'LogicalExpression':
123 | parseForArbitraryValues(node, arg.right);
124 | return;
125 | case 'ArrayExpression':
126 | arg.elements.forEach((el) => {
127 | parseForArbitraryValues(node, el);
128 | });
129 | return;
130 | case 'ObjectExpression':
131 | const isUsedByClassNamesPlugin = node.callee && node.callee.name === 'classnames';
132 | const isVue = node.key && node.key.type === 'VDirectiveKey';
133 | arg.properties.forEach((prop) => {
134 | const propVal = isUsedByClassNamesPlugin || isVue ? prop.key : prop.value;
135 | parseForArbitraryValues(node, propVal);
136 | });
137 | return;
138 | case 'Property':
139 | parseForArbitraryValues(node, arg.key);
140 | start = arg.range[0] + 1;
141 | end = arg.range[1] - 1;
142 | return;
143 | case 'Literal':
144 | originalClassNamesValue = arg.value;
145 | start = arg.range[0] + 1;
146 | end = arg.range[1] - 1;
147 | break;
148 | case 'TemplateElement':
149 | originalClassNamesValue = arg.value.raw;
150 | if (originalClassNamesValue === '') {
151 | return;
152 | }
153 | start = arg.range[0];
154 | end = arg.range[1];
155 | if (parentTemplateLiteral) {
156 | if (parentTemplateLiteral.range[0] === start) {
157 | start += 1; // Skip opening backtick
158 | } else {
159 | start += 1; // Skip closing }
160 | }
161 | if (parentTemplateLiteral.range[1] === end) {
162 | end -= 1; // Skip closing backtick
163 | } else {
164 | end -= 2; // Skip opening ${
165 | }
166 | }
167 | break;
168 | }
169 | }
170 |
171 | const arbitraryRegEx = /^(?.*)\[(?.*)\]$/i;
172 | const { classNames } = astUtil.extractClassnamesFromValue(originalClassNamesValue);
173 | const arbitraryClassnames = classNames.filter((c) => arbitraryRegEx.test(c));
174 |
175 | if (arbitraryClassnames.length === 0) {
176 | return;
177 | }
178 |
179 | const unnecessaryArbitraryClasses = [];
180 | const existingSubstitutes = [];
181 |
182 | arbitraryClassnames.forEach((arbitraryClass, idx) => {
183 | const parsed = groupUtil.parseClassname(arbitraryClass, [], mergedConfig, idx);
184 | const res = arbitraryRegEx.exec(parsed.name);
185 | if (res && res.groups && res.groups.backBone && res.groups.arbitraryValue) {
186 | const backBone = res.groups.backBone;
187 | const arbitraryValue = res.groups.arbitraryValue;
188 | const groupIdx = groupUtil.getGroupIndex(arbitraryClass, groups, mergedConfig.separator);
189 | if ([groups[groupIdx], parsed.body, arbitraryValue].includes(undefined)) {
190 | return false;
191 | }
192 | const canBeNegative = groups[groupIdx].indexOf('?') !== -1;
193 | const isNegativeClass = parsed.body.indexOf('-') === 0;
194 | const isNegativeValue = arbitraryValue.indexOf('-') === 0;
195 | const configurationKey = configKeys[groupIdx];
196 | const configuration = mergedConfig.theme[configurationKey];
197 | if ([undefined, null].includes(configuration)) {
198 | return false;
199 | }
200 | const configurationKeys = Object.keys(configuration);
201 | const zeroValueWithOrWithoutUnitsPattern = new RegExp(validZeroRegEx, 'i');
202 | const isZeroArbitraryValue = zeroValueWithOrWithoutUnitsPattern.test(arbitraryValue);
203 | const negativeSubstitutes = [];
204 | const matchingConfigurationKeys = configurationKeys.filter((key) => {
205 | const configValue = configuration[key];
206 | if (isZeroArbitraryValue && zeroValueWithOrWithoutUnitsPattern.test(configValue)) {
207 | // Both config and tested values are 0 based (with or without units)
208 | negativeSubstitutes.push(false);
209 | return true;
210 | }
211 | // Negative possibilities
212 | if (canBeNegative) {
213 | const absoluteValue = isNegativeValue ? arbitraryValue.substring(1) : arbitraryValue;
214 | const computedAsNegative = isNegativeClass !== isNegativeValue;
215 | if (`${configValue}` === `${absoluteValue}`) {
216 | negativeSubstitutes.push(computedAsNegative);
217 | return true;
218 | }
219 | return false;
220 | }
221 | // Default
222 | if (`${configValue}` === `${arbitraryValue}`) {
223 | negativeSubstitutes.push(false);
224 | return true;
225 | }
226 | return false;
227 | });
228 | if (matchingConfigurationKeys.length) {
229 | unnecessaryArbitraryClasses.push(parsed.name);
230 | existingSubstitutes.push(
231 | matchingConfigurationKeys.map((key, idx) => {
232 | let patchedBody = backBone.substring(parsed.variants.length);
233 | patchedBody = patchedBody.charAt(0) === '-' ? patchedBody.substring(1) : patchedBody;
234 | const noneOrMinus = negativeSubstitutes[idx] ? '-' : '';
235 | if (key === 'DEFAULT') {
236 | return parsed.variants + noneOrMinus + patchedBody.substring(0, patchedBody.length - 1);
237 | }
238 | return parsed.variants + noneOrMinus + patchedBody + key;
239 | })
240 | );
241 | }
242 | }
243 | });
244 |
245 | // TODO Group by range and bundle the fix
246 | const fixables = {};
247 | unnecessaryArbitraryClasses.forEach((forbiddenClass, idx) => {
248 | if (existingSubstitutes[idx].length === 1) {
249 | const rangeKey = `s${start}e${end}`;
250 | if (!fixables[rangeKey]) {
251 | fixables[rangeKey] = [];
252 | }
253 | const fixer = {
254 | unjustified: forbiddenClass,
255 | substitute: existingSubstitutes[idx][0],
256 | };
257 | fixables[rangeKey].push(fixer);
258 | } else {
259 | context.report({
260 | node,
261 | messageId: 'unnecessaryArbitraryValueDetected',
262 | data: {
263 | classname: forbiddenClass,
264 | presets: existingSubstitutes[idx].join("' or '"),
265 | },
266 | });
267 | }
268 | });
269 | Object.keys(fixables).forEach((rangeKey) => {
270 | const batchFixes = fixables[rangeKey];
271 | let patched = originalClassNamesValue;
272 | const forbiddenClasses = [];
273 | const substitutes = [];
274 | for (let idx = 0; idx < batchFixes.length; idx++) {
275 | // BUG replace could affect same class with distinct variants... eg. h-0 might affect min-h-0
276 | const unjustified = batchFixes[idx].unjustified;
277 | forbiddenClasses.push(unjustified);
278 | const substitute = batchFixes[idx].substitute;
279 | substitutes.push(substitute);
280 | patched = patched.replace(unjustified, substitute);
281 | }
282 | context.report({
283 | node,
284 | messageId: 'unnecessaryArbitraryValueDetected',
285 | data: {
286 | classname: forbiddenClasses.join(', '),
287 | presets: substitutes.join(', '),
288 | },
289 | fix: function (fixer) {
290 | return fixer.replaceTextRange([start, end], patched);
291 | },
292 | });
293 | });
294 | };
295 |
296 | //----------------------------------------------------------------------
297 | // Public
298 | //----------------------------------------------------------------------
299 |
300 | const attributeVisitor = function (node) {
301 | if (!astUtil.isClassAttribute(node, classRegex) || skipClassAttribute) {
302 | return;
303 | }
304 | if (astUtil.isLiteralAttributeValue(node)) {
305 | parseForArbitraryValues(node);
306 | } else if (node.value && node.value.type === 'JSXExpressionContainer') {
307 | parseForArbitraryValues(node, node.value.expression);
308 | }
309 | };
310 |
311 | const callExpressionVisitor = function (node) {
312 | const calleeStr = astUtil.calleeToString(node.callee);
313 | if (callees.findIndex((name) => calleeStr === name) === -1) {
314 | return;
315 | }
316 | node.arguments.forEach((arg) => {
317 | parseForArbitraryValues(node, arg);
318 | });
319 | };
320 |
321 | const scriptVisitor = {
322 | JSXAttribute: attributeVisitor,
323 | TextAttribute: attributeVisitor,
324 | CallExpression: callExpressionVisitor,
325 | TaggedTemplateExpression: function (node) {
326 | if (!tags.includes(node.tag.name)) {
327 | return;
328 | }
329 | parseForArbitraryValues(node, node.quasi);
330 | },
331 | };
332 |
333 | const templateVisitor = {
334 | CallExpression: callExpressionVisitor,
335 | /*
336 | Tagged templates inside data bindings
337 | https://github.com/vuejs/vue/issues/9721
338 | */
339 | VAttribute: function (node) {
340 | switch (true) {
341 | case !astUtil.isValidVueAttribute(node, classRegex):
342 | return;
343 | case astUtil.isVLiteralValue(node):
344 | parseForArbitraryValues(node, null);
345 | break;
346 | case astUtil.isArrayExpression(node):
347 | node.value.expression.elements.forEach((arg) => {
348 | parseForArbitraryValues(node, arg);
349 | });
350 | break;
351 | case astUtil.isObjectExpression(node):
352 | node.value.expression.properties.forEach((prop) => {
353 | parseForArbitraryValues(node, prop);
354 | });
355 | break;
356 | }
357 | },
358 | };
359 |
360 | return parserUtil.defineTemplateBodyVisitor(context, templateVisitor, scriptVisitor);
361 | },
362 | };
363 |
--------------------------------------------------------------------------------