Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    fairybreadpublic

    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 = new Fairybread({
        global: true
    });
    globalSheet.add('body',`background:${colors.yellow}` );
    globalSheet.add('h1',`color:${colors.pink}` );
    globalSheet.render()

    Outputs

    <style id="fairybread_208X7mLD6jwR4LCgOzod">
        body { background: #FDCA21; }
        h1 { color:#FF05FA; }
    </style> 

    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 = new Fairybread();
    sheet.add('a','color:red;');
    sheet.render('head')

    outputs

    <style id="fairybread_xjRSIWrtA3kBepAHLZsM">
        .fairybread_xjRSIWrtA3kBepAHLZsM a {
            color: red
        }
    </style> 

    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.addSpecial(`
      @import url('https://fonts.googleapis.com/css?family=Sacramento');
    `);
    sheet.addSpecial(`
      @keyframes fairyfade {
          0%   { color:#FF008A }
          22%   { color:#FDCA21 }
          45%   { color:#85CF42 }
          70%   { color:#00FBF1 }
          90%   { color:#6A00FD }
          100%   { color:#FF008A }
      }`)

    .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.render('raw') // 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.render('head') //renders a style tag into the head bottom
     sheet.render('body') //renders a style tag into the body bottom
     sheet.render('here') //returns an style tag and id for components
     sheet.render()       // 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 = new Fairybread().css`
        :host a { color: red }
        body { background: green }
    `;

    outputs

    <style id="fairybread_xjRSIWrtA3kBepAHLZsM">
        .fairybread_xjRSIWrtA3kBepAHLZsM a {
            color: red
        }
        body { background: green }
    </style> 

    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 = sheet.extend('a').color;
    sheet.add ('.button', `color:${tag_color}`);
    // OR
    var tag_color = sheet.rules['a'].js;
    sheet.add ('.button', `${tag_color}`);

    install

    npm i fairybread

    Downloadslast 7 days

    5

    version

    2.0.1

    license

    ISC

    repository

    github.com

    last publish

    collaborators

    • avatar