Readme / Usage instructions

[erichaus]

Hello,

Landed here after upgrading to embroider and component-css no longer working.

Are there plans for a readme or general usage instructions? Or is it roughly the same as component-css?

Thanks!

[boris-petrov]

It is roughly the same. Let me point the changes I had to make for future reference:

1. Install ember-cli-styles-colocation, ember-cli-styles-namespace and ember-cli-styles-preprocessor. If you're using SCSS, also install postcss-scss and broccoli-postcss-single. Remove ember-component-css and ember-cli-postcss (and check this issue).

2. Remove a custom-built style-namespace helper (if you have one) as there is a built-in one now.

3. Replace all usages of {{style-namespace "some-component"}} inside HBS templates with just {{style-namespace}}.

4. Co-locate all CSS/SCSS files next to their JavaScript/HBS (not mandatory).

5. All usages of classic components have to be updated - either to use the style-namespace helper inside the template or manually import the CSS file in the JavaScript component and use it in @classNames:

import { classNames } from '@ember-decorators/component';
import { styleNamespace } from './my-component.scss';

@classNames(styleNamespace)
class MyComponent extends Component {

6. Remove ENV['ember-component-css'] in config/environment.js if you have one.

I think that's pretty much it.

[erichaus]

@boris-petrov thanks for the quick response, will try tomorrow morning! it's a fresh project so hopefully not too much fuss.

One thing I did in another active project was make a custom helper that looks like {{get-style this '__stack'}} but also can handle conditionals like {{get-style this '__stack--split' this.isSplit}}

Is it still possible to make a custom helper like that?

[boris-petrov]

Well, I'm not sure what that helper did before. But if it's somehow using podNames from ember-component-css - now a similar thing can be achieved by using getOwner(this).lookup('style:my-component').styleNamespace. This might change in the near future but it won't be radically different.

[webark]

@hoIIer Theres one tweak that needs to be done for embroider. I've got it working in the past, but the funnel which pulls in the styles has to be tweaked, and just haven't settled on the best way to setup that conditional yet.

If you are looking to pickup embroider with it, that would be the next thing we could work on. I want to finish up the stuff we are finishing off first.

[erichaus]

@webark ok gotcha, so it currently doesn't work with embroider?

Re: 1) above, will we wrap the install into this parent package so you only have to do ember install ember-cli-styles?

[erichaus]

@boris-petrov the reason I wrote the helper like that was I found it led to readable styles when there were lots of conditionals e.g.:

      <a
        class="
          {{get-style this '__trigger'}}
          {{get-style this '__trigger--active' pp.dd.isOpen}}
          {{get-style this '__trigger--auth-login' (eq @triggerType 'auth-login')}}
          {{get-style this '__trigger--disabled' @disabled}}
          {{get-style this '__trigger--minimized' @minimized}}
          {{get-style this '__trigger--text-only' (eq @triggerType 'text-only')}}
        "
>

It uses podNames const componentStyleClass = podNames[component.debugName]; (doesn't seem to work in latest project using ember 4.2)

[erichaus]

Using install instructions from @boris-petrov with {{style-namespace}}__modal-dialog I get the following style:

__ember-chips__templates__components__modal-dialog__modal-dialog

I'm using the classical layout. Will the class names be tokenized as before e.g. asd879__modal-dialog?

[webark]

yea, the shortened code is still there, it just hasn't been wired up to pull from a configuration, it would be a quick addition

[webark]

the idea is not to install the root "ember-cli-styles" directly, but to install the separate packages you want specifically.

[webark]

i've wanted to add an additional BEM component, just haven't gotten there yet. Your helper would be a good candidate for that.

[erichaus]

@webark thank you for taking the time to work on this

[boris-petrov]

Using install instructions from @boris-petrov with {{style-namespace}}__modal-dialog I get the following style:

__ember-chips__templates__components__modal-dialog__modal-dialog

I'm using the classical layout. Will the class names be tokenized as before e.g. asd879__modal-dialog?

This is what #7 is about.

[erichaus]

(doesn't seem to work in latest project using ember 4.2)

fyi I discovered ember-component-css wasn't working due to me using fast-sass vs ember-cli-sass for unknown reasons.

[erichaus]

@boris-petrov @webark Trying again today I followed the instructions above and have {{style-namespace}} in my template which generates corresponding css class. However my styles that exist in app/styles/component-styles/modal-dialog.scss are not being applied.

app/templates/components/modal-dialog.hbs

<div
  class="{{style-namespace}}"
></div>

app/styles/component-styles/modal-dialog.scss

& {
  background: blue;
}

app/styles/app.scss

@include 'pod-styles';

[webark]

@hoIIer it should be "ember-styles" as the file you import