Skip to content

Commit 8c752e6

Browse files
authored
Merge pull request #62 from kristerkari/update/css-to-react-native-to-version-3
Update css-to-react-native to version 3.0.0
2 parents cfe3663 + 61a86da commit 8c752e6

File tree

3 files changed

+154
-31
lines changed

3 files changed

+154
-31
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
"dependencies": {
6060
"css": "^2.2.4",
6161
"css-mediaquery": "^0.1.2",
62-
"css-to-react-native": "^2.3.2"
62+
"css-to-react-native": "^3.0.0"
6363
},
6464
"repository": {
6565
"type": "git",

src/index.spec.js

Lines changed: 143 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,10 @@ describe("misc", () => {
99
expect(
1010
transform(`
1111
.test {
12-
top: 0;
13-
left: 0;
14-
right: 0;
15-
bottom: 0;
12+
z-index: 0
1613
}
17-
`),
18-
).toEqual({
19-
test: { top: 0, left: 0, right: 0, bottom: 0 },
20-
});
14+
`),
15+
).toEqual({ test: { zIndex: 0 } });
2116
});
2217

2318
it("ignores unsupported at-rules", () => {
@@ -142,6 +137,27 @@ describe("misc", () => {
142137
});
143138
});
144139

140+
it("allows uppercase units", () => {
141+
expect(
142+
transform(`
143+
.test {
144+
top: 0PX
145+
}
146+
`),
147+
).toEqual({ test: { top: 0 } });
148+
expect(
149+
transform(`
150+
.test {
151+
transform: rotate(30DEG)
152+
}
153+
`),
154+
).toEqual({
155+
test: {
156+
transform: [{ rotate: "30deg" }],
157+
},
158+
});
159+
});
160+
145161
it("allows percent values in transformed values", () => {
146162
expect(
147163
transform(`
@@ -770,6 +786,22 @@ describe("transform", () => {
770786
});
771787

772788
describe("border", () => {
789+
it("transforms border none", () => {
790+
expect(
791+
transform(`
792+
.test {
793+
border: none
794+
}
795+
`),
796+
).toEqual({
797+
test: {
798+
borderWidth: 0,
799+
borderColor: "black",
800+
borderStyle: "solid",
801+
},
802+
});
803+
});
804+
773805
it("transforms border shorthand", () => {
774806
expect(
775807
transform(`
@@ -866,6 +898,32 @@ describe("border", () => {
866898
});
867899
});
868900

901+
it("transforms border for unsupported units", () => {
902+
expect(
903+
transform(`
904+
.test {
905+
border: 3em solid black
906+
}
907+
`),
908+
).toEqual({
909+
test: {
910+
borderWidth: "3em",
911+
borderColor: "black",
912+
borderStyle: "solid",
913+
},
914+
});
915+
});
916+
917+
it("does not transform border with percentage width", () => {
918+
expect(() =>
919+
transform(`
920+
.test {
921+
border: 3% solid black
922+
}
923+
`),
924+
).toThrow();
925+
});
926+
869927
describe("shorthand border properties related to Image elements", () => {
870928
it("transforms border-radius", () => {
871929
expect(
@@ -1746,6 +1804,38 @@ describe("flex-box", () => {
17461804
});
17471805
});
17481806

1807+
it("transforms flex shorthand with flex-basis set to percent", () => {
1808+
expect(
1809+
transform(`
1810+
.test {
1811+
flex: 1 2 30%
1812+
}
1813+
`),
1814+
).toEqual({
1815+
test: {
1816+
flexGrow: 1,
1817+
flexShrink: 2,
1818+
flexBasis: "30%",
1819+
},
1820+
});
1821+
});
1822+
1823+
it("transforms flex shorthand with flex-basis set to unsupported unit", () => {
1824+
expect(
1825+
transform(`
1826+
.test {
1827+
flex: 1 2 30em
1828+
}
1829+
`),
1830+
).toEqual({
1831+
test: {
1832+
flexGrow: 1,
1833+
flexShrink: 2,
1834+
flexBasis: "30em",
1835+
},
1836+
});
1837+
});
1838+
17491839
it("transforms flex shorthand with flex-basis set to auto appearing first", () => {
17501840
expect(
17511841
transform(`
@@ -1981,23 +2071,14 @@ describe("font", () => {
19812071
});
19822072
});
19832073

1984-
it("allows line height as multiple", () => {
1985-
expect(
2074+
it("does not allow line height as multiple", () => {
2075+
expect(() => {
19862076
transform(`
19872077
.test {
1988-
font: 16px/1.5 "Helvetica";
2078+
font: 16px/1.5 "Helvetica"
19892079
}
1990-
`),
1991-
).toEqual({
1992-
test: {
1993-
fontFamily: "Helvetica",
1994-
fontSize: 16,
1995-
fontWeight: "normal",
1996-
fontStyle: "normal",
1997-
fontVariant: [],
1998-
lineHeight: 24,
1999-
},
2000-
});
2080+
`);
2081+
}).toThrow();
20012082
});
20022083

20032084
it("transforms font without quotes", () => {
@@ -2455,6 +2536,46 @@ describe("text-shadow", () => {
24552536
});
24562537
});
24572538

2539+
it("transforms place content", () => {
2540+
expect(
2541+
transform(`
2542+
.test {
2543+
place-content: center center
2544+
}
2545+
`),
2546+
).toEqual({
2547+
test: {
2548+
alignContent: "center",
2549+
justifyContent: "center",
2550+
},
2551+
});
2552+
});
2553+
2554+
it("transforms place content with one value", () => {
2555+
expect(
2556+
transform(`
2557+
.test {
2558+
place-content: center
2559+
}
2560+
`),
2561+
).toEqual({
2562+
test: {
2563+
alignContent: "center",
2564+
justifyContent: "stretch",
2565+
},
2566+
});
2567+
});
2568+
2569+
it("does not allow justify content without align content", () => {
2570+
expect(() =>
2571+
transform(`
2572+
.test {
2573+
place-content: space-evenly
2574+
}
2575+
`),
2576+
).toThrow();
2577+
});
2578+
24582579
describe("rem unit", () => {
24592580
it("should transform a single rem value", () => {
24602581
expect(

yarn.lock

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2213,19 +2213,20 @@ cross-spawn@^7.0.3:
22132213
css-color-keywords@^1.0.0:
22142214
version "1.0.0"
22152215
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
2216+
integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
22162217

22172218
css-mediaquery@^0.1.2:
22182219
version "0.1.2"
22192220
resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
22202221

2221-
css-to-react-native@^2.3.2:
2222-
version "2.3.2"
2223-
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d"
2224-
integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==
2222+
css-to-react-native@^3.0.0:
2223+
version "3.0.0"
2224+
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
2225+
integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
22252226
dependencies:
22262227
camelize "^1.0.0"
22272228
css-color-keywords "^1.0.0"
2228-
postcss-value-parser "^3.3.0"
2229+
postcss-value-parser "^4.0.2"
22292230

22302231
css@^2.2.4:
22312232
version "2.2.4"
@@ -4343,9 +4344,10 @@ posix-character-classes@^0.1.0:
43434344
version "0.1.1"
43444345
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
43454346

4346-
postcss-value-parser@^3.3.0:
4347-
version "3.3.0"
4348-
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
4347+
postcss-value-parser@^4.0.2:
4348+
version "4.1.0"
4349+
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
4350+
integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
43494351

43504352
prelude-ls@~1.1.2:
43514353
version "1.1.2"

0 commit comments

Comments
 (0)