Skip to content

Commit 4642caa

Browse files
japgollyjapgolly
committed
Styles now given to React in camel case. No more warnings.
Fixes #47
1 parent b569877 commit 4642caa

File tree

3 files changed

+124
-4
lines changed

3 files changed

+124
-4
lines changed

‎HISTORY.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
* In rare circumstances, `Simulation.run` targets can go out of date. Targets are now stored by-name.
77
* Added `Sel.findFirstIn`.
88
* `ReactTestUtils` now accept plain old `ReactElement`s.
9+
* Styles now given to React in camel case. No more warnings.
910

1011
# 0.6.0 ([commit log](https://github.com/japgolly/scalajs-react/compare/v0.5.4...v0.6.0))
1112

‎core/src/main/scala/japgolly/scalajs/react/vdom/VDomBuilder.scala‎

Lines changed: 117 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,122 @@ private[vdom] object VDomBuilder {
1515

1616
val attrTranslations =
1717
specialCaseAttrs.toList.map(x => x.toLowerCase -> x).toMap ++ specialNameAttrs
18+
19+
// May as well just copy Scalatags and customise
20+
// cat ~/crap/ReactStyles.scala | fgrep -- - | egrep -v '^ *\* ' | fgrep -v '= this :=' | perl -pe 's/^.+(".+").+(".+-.+").*$/GOL \2 -> \1,/' | grep GOL | cut -b4- | sort
21+
val styleTranslations = Map(
22+
"animation-delay" -> "animationDelay",
23+
"animation-direction" -> "animationDirection",
24+
"animation-duration" -> "animationDuration",
25+
"animation-fill-mode" -> "animationFillMode",
26+
"animation-iteration-count" -> "animationIterationCount",
27+
"animation-name" -> "animationName",
28+
"animation-play-state" -> "animationPlayState",
29+
"animation-timing-function" -> "animationTimingFunction",
30+
"backface-visibility" -> "backfaceVisibility",
31+
"background-attachment" -> "backgroundAttachment",
32+
"background-clip" -> "backgroundClip",
33+
"background-color" -> "backgroundColor",
34+
"background-image" -> "backgroundImage",
35+
"background-origin" -> "backgroundOrigin",
36+
"background-position" -> "backgroundPosition",
37+
"background-repeat" -> "backgroundRepeat",
38+
"background-size" -> "backgroundSize",
39+
"border-bottom" -> "borderBottom",
40+
"border-bottom-color" -> "borderBottomColor",
41+
"border-bottom-left-radius" -> "borderBottomLeftRadius",
42+
"border-bottom-right-radius" -> "borderBottomRightRadius",
43+
"border-bottom-style" -> "borderBottomStyle",
44+
"border-bottom-width" -> "borderBottomWidth",
45+
"border-collapse" -> "borderCollapse",
46+
"border-color" -> "borderColor",
47+
"border-left" -> "borderLeft",
48+
"border-left-color" -> "borderLeftColor",
49+
"border-left-style" -> "borderLeftStyle",
50+
"border-left-width" -> "borderLeftWidth",
51+
"border-radius" -> "borderRadius",
52+
"border-right" -> "borderRight",
53+
"border-right-color" -> "borderRightColor",
54+
"border-right-style" -> "bocrderRightStyle",
55+
"border-right-width" -> "borderRightWidth",
56+
"border-spacing" -> "borderSpacing",
57+
"border-style" -> "borderStyle",
58+
"border-top" -> "borderTop",
59+
"border-top-color" -> "borderTopColor",
60+
"border-top-left-radius" -> "borderTopLeftRadius",
61+
"border-top-right-radius" -> "borderTopRightRadius",
62+
"border-top-style" -> "borderTopStyle",
63+
"border-top-width" -> "borderTopWidth",
64+
"border-width" -> "borderWidth",
65+
"box-shadow" -> "boxShadow",
66+
"box-sizing" -> "boxSizing",
67+
"caption-side" -> "captionSide",
68+
"column-count" -> "columnCount",
69+
"column-fill" -> "columnFill",
70+
"column-gap" -> "columnGap",
71+
"column-rule-color" -> "columnRuleColor",
72+
"column-rule" -> "columnRule",
73+
"column-rule-style" -> "columnRuleStyle",
74+
"column-rule-width" -> "columnRuleWidth",
75+
"column-span" -> "columnSpan",
76+
"column-width" -> "columnWidth",
77+
"counter-increment" -> "counterIncrement",
78+
"counter-reset" -> "counterReset",
79+
"empty-cells" -> "emptyCells",
80+
"font-family" -> "fontFamily",
81+
"font-feature-settings" -> "fontFeatureSettings",
82+
"font-size-adjust" -> "fontSizeAdjust",
83+
"font-size" -> "fontSize",
84+
"font-style" -> "fontStyle",
85+
"font-weight" -> "fontWeight",
86+
"letter-spacing" -> "letterSpacing",
87+
"list-style-image" -> "listStyleImage",
88+
"list-style" -> "listStyle",
89+
"list-style-position" -> "listStylePosition",
90+
"list-style-type" -> "listStyleType",
91+
"margin-bottom" -> "marginBottom",
92+
"margin-left" -> "marginLeft",
93+
"margin-right" -> "marginRight",
94+
"margin-top" -> "marginTop",
95+
"max-height" -> "maxHeight",
96+
"max-width" -> "maxWidth",
97+
"min-height" -> "minHeight",
98+
"outline-color" -> "outlineColor",
99+
"outline-style" -> "outlineStyle",
100+
"outline-width" -> "outlineWidth",
101+
"overflow-x" -> "overflowX",
102+
"overflow-y" -> "overflowY",
103+
"padding-bottom" -> "paddingBottom",
104+
"padding-left" -> "paddingLeft",
105+
"padding-right" -> "paddingRight",
106+
"padding-top" -> "paddingTop",
107+
"page-break-after" -> "pageBreakAfter",
108+
"page-break-before" -> "pageBreakBefore",
109+
"page-break-inside" -> "pageBreakInside",
110+
"perspective-origin" -> "perspectiveOrigin",
111+
"pointer-events" -> "pointerEvents",
112+
"table-layout" -> "tableLayout",
113+
"text-align-last" -> "textAlignLast",
114+
"text-align" -> "textAlign",
115+
"text-decoration" -> "textDecoration",
116+
"text-indent" -> "textIndent",
117+
"text-overflow" -> "textOverflow",
118+
"text-shadow" -> "textShadow",
119+
"text-transform" -> "textTransform",
120+
"text-underline-position" -> "textUnderlinePosition",
121+
"transform-origin" -> "transformOrigin",
122+
"transform-style" -> "transformStyle",
123+
"transition-delay" -> "transitionDelay",
124+
"transition-duration" -> "transitionDuration",
125+
"transition-property" -> "transitionProperty",
126+
"transition-timing-function" -> "transitionTimingFunction",
127+
"unicode-bidi" -> "unicodeBidi",
128+
"vertical-align" -> "verticalAlign",
129+
"white-space" -> "whiteSpace",
130+
"word-break" -> "wordBreak",
131+
"word-spacing" -> "wordSpacing",
132+
"word-wrap" -> "wordWrap",
133+
"z-index" -> "zIndex")
18134
}
19135

20136
private[vdom] final class VDomBuilder {
@@ -31,7 +147,7 @@ private[vdom] final class VDomBuilder {
31147
set(props, attrTranslations.getOrElse(k, k), v)
32148

33149
def addStyle(k: String, v: String): Unit =
34-
set(style, k, v)
150+
set(style, styleTranslations.getOrElse(k, k), v)
35151

36152
@inline private[this] def set(o: js.Object, k: String, v: js.Any): Unit =
37153
o.asInstanceOf[js.Dynamic].updateDynamic(k)(v)

‎test/src/test/scala/japgolly/scalajs/react/CoreTest.scala‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,13 @@ object CoreTest extends TestSuite {
4747

4848
'dangerouslySetInnerHtml - test(div(dangerouslySetInnerHtml("<span>")), "<div><span></div>")
4949

50-
'combination {
51-
test(div(cls := "hi", "Str: ", 123, JArray(H1("a"), H1("b")), p(cls := "pp")("!")),
50+
'combination - test(
51+
div(cls := "hi", "Str: ", 123, JArray(H1("a"), H1("b")), p(cls := "pp")("!")),
5252
"""<div class="hi">Str: 123<h1>a</h1><h1>b</h1><p class="pp">!</p></div>""")
53-
}
53+
54+
'styles - test(
55+
div(backgroundColor := "red", marginTop := "10px", "!"),
56+
"""<div style="background-color:red;margin-top:10px;">!</div>""")
5457
}
5558

5659
'props {

0 commit comments

Comments
 (0)