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
Closed

Composes from is very long #186

bernatfortet opened this issue Oct 30, 2016 · 2 comments

Comments

@bernatfortet
Copy link

@bernatfortet bernatfortet 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
Copy link

@bernardodiasc bernardodiasc 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
Copy link
Author

@bernatfortet bernatfortet 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
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants