Depend on Tailwind 3.x

Re-implement variants using the newly String-based `addVariant` plugin
method changed in [tailwindlabs/tailwindcss#5809][].

[tailwindlabs/tailwindcss#5809]: tailwindlabs/tailwindcss#5809

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Depend on `tailwindcss@^3.0.0` to use the newly String-based `addVariant`
+  function
+
 ## [0.1.0] - 2022-07-27
 
 - Initial release

index.js

@@ -1,7 +1,13 @@
 const plugin = require("tailwindcss/plugin")
 
-module.exports = plugin(({ addVariant, e }) => {
-  [
+module.exports = plugin(({ addVariant }) => {
+  const addAriaVariant = (name, value) => {
+    addVariant(name,                          `[${name}="${value}"]&`)
+    addVariant(`peer-${name}`,   `:merge(.peer)[${name}="${value}"] ~ &`)
+    addVariant(`group-${name}`, `:merge(.group)[${name}="${value}"] &`)
+  }
+
+  const booleans = [
     "atomic",
     "busy",
     "checked",
@@ -20,22 +26,11 @@ module.exports = plugin(({ addVariant, e }) => {
     "readonly",
     "required",
     "selected",
-  ].forEach(boolean => {
-    const selector = `aria-${boolean}`
-    addVariant(selector, ({ modifySelectors, separator }) =>
-      modifySelectors(({ className }) => `[${selector}="true"].${e(`${selector}${separator}${className}`)}`)
-    )
-
-    const groupSelector = `group-aria-${boolean}`
-    addVariant(groupSelector, ({ modifySelectors, separator }) =>
-      modifySelectors(({ className }) => `.group[aria-${boolean}="true"] .${e(`${groupSelector}${separator}${className}`)}`)
-    )
+  ]
 
-    const peerSelector = `peer-aria-${boolean}`
-    addVariant(peerSelector, ({ modifySelectors, separator }) =>
-      modifySelectors(({ className }) => `.peer[aria-${boolean}="true"] ~ .${e(`${peerSelector}${separator}${className}`)}`)
-    )
-  })
+  for (const attribute of booleans) {
+    addAriaVariant(`aria-${attribute}`, "true")
+  }
 
   const enumerables = {
     autocomplete: [ "both", "inline", "list", "none" ],
@@ -49,20 +44,7 @@ module.exports = plugin(({ addVariant, e }) => {
 
   for (const [ attribute, values ] of Object.entries(enumerables)) {
     for (const value of values) {
-      const selector = `aria-${attribute}-${value}`
-      addVariant(selector, ({ modifySelectors, separator }) =>
-        modifySelectors(({ className }) => `[aria-${attribute}="${value}"].${e(`${selector}${separator}${className}`)}`)
-      )
-
-      const groupSelector = `group-aria-${attribute}-${value}`
-      addVariant(groupSelector, ({ modifySelectors, separator }) =>
-        modifySelectors(({ className }) => `.group[aria-${attribute}="${value}"] .${e(`${groupSelector}${separator}${className}`)}`)
-      )
-
-      const peerSelector = `peer-aria-${attribute}-${value}`
-      addVariant(peerSelector, ({ modifySelectors, separator }) =>
-        modifySelectors(({ className }) => `.peer[aria-${attribute}="${value}"] ~ .${e(`${peerSelector}${separator}${className}`)}`)
-      )
+      addAriaVariant(`aria-${attribute}-${value}`, value)
     }
   }
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thoughtbot/tailwindcss-aria-attributes",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "TailwindCSS aria- attribute utilities plugin",
   "main": "index.js",
   "repository": {
@@ -17,6 +17,6 @@
   },
   "homepage": "https://github.com/thoughtbot/tailwindcss-aria-attributes#readme",
   "devDependencies": {
-    "tailwindcss": "^2.2.17"
+    "tailwindcss": "^3.0.0"
   }
 }