fix: support tag.div and tag(Component) (#302)

francoismassart · May 23, 2024 · 5a5db1b · 5a5db1b
1 parent e95872d
commit 5a5db1b
Show file tree

Hide file tree

Showing 17 changed files with 256 additions and 196 deletions.
diff --git a/lib/rules/classnames-order.js b/lib/rules/classnames-order.js
@@ -235,7 +235,7 @@ module.exports = {
  TextAttribute: attributeVisitor,
  CallExpression: callExpressionVisitor,
  TaggedTemplateExpression: function (node) {
- if (!tags.includes(node.tag.name)) {
+ if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
  return;
  }
 

diff --git a/lib/rules/enforces-negative-arbitrary-values.js b/lib/rules/enforces-negative-arbitrary-values.js
@@ -179,7 +179,7 @@ module.exports = {
  TextAttribute: attributeVisitor,
  CallExpression: callExpressionVisitor,
  TaggedTemplateExpression: function (node) {
- if (!tags.includes(node.tag.name)) {
+ if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
  return;
  }
  parseForNegativeArbitraryClassNames(node, node.quasi);

diff --git a/lib/rules/enforces-shorthand.js b/lib/rules/enforces-shorthand.js
@@ -362,9 +362,8 @@ module.exports = {
  } else if (hasY || hasX) {
  const xOrY = hasX ? 'x' : 'y';
  const xOrYType = getBodyByShorthand(targetGroups, classname.parentType, xOrY);
- const patchedName = `${cls.variants}${important}${minus}${mergedConfig.prefix}${xOrYType}${
- absoluteVal.length ? '-' + absoluteVal : ''
- }`;
+ const patchedName = `${cls.variants}${important}${minus}${mergedConfig.prefix}${xOrYType}${absoluteVal.length ? '-' + absoluteVal : ''
+ }`;
  const toBeReplaced = sameVariantAndValue
  .filter((c) => {
  const candidates = hasX ? ['l', 'r'] : ['t', 'b'];
@@ -501,7 +500,7 @@ module.exports = {
  TextAttribute: attributeVisitor,
  CallExpression: callExpressionVisitor,
  TaggedTemplateExpression: function (node) {
- if (!tags.includes(node.tag.name)) {
+ if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
  return;
  }
 

diff --git a/lib/rules/migration-from-tailwind-2.js b/lib/rules/migration-from-tailwind-2.js
@@ -290,7 +290,7 @@ module.exports = {
  TextAttribute: attributeVisitor,
  CallExpression: callExpressionVisitor,
  TaggedTemplateExpression: function (node) {
- if (!tags.includes(node.tag.name)) {
+ if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
  return;
  }
  parseForObsoleteClassNames(node, node.quasi);

diff --git a/lib/rules/no-arbitrary-value.js b/lib/rules/no-arbitrary-value.js
@@ -179,7 +179,7 @@ module.exports = {
  TextAttribute: attributeVisitor,
  CallExpression: callExpressionVisitor,
  TaggedTemplateExpression: function (node) {
- if (!tags.includes(node.tag.name)) {
+ if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
  return;
  }
  parseForArbitraryValues(node, node.quasi);

diff --git a/lib/rules/no-contradicting-classname.js b/lib/rules/no-contradicting-classname.js
@@ -203,7 +203,7 @@ module.exports = {
  TextAttribute: attributeVisitor,
  CallExpression: callExpressionVisitor,
  TaggedTemplateExpression: function (node) {
- if (!tags.includes(node.tag.name)) {
+ if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
  return;
  }
 

diff --git a/lib/rules/no-custom-classname.js b/lib/rules/no-custom-classname.js
@@ -182,7 +182,7 @@ module.exports = {
  TextAttribute: attributeVisitor,
  CallExpression: callExpressionVisitor,
  TaggedTemplateExpression: function (node) {
- if (!tags.includes(node.tag.name)) {
+ if (!tags.includes(node.tag.name ?? node.tag.object?.name ?? node.tag.callee?.name)) {
  return;
  }
  astUtil.parseNodeRecursive(node, node.quasi, parseForCustomClassNames, false, false, ignoredKeys);

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
  },
  "packageManager": "[email protected]+sha256.8002e3e7305d2abd4016e1368af48d49b066c269079eeb10a56e7d6598acfdaa",
  "engines": {
- "node": ">=12.13.0"
+ "node": ">=14.0.0"
  },
  "license": "MIT"
 }
diff --git a/tests/lib/rules/arbitrary-values.js b/tests/lib/rules/arbitrary-values.js
@@ -677,5 +677,14 @@ ruleTester.run("arbitrary-values", rule, {
  options: config,
  errors: generateErrors("stroke-[angle:var(--some)]"),
  },
+ ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].map(tag => ({
+ code: `${tag}\`stroke-[var(--some)] stroke-['yolo'] stroke-[angle:var(--some)]\``,
+ errors: generateErrors("stroke-[angle:var(--some)]"),
+ options: [
+ {
+ tags: ["myTag"],
+ },
+ ],
+ }))),
  ],
 });
diff --git a/tests/lib/rules/classnames-order.js b/tests/lib/rules/classnames-order.js
@@ -187,8 +187,8 @@ ruleTester.run("classnames-order", rule, {
  },
  },
  },
- {
- code: `myTag\`
+ ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].map(tag => ({
+ code: `${tag}\`
  container
  flex
  w-12
@@ -200,7 +200,7 @@ ruleTester.run("classnames-order", rule, {
  tags: ["myTag"],
  },
  ],
- },
+ }))),
  {
  code: `<div class="z-dialog flex w-12">Number values</div>`,
  settings: {
@@ -699,86 +699,88 @@ ruleTester.run("classnames-order", rule, {
  `,
  errors: generateErrors(2),
  },
- {
- code: `
- myTag\`
- invalid
- sm:w-6
- container
- w-12
- flex
- lg:w-4
- \`;`,
- output: `
- myTag\`
- invalid
- container
- flex
- w-12
- sm:w-6
- lg:w-4
- \`;`,
- options: [
- {
- tags: ["myTag"],
- },
- ],
- errors: errors,
- },
- {
- code: `
- const buttonClasses = myTag\`
- \${fullWidth ? "w-12" : "w-6"}
- container
- \${fullWidth ? "sm:w-8" : "sm:w-4"}
- lg:w-9
- flex
- \${hasError && "bg-red"}
- \`;`,
- output: `
- const buttonClasses = myTag\`
- \${fullWidth ? "w-12" : "w-6"}
- container
- \${fullWidth ? "sm:w-8" : "sm:w-4"}
- flex
- lg:w-9
- \${hasError && "bg-red"}
- \`;`,
- options: [
- {
- tags: ["myTag"],
- },
- ],
- errors: errors,
- },
- {
- code: `
- const buttonClasses = myTag\`
- \${fullWidth ? "w-12" : "w-6"}
- flex
- container
- \${fullWidth ? "sm:w-7" : "sm:w-4"}
- lg:py-4
- sm:py-6
- \${hasError && "bg-red"}
- \`;`,
- output: `
- const buttonClasses = myTag\`
- \${fullWidth ? "w-12" : "w-6"}
- container
- flex
- \${fullWidth ? "sm:w-7" : "sm:w-4"}
- sm:py-6
- lg:py-4
- \${hasError && "bg-red"}
- \`;`,
- options: [
- {
- tags: ["myTag"],
- },
- ],
- errors: generateErrors(2),
- },
+ ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].flatMap(tag => ([
+ {
+ code: `
+ ${tag}\`
+ invalid
+ sm:w-6
+ container
+ w-12
+ flex
+ lg:w-4
+ \`;`,
+ output: `
+ ${tag}\`
+ invalid
+ container
+ flex
+ w-12
+ sm:w-6
+ lg:w-4
+ \`;`,
+ options: [
+ {
+ tags: ["myTag"],
+ },
+ ],
+ errors: errors,
+ },
+ {
+ code: `
+ const buttonClasses = ${tag}\`
+ \${fullWidth ? "w-12" : "w-6"}
+ container
+ \${fullWidth ? "sm:w-8" : "sm:w-4"}
+ lg:w-9
+ flex
+ \${hasError && "bg-red"}
+ \`;`,
+ output: `
+ const buttonClasses = ${tag}\`
+ \${fullWidth ? "w-12" : "w-6"}
+ container
+ \${fullWidth ? "sm:w-8" : "sm:w-4"}
+ flex
+ lg:w-9
+ \${hasError && "bg-red"}
+ \`;`,
+ options: [
+ {
+ tags: ["myTag"],
+ },
+ ],
+ errors: errors,
+ },
+ {
+ code: `
+ const buttonClasses = ${tag}\`
+ \${fullWidth ? "w-12" : "w-6"}
+ flex
+ container
+ \${fullWidth ? "sm:w-7" : "sm:w-4"}
+ lg:py-4
+ sm:py-6
+ \${hasError && "bg-red"}
+ \`;`,
+ output: `
+ const buttonClasses = ${tag}\`
+ \${fullWidth ? "w-12" : "w-6"}
+ container
+ flex
+ \${fullWidth ? "sm:w-7" : "sm:w-4"}
+ sm:py-6
+ lg:py-4
+ \${hasError && "bg-red"}
+ \`;`,
+ options: [
+ {
+ tags: ["myTag"],
+ },
+ ],
+ errors: generateErrors(2),
+ },
+ ]))),
  {
  code: `
  classnames([

diff --git a/tests/lib/rules/enforces-negative-arbitrary-values.js b/tests/lib/rules/enforces-negative-arbitrary-values.js
@@ -140,5 +140,14 @@ ruleTester.run("enforces-negative-arbitrary-values", rule, {
  code: `<div class="group/edit:-inset-[1px] group/edit:top-[-1px]">support named group/peer syntax</div>`,
  errors: generateErrors("group/edit:-inset-[1px]"),
  },
+ ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].map(tag => ({
+ code: `${tag}\`-my-[1px] -mx-[1px]\``,
+ errors: generateErrors("-my-[1px] -mx-[1px]"),
+ options: [
+ {
+ tags: ["myTag"],
+ },
+ ],
+ }))),
  ],
 });
diff --git a/tests/lib/rules/enforces-shorthand.js b/tests/lib/rules/enforces-shorthand.js
@@ -800,5 +800,15 @@ ruleTester.run("shorthands", rule, {
  errors: [generateError(["h-custom", "w-custom"], "size-custom")],
  options: customSpacingOnlyOptions,
  },
+ ...["myTag", "myTag.subTag", "myTag(SomeComponent)"].map((tag) => ({
+ code: `${tag}\`overflow-hidden text-ellipsis whitespace-nowrap text-white text-xl\``,
+ output: `${tag}\`truncate text-white text-xl\``,
+ errors: [generateError(["overflow-hidden", "text-ellipsis", "whitespace-nowrap"], "truncate")],
+ options: [
+ {
+ tags: ["myTag"],
+ },
+ ],
+ })),
  ],
 });
diff --git a/tests/lib/rules/migration-from-tailwind-2.js b/tests/lib/rules/migration-from-tailwind-2.js
@@ -382,5 +382,23 @@ ruleTester.run("migration-from-tailwind-2", rule, {
  filename: "test.vue",
  parser: require.resolve("vue-eslint-parser"),
  },
+ ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].map(tag => ({
+ code: `${tag}\`flex-grow-0\``,
+ output: `${tag}\`grow-0\``,
+ errors: [
+ {
+ messageId: "classnameChanged",
+ data: {
+ deprecated: "flex-grow-0",
+ updated: "grow-0",
+ },
+ },
+ ],
+ options: [
+ {
+ tags: ["myTag"],
+ },
+ ],
+ }))),
  ],
 });
diff --git a/tests/lib/rules/no-arbitrary-value.js b/tests/lib/rules/no-arbitrary-value.js
@@ -160,5 +160,14 @@ ruleTester.run("no-arbitrary-value", rule, {
  code: `<div className={'min-h-[75dvh]'}>Dynamic viewport units</div>`,
  errors: generateErrors(["min-h-[75dvh]"]),
  },
+ ...(['myTag', 'myTag.subTag', 'myTag(SomeComponent)'].map(tag => ({
+ code: `${tag}\`w-[100px]\``,
+ errors: generateErrors("w-[100px]"),
+ options: [
+ {
+ tags: ["myTag"],
+ },
+ ],
+ }))),
  ],
 });