duplicate key 'outline' in `[type='file']:focus` styles

[ericbroder]

What version of @tailwindcss/forms are you using?

v0.5.0

What version of Node.js are you using?

v16.13.2

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/tailwindlabs/tailwindcss-forms

Describe your issue

There is a duplicate key issue with style objects in https://github.com/tailwindlabs/tailwindcss-forms/blob/master/src/index.js#L280

This can cause some of the styles to not be included in final css output. For more context, see similar issue here:

• https://github.com/tailwindlabs/tailwindcss/issues/1219
• https://tailwindcss.com/docs/plugins#css-in-js-syntax

A possible fix would be to separate them into different array items, such as:

tailwindcss-forms % git diff
diff --git a/src/index.js b/src/index.js
index ee60f72..d5c5da4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -278,6 +278,12 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) {
         class: null,
         styles: {
           outline: `1px solid ButtonText`,
+        },
+      },
+      {
+        base: [`[type='file']:focus`],
+        class: null,
+        styles: {
           outline: `1px auto -webkit-focus-ring-color`,
         },
       },