@stylin/style
The core library. It is very tiny (43 lines of code) and well optimized for performance.
Installation
npm install --save @stylin/style
Mapping Style Annotations
Don't be scared to learn new stuff, it is deadly simple. Only three things to remember:
- @tag: html tag
- @component: name of your component
- Mapping object:
componentPropertyName {
propertyValue: css-class-name
anotherPropertyValue: another-css
}
For example:
.sexy-button {
&.btn-primary {
}
&.btn-secondary {
}
&.btn-link {
}
}
<SexyButton type='primary'>
Love me
</SexyButton>
Shortening
If your component property values are similar to CSS class names, like in the example below:
type {
primary: primary
secondary: secondary
link: link
}
It can be shorten this way:
type: primary | secondary | link
More zen
/* conditional */
isVisible {
true: visible
false: hidden
}
/* short version */
isVisible: true ? visible : hidden
/* by the way it can be string or number */
checked: on ? blue : gray
checked: 1 ? blue : gray
/* single value */
isVisible {
true: visible
}
/* short version */
isVisible: true visible
/* if value == css-name */
enabled {
true: enabled
}
/* short version */
enabled: true
Variables
To map component variables with styles, you should provide the CSS variable and its default value. Webpack loader uses the default value to define the variable type and avoid reassigning it with the same value.
componentPropertyName: default-value --css-variable
.sexy-button {
--btn-width: 150px;
width: var(--btn-width);
}
<SexyButton width='180px'>
Love me
</SexyButton>
Caveat with CSS variables
You can't interpolate CSS variables with url(), it means you can't do this:
background-image: url(var(--src)); // will not work
Why? Read the answer here. To fix this issue, you need to wrap the value with url()
on JS side:
.avatar {
background-image: var(--src);
}
import {url} from '@stylin/style'
const src = `https://picsum.photos/150`
<Avatar url={url(src)}/>
Restyling existing components
Let's assume we have a button component from 3rd party library, and we like to restyle it and add some extra property.
import {Button} from 'antd'
import {applyStyle} from './style.scss'
const StyledButton = applyStyle(`sexy-button`, Button)
<StyledButton type='dashed' isVisible>
Love me
</StyledButton>
💅 style.scss
.sexy-button {
}
As the result, you will get a restyled button with additional isVisible
property. All original button properties will be reserved.
⚠ Important
Any restyling css class should have comment section:
.ok-one {}
.ok-two {}
Just className
Any component created with the Stylin library can be restyled again in the same way as mentioned above. Also, a new CSS class can be appended to className property without breaking existing styles.
import css from './style.scss'
<StyledButton className={css.special}>
Love me
</StyledButton>
💅 style.scss
.special {
background-color: pink;
}