fix: #111

francoismassart · Jan 27, 2022 · e8119ca · e8119ca
1 parent 5f0eefa
commit e8119ca
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 8 deletions.
diff --git a/lib/config/groups.js b/lib/config/groups.js
@@ -831,6 +831,11 @@ module.exports.groups = [
  },
  ],
  },
+ {
+ type: 'Deprecated Border Opacity',
+ members: 'border\\-opacity\\-(?<value>${borderOpacity})',
+ deprecated: true,
+ },
  {
  type: 'Border Style',
  members: 'border\\-(solid|dashed|dotted|double|hidden|none)',

diff --git a/lib/rules/migration-from-tailwind-2.js b/lib/rules/migration-from-tailwind-2.js
@@ -21,7 +21,7 @@ const parserUtil = require('../util/parser');
 const CLASSNAME_NOT_NEEDED_MSG = `Classname '{{classnames}}' is not needed in Tailwind CSS v3!`;
 const CLASSNAMES_NOT_NEEDED_MSG = `Classnames '{{classnames}}' are not needed in Tailwind CSS v3!`;
 const CLASSNAME_CHANGED_MSG = `Classname '{{deprecated}}' should be updated to '{{updated}}' in Tailwind CSS v3!`;
-const BG_OPACITY_DEPRECATED_MSG = `Classname '{{classname}}' should be replaced by an opacity suffix (eg. '/{{value}}')`;
+const OPACITY_CLASS_DEPRECATED_MSG = `Classname '{{classname}}' should be replaced by an opacity suffix (eg. '/{{value}}')`;
 
 module.exports = {
  meta: {
@@ -35,7 +35,7 @@ module.exports = {
  classnameNotNeeded: CLASSNAME_NOT_NEEDED_MSG,
  classnamesNotNeeded: CLASSNAMES_NOT_NEEDED_MSG,
  classnameChanged: CLASSNAME_CHANGED_MSG,
- bgOpacityDeprecated: BG_OPACITY_DEPRECATED_MSG,
+ classnameOpacityDeprecated: OPACITY_CLASS_DEPRECATED_MSG,
  },
  fixable: 'code',
  schema: [
@@ -185,7 +185,7 @@ module.exports = {
  const fixRegex = new RegExp(`decoration\-${boxVal}`);
  outdated.push([cls, cls.replace(fixRegex, `box-decoration\-${boxVal}`)]);
  }
- let bgOpacityRes = /^(bg|ring)\-opacity\-(?<value>\d{1,})$/i.exec(suffix);
+ let bgOpacityRes = /^(bg|border|ring)\-opacity\-(?<value>\d{1,})$/i.exec(suffix);
  if (bgOpacityRes && bgOpacityRes.groups && bgOpacityRes.groups.value) {
  const opacityVal = bgOpacityRes.groups.value;
  deprecatedBgOpacity.push([cls, opacityVal]);
@@ -233,7 +233,7 @@ module.exports = {
  deprecatedBgOpacity.forEach((bgClass) => {
  context.report({
  node,
- messageId: 'bgOpacityDeprecated',
+ messageId: 'classnameOpacityDeprecated',
  data: {
  classname: bgClass[0],
  value: bgClass[1],

diff --git a/lib/util/groupMethods.js b/lib/util/groupMethods.js
@@ -201,6 +201,7 @@ function generateOptions(propName, keys, config, isNegative = false) {
  }
  return '(' + escapedKeys.join('|') + ')';
  case 'backgroundOpacity':
+ case 'borderOpacity':
  case 'opacity':
  case 'ringOpacity':
  // 0 ... .5 ... 1

diff --git a/tests/lib/rules/migration-from-tailwind-2.js b/tests/lib/rules/migration-from-tailwind-2.js
@@ -156,7 +156,7 @@ ruleTester.run("migration-from-tailwind-2", rule, {
  code: `<div class="bg-opacity-50">bg-opacity</div>`,
  errors: [
  {
- messageId: "bgOpacityDeprecated",
+ messageId: "classnameOpacityDeprecated",
  data: {
  classname: "bg-opacity-50",
  value: "50",
@@ -165,15 +165,22 @@ ruleTester.run("migration-from-tailwind-2", rule, {
  ],
  },
  {
- code: `<div class="ring-opacity-50">ring-opacity</div>`,
+ code: `<div class="ring-opacity-50 border-opacity-50">ring-opacity</div>`,
  errors: [
  {
- messageId: "bgOpacityDeprecated",
+ messageId: "classnameOpacityDeprecated",
  data: {
  classname: "ring-opacity-50",
  value: "50",
  },
  },
+ {
+ messageId: "classnameOpacityDeprecated",
+ data: {
+ classname: "border-opacity-50",
+ value: "50",
+ },
+ },
  ],
  },
  {

diff --git a/tests/lib/rules/no-custom-classname.js b/tests/lib/rules/no-custom-classname.js
@@ -602,7 +602,7 @@ ruleTester.run("no-custom-classname", rule, {
  },
  {
  code: `
- <div class="decoration-clone decoration-slice flex-grow flex-shrink overflow-clip overflow-ellipsis bg-opacity-50 transform scale-50">Deprecated classnames yet still supported for now</div>`,
+ <div class="decoration-clone decoration-slice flex-grow flex-shrink overflow-clip overflow-ellipsis bg-opacity-50 border-opacity-100 transform scale-50">Deprecated classnames yet still supported for now</div>`,
  },
  ],