0.0.0-pre-alpha.31 • Published 4 years ago
jigcss v0.0.0-pre-alpha.31
This package enables runtime CSS-in-JS. No babel required.
Installation
npm install jigcss
Usage
import {css} from 'jigcss';
@component()
class MyComponent {
// Simple class
private static readonly helloClassName = css`
& {
background-color: black;
color: red;
}
`;
// class with extra selectors
private static readonly byeClassName = css`
& {
backgroundColor: black;
color: red;
}
&:hover {
color: blue;
}
& a {
color: green;
}
@media: {
screen and (min-width: 700px): {
&: {
color: 'blue',
}
}
}
`;
constructor(window) {
}
render() {
return html`
<div class="${this.helloClassName}">Hello, World!</div>
<div class="${this.byeClassName}">Bye! <a href="#">Go Home</a></div>
<div class="${css`
& {
background: red;
}`}"></div>
`
}
}
The &
wildcard
The &
wildcard will be replaced with the class name.
There is no option yet to have a class without providing the '&' character such as (styled-components)https://github.com/styled-components/styled-components or (emotion)https://github.com/emotion-js/emotion
TODO:
- Keyframes
0.0.0-pre-alpha.31
4 years ago
0.0.0-pre-alpha.30
4 years ago
0.0.0-pre-alpha.28
4 years ago
0.0.0-pre-alpha.29
4 years ago
0.0.0-pre-alpha.27
4 years ago
0.0.0-pre-alpha.26
4 years ago
0.0.0-pre-alpha.25
4 years ago
0.0.0-pre-alpha.24
4 years ago
0.0.0-pre-alpha.23
4 years ago
0.0.0-pre-alpha.22
4 years ago
0.0.0-pre-alpha.21
4 years ago
0.0.0-pre-alpha.20
4 years ago
0.0.0-pre-alpha.19
4 years ago
0.0.0-pre-alpha.15
4 years ago
0.0.0-pre-alpha.14
4 years ago
0.0.0-pre-alpha.17
4 years ago
0.0.0-pre-alpha.16
4 years ago
0.0.0-pre-alpha.18
4 years ago
0.0.0-pre-alpha.13
4 years ago
0.0.0-pre-alpha.12
4 years ago