Don't generate invalid CSS when given an array of property values (#224)

Author: thecrypticace

CHANGELOG.md

@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+- Don't generate invalid CSS when given an array of property values ([#224](https://github.com/tailwindlabs/tailwindcss-typography/pull/224))
 
 ## [0.5.0] - 2021-12-09
 

src/index.js

@@ -49,6 +49,10 @@ function configToCss(config = {}, { target, className, prefix }) {
       return [k, v]
     }
 
+    if (Array.isArray(v)) {
+      return [k, v]
+    }
+
     if (isObject(v)) {
       let nested = Object.values(v).some(isObject)
       if (nested) {

src/index.test.js

@@ -803,3 +803,31 @@ test('element variants with custom class name', async () => {
     `)
   })
 })
+
+test.only("customizing defaults with multiple values does not result in invalid css", async () => {
+  let config = {
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="prose"></div>`,
+      },
+    ],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: {
+            textAlign: ['-webkit-match-parent', 'match-parent'],
+          }
+        }
+      }
+    },
+  }
+  return run(config).then((result) => {
+    // TODO: Fix this test. It should list both properties but there's a bug in tailwind that's overriding them.
+    expect(result.css).toMatchFormattedCss(css`
+      .prose {
+        text-align: match-parent;
+      }
+    `)
+  })
+})