From 28c6ed9cf39baae13ed73207d289d08e4b077ed8 Mon Sep 17 00:00:00 2001
From: Fabien Caylus <fabien.caylus@gmail.com>
Date: Wed, 8 Apr 2020 17:09:54 +0900
Subject: [PATCH 1/2] Add support for "hyphens" CSS property

Signed-off-by: Fabien Caylus <fabien.caylus@gmail.com>
---
 .size-snapshot.json    | 28 ++++++++++++++--------------
 src/plugins/hyphens.js | 14 ++++++++++++++
 src/plugins/index.js   |  8 +++++---
 3 files changed, 33 insertions(+), 17 deletions(-)
 create mode 100644 src/plugins/hyphens.js

diff --git a/.size-snapshot.json b/.size-snapshot.json
index 6c373d52..37750b06 100644
--- a/.size-snapshot.json
+++ b/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "dist/css-vendor.js": {
-    "bundled": 17055,
-    "minified": 5599,
-    "gzipped": 2131
+    "bundled": 17450,
+    "minified": 5771,
+    "gzipped": 2169
   },
   "dist/css-vendor.min.js": {
-    "bundled": 17055,
-    "minified": 5599,
-    "gzipped": 2131
+    "bundled": 17450,
+    "minified": 5771,
+    "gzipped": 2169
   },
   "./lib/index": {
     "bundled": 14406,
@@ -34,21 +34,21 @@
     }
   },
   "dist/css-vendor.cjs.js": {
-    "bundled": 15122,
-    "minified": 6466,
-    "gzipped": 2175
+    "bundled": 15493,
+    "minified": 6677,
+    "gzipped": 2213
   },
   "dist/css-vendor.esm.js": {
-    "bundled": 14803,
-    "minified": 6205,
-    "gzipped": 2084,
+    "bundled": 15174,
+    "minified": 6416,
+    "gzipped": 2121,
     "treeshaked": {
       "rollup": {
-        "code": 3500,
+        "code": 3651,
         "import_statements": 89
       },
       "webpack": {
-        "code": 4717
+        "code": 4877
       }
     }
   }
diff --git a/src/plugins/hyphens.js b/src/plugins/hyphens.js
new file mode 100644
index 00000000..ad67d3df
--- /dev/null
+++ b/src/plugins/hyphens.js
@@ -0,0 +1,14 @@
+import prefix from '../prefix'
+
+// Support hyphens prop syntax.
+// https://caniuse.com/#search=hyphens
+export default {
+  noPrefill: ['hyphens'],
+  supportedProperty: (prop) => {
+    if (prop !== 'hyphens') return false
+    if (prefix.vendor === 'apple' || (prefix.js === 'ms' && prefix.browser !== 'edge')) {
+      return prefix.css + prop
+    }
+    return prop
+  }
+}
diff --git a/src/plugins/index.js b/src/plugins/index.js
index ab68fac8..9807cb21 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -14,6 +14,7 @@ import scrollSnap from './scroll-snap'
 import overscrollBehavior from './overscroll-behavior'
 import flex2012 from './flex-2012'
 import flex2009 from './flex-2009'
+import hyphens from './hyphens'
 
 // Please, keep order plugins:
 // plugins = [
@@ -39,6 +40,7 @@ const plugins = [
   transition,
   writingMode,
   userSelect,
+  hyphens,
   breakPropsOld,
   inlineLogicalOld,
   unprefixed,
@@ -50,11 +52,11 @@ const plugins = [
 ]
 
 export const propertyDetectors = plugins
-  .filter(p => p.supportedProperty)
-  .map(p => p.supportedProperty)
+  .filter((p) => p.supportedProperty)
+  .map((p) => p.supportedProperty)
 
 export const noPrefill = plugins
-  .filter(p => p.noPrefill)
+  .filter((p) => p.noPrefill)
   .reduce((a, p) => {
     a.push(...p.noPrefill)
     return a

From 852b0824bc68320dd5c6497d920b918e2fa4f83b Mon Sep 17 00:00:00 2001
From: Fabien Caylus <fabien.caylus@gmail.com>
Date: Sat, 18 Apr 2020 17:25:22 +0900
Subject: [PATCH 2/2] Prefix hyphens property on Firefox and Edge

---
 .size-snapshot.json    | 28 ++++++++++++++--------------
 src/plugins/hyphens.js |  2 +-
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/.size-snapshot.json b/.size-snapshot.json
index 37750b06..d82f547b 100644
--- a/.size-snapshot.json
+++ b/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "dist/css-vendor.js": {
-    "bundled": 17450,
-    "minified": 5771,
-    "gzipped": 2169
+    "bundled": 17444,
+    "minified": 5765,
+    "gzipped": 2170
   },
   "dist/css-vendor.min.js": {
-    "bundled": 17450,
-    "minified": 5771,
-    "gzipped": 2169
+    "bundled": 17444,
+    "minified": 5765,
+    "gzipped": 2170
   },
   "./lib/index": {
     "bundled": 14406,
@@ -34,21 +34,21 @@
     }
   },
   "dist/css-vendor.cjs.js": {
-    "bundled": 15493,
-    "minified": 6677,
-    "gzipped": 2213
+    "bundled": 15487,
+    "minified": 6671,
+    "gzipped": 2218
   },
   "dist/css-vendor.esm.js": {
-    "bundled": 15174,
-    "minified": 6416,
-    "gzipped": 2121,
+    "bundled": 15168,
+    "minified": 6410,
+    "gzipped": 2125,
     "treeshaked": {
       "rollup": {
-        "code": 3651,
+        "code": 3650,
         "import_statements": 89
       },
       "webpack": {
-        "code": 4877
+        "code": 4871
       }
     }
   }
diff --git a/src/plugins/hyphens.js b/src/plugins/hyphens.js
index ad67d3df..190d84af 100644
--- a/src/plugins/hyphens.js
+++ b/src/plugins/hyphens.js
@@ -6,7 +6,7 @@ export default {
   noPrefill: ['hyphens'],
   supportedProperty: (prop) => {
     if (prop !== 'hyphens') return false
-    if (prefix.vendor === 'apple' || (prefix.js === 'ms' && prefix.browser !== 'edge')) {
+    if (prefix.vendor === 'apple' || prefix.js === 'ms' || prefix.js === 'Moz') {
       return prefix.css + prop
     }
     return prop