Support :global pseudo class

[ktsn]

Fix #23

This introduces :global pseudo class for scoped-style-loader. If css selector includes :global, the selector no longer scoped.

Input:

:global h1 p {
  color: red;
}

h1 p {
  color: blue;
}

Output:

h1 p {
  color: red;
}

h1 p[data-v-xxx] {
  color: blue;
}

This syntax would be more convenient if we use css preprocessor like Sass.

Input:

.foo {
  color: red;

  :global {
    color: cyan;

    .bar {
      color: blue;
    }
  }
}

Output:

.foo[data-v-xxx] {
  color: red;
}

.foo {
  color: cyan;
}

.foo .bar {
  color: blue;
}

[ktsn]

I noticed it would be more intuitive if the nearest non :global ancestor is scoped (and the original proposal is like so). So the current behavior should be:

Input:

.foo :global .bar {
  color: red;
}

Output:

.foo[data-v-xxx] .bar {
  color: red;
}