-
Notifications
You must be signed in to change notification settings - Fork 16
/
react-css.react.txt
133 lines (96 loc) · 9.6 KB
/
react-css.react.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
REACT-CSS
ALTERNATIVES ==> # - react-jss: translates into <style>
# - Radium: translates into HTML inline style
#Prefer react-JSS. See "CSS" doc for more info
REACT-JSS
VERSION ==> #2.0.1
#Link a JSS SHEET to a React RCOMP
REACTJSS(JSSI)->REACTJSS
REACTJSS(JSS_OBJ[,CONF])->REACTJSS#Bind REACTJSS
REACTJSS(CTYPE, JSS_OBJ[, CONF]) #Usage
->CTYPE #CONF are passed to JSSI.createStyleSheet()
RCOMP.props.sheet #JSS SHEET
#Automatically attach() on mount, detach() on unmount
RADIUM
VERSION ==> #0.15.3
#Helps using HTML "style" attribute (i.e. using inline CSS approach) in React.
RADIUM(CONF)->RADIUM #Binds
RADIUM(CTYPE)->CTYPE #Usage
#It works by wrapping RCOMP.render()->VAL and patching VAL
/=+===============================+=\
/ : : \
)==: MAIN :==(
\ :_______________________________: /
\=+===============================+=/
PROPS.style VAL[_ARR] #Instead of PROPS.style OBJ:
# - merge VAL_ARR together:
# - priority to the right.
# - if VAL not OBJ, ignored
# - usually come from a shared (e.g. using RCOMP.context) OBJ_OBJ, where the key might come
# from props
#Only in CTYPE's children, not CTYPE itself:
# - if used on several children, they must have PROPS.key|ref
#PROPS.style OBJ has extra ability:
# - ':hover|focus|active': { PROP: VAL ... }
# - RADIUM.getState(RCOMP.state, 'KEY|REF'|null, ':hover|focus|active')->BOOL:
# check if SELECTOR applies
# - '@media ...': { PROP: VAL ... }:
# - uses CONF.matchMedia() (def: WINDOW.matchMedia())
# - might need to be mocked on the server
# - when using @media print: please check online doc
# - fallback values (priority to the left): { PROP: ARR } instead of { PROP: VAL }
# - automatic browser-vendor prefix:
# - can override user-agent (might need to be done on the server) with CONF.userAgent
/=+===============================+=\
/ : : \
)==: EXTRA :==(
\ :_______________________________: /
\=+===============================+=/
<Style> #Inject a <style> with CSS. OBJ keys are CSS selectors.
#Media queries must be wrapped in { mediaQueries: { 'MEDIAQUERY' OBJ, ... } }
rules={OBJ}
scopeSelector="SELECTOR" #Appended to all selectors.
RADIUM.keyframes #Inject a <style> with CSS @keyframes, and returns automatically generated name KEYFRAMES
(OBJ[, 'RCOMP_NAME']) #'RCOMP_NAME' is used for debugging.
/=+===============================+=\
/ : : \
)==: PLUGINS :==(
\ :_______________________________: /
\=+===============================+=/
CONF.plugins #ARR of FUNC(OBJ)->OBJ2, where OBJ:
# - componentName STR
# - props PROPS
# - style OBJ
# - config CONF
# - getComponentField('ATTR')->VAL: RCOMP HTML attributes
# - getGlobalState('VAR')->VAL: use Radium global object
# - getState('VAR'[, 'KEY|REF'])->VAL
# - setState('VAR', VAL[, 'KEY|REF'])
# - mergeStyles(VAL_ARR)->OBJ
#And OBJ2 (each optional):
# - props PROPS
# - style OBJ
# - globalState OBJ
# - componentFields OBJ
#Def do the basic Radium functionalities:
# - RADIUM.Plugins.mergeStyleArray: merge PROPS.style VAL_ARR together
# - RADIUM.Plugins.checkProps: check PROPS.style correctness
# - RADIUM.Plugins.resolveMediaQueries: '@media' SELECTOR
# - RADIUM.Plugins.resolveInteractionStyles: ':hover|focus|active' SELECTOR
# - RADIUM.Plugins.prefix: browser-vendor prefix
# - RADIUM.Plugins.checkProps
/=+==============================a=+=\
/ : : \
)==: CONVERSION :==(
\ :_______________________________: /
\=+===============================+=/
css-to-radium #CLI (1.0.3) from CSS -> Radium JavaScript
[[--input] FILE.css ...] [FILE.js]
--quote single|double #Def: 'single'
--indentSize=NUM #Def: tab character