Skip to content

Commit 5bce618

Browse files
finkeffinkef
authored
Merge pull request #13 from finkef/fix/vendor-prefixes-important
fix: add !important to vendor prefixed styles
2 parents efac5f2 + 34b2c46 commit 5bce618

File tree

2 files changed

+25
-25
lines changed

2 files changed

+25
-25
lines changed

‎packages/react-native-tailwind.macro/src/__tests__/css-media-queries.test.ts‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ describe("createCssRule", () => {
77
id: "a",
88
dark: false,
99
selectors: [],
10-
style: { marginTop: 24 },
10+
style: { marginTop: 24, display: "flex" },
1111
})
1212
).toMatchInlineSnapshot(`
1313
Object {
14-
"class": "[data-tw~=\\"a\\"] {margin-top:24px !important}",
15-
"media": "[data-tw~=\\"a\\"] {margin-top:24px !important}",
14+
"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}",
15+
"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}",
1616
}
1717
`)
1818
})
@@ -27,12 +27,12 @@ describe("createCssRule", () => {
2727
label: "lg",
2828
minWidth: "1024px",
2929
},
30-
style: { marginTop: 24 },
30+
style: { marginTop: 24, display: "flex" },
3131
})
3232
).toMatchInlineSnapshot(`
3333
Object {
34-
"class": "@media (min-width: 1024px) { [data-tw~=\\"a\\"]:focus {margin-top:24px !important} }",
35-
"media": "@media (min-width: 1024px) { [data-tw~=\\"a\\"]:focus {margin-top:24px !important} }",
34+
"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} }",
35+
"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} }",
3636
}
3737
`)
3838
})
@@ -43,12 +43,12 @@ describe("createCssRule", () => {
4343
id: "a",
4444
dark: false,
4545
selectors: ["focus", "active"],
46-
style: { marginTop: 24 },
46+
style: { marginTop: 24, display: "flex" },
4747
})
4848
).toMatchInlineSnapshot(`
4949
Object {
50-
"class": "[data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
51-
"media": "[data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
50+
"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}",
51+
"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}",
5252
}
5353
`)
5454
})
@@ -59,12 +59,12 @@ describe("createCssRule", () => {
5959
id: "a",
6060
dark: false,
6161
selectors: ["focus", "active"],
62-
style: { marginTop: 24 },
62+
style: { marginTop: 24, display: "flex" },
6363
})
6464
).toMatchInlineSnapshot(`
6565
Object {
66-
"class": "[data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
67-
"media": "[data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
66+
"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}",
67+
"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}",
6868
}
6969
`)
7070
})
@@ -75,12 +75,12 @@ describe("createCssRule", () => {
7575
id: "a",
7676
dark: true,
7777
selectors: [],
78-
style: { marginTop: 24 },
78+
style: { marginTop: 24, display: "flex" },
7979
})
8080
).toMatchInlineSnapshot(`
8181
Object {
82-
"class": ".rntwm-dark [data-tw~=\\"a\\"] {margin-top:24px !important}",
83-
"media": "@media (prefers-color-scheme: dark) { [data-tw~=\\"a\\"] {margin-top:24px !important} }",
82+
"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}",
83+
"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} }",
8484
}
8585
`)
8686
})
@@ -95,12 +95,12 @@ describe("createCssRule", () => {
9595
label: "lg",
9696
minWidth: "1024px",
9797
},
98-
style: { marginTop: 24 },
98+
style: { marginTop: 24, display: "flex" },
9999
})
100100
).toMatchInlineSnapshot(`
101101
Object {
102-
"class": "@media (min-width: 1024px) { .rntwm-dark [data-tw~=\\"a\\"] {margin-top:24px !important} }",
103-
"media": "@media (min-width: 1024px) { @media (prefers-color-scheme: dark) { [data-tw~=\\"a\\"] {margin-top:24px !important} } }",
102+
"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} }",
103+
"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} } }",
104104
}
105105
`)
106106
})
@@ -111,12 +111,12 @@ describe("createCssRule", () => {
111111
id: "a",
112112
dark: true,
113113
selectors: ["focus", "active"],
114-
style: { marginTop: 24 },
114+
style: { marginTop: 24, display: "flex" },
115115
})
116116
).toMatchInlineSnapshot(`
117117
Object {
118-
"class": ".rntwm-dark [data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
119-
"media": "@media (prefers-color-scheme: dark) { [data-tw~=\\"a\\"]:focus:active {margin-top:24px !important} }",
118+
"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}",
119+
"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} }",
120120
}
121121
`)
122122
})
@@ -131,12 +131,12 @@ describe("createCssRule", () => {
131131
label: "lg",
132132
minWidth: "1024px",
133133
},
134-
style: { marginTop: 24 },
134+
style: { marginTop: 24, display: "flex" },
135135
})
136136
).toMatchInlineSnapshot(`
137137
Object {
138-
"class": "@media (min-width: 1024px) { .rntwm-dark [data-tw~=\\"a\\"]:focus:active {margin-top:24px !important} }",
139-
"media": "@media (min-width: 1024px) { @media (prefers-color-scheme: dark) { [data-tw~=\\"a\\"]:focus:active {margin-top:24px !important} } }",
138+
"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} }",
139+
"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} } }",
140140
}
141141
`)
142142
})

‎packages/react-native-tailwind.macro/src/css-media-queries.web.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export const createCssRule = ({
5757
.map(([key, value]) => {
5858
const prop = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
5959
return Array.isArray(value)
60-
? value.map((v) => `${prop}:${v}`).join(";")
60+
? value.map((v) => `${prop}:${v} !important`).join(";")
6161
: `${prop}:${value} !important`
6262
})
6363
.sort()

0 commit comments

Comments
 (0)