@composi/styler:

• Install
• Styler
• Usage

Styler

Styled Components

@composi/styler lets you create styles scoped to a component it. It does this by creating a virtual stylesheet for the comonent. Styler does not add any identifier to the stylesheet target like some solutions do. The specificity of the style you define is up to you. This means that if you want your styles to be specific to a component, give the component base an id and use that in the style declaration. Or if you want to be more generic, use a class on the component base and in your stylesheet. Also, using BEM can make this specificity a lot easier.

If you use Styler with more than one component, the rules all get added to the same virtual stylesheet. This means that if you create rules with the same selector, the last one created will overwrite the earlier ones. Let's look at an example:

addStyles('ul', {
  li: {
    color: 'red'
  },
  li: {
    color: 'green'
  }
})

The above code defines two rules for the same selector. The properties are identical, only the values differ. In normal CSS the cascade means the only the last rule will get applied. The previous one would be ignored. That's for a hand-crafted stylesheet. Because we are create the stylesheet with JavaScript, the first rule gets overwritten by the second rule. If we open the web inspector and examine the document's style sheet like this: document.styleSheets[1].cssRules[0].cssText we'll get this:

cssText: "ul li { color: green; }"

Features

@composi/styler lets you nest selectors, somewhat like SASS and LESS:

addStyles('#list-contianer', {
  ul: {
    listStyle: 'none',
    'boder': 'solid 1px #ccc',
    margin: 0,
    padding: 0,
    // Child selector:
    li: {
      padding: '5px 10px',
      borderBottom: 'solid 1px #ccc',
      color: '#333',
      backgroundColor: '#fff'
      // pseudo-element:
      ':hover': {
        color: '#fff',
        backgroundColor: '#333'
      }
    }
  }
})

Notice how we indicate that the li tag is a child of the ul tag. We also indicate the hover state for the list item as a child of the list item. pseudo-elements have to be in quotes because the begin with ":".

Use Sparingly

@composi/styler is not meant to be a replacement for external stylesheets. It should be used to encapsulate some component-specific styles independent of the regular stylesheets. Don't try to provide all styles for a component with Styler. Instead use it to work with whatever the default stylesheet provides.