ensure dark variant is handled correctly within nested groups

.changeset/calm-walls-check.md

@@ -0,0 +1,5 @@
+---
+'twind': patch
+---
+
+ensure dark variant is handled correctly within nested groups

README.md

@@ -165,7 +165,7 @@ We have created a few [examples](https://github.com/tw-in-js/twind/tree/next/exa
           btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
           'btn-green': 'text-white bg-green-500 hover:bg-green-700',
 
-          // dynamic shortcut — could be a rule as well
+          // dynamic shortcut
           'btn-': ({ $$ }) => `bg-${$$}-400 text-${$$}-100 py-2 px-4 rounded-lg`,
         },
       ],

packages/twind/src/internal/parse.test.ts

@@ -136,6 +136,60 @@ test('named shortcuts', () => {
   ])
 })
 
+test('named apply', () => {
+  assert.deepEqual(parse('PrimaryButton@(bg-red-500 text-white)'), [
+    {
+      n: 'PrimaryButton#1athxj9',
+      v: [],
+      i: false,
+    },
+  ])
+
+  assert.deepEqual(parse('hover:PrimaryButton@(bg-red-500 text-white)'), [
+    {
+      n: 'PrimaryButton#1athxj9',
+      v: ['hover'],
+      i: false,
+    },
+  ])
+})
+
+test('anonymous apply', () => {
+  assert.deepEqual(parse('@(bg-red-500 text-white)'), [
+    {
+      n: '@(bg-red-500,text-white)',
+      v: [],
+      i: false,
+    },
+  ])
+
+  assert.deepEqual(parse('hover:@(bg-red-500 text-white)'), [
+    {
+      n: '@(bg-red-500,text-white)',
+      v: ['hover'],
+      i: false,
+    },
+  ])
+})
+
+test('apply with dark in nested with grouping', () => {
+  assert.deepEqual(parse('hover:@(text-blue-400 focus:(text-blue-(600 dark:100)))'), [
+    {
+      n: '@(text-blue-400,focus:text-blue-600,dark:focus:text-blue-100)',
+      v: ['hover'],
+      i: false,
+    },
+  ])
+
+  assert.deepEqual(parse('hover:dark:@(text-blue-400 focus:(text-blue-(600 dark:100)))'), [
+    {
+      n: '@(text-blue-400,focus:text-blue-600,focus:text-blue-100)',
+      v: ['dark', 'hover'],
+      i: false,
+    },
+  ])
+})
+
 test('primary-foreground-(light dark:dark)', () => {
   assert.deepEqual(parse('primary-foreground-(light dark:dark)'), [
     { n: 'primary-foreground-light', v: [], i: false },

packages/twind/src/internal/parse.ts

@@ -106,9 +106,11 @@ export function parse(token: string): ParsedRule[] {
 
             // remove variants that are already applied through active
             createRule([...active, '#'], current)
-            const { length } = (current[0].pop() as ParsedRule).v
+            const { v } = current[0].pop() as ParsedRule
+
             for (const rule of rules) {
-              rule.v.splice(0, length)
+              // if a rule has dark we need to splice after the first entry eg dark
+              rule.v.splice(+(rule.v[0] == 'dark') - +(v[0] == 'dark'), v.length)
             }
 
             createRule(