Add support for :ref pseudoselector for accessing imports

[CubedEye]

When importing class names or ids with the :imports pseudoselector,
this commit allows you to use these class names in CSS selectors by
wrapping them in a :ref pseudoselector. For example, if you have a
file which exports a CSS class like this...

/* imported.css */
.classA {
}

:export {
    classA: classA;
}

And import it into a CSS file like this...

/* source.css */
:import("imported.css") {
    localClassA: classA;
}

:ref(.localClassA) > .classB {
}

Then that last selector will be compiled down to somthing like

/* compiled.css */
._imported_classA > ._source_classB {
}

The CSS Modules discussion around this is here css-modules/css-modules#102

[KJTsanaktsidis]

Ek, the code coverage decreased because I added a bunch of guard branches that throw errors. Guess I could test some of them...

[KJTsanaktsidis]

Anybody interested in discussing this proposal?

[sokra]

Is would be a addition to the CSS modules spec and should be discussed there.

But we disallowed referencing class names from other modules by intent. This breaks encapsulation. You should better solve this problem by using parameters to your components.

i. e.

:ref(.localClassA) > .classB can be solved by a parameter to component B.
.classB > :ref(.localClassA) can be solved by a parameter to component A.

[isuvorov]

wonderful PR

[lijunle]

It am looking for similar feature in CSS, and found ICSS actually define the :import pseudo-selector.

It mentions that...

The places within the CSS file that are checked for localAlias are:

• In any declaration value: e.g. border: 1px solid localAlias;
• In any selector: e.g. .localAlias .MyComponent {}
• In a media query argument: e.g. @media screen and localAlias

But the second bullet does not work with this CSS-Loader. It could be great if this loader could support that.