Merge pull request #13 from finkef/fix/vendor-prefixes-important

fix: add !important to vendor prefixed styles
finkef · May 10, 2022 · 5bce618 · 5bce618
2 parents efac5f2 + 34b2c46
commit 5bce618
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 25 deletions.
diff --git a/packages/react-native-tailwind.macro/src/__tests__/css-media-queries.test.ts b/packages/react-native-tailwind.macro/src/__tests__/css-media-queries.test.ts
@@ -7,12 +7,12 @@ describe("createCssRule", () => {
         id: "a",
         dark: false,
         selectors: [],
-        style: { marginTop: 24 },
+        style: { marginTop: 24, display: "flex" },
       })
     ).toMatchInlineSnapshot(`
       Object {
-        "class": "[data-tw~=\\"a\\"] {margin-top:24px !important}",
-        "media": "[data-tw~=\\"a\\"] {margin-top:24px !important}",
+        "class": "[data-tw~=\\"a\\"] {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important}",
+        "media": "[data-tw~=\\"a\\"] {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important}",
       }
     `)
   })
@@ -27,12 +27,12 @@ describe("createCssRule", () => {
           label: "lg",
           minWidth: "1024px",
         },
-        style: { marginTop: 24 },
+        style: { marginTop: 24, display: "flex" },
       })
     ).toMatchInlineSnapshot(`
       Object {
-        "class": "@media (min-width: 1024px) { [data-tw~=\\"a\\"]:focus {margin-top:24px !important} }",
-        "media": "@media (min-width: 1024px) { [data-tw~=\\"a\\"]:focus {margin-top:24px !important} }",
+        "class": "@media (min-width: 1024px) { [data-tw~=\\"a\\"]:focus {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important} }",
+        "media": "@media (min-width: 1024px) { [data-tw~=\\"a\\"]:focus {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important} }",
       }
     `)
   })
@@ -43,12 +43,12 @@ describe("createCssRule", () => {
         id: "a",
         dark: false,
         selectors: ["focus", "active"],
-        style: { marginTop: 24 },
+        style: { marginTop: 24, display: "flex" },
       })
     ).toMatchInlineSnapshot(`
       Object {
-        "class": "[data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
-        "media": "[data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
+        "class": "[data-tw~=\\"a\\"]:focus:active {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important}",
+        "media": "[data-tw~=\\"a\\"]:focus:active {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important}",
       }
     `)
   })
@@ -59,12 +59,12 @@ describe("createCssRule", () => {
         id: "a",
         dark: false,
         selectors: ["focus", "active"],
-        style: { marginTop: 24 },
+        style: { marginTop: 24, display: "flex" },
       })
     ).toMatchInlineSnapshot(`
       Object {
-        "class": "[data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
-        "media": "[data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
+        "class": "[data-tw~=\\"a\\"]:focus:active {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important}",
+        "media": "[data-tw~=\\"a\\"]:focus:active {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important}",
       }
     `)
   })
@@ -75,12 +75,12 @@ describe("createCssRule", () => {
         id: "a",
         dark: true,
         selectors: [],
-        style: { marginTop: 24 },
+        style: { marginTop: 24, display: "flex" },
       })
     ).toMatchInlineSnapshot(`
       Object {
-        "class": ".rntwm-dark [data-tw~=\\"a\\"] {margin-top:24px !important}",
-        "media": "@media (prefers-color-scheme: dark) { [data-tw~=\\"a\\"] {margin-top:24px !important} }",
+        "class": ".rntwm-dark [data-tw~=\\"a\\"] {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important}",
+        "media": "@media (prefers-color-scheme: dark) { [data-tw~=\\"a\\"] {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important} }",
       }
     `)
   })
@@ -95,12 +95,12 @@ describe("createCssRule", () => {
           label: "lg",
           minWidth: "1024px",
         },
-        style: { marginTop: 24 },
+        style: { marginTop: 24, display: "flex" },
       })
     ).toMatchInlineSnapshot(`
       Object {
-        "class": "@media (min-width: 1024px) { .rntwm-dark [data-tw~=\\"a\\"] {margin-top:24px !important} }",
-        "media": "@media (min-width: 1024px) { @media (prefers-color-scheme: dark) { [data-tw~=\\"a\\"] {margin-top:24px !important} } }",
+        "class": "@media (min-width: 1024px) { .rntwm-dark [data-tw~=\\"a\\"] {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important} }",
+        "media": "@media (min-width: 1024px) { @media (prefers-color-scheme: dark) { [data-tw~=\\"a\\"] {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important} } }",
       }
     `)
   })
@@ -111,12 +111,12 @@ describe("createCssRule", () => {
         id: "a",
         dark: true,
         selectors: ["focus", "active"],
-        style: { marginTop: 24 },
+        style: { marginTop: 24, display: "flex" },
       })
     ).toMatchInlineSnapshot(`
       Object {
-        "class": ".rntwm-dark [data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
-        "media": "@media (prefers-color-scheme: dark) { [data-tw~=\\"a\\"]:focus:active {margin-top:24px !important} }",
+        "class": ".rntwm-dark [data-tw~=\\"a\\"]:focus:active {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important}",
+        "media": "@media (prefers-color-scheme: dark) { [data-tw~=\\"a\\"]:focus:active {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important} }",
       }
     `)
   })
@@ -131,12 +131,12 @@ describe("createCssRule", () => {
           label: "lg",
           minWidth: "1024px",
         },
-        style: { marginTop: 24 },
+        style: { marginTop: 24, display: "flex" },
       })
     ).toMatchInlineSnapshot(`
       Object {
-        "class": "@media (min-width: 1024px) { .rntwm-dark [data-tw~=\\"a\\"]:focus:active {margin-top:24px !important} }",
-        "media": "@media (min-width: 1024px) { @media (prefers-color-scheme: dark) { [data-tw~=\\"a\\"]:focus:active {margin-top:24px !important} } }",
+        "class": "@media (min-width: 1024px) { .rntwm-dark [data-tw~=\\"a\\"]:focus:active {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important} }",
+        "media": "@media (min-width: 1024px) { @media (prefers-color-scheme: dark) { [data-tw~=\\"a\\"]:focus:active {display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;margin-top:24px !important} } }",
       }
     `)
   })

diff --git a/packages/react-native-tailwind.macro/src/css-media-queries.web.tsx b/packages/react-native-tailwind.macro/src/css-media-queries.web.tsx
@@ -57,7 +57,7 @@ export const createCssRule = ({
     .map(([key, value]) => {
       const prop = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
       return Array.isArray(value)
-        ? value.map((v) => `${prop}:${v}`).join(";")
+        ? value.map((v) => `${prop}:${v} !important`).join(";")
         : `${prop}:${value} !important`
     })
     .sort()