Skip to content

Composes from is very long #186

Closed
Closed

Description

@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?

Activity

  1. changed the title [-]Composes from is very long[/-] [+]`Composes from` is very long[/+] on Oct 30, 2016
  2. bernardodiasc commented on Oct 30, 2016

    @bernardodiasc

    You already can do that:

    /* btn.css */
    .btn {
      color: blue;
    }
    /* other css file */
    @value btn from "btn.css";
    
    .button {
      composes: btn;
    }
  3. bernatfortet commented on Oct 31, 2016

    @bernatfortet
    Author

    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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions