Composes from is very long

[bernatfortet]

I've been using .less for a long time and I love how fast is to extend clases with it.

I love the new ideas de css-modules brings to the table, but I think that the "composes from" syntax is too long.

composes: shadow from "./theme.css";

It's interesting because we are doing in css what we wouldn't do in our JS files.

inJS we add the imports at the top, we give them a variable and then very easily we reference them in the code:
import myLib from 'my/libs'
myLib.method(foo)

what we don't do: (syntax doesn't make sense)

It seems that the compose syntax would be analogous to:
```js
function myMethod(){
  var myVar =  import randomVar from 'libs/api.js' 
}

function myOtherMethod(){
  var myVar =  import randomVar from 'libs/api.js' 
}

We would import myLib at the top. And then reference it super quickly. That would look something like:

.className {
  color: green;
  composes: typography.h2 typgrpahy.textWithShadow layout.header
}

Much faster to type, no?

What do you think?

[bernardodiasc]

You already can do that:

/* btn.css */
.btn {
  color: blue;
}

/* other css file */
@value btn from "btn.css";

.button {
  composes: btn;
}

[bernatfortet]

What I'd love to do is:

/* btn.css */
.rel {
  position: relative;
}

/* other css file */
@value * as global from "btn.css";

.button {
  composes: global.rel;
}