* Unique Value Proposition
by Oleg Slobodskoi @oleg008
CSSinJS is an
approach to describeCSS in JavaScript
import {lighten} from 'polished'
const styles = {
button: {
background: lighten(0.2, '#CCCD64')
}
}
import {zoomIn} from 'cssinjs-animations'
const styles = {
'@keyframes zoomIn': zoomIn,
box: {
position: 'absolute',
width: 50,
height: 50,
background: 'blue',
animation: {
name: 'zoomIn',
duration: '1s'
}
}
}
import rtl 'rtl-css-js'
const styles = rtl({paddingLeft: 10})
const styles = {paddingRight: 10}
1. Public API documentation
2. Tests
3. Linters
4. Typings
5. Runtime Errors
- Source Order
- Cascading
- Global Styles
Is it a
CSSinJS war?
Is it
CSSinJS fatigue?
<View style={{
marginTop: 5,
borderWidth: 1,
borderRadius: 5,
borderStyle: this.state.showBorder ? 'dotted' : null,
padding: 5
}}>
<Text style={{fontSize: 11}}>
Dotted border style
</Text>
</View>
const styles = csjs`
.panel {
border: 1px solid black;
background-color: ${green};
}
.title {
padding: 4px;
font-size: 15px;
}
`
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: ${({theme}) => theme.palette.headline};
`
import {ThemeProvider} from 'theming'
const theme = {
main: 'green'
}
const App = () => (
<ThemeProvider theme={theme}>
<SomeComponent />
</ThemeProvider>
)
box-shadow: 10px 10px 5px 5px black;
boxShadow: {
x: 10,
y: 10,
blur: 5,
spread: 5,
color: 'black'
}
button: {
fontSize: 12,
color: ({focused}) => focused ? 'black' : 'gray'
}
{
button: `
border-radius: 3px;
background-color: green;
color: red;
margin: 20px 40px;
padding: 10px;
`
}
import styled from 'styled-jss'
const Button = styled('button')({
fontSize: 12,
color: 'gray'
})
// Composition.
const PrimaryButton = styled(Button)({
color: 'blue'
})
<PrimaryButton>Click me!<PrimaryButton>
const styles = (theme) => ({
button: {
background: theme.colorPrimary
},
label: {
fontWeight: 'bold'
}
})
const StyledButton = injectSheet(styles)(Button)
:root {
--main-bg-color: brown;
}
.one {
color: white;
background: var(--main-bg-color);
}
:root {
--main-bg-color: brown;
}
.one {
color: white;
background: var(--main-bg-color);
}
global
const styles = StyleSheet.create({
red: {
color: 'red'
},
boldblue: {
color: 'blue',
fontWeight: 'bold'
}
})
class SomeComponent extends Component {
render() {
return (
<View>
<Text style={styles.red}>red text</Text>
<Text style={styles.boldblue}>bold blue text</Text>
</View>
);
}
}
const styles = {
border: '1px solid red'
}
const styles = {
border: {
width: 1,
style: 'solid',
color: 'red'
}
}
<div
style={{
color: 'red',
fontSize: 12
}}
>
</div>
const style = document.createElement(‘style’)
style.sheet.insertRule(‘.my-button {color: red}’, 0)
style.sheet.cssRules[0].style.color = ‘green’
const styles = {
button: {
color: (props) => props.isFocused ? 'red' : 'green'
}
}
class MyComponent extends Component {
shouldComponentUpdate() {
return false
}
}