FIXES

- #77
- #80

README.md

@@ -6,7 +6,7 @@
 
 Rules enforcing best practices and consistency using [Tailwind CSS](https://tailwindcss.com/)
 
-## **🎉 The version 3 of plugin is now ready for TailwindCSS v3 🎉**
+## **🎉 Version 3 is now ready for TailwindCSS v3 🎉**
 
 ## Make sure to use the correct version
 
@@ -15,6 +15,8 @@ Rules enforcing best practices and consistency using [Tailwind CSS](https://tail
 - Using TailwindCSS v3 ?
   - Make sure to use `v3.x.x` of this plugin
 
+**If you are using the eslint extension, make sure to restart VSCode in order to use the lastest version of the plugin and not the former version from the cache.**
+
 ## We need you ❤️
 
 Version 3 of the plugin is brand new and you will most likely experience bugs, please provide feedback by opening issues on GitHub with all the useful informations so that we can fix them all.
@@ -31,6 +33,10 @@ If you enjoy my work you can:
 
 ## Latest changelog
 
+- FIX: [Arbitrary values of color opacity](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/80)
+
+- FIX: [Class transition-transform throws the wrong warning](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/77)
+
 - New rule: [`migration-from-tailwind-2`](docs/rules/migration-from-tailwind-2.md) for easy migration from TailwindCSS `v2` to `v3`
 
 - Support for TailwindCSS v3

lib/rules/migration-from-tailwind-2.js

@@ -148,7 +148,7 @@ module.exports = {
       const deprecatedBgOpacity = [];
       const filtered = classNames.filter((cls) => {
         const suffix = groupUtil.getSuffix(cls, mergedConfig.separator);
-        if (/^(backdrop\-)?filter|filter|transform$/i.test(suffix)) {
+        if (/^((backdrop\-)?filter|transform)$/i.test(suffix)) {
           notNeeded.push(cls);
           return false;
         }

lib/util/groupMethods.js

@@ -40,9 +40,7 @@ function escapeSpecialChars(str) {
  */
 function generateOptionalOpacitySuffix(config) {
   const opacityKeys = !config.theme['opacity'] ? [] : Object.keys(config.theme['opacity']);
-  if (opacityKeys.length === 0) {
-    return '';
-  }
+  opacityKeys.push('\\[(0|1|0?\\.\\d{1,})\\]');
   return `(\\/(${opacityKeys.join('|')}))?`;
 }
 

package.json

@@ -26,7 +26,7 @@
   "dependencies": {
     "fast-glob": "^3.2.5",
     "postcss": "^8.4.4",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^3.0.7"
   },
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.0",

tests/lib/rules/migration-from-tailwind-2.js

@@ -30,6 +30,12 @@ ruleTester.run("migration-from-tailwind-2", rule, {
     {
       code: `<div class="scale-50 grayscale backdrop-blur-sm">Automatic transforms and filters</div>`,
     },
+    {
+      code: `<div class="transition-transform">transition-transform</div>`,
+    },
+    {
+      code: `<div class="transition-[var(--transform)]">transition-[var(--transform)]</div>`,
+    },
   ],
   invalid: [
     {

tests/lib/rules/no-custom-classname.js

@@ -488,6 +488,10 @@ ruleTester.run("no-custom-classname", rule, {
         font-mono is a valid classname
       </div>`,
     },
+    {
+      code: `
+      <div className={'stroke-sky-500/[.1]'}>Arbitrary alpha suffix</div>`,
+    },
   ],
 
   invalid: [