:external proposal

[sullenor]

I decided to make a separate issue about :external keyword proposal (css-modules/css-modules#147) in order to summarize and discuss the implementation details.

Syntax

In my opinion the :external keyword can be easily implemented with the icss imports which are mostly generated with the current module. So, it will be easy to integrate it into the existing tools.

The possible transformation:

:external(inner from './elsewhere.css') {
  prop: value;
}

into:

:import("./elsewhere.css") {
  _generid_id: inner;
}

._generid_id { /* not sure about the _generid_id pointer */
  prop: value;
}

The next step will be to patch the :import resolving libs in order to check the rules and replace it with imported token. For the parsing convenience the generated rule may be wrapped with any keyword, like :external(_generid_id). So it will transform:

:external(inner from './elsewhere.css') {
  prop: value;
}

into:

:import("./elsewhere.css") {
  _generid_id: inner;
}

:external(._generid_id) {
  prop: value;
}

css-loader

• probably should replace :external() things somewhere here: https://github.com/webpack-contrib/css-loader/blob/master/lib/processCss.js#L61-L79

[pavel06081991]

Are you planning to add this feature?

[sullenor]

@pavel06081991 kind of

[rozzzly]

Care to elaborate?

[TrySound]

selectors/values issue