Feature request: define CSS in component file

[jamesarosen]

We write a lot of our components in "single-file" form:

export default class MyComponent extends Component {
  layout = {
    <div class='{{styleNamespace}}__some-div'></div>
  }
}

It would be lovely to include the CSS in the same file. I don't know what that syntax would be, but borrowing an idea from Ruby, perhaps

export default class MyComponent extends Component {
  layout = {
    <div class='{{styleNamespace}}__some-div'></div>
  }
}

// component-css
&__some-div { color: purple; }

though that would require a custom parser for editors.

[jamesarosen]

Or maybe even something like

export default class MyComponent extends Component {
  layout = {
    <style>
      &__some-div { color: purple; }
    </style>
    <div class='{{styleNamespace}}__some-div'></div>
  }
}

and a Broccoli processor that pulls <style> tags out of components and runs them through the component-css logic.

[webark]

hmmmm mmm mmmmmm mmm mm ....

I think you could write a separate preprocessor that moves the styles into it's own file, and just have that run before ECC. I'd have to think about what the best way to write that would be though. But it doesn't have to live in ECC.

[jamesarosen]

it doesn't have to live in ECC

have that run before ECC

Those two go together nicely :)

[webark]

well.. sure. But you could use it with ember-css-modules also.. and would want it to run before that also..

[kleiram]

Sorry for bumping this 😄

Perhaps it's an idea to have something like this (an I'm absolutely 100% unsure whether it's even possible with Broccoli):

export default class MyComponent extends Component {
  style = sass`
    & {
      background: palevioletred;
    }
  `;

  layout = hbs`
    <SomeOtherComponent />
  `;
}

I think a styled-componentish API might make it more recognisable for people coming from React too. I'm not sure about the API though.

[webark]

@kleiram i still think this would live better in some kind of babel plugin that was wrapped in an addon, and something that could live and be maintained in parallel to this addon.

[webark]

and the minimum of pulling out a chock of text and dumping it in a file is something that a babel or even maybe just a broccoli plugin could do with relative ease.

Not getting into where you are importing methods into the js file that you are then interpolating into the sass to be later processed by a sass or equivalent preprocessor.. then you are getting into something a bit more tricky... but still possible.