Skip to content

Commit d715cc4

Browse files
author
lttb
committed
Implement injectStyled
1 parent 732c551 commit d715cc4

11 files changed

Lines changed: 227 additions & 17 deletions

File tree

‎.babelrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
],
55
plugins: [
66
'transform-es2015-modules-commonjs',
7+
'transform-class-properties',
78
['transform-object-rest-spread', { useBuiltIns: true }],
89
]
910
}

‎README.md‎

Lines changed: 95 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ Styled primitives for JSS.
66
77
## Usage
88

9-
```jsx
9+
### Styled function
10+
11+
> Note, that styles applies to the page on the function call, so it's better to use [injectStyled](#injectstyled) in most cases
1012
11-
import Styled from 'jss-styled'
13+
```jsx
14+
import { Styled } from 'jss-styled'
1215

1316
const styled = Styled({
1417
h1: {
@@ -32,7 +35,7 @@ const App = () => (
3235
)
3336
```
3437

35-
### With custom jss setting
38+
### Styled function With custom jss setting
3639

3740
```jsx
3841
import jss from 'jss'
@@ -47,3 +50,92 @@ const Styled = prepareStyled({ jss })
4750

4851
...
4952
```
53+
54+
### injectStyled
55+
56+
This wrapper applies styles only on the first component mount.
57+
58+
```jsx
59+
import injectStyled from 'jss-styled'
60+
61+
62+
const styles = {
63+
h1: {
64+
fontSize: '30px',
65+
},
66+
app: {
67+
padding: 10px,
68+
},
69+
button: {
70+
color: ({ color }) => color
71+
}
72+
}
73+
74+
const App = ({ styled }) => (
75+
<styled.app>
76+
<styled.h1>Hello World!</styled.h1>
77+
78+
<styled.button color="red">click me!</styled.button>
79+
</styled.app>
80+
)
81+
82+
83+
export default injectStyled(styles)(App)
84+
```
85+
86+
#### With custom Styled function
87+
88+
```jsx
89+
import jss from 'jss'
90+
import preset from 'jss-preset-default'
91+
92+
import injectStyled, { prepareStyled } from 'jss-styled'
93+
94+
95+
const jss = createJSS(preset())
96+
jss.use(somePlugin())
97+
98+
const Styled = prepareStyled({ jss })
99+
100+
const styles = {
101+
h1: {
102+
fontSize: '30px',
103+
},
104+
app: {
105+
padding: 10px,
106+
},
107+
button: {
108+
color: ({ color }) => color
109+
}
110+
}
111+
112+
const App = ({ styled }) => (
113+
<styled.app>
114+
<styled.h1>Hello World!</styled.h1>
115+
116+
<styled.button color="red">click me!</styled.button>
117+
</styled.app>
118+
)
119+
120+
121+
export default injectStyled(styles, Styled)(App)
122+
```
123+
124+
#### StyledComponent customization
125+
126+
```jsx
127+
import StyledApp from './App'
128+
129+
130+
const customStyles = {
131+
app: {
132+
padding: 30px,
133+
},
134+
}
135+
136+
const CustomApp = () => (
137+
// App will reassign App component styles for .app
138+
139+
<App styles={customStyles} />
140+
)
141+
```

‎examples/simple/.babelrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
'react',
44
],
55
plugins: [
6+
'transform-class-properties',
67
['transform-object-rest-spread', { useBuiltIns: true }],
78
],
89
env: {

‎examples/simple/index.jsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react'
22
import { render } from 'react-dom'
33

4-
import Styled from '../../src'
4+
import injectStyled from '../../src'
55

66

7-
const styled = Styled({
7+
const styles = {
88
app: {
99
margin: '50px',
1010
},
@@ -23,15 +23,15 @@ const styled = Styled({
2323
button: {
2424
margin: ({ margin = 0 }) => `${margin}px`,
2525
},
26-
})
26+
}
2727

28-
const Header = () => (
28+
const Header = ({ styled }) => (
2929
<styled.header>
3030
<styled.h1>Styled JSS simple example</styled.h1>
3131
</styled.header>
3232
)
3333

34-
const Content = () => (
34+
const Content = ({ styled }) => (
3535
<styled.section
3636
composes="content"
3737
attrs={{
@@ -47,13 +47,13 @@ const Content = () => (
4747
</styled.section>
4848
)
4949

50-
const App = () => (
50+
const App = injectStyled(styles)(({ styled }) => (
5151
<styled.app>
52-
<Header />
52+
<Header styled={styled} />
5353

54-
<Content />
54+
<Content styled={styled} />
5555
</styled.app>
56-
)
56+
))
5757

5858

5959
render(<App />, document.querySelector('#app'))

‎examples/simple/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
},
1818
"devDependencies": {
1919
"babel-loader": "^6.2.10",
20+
"babel-plugin-transform-class-properties": "^6.23.0",
2021
"babel-plugin-transform-object-rest-spread": "^6.23.0",
2122
"babel-preset-react": "^6.23.0",
2223
"html-webpack-plugin": "^2.28.0",

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"@lttb/eslint-config-default": "github:lttb/configs#js",
3737
"babel-cli": "^6.23.0",
3838
"babel-core": "^6.23.1",
39+
"babel-plugin-transform-class-properties": "^6.23.0",
3940
"babel-plugin-transform-es2015-modules-commonjs": "^6.23.0",
4041
"babel-plugin-transform-object-rest-spread": "^6.23.0",
4142
"babel-preset-react": "^6.23.0",

‎src/index.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { create as createJSS } from 'jss'
2-
import React from 'react'
2+
import React, { Component } from 'react'
33
import injectSheet from 'react-jss'
44
import preset from 'jss-preset-default'
55

@@ -49,4 +49,19 @@ export const prepareStyled = ({ jss = JSS } = {}) => (styles) => {
4949
})
5050
}
5151

52-
export default prepareStyled()
52+
export const Styled = prepareStyled()
53+
54+
export default (styles, StyledFunc = Styled) => Element =>
55+
class StyledComponent extends Component {
56+
styles = { ...styles, ...this.props.styles }
57+
58+
componentWillMount() {
59+
this.styled = StyledFunc(this.styles)
60+
}
61+
62+
render = () => React.createElement(Element, {
63+
...this.props,
64+
styled: this.styled,
65+
styles: this.styles,
66+
})
67+
}

‎src/tests/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22

3-
import Styled from '../'
3+
import { Styled } from '../'
44

55

66
const styled = Styled({

‎src/tests/AppStyled.jsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react'
2+
3+
import injectStyled from '../'
4+
5+
6+
const styles = {
7+
app: {
8+
margin: '50px',
9+
},
10+
header: {
11+
padding: '10px',
12+
},
13+
content: {
14+
padding: ({ padding }) => `${padding}px`,
15+
},
16+
h1: {
17+
color: 'red',
18+
},
19+
p: {
20+
border: '1px solid black',
21+
},
22+
text: {
23+
color: 'green',
24+
},
25+
button: {
26+
margin: ({ margin = 0 }) => `${margin}px`,
27+
},
28+
}
29+
30+
const Header = ({ styled }) => (
31+
<styled.header>
32+
<styled.h1>Just H1</styled.h1>
33+
<styled.h1 force composes="text">Force test</styled.h1>
34+
</styled.header>
35+
)
36+
37+
const Content = ({ styled }) => (
38+
<styled.section
39+
composes="content"
40+
attrs={{
41+
'data-name': 'content',
42+
}}
43+
padding={20}
44+
>
45+
<styled.p composes="text h1">compose multiple classes test</styled.p>
46+
47+
<styled.button>primitive test</styled.button>
48+
<styled.button margin={10}>dynamic primitive test</styled.button>
49+
</styled.section>
50+
)
51+
52+
export default injectStyled(styles)(({ styled }) => (
53+
<styled.app>
54+
<Header styled={styled} />
55+
56+
<Content styled={styled} />
57+
</styled.app>
58+
))

‎src/tests/__snapshots__/index.spec.jsx.snap‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
exports[`test renders correctly 1`] = `
1+
exports[`test renders correctly App 1`] = `
22
<div
33
className="app-0-0">
44
<header
@@ -30,3 +30,36 @@ exports[`test renders correctly 1`] = `
3030
</section>
3131
</div>
3232
`;
33+
34+
exports[`test renders correctly AppStyled 1`] = `
35+
<div
36+
className="app-0-25">
37+
<header
38+
className="header-0-26">
39+
<h1
40+
className="h1-0-28">
41+
Just H1
42+
</h1>
43+
<h1
44+
className="text-0-30">
45+
Force test
46+
</h1>
47+
</header>
48+
<section
49+
className="content-0-39 content-0-34"
50+
data-name="content">
51+
<p
52+
className="text-0-30 h1-0-28 p-0-29">
53+
compose multiple classes test
54+
</p>
55+
<button
56+
className="button-0-31">
57+
primitive test
58+
</button>
59+
<button
60+
className="button-0-49 button-0-47">
61+
dynamic primitive test
62+
</button>
63+
</section>
64+
</div>
65+
`;

0 commit comments

Comments
 (0)
⚡