take control of your style tags. create, share, extend and render css with javacsript
Includes
- 🏡 Structured & clear
- 🔮 Css in js
- ⚙️ Functional
- 🤷♀️ framework agnostic
Notice v2 Breaking Change
I have added options to give fairybread more power in the future, this means the old syntax
new Fairybread('global')
should be replaced with new Fairybread({global: true})
Basic Setup
var colors = yellow: '#FDCA21' pink: '#FF05FA' ;var globalSheet = global: true;globalSheet;globalSheet;globalSheet
Outputs
As you may have guested passing "global" at creation will make a global stylesheet that will effect everything on the page (Ahh so scary!)
Scoped Styles
var sheet = ;sheet;sheet
outputs
sheet.id
is the scoping class (excluding the .) that you can attach appropriately for example at the top of a component. the render function allows you to choose your rendering method incase you want to include your css inside the component
Specials
Now I know all you designer types love the fonts and keyframes so you can add these as well.
sheet;sheet
.addSpecial
lets you paste any full css into the special style sheet.
Its global in its own sheet that is rendered automatically because its designed for font-face and keyframes, which can't be scoped. this should also help you fix any style syntax not supported yet by fairybread.
Render
a new function called render allow you to choose the render location of your sheet. it takes these options.
sheet // this returns an object with Js and plaintext css js: //javascript object of styles, css: //a css string for rendering into a style tag. sheet //renders a style tag into the head bottom sheet //renders a style tag into the body bottom sheet //returns an style tag and id for components sheet // this is the same as 'head'
Tagged Templates (New)
to make added styles to components easier I added .css
to scope, build and return in place
const sheet = css` :host a { color: red } body { background: green }`;
outputs
this will return the same as the scope styles example but instead of rendering to head
it will return a Style tag dom element for inclusion by you.
this function will replace :host
with the scoped tag, if you don't include :host
it will be global
because of this, you can mimic the addSpecial
function as well.
This method can't be used with extend
, add
or the default render
;
Extend
Pretty much just object syntax from javascript
var tag_color = sheetcolor;sheet;// ORvar tag_color = sheetrules'a'js;sheet;