feat: add option to use v3 style selectors

Author: Eazash

index.js

@@ -36,28 +36,40 @@ function getUpdatedDeclValue(prop, valueSpecifier) {
   }
 }
 
+const v3CompatibleChildSelector = "* + *"
+const v4ChildSelector = ":not(:last-child)"
+
+/**
+ * @typedef PluginOptions
+ * @property {boolean} [useV3CompatibleSelector] - Switch to using the "* + *" child selector as the ":not(:last-child)" selector implemented in tailwindcss v4 requires modifying attributes 
+ */
+
 /**
- * @type {import('postcss').PluginCreator}
+ * @type {import('postcss').PluginCreator<PluginOptions>}
  */
+
 module.exports = (opts = {}) => {
   // Work with options here
 
   return {
     postcssPlugin: 'postcss-tailwind-space-divide',
     Rule(rule) {
       rule.selectors = rule.selectors.map(selector => {
-        return selector.replaceAll(/:not\(\[hidden\]\)\s?~\s?:not\(\[hidden\]\)/g, ':not(:last-child)')
-      })
-      rule.walkDecls(/(?:margin-(?:top|bottom|right|left|(?:inline-|block-)(?:end|start))|border-(?:top|bottom|right|left|(?:inline-|block-)(?:end|start))-width)/, decl => {
-        // Grab the value specifier from the declaration value (eg. '1rem' or possibly any arbitrary value)
-        const valueSpecifierMatch = decl.value.trim().match(/^calc\((.*) \* (?:calc\(1 - )?var\(--tw/)
-        if (!valueSpecifierMatch) { return }
-        const valueSpecifier = valueSpecifierMatch[1]
-        const optimizedValue = getUpdatedDeclValue(decl.prop, valueSpecifier)
-        if (optimizedValue) {
-          decl.value = optimizedValue
-        }
+        return selector.replaceAll(/:not\(\[hidden\]\)\s?~\s?:not\(\[hidden\]\)/g, opts.useV3CompatibleSelector ? v3CompatibleChildSelector: v4ChildSelector)
       })
+      if (!opts.useV3CompatibleSelector) {
+        // If using the v4 child selector, we need to update the declarations for margin and border widths
+        rule.walkDecls(/(?:margin-(?:top|bottom|right|left|(?:inline-|block-)(?:end|start))|border-(?:top|bottom|right|left|(?:inline-|block-)(?:end|start))-width)/, decl => {
+          // Grab the value specifier from the declaration value (eg. '1rem' or possibly any arbitrary value)
+          const valueSpecifierMatch = decl.value.trim().match(/^calc\((.*) \* (?:calc\(1 - )?var\(--tw/)
+          if (!valueSpecifierMatch) { return }
+          const valueSpecifier = valueSpecifierMatch[1]
+          const optimizedValue = getUpdatedDeclValue(decl.prop, valueSpecifier)
+          if (optimizedValue) {
+            decl.value = optimizedValue
+          }
+        })
+      }
     }
   }
 }

index.test.js

@@ -1,7 +1,6 @@
 import postcss from 'postcss'
 import plugin from '.'
 import { it, expect } from 'vitest'
-import { describe } from 'vitest'
 
 async function run(input, output, opts = {}) {
   let result = await postcss([plugin(opts)]).process(input, { from: undefined })
@@ -15,7 +14,7 @@ it('does not change unrelated CSS', async () => {
 
 it('handles space-x-* selector', async () => {
   const input = `
-    .space-x-4 > :not(:last-child) {
+    .space-x-4 > :not([hidden]) ~ :not([hidden]) {
       --tw-space-x-reverse: 0;
       margin-right: calc(1rem * var(--tw-space-x-reverse));
       margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
@@ -141,6 +140,22 @@ it('handles prefixed space classes', async () => {
   await run(input, output, {})
 })
 
+it('preserves attributes when using v3 compatible selector', async () => {
+  const input = `.divide-y-4 > :not([hidden]) ~ :not([hidden]) {
+      --tw-divide-y-reverse: 0;
+      border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
+      border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
+    }
+  `
+  const ouput = `.divide-y-4 > * + * {
+      --tw-divide-y-reverse: 0;
+      border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
+      border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
+    }
+  `
+  await run(input, ouput, { useV3CompatibleSelector: true })
+})
+
 
 it('ignores non-tailwind selectors', async () => {
   const input = `