Allow extension of pseudo classes

[kristoferjoseph]

Problem

In many cases I need to share a pseudo state such as active with multiple selectors.
Intuitively I would make a button:active then share the active state with button bars tabs etc. Am not able to do this with rework-inherit

Steps to reproduce

• create a class

.button:active {
  border: 1px solid blue;
}

• extend this class

.button--large {
  extend: .button:active;
}

Expected results

Pseudo selector would be extended.

.button--large:active,
.button:active {
  border: 1px solid blue;
}

Actual result

No output is generated for the large variation.

[jonathanong]

Yeah that's a bug. Can you add a failing test case?

It doesn't parse the selector or anything. Not sure why that happens. Maybe I have a bad reg exp.

[kristoferjoseph]

Was just working on a test case now.
Might find a fix in the process.
Will look at the regex.

Thanks

[jonathanong]

ohhh i got it. it's this regexp:

function replaceRegExp(val) {
  return new RegExp(
    '(^|\\s|\\>|\\+|~)' +
    escapeRegExp(val) +
    '($|\\s|\\>|\\+|~|\\:)'
    , 'g'
  )
}

if i take out the :, then the %clearfix test fails. not sure what to do.

i don't remember exactly why, but that regexp is to split up selectors. ex. extending .thing shouldn't extend .thing-blue, etc.

i think the only really robust way to do it is to actually parse the selectors.