diff --git a/lib/config/groups.js b/lib/config/groups.js index 6db1138..56d6c49 100644 --- a/lib/config/groups.js +++ b/lib/config/groups.js @@ -831,6 +831,11 @@ module.exports.groups = [ }, ], }, + { + type: 'Deprecated Border Opacity', + members: 'border\\-opacity\\-(?${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 index 3a6a94a..6e40fe8 100644 --- 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\-(?\d{1,})$/i.exec(suffix); + let bgOpacityRes = /^(bg|border|ring)\-opacity\-(?\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 index c079a04..d77438c 100644 --- 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 index 26b8be8..257c029 100644 --- 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: `
bg-opacity
`, errors: [ { - messageId: "bgOpacityDeprecated", + messageId: "classnameOpacityDeprecated", data: { classname: "bg-opacity-50", value: "50", @@ -165,15 +165,22 @@ ruleTester.run("migration-from-tailwind-2", rule, { ], }, { - code: `
ring-opacity
`, + code: `
ring-opacity
`, 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 index 39996e6..9fd522f 100644 --- 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: ` -
Deprecated classnames yet still supported for now
`, +
Deprecated classnames yet still supported for now
`, }, ],