:matches(element)

[stevenvachon]

.class {
  &:matches(element) {
    property: value;
  }
}

produces:

.classelement {
  property: value;
}

when it should produce:

element.class {
  property: value;
}

Tied to postcss-cssnext#287.

[MoOx]

PR welcome :)

[stevenvachon]

I haven't worked with PostCSS under the hood, so I probably won't have the time to help much. Have even been having difficulty finding time for my own projects lately.

[MoOx]

Have even been having difficulty finding time for my own projects lately.

My life :D

[Swizz]

Hi,

I do not know is the right way to ask this in this issue or this repository.

Howether, I started to put my interest on the cssnext features. And the matches specs is unclear.

I quickly understood that :matches() is used to avoid the overuse of

p.foo, p.bar, p.baz, p.[...] {}

/* reduced to */
p:matches(.foo, .bar, .baz) {}

But.. is it possible to use :matches() in this scenario ?

form > *:matches(button, a.button, input[type=button])

/* or */
form  matches(> button, > a.button, > input[type=button])

/* instead of */
form > button,
form > a.button,
form > input[type=button])
{}

Cheer,

[MoOx]

Closed by #8

[stevenvachon]

@MoOx @yordis I'm still experiencing issues with this, but with a more specific case now:

.namespace {
  &:not(.classA, .classB) {
    &:matches(element) {
      property: value;
    }
  }
}

is resulting in:

.namespace:not(.classA):not(.classB)element {
  property: value;
}

Meanwhile, this:

.namespace {
  &:not(.classA) {
    &:matches(element) {
      property: value;
    }
  }
}

compiles correctly into:

element.namespace:not(.classA) {
  property: value;
}

Here's another test case:

.list {
  &:matches(ol, ul) {
    property: value;
    li {
      property: value;
    }
  }

  &:matches(ol) {
    property: value;
    li {
      property: value;
    }
  }
}

[MoOx]

Feel free to make a PR to fix this :)

[clarfonthey]

I also think that cases like p:matches(a) should simply be removed rather than concatenating like the README states.

[SassNinja]

I'm also facing an issue with a (quite simple) element selector.

.foo > .bar:matches(a) {
  color: red;
}

compiles to

.foo > .bara {
  color: red;
}

instead of

.foo > a.bar {
  color: red;
}