Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

`Composes from` is very long #186

Closed
bernatfortet opened this Issue Oct 30, 2016 · 2 comments

Comments

Projects
None yet
3 participants
@bernatfortet
Copy link

commented Oct 30, 2016

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?

@bernatfortet bernatfortet changed the title Composes from is very long `Composes from` is very long Oct 30, 2016

@bernardodiasc

This comment has been minimized.

Copy link

commented Oct 30, 2016

You already can do that:

/* btn.css */
.btn {
  color: blue;
}
/* other css file */
@value btn from "btn.css";

.button {
  composes: btn;
}
@bernatfortet

This comment has been minimized.

Copy link
Author

commented Oct 31, 2016

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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.