ddneat / stylebuddy

🐻 Generate encapsulated css inline styles which are extremely configurable.

Stylebuddy 🐻

Generate CSS from JSON without any additional dependencies:

• Supports at-rules like media queries
• Supports pseudo selectors like :hover, :focus, :before, etc.
• Supports selectors by tag, class and id (e.g.: body,, .components, #component)
• Supports vendor prefixes like -webkit-transition, display: -moz-box, etc.
• Can be used for server side rendering
• Converts camel case property names to hyphen notation
• No dependencies
• Tiny (2kb, about 860bytes uglified and gzipped)

Contents

• Usage
• Basic Example
• API Description
• Configuration
• Stylesheet Config
• Tag Selector
• Id Selector
• Vendor Prefixes
• Flexible Stylesheet

Usage

npm install --save stylebuddy

Basic Example

import stylebuddy from 'stylebuddy';

const desktop = '@media screen and (min-width:720px)';

const input = {
  component: {
    background: '#ccc',
    ':hover': {
      background: '#777'
    },
    [desktop]: {
      fontSize: 20,
      ':hover': {
        background: '#333'
      }
    }
  }
};

const styleSheet = stylebuddy.create();
const styles = styleSheet.add(input);
const css = styleSheet.render();
// ._component_2513881194{background:#ccc;}.component_2513881194:hover ...

const styleNode = document.createElement('style');
document.head.appendChild(styleNode);
styleNode.textContent = css;

console.log(styles.component);
// ._component_2513881194

API

create([, config])

Returns a new instance of the styleSheet API. The optional config merges with the default values and will be used for the current styleSheet instance.

styleSheet.add(styles[, config])

Returns an object with the generated style identifiers. The passed config will be merged with the styleSheet config.

styleSheet.render()

Returns the CSS string of the current styleSheet instance.

Configuration

const DEFAULT_CONFIG = {
  prefix: '.', // e.g.: enforce css classes
  delimiter: '_',
  salt: '',
  hashSelector: false,
  appendHash: true,
};

Stylesheet Config

import stylebuddy from 'stylebuddy';

const styleSheetConfig = {
  delimiter: '___',
  appendHash: false
};

const styles = {
  components: {
    background: '#ccc'
  }
};

const styleSheet = stylebuddy.create(styleSheetConfig);
styleSheet.add(styles);
const css = styleSheet.render();
// .___components{background:#ccc;}

Tag Selector

import stylebuddy from 'stylebuddy';

const tagSelector = {
  body: {
    background: '#ccc'
  }
};

const styleSheet = stylebuddy.create();
styleSheet.add(tagSelector, { delimiter: '', prefix: '', appendHash: false });
const css = styleSheet.render();
// body{background:#ccc;}

Id Selector

import stylebuddy from 'stylebuddy';

const idSelector = {
  component: {
    background: '#333'
  }
};

const styleSheet = stylebuddy.create();
styleSheet.add(idSelector, { prefix: '#', appendHash: false });
const css = styleSheet.render();
// #_component{background:#333;}

Vendor Prefixes

import stylebuddy from 'stylebuddy';

const input = {
  component: {
    WebkitTransition: '200ms all linear',
    display: ['-webkit-box', '-moz-box']
  }
};

const styleSheet = stylebuddy.create();
const styles = styleSheet.add(input);
const css = styleSheet.render();
// ._component_2513881194{-webkit-transition:200ms all linear;display:-webkit-box;display:-moz-box;}

Flexible Stylesheet

import stylebuddy from 'stylebuddy';

const tagSelectors = {
  body: {
    background: '#ccc'
  }
};

const classSelectors = {
  components: {
    background: '#999'
  }
};

const idSelectors = {
  component: {
    background: '#333'
  }
};

const styleSheetConfig = {
  appendHash: false
};

const styleSheet = stylebuddy.create(styleSheetConfig);

styleSheet.add(tagSelectors, { prefix: '', delimiter: '' });
styleSheet.add(classSelectors, { delimiter: '___' });
styleSheet.add(idSelectors, { prefix: '#' });

const css = styleSheet.render();
// body{background:#ccc;}.___components{background:#999;}#_component{background:#333;}

const styleNode = document.createElement('style');
document.head.appendChild(styleNode);
styleNode.textContent = css;

stylebuddy's Issues

Publish ES5 `dist` version

Can you publish a compiled version of stylebuddy so I can just npm --install and not worry about ES6?

Support configurations

Proposal 1:

const DEFAULT_CONFIG = {
  prefix: '._',  // e.g.: enforce css classes
  hashSelector: false, // ._wecyx{}
  appendHash: true, // ._classname_wecyx{}
};

const create = (baseStyle, baseConfig = {}) => {
  const mergedBaseConfig = getMergedConfig(baseConfig, DEFAULT_CONFIG);
  // todo: apply hash according currentConfig on baseStyle and push into styles
  const styles = [baseStyle];
  const hashTable = {};

  return {
    add: (style, config = {}) => {
      const currentConfig = getMergedConfig(config, mergedBaseConfig);
      // todo: apply hash according currentConfig on passed style and push into styles
      styles.push(style);
      return hashMap;
    },
    render: () => styles.map(style => render(styles)).join(''),
    getClassNames: () => {
      // todo returns hashtable
    },
  }
};

Proposal 2:

const DEFAULT_CONFIG = {
  prefix: '._', // e.g.: enforce css classes
  hashSelector: false, // ._wecyx{}
  appendHash: true, // ._classname_wecyx{}
};

const create = (baseConfig = {}) => {
  const mergedBaseConfig = getMergedConfig(baseConfig, DEFAULT_CONFIG);
  const styles = [];

  return {
    add: (style, config = {}) => {
      const currentConfig = getMergedConfig(config, mergedBaseConfig);
      // todo: apply hash according currentConfig on passed style and push into styles
      styles.push(style);
      return classNames;
    },
    render: () => styles.map(style => render(styles)).join(''),
  }
};

Missing license

Hey David,

could you add a license to this repo?
If there's no license it defaults to "All rights reserved" I guess.

Broken pseudo selector body if it contains more than one style attribute

Using pseudo selectors we found an issue. Whenever we have more than one style attribute inside the pseudo selector its not rendered properly.

e.g.

foo: {
  ':hover': {
    color: '#ffffff',
    display: 'block',
    height: 0
  }
}

leads to:

.foo:hover {
    color: #ffffff;
    , display: block;
    , height: 0;
}

I also provided #20 which fixes this.