Skip to content

Commit 40fc17b

Browse files
finkeffinkef
committed
feat: handle css media queries internally
1 parent ec3be84 commit 40fc17b

File tree

16 files changed

+456
-133
lines changed

16 files changed

+456
-133
lines changed

‎examples/expo/src/App.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import * as React from "react"
22

33
import { View, Text } from "react-native"
4-
import { TailwindProvider } from "react-native-tailwind.macro"
4+
import {
5+
getInitialColorScheme,
6+
TailwindProvider,
7+
} from "react-native-tailwind.macro"
58
import { Button } from "./Button"
69

710
interface AppProps {
@@ -39,7 +42,7 @@ const App: React.FunctionComponent<AppProps> = ({ toggleTheme }) => {
3942
}
4043

4144
export default () => {
42-
const [dark, setDark] = React.useState(false)
45+
const [dark, setDark] = React.useState(getInitialColorScheme() === "dark")
4346

4447
return (
4548
<TailwindProvider dark={dark}>

‎examples/next/App.tsx‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import * as React from "react"
22

33
import { View, Text } from "react-native"
4-
import { TailwindProvider } from "react-native-tailwind.macro"
4+
import {
5+
TailwindProvider,
6+
getInitialColorScheme,
7+
} from "react-native-tailwind.macro"
58
import { Button } from "./components/Button"
69

710
interface AppProps {
@@ -25,11 +28,21 @@ const App: React.FunctionComponent<AppProps> = ({ toggleTheme }) => {
2528
</Text>
2629

2730
<Text tw="mt-16 font-bold text-xl dark:text-white">Breakpoints</Text>
28-
<Text tw="dark:text-white xs:(font-bold text-blue-500)">xs</Text>
29-
<Text tw="dark:text-white sm:(font-bold text-blue-500)">sm</Text>
30-
<Text tw="dark:text-white md:(font-bold text-blue-500)">md</Text>
31-
<Text tw="dark:text-white lg:(font-bold text-blue-500)">lg</Text>
32-
<Text tw="dark:text-white xl:(font-bold text-blue-500)">xl</Text>
31+
<Text tw="dark:text-white xs:(font-bold text-blue-500 dark:text-pink-500)">
32+
xs
33+
</Text>
34+
<Text tw="dark:text-white sm:(font-bold text-blue-500 dark:text-pink-500)">
35+
sm
36+
</Text>
37+
<Text tw="dark:text-white md:(font-bold text-blue-500 dark:text-pink-500)">
38+
md
39+
</Text>
40+
<Text tw="dark:text-white lg:(font-bold text-blue-500 dark:text-pink-500)">
41+
lg
42+
</Text>
43+
<Text tw="dark:text-white xl:(font-bold text-blue-500 dark:text-pink-500)">
44+
xl
45+
</Text>
3346

3447
<Text tw="mt-8 text-custom">
3548
Text using custom color from tailwind.config.js
@@ -39,7 +52,7 @@ const App: React.FunctionComponent<AppProps> = ({ toggleTheme }) => {
3952
}
4053

4154
export default () => {
42-
const [dark, setDark] = React.useState(false)
55+
const [dark, setDark] = React.useState(getInitialColorScheme() === "dark")
4356

4457
return (
4558
<TailwindProvider dark={dark}>

‎examples/next/components/Button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const Button: FunctionComponent<ButtonProps> = ({ label, onPress }) => {
2727
onPressOut={() => setPressed(false)}
2828
onPress={onPress}
2929
>
30-
<View style={styles.button} dataSet={{ media: styles.button.id }}>
30+
<View style={styles.button} dataSet={{ tw: styles.button.id }}>
3131
<Text style={styles.text}>{label}</Text>
3232
</View>
3333
</TouchableWithoutFeedback>

‎examples/next/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
},
2222
"scripts": {
2323
"start": "yarn clean && yarn next dev",
24+
"build": "yarn clean && yarn next build",
25+
"serve": "yarn next start",
2426
"clean": "rimraf .expo/web/cache"
2527
},
2628
"prettier": {

‎packages/react-native-tailwind.macro/src/__tests__/__fixtures__/component-with-hook.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@ const Comp = () => {
66
[isFocused]
77
)
88

9-
return <View tw="bg-blue-500" style={box} dataSet={{ media: box.id }} />
9+
return <View tw="bg-blue-500" style={box} dataSet={{ tw: box.id }} />
1010
}

‎packages/react-native-tailwind.macro/src/__tests__/__fixtures__/existing-data-set-prop.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ import tw from "../../macro"
22

33
const Comp = () => <View tw="px-8" dataSet={{ foo: "bar" }} />
44

5-
const Comp2 = () => <View tw="px-8" dataSet={{ foo: "bar", media: "baz" }} />
5+
const Comp2 = () => <View tw="px-8" dataSet={{ foo: "bar", tw: "baz" }} />

‎packages/react-native-tailwind.macro/src/__tests__/__snapshots__/macro.test.ts.snap‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const Prepend = () => {
3939
},
4040
]}
4141
dataSet={{
42-
media: _tailwindStyles["mockId-1"].id,
42+
tw: _tailwindStyles["mockId-1"].id,
4343
}}
4444
/>
4545
)
@@ -87,7 +87,7 @@ const Append = () => {
8787
_tailwindStyles["mockId-1"],
8888
]}
8989
dataSet={{
90-
media: _tailwindStyles["mockId-1"].id,
90+
tw: _tailwindStyles["mockId-1"].id,
9191
}}
9292
/>
9393
)
@@ -120,7 +120,7 @@ const Comp = () => {
120120
[isFocused]
121121
)
122122
123-
return <View tw="bg-blue-500" style={box} dataSet={{ media: box.id }} />
123+
return <View tw="bg-blue-500" style={box} dataSet={{ tw: box.id }} />
124124
}
125125
126126
↓ ↓ ↓ ↓ ↓ ↓
@@ -143,7 +143,7 @@ const Comp = () => {
143143
<View
144144
style={[_tailwindStyles["mockId-1"], box]}
145145
dataSet={{
146-
media: _ReactNativeTailwindMacro.joinResponsiveIds(
146+
tw: _ReactNativeTailwindMacro.joinResponsiveIds(
147147
box.id,
148148
_tailwindStyles["mockId-1"].id
149149
),
@@ -226,7 +226,7 @@ const Comp = () => {
226226
isFocused ? tw\`bg-blue-400\` : tw\`bg-pink-500\`,
227227
]}
228228
dataSet={{
229-
media: _tailwindStyles["mockId-1"].id,
229+
tw: _tailwindStyles["mockId-1"].id,
230230
}}
231231
/>
232232
)
@@ -254,7 +254,7 @@ import tw from "../../macro"
254254
255255
const Comp = () => <View tw="px-8" dataSet={{ foo: "bar" }} />
256256
257-
const Comp2 = () => <View tw="px-8" dataSet={{ foo: "bar", media: "baz" }} />
257+
const Comp2 = () => <View tw="px-8" dataSet={{ foo: "bar", tw: "baz" }} />
258258
259259
↓ ↓ ↓ ↓ ↓ ↓
260260
@@ -268,7 +268,7 @@ const Comp = () => {
268268
style={_tailwindStyles["mockId-1"]}
269269
dataSet={{
270270
foo: "bar",
271-
media: _tailwindStyles["mockId-1"].id,
271+
tw: _tailwindStyles["mockId-1"].id,
272272
}}
273273
/>
274274
)
@@ -282,7 +282,7 @@ const Comp2 = () => {
282282
style={_tailwindStyles2["mockId-2"]}
283283
dataSet={{
284284
foo: "bar",
285-
media: _ReactNativeTailwindMacro.joinResponsiveIds(
285+
tw: _ReactNativeTailwindMacro.joinResponsiveIds(
286286
"baz",
287287
_tailwindStyles2["mockId-2"].id
288288
),
@@ -512,13 +512,13 @@ const Comp = () => {
512512
<View
513513
style={_tailwindStyles["mockId-1"]}
514514
dataSet={{
515-
media: _tailwindStyles["mockId-1"].id,
515+
tw: _tailwindStyles["mockId-1"].id,
516516
}}
517517
>
518518
<Text
519519
style={_tailwindStyles["mockId-2"]}
520520
dataSet={{
521-
media: _tailwindStyles["mockId-2"].id,
521+
tw: _tailwindStyles["mockId-2"].id,
522522
}}
523523
>
524524
Hello
@@ -599,7 +599,7 @@ const Prepend = () => {
599599
},
600600
]}
601601
dataSet={{
602-
media: _tailwindStyles["mockId-1"].id,
602+
tw: _tailwindStyles["mockId-1"].id,
603603
}}
604604
/>
605605
)
@@ -644,7 +644,7 @@ const Append = () => {
644644
_tailwindStyles["mockId-1"],
645645
]}
646646
dataSet={{
647-
media: _tailwindStyles["mockId-1"].id,
647+
tw: _tailwindStyles["mockId-1"].id,
648648
}}
649649
/>
650650
)
@@ -698,7 +698,7 @@ const Prepend = () => {
698698
<View
699699
style={[_tailwindStyles["mockId-1"], styles.a]}
700700
dataSet={{
701-
media: _tailwindStyles["mockId-1"].id,
701+
tw: _tailwindStyles["mockId-1"].id,
702702
}}
703703
/>
704704
)
@@ -738,7 +738,7 @@ const Append = () => {
738738
<View
739739
style={[styles.a, _tailwindStyles["mockId-1"]]}
740740
dataSet={{
741-
media: _tailwindStyles["mockId-1"].id,
741+
tw: _tailwindStyles["mockId-1"].id,
742742
}}
743743
/>
744744
)
@@ -827,7 +827,7 @@ const Comp = () => {
827827
<View
828828
style={_tailwindStyles["mockId-1"]}
829829
dataSet={{
830-
media: _tailwindStyles["mockId-1"].id,
830+
tw: _tailwindStyles["mockId-1"].id,
831831
}}
832832
/>
833833
)

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

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import { createCssRule } from "../css-media-queries.web"
2+
3+
describe("createCssRule", () => {
4+
test("dark: false, selectors: [], breakpoint: null", () => {
5+
expect(
6+
createCssRule({
7+
id: "a",
8+
dark: false,
9+
selectors: [],
10+
style: { marginTop: 24 },
11+
})
12+
).toMatchInlineSnapshot(`
13+
Object {
14+
"class": "[data-tw~=\\"a\\"] {margin-top:24px !important}",
15+
"media": "[data-tw~=\\"a\\"] {margin-top:24px !important}",
16+
}
17+
`)
18+
})
19+
20+
test('dark: false, selectors: [], breakpoint: "lg"', () => {
21+
expect(
22+
createCssRule({
23+
id: "a",
24+
dark: false,
25+
selectors: ["focus"],
26+
breakpoint: {
27+
label: "lg",
28+
minWidth: "1024px",
29+
},
30+
style: { marginTop: 24 },
31+
})
32+
).toMatchInlineSnapshot(`
33+
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} }",
36+
}
37+
`)
38+
})
39+
40+
test('dark: false, selectors: ["focus", "active"], breakpoint: null', () => {
41+
expect(
42+
createCssRule({
43+
id: "a",
44+
dark: false,
45+
selectors: ["focus", "active"],
46+
style: { marginTop: 24 },
47+
})
48+
).toMatchInlineSnapshot(`
49+
Object {
50+
"class": "[data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
51+
"media": "[data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
52+
}
53+
`)
54+
})
55+
56+
test('dark: false, selectors: ["focus", "active"], breakpoint: "lg"', () => {
57+
expect(
58+
createCssRule({
59+
id: "a",
60+
dark: false,
61+
selectors: ["focus", "active"],
62+
style: { marginTop: 24 },
63+
})
64+
).toMatchInlineSnapshot(`
65+
Object {
66+
"class": "[data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
67+
"media": "[data-tw~=\\"a\\"]:focus:active {margin-top:24px !important}",
68+
}
69+
`)
70+
})
71+
72+
test("dark: true, selectors: [], breakpoint: null", () => {
73+
expect(
74+
createCssRule({
75+
id: "a",
76+
dark: true,
77+
selectors: [],
78+
style: { marginTop: 24 },
79+
})
80+
).toMatchInlineSnapshot(`
81+
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} }",
84+
}
85+
`)
86+
})
87+
88+
test('dark: true, selectors: [], breakpoint: "lg"', () => {
89+
expect(
90+
createCssRule({
91+
id: "a",
92+
dark: true,
93+
selectors: [],
94+
breakpoint: {
95+
label: "lg",
96+
minWidth: "1024px",
97+
},
98+
style: { marginTop: 24 },
99+
})
100+
).toMatchInlineSnapshot(`
101+
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} } }",
104+
}
105+
`)
106+
})
107+
108+
test('dark: true, selectors: ["focus", "active"], breakpoint: null', () => {
109+
expect(
110+
createCssRule({
111+
id: "a",
112+
dark: true,
113+
selectors: ["focus", "active"],
114+
style: { marginTop: 24 },
115+
})
116+
).toMatchInlineSnapshot(`
117+
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} }",
120+
}
121+
`)
122+
})
123+
124+
test('dark: true, selectors: ["focus", "active"], breakpoint: "lg"', () => {
125+
expect(
126+
createCssRule({
127+
id: "a",
128+
dark: true,
129+
selectors: ["focus", "active"],
130+
breakpoint: {
131+
label: "lg",
132+
minWidth: "1024px",
133+
},
134+
style: { marginTop: 24 },
135+
})
136+
).toMatchInlineSnapshot(`
137+
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} } }",
140+
}
141+
`)
142+
})
143+
})

0 commit comments

Comments
 (0)