basic-css-in-js
v0.1.3
Published
Not to be used on production (at least not yet).
Downloads
14
Readme
basic-css-in-js 
Not to be used on production (at least not yet).
Created for learning how stuffs work.
Example codesandbox
APIs
cssimport { css } from 'basic-css-in-js'; const blueClass = css` color: blue; `; const Component = () => { return <div className={blueClass}>I am blue</div>; }keyframesimport { css, keyframes } from 'basic-css-in-js'; const Spinning = keyframes` from { transform: rotate(0deg); } to { transform: rotate(360deg); } `; const blueClass = css` color: blue; animation: ${Spinning} infinite 20s linear; `; const Component = () => { return <div className={blueClass}>I am blue and spinning</div>; }sheet.extract()for rendering HTML in node environmentimport { css, getSheet } from 'basic-css-in-js'; const blue = css` color: blue; `; const getHtml = () => { return ` <html> <head> <style>${getSheet().extract()}</style> </head> <body> <div class="${blue}">I should be blue colored</div> </body> </html> `; }
Running the example
Clone the repo
Install dependencies
yarnBuild the package
yarn buildRun example
yarn example
Goals:
- ✅
cssandkeyframesworks! - ✅ Support template literal syntax
css` display: none; ` - ✅ vendor prefixing (via
tiny-css-prefixer) - ✅ SSR support
- optimisation
References:
- https://medium.com/@tkh44/writing-a-css-in-js-library-from-scratch-96cd23a017b4
- https://mxstbr.blog/2016/11/styled-components-magic-explained/
- https://wesbos.com/tagged-template-literals
- https://github.com/thysultan/stylis.js
- https://levelup.gitconnected.com/a-brief-history-of-css-in-js-how-we-got-here-and-where-were-going-ea6261c19f04#:~:text=Javascript%20Does%20CSS,the%20University%20of%20Oslo%202006.