0.0.1 • Published 5 years ago
themed-styled-components v0.0.1
Sass-like Utils to make developping emotion/styled-components components a breeze
ThemedStyled
Create a theme
A theme is a simple javascript object with only top level keys.
const Theme = {
hello: 'blue'
}
Create a themed styled function
import { createThemedStyle } from 'styled-utils'
import rawStyled from 'styled-components'
// or import rawStyled from '@emotion/styled'
const styled = createThemedStyle<typeof Theme>(rawStyled)
Now you can use styled
almost as usual, but with superpowers.
const StyledButton = styled('div')`
/* direct theme interpolation key */
background-color: ${"hello"};
/* return theme key from props interpolation*/
color: ${props => props.primary ? "hello": "red"}
`
<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
<h4>Beep</h4>
</div>
Dev
git clone https://github.com/tclain/styled-utils.git YOURFOLDERNAME
cd YOURFOLDERNAME
# Run npm install and write your library name when asked. That's all!
npm install
NPM scripts
npm t
: Run test suitenpm start
: Runnpm run build
in watch modenpm run test:watch
: Run test suite in interactive watch modenpm run test:prod
: Run linting and generate coveragenpm run build
: Generate bundles and typings, create docsnpm run lint
: Lints codenpm run commit
: Commit using conventional commit style (husky will tell you to use it if you haven't :wink:)
0.0.1
5 years ago