simple-in-js v1.0.1
simple-in-js
Simple css in js for developing component based js app
this simple script use object that has toString() method and proxy to server ability to extends classname dynamically
Usage/Examples
To used it import useCSS
or css
function inside index.js script. The output of useCSS
template function is an proxy that reflect toString()
method that returns a generated class name. The css
method return a class name as string. This separation intended to avoid type conflict in typescript. You can also write nested style.
const style = css`
display: flex;
a {
color: red;
}
`
Put it on className attribute:
function App(){
return (
<div className={style}>
<a>
{//This link's color is red}
</a>
</div>
)
}
NOTE: Alway remember to call css
or useCSS
function outside the component so it won't redundantly insert multiple style.
For further improvement, I will add cache to avoid this
with
In case you want to use tailwind, bootstrap, or just add class dynamically you can use property accessor for ex:
const style = useCSS``;
style.otherClass // or style['otherClass']
// output: `${generatedClassname} otherClass`
or use the generated style with
method:
const style = useCSS``;
style.with('container', 'box-border hidden');
// output: `${generatedClassname} container box-border hidden`
or simply use @with rules:
const style = css`
display: flex
@with flex flex-row items-start
`
// you can use css or useCSS function for @with rules
// output: `${generatedClassname} flex flex-row items-start`
at rules only cannot be use inside nested style.
composite style
Because the output of useCSS
is an object that returns a proxy object: {with: () => string, name: string}
. You can compose a style. For example:
const flexContainer = useCSS`
display: flex;
`
const alignCenter = css`
align-items: center;
@with ${flexContainer.name} justify-center
`
// or to dynamically compose style
const center = css`
align-items: center;
`
const start = css`
align-items: start;
`
const end = css`
align-items: end;
`
function App(){
const state = useState('end');
const [style, setStyle] = useState('');
switch(state){
case 'start':
setStyle(flexContainer.with(start))
break;
case 'center':
setStyle(flexContainer.with(center))
break;
case 'end':
setStyle(flexContainer.with(end))
break;
}
return (
<div className={style}></div>
)
}
NOTE: the @with
value won't included for now
Roadmap
- Caching
- Builder ‒Generate css file.
- @tailwind, @bootstrap rules support
- Include all value for composite style