fix(focus): fix focus pseudo class

It was being escaped before, causing it to not being applied
estevanmaito · Jun 12, 2020 · 0b5a4dd · 0b5a4dd · vercel · Jun 12, 2020
1 parent 948fcf5
commit 0b5a4dd
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/__tests__/index.test.js b/__tests__/index.test.js
@@ -237,7 +237,7 @@ describe('plugin', () => {
         .text-gray-100 {
           color: #333333
         }
-        .theme-dark .dark\\:focus\\:text-gray-100\\:focus {
+        .theme-dark .dark\\:focus\\:text-gray-100:focus {
           color: #333333
         }
       `)
@@ -257,7 +257,7 @@ describe('plugin', () => {
         .text-gray-100 {
           color: #333333
         }
-        .theme-dark .dark\\:focus\\:text-gray-100\\:focus {
+        .theme-dark .dark\\:focus\\:text-gray-100:focus {
           color: #333333
         }
         .placeholder-gray-100::placeholder {      
@@ -266,7 +266,7 @@ describe('plugin', () => {
         .focus\\:placeholder-gray-100:focus::placeholder {
           color: #333333
         }
-        .theme-dark .dark\\:focus\\:placeholder-gray-100\\:focus::placeholder {
+        .theme-dark .dark\\:focus\\:placeholder-gray-100:focus::placeholder {
           color: #333333
         }
       `)

diff --git a/src/index.js b/src/index.js
@@ -82,8 +82,9 @@ module.exports = ({ addVariant, theme, e }) => {
       modifySelectors(({ selector }) => {
         return selectorParser((selectors) => {
           selectors.walkClasses((sel) => {
-            sel.value = `${tv}${separator}focus${separator}${sel.value}:focus`
+            sel.value = `${tv}${separator}focus${separator}${sel.value}`
             sel.parent.insertBefore(sel, selectorParser().astSync(root))
+            sel.parent.insertAfter(sel, selectorParser.pseudo({ value: ':focus' }))
           })
         }).processSync(selector)
       })