chore: Prepare for Tailwind 2.0 - Part 3 (#87)

* bump dependencies

* test by running everything through tailwindcss itself

* simplify implementation

Making use of the merging of extended themes 🚀

* clear unnecessary whitespace

* add additional test to verify overriding of backticks still work

* bump to latest tailwindcss alpha version

Author: RobinMalfait

package.json

@@ -24,7 +24,7 @@
     "prepublishOnly": "node scripts/build.js"
   },
   "peerDependencies": {
-    "tailwindcss": "^1.5.0"
+    "tailwindcss": "2.0.0-alpha.4 || ^2.0.0"
   },
   "devDependencies": {
     "@mdx-js/loader": "^1.0.19",
@@ -39,9 +39,9 @@
     "next": "^9.4.4",
     "postcss": "^7.0.17",
     "prettier": "^2.1.2",
-    "react-dom": "^16.8.6",
     "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "snapshot-diff": "^0.8.1",
-    "tailwindcss": "^2.0.0-alpha.1"
+    "tailwindcss": "^2.0.0-alpha.4"
   }
 }

src/index.js

@@ -1,14 +1,15 @@
 const plugin = require('tailwindcss/plugin')
 const merge = require('lodash/merge')
 const castArray = require('lodash/castArray')
+const uniq = require('lodash/uniq')
 const styles = require('./styles')
 
 const computed = {
   // Reserved for future "magic properties", for example:
   // bulletColor: (color) => ({ 'ul > li::before': { backgroundColor: color } }),
 }
 
-function configToCss(config) {
+function configToCss(config = {}) {
   return merge(
     {},
     ...Object.keys(config)
@@ -18,36 +19,27 @@ function configToCss(config) {
   )
 }
 
+const DEFAULT_MODIFIERS = ['DEFAULT', 'sm', 'lg', 'xl', '2xl']
 module.exports = plugin.withOptions(
-  ({ modifiers = ['sm', 'lg', 'xl', '2xl'], className = 'prose' } = {}) => {
+  ({ modifiers = DEFAULT_MODIFIERS, className = 'prose' } = {}) => {
     return function ({ addComponents, theme, variants }) {
-      const config = theme('typography', {})
+      const config = theme('typography')
+
+      const all = uniq([
+        'DEFAULT',
+        ...modifiers,
+        ...Object.keys(config).filter((modifier) => !DEFAULT_MODIFIERS.includes(modifier)),
+      ])
 
       addComponents(
-        [
-          {
-            [`.${className}`]: merge(
-              {},
-              ...castArray(styles.DEFAULT.css),
-              configToCss(config.DEFAULT || {})
-            ),
-          },
-          ...modifiers.map((modifier) => ({
-            [`.${className}-${modifier}`]: merge(
-              {},
-              ...castArray(styles[modifier].css),
-              configToCss(config[modifier] || {})
-            ),
-          })),
-          ...Object.keys(config)
-            .filter((key) => !['DEFAULT', ...modifiers].includes(key))
-            .map((modifier) => ({
-              [`.${className}-${modifier}`]: configToCss(config[modifier]),
-            })),
-        ],
+        all.map((modifier) => ({
+          [modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`]: configToCss(
+            config[modifier]
+          ),
+        })),
         variants('typography')
       )
     }
   },
-  () => ({ variants: { typography: ['responsive'] } })
+  () => ({ theme: { typography: styles }, variants: { typography: ['responsive'] } })
 )