Add support for typography (#38)

Author: ycs77

index.js

@@ -1,9 +1,17 @@
+const selectorParser = require('postcss-selector-parser');
+
 module.exports = function() {
   return function({addVariant, theme, e}) {
     const darkSelector = theme('darkSelector', '.mode-dark');
-    addVariant('dark', ({modifySelectors, separator}) => {
-      modifySelectors(({className}) => {
-        return `${darkSelector} .${e(`dark${separator}${className}`)}, ${darkSelector}.${e(`dark${separator}${className}`)}`;
+
+    addVariant('dark', ({ modifySelectors, separator }) => {
+      modifySelectors(({ selector }) => {
+        return selectorParser((selectors) => {
+          selectors.walkClasses((sel) => {
+            sel.value = `dark${separator}${sel.value}`;
+            sel.parent.insertBefore(sel, selectorParser().astSync(prefix(`${darkSelector} `)));
+          });
+        }).processSync(selector);
       });
     });
 

package-lock.json

@@ -23,7 +23,8 @@
     "javascript"
   ],
   "dependencies": {
-    "tailwindcss": "^1.6.2"
+    "tailwindcss": "^1.6.2",
+    "postcss-selector-parser": "^6.0.2"
   },
   "devDependencies": {
     "eslint": "^6.8.0",