kneath/kss

Add attribute support

Opened this issue · 1 comments

from: kss-node/kss-node#52

What if my modifiers are not always class names?
E.g. I often use ARIA role attributes as modifiers:

.btn[aria-disabled="true"] { ... }

I did not find any practicable solution to document those.

Didel commented

How about we just use the same notation as in the css attribute selector (https://www.w3schools.com/css/css_attribute_selectors.asp) :

/*
  Component with attributes

  .active - The component when it also has the '.active' class.
  :hover - The hover styling for this component.
  [disabled] - The component with the disabled attribute.
  [disabled]:hover - the component with the disabled attribute when it is hovered.
  [width="500"] - The component with the width attribute that has a value of 500.
  [href^="mailto"] - The component if the href attribute starts with 'mailto'.
*/