Need some suggestions related with ember-css-modules about ember-css-modules

[dfreeman]

Hi @nightire — in short, it's not possible (by design) to exclude certain directories, and you can check out #41 for some more details on that. I'd recommend using a custom extension (like .module.css) for your modules if you want to exclude all other files.

Note also that by using a plugin like postcss-nested, you have the option of excluding individual files by writing something like:

:global {
  .some-selector {
    /* ... */
  }

  /* ... */
}

Depending on exactly how many files you're wanting to exclude, one or the other of those approaches might be more palatable. Does either one seem like it might accomplish what you're after?

[nightire]

OK, thanks for your suggestion.

What we want is to write some global themes, we might have many themes, but our app only load one of them depending on user preference. Both themes have same selectors, but different rules, so we need to compile them into separate files. That's why we need to exclude some of .css files from ember-css-modules.

Let's say, if we use other pre-processors to write our themes, like less or sass, do they work well with ember-css-modules together?

[dfreeman]

You can configure ember-css-modules to emit its output into an intermediate file for other preprocessors to consume — see this section of the README for details.

Depending on how complex your themes are, you might also look at ember-css-modules's notion of "virtual modules", which basically let you configure @values as part of your build configuration.

[nightire]

Oh, I think there might be some misunderstandings, let me be more specific.

1. By using ember-css-modules, we will get a app-name.css file finally, that includes all styles in app/ directory. This is good for us, nothing needs to change.
2. Then, we need to write some themes, each theme has to be an individual file, because they both have same global selectors, out app will load one of them each time depending on user's preference.

So, if I understand it correctly, even we send app-name.scss as intermediate file to ember-cli-sass, it still mixed many themes with main stylesheet, how is this possibly separate those themes into many individual files?

Virtual module is a really good thing, we've used it for all projects, but it only can help us write styles dynamically, but user choose different themes needs themes been existed first, I don't think virtual modules can help us in this situation, unless they can be used in runtime, like less did.

[dfreeman]

I think I get what I was misunderstanding before—so you want the end user to be able to switch between themes at runtime?

Since your goal is to work with global classes anyway, I think your best bet is probably to use ember-css-modules in concert with another addon like ember-cli-sass which has support for multiple output files.

If you set your intermediateOutputPath for ember-css-modules to app/styles/app.scss, ember-cli-sass should pass it straight through to produce app-name.css. Then for each theme you write, you can configure an additional output path for ember-cli-sass. Since your themes will have a different extension (.scss), ember-css-modules will ignore them.

The ergonomics of writing your main styling with CSS modules and your themes with vanilla SCSS might be a little odd, but that's the simplest path forward I can see right now. What do you think?

[nightire]

@dfreeman Yes, a little odd, but we can live with that, thank you very much, now I'm confident to finish our job!

[dfreeman]

@nightire Is there anything that still needs to happen here, or should this be closed out?

[nightire]

@dfreeman Yes I'm fine, Thank you very much.

[brianhjelle]

I know this issue is closed, but I had a similar use case that I was able to solve quite simply and it might help others. My use case differed in that I was able to choose the theme at build time. In my index.html file I added a line under the css file specific to my app.
<link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
<link rel="stylesheet" href="{{rootURL}}assets/my-app-name.css">
<link rel="stylesheet" href="{{rootURL}}assets/theme.css">

Next, in ember-cli-build.js I did added my theme like this:
if (theme === 'light') {
app.import("vendor/light-theme.css", { outputFile: 'assets/theme.css' });
} else {
app.import("vendor/dark-theme.css", { outputFile: 'assets/theme.css' });
}

[nightire]

@brianhjelle Yes, we have tried this as well, but you can't let ECM to process styles in vendor folder, right?

We ended up by implementing a more complex solution, build a tree of themes/**.css, processing with a set of postcss plugins, merged with application's styleTree.

[NullVoxPopuli]

I'm doing dynamic / runtime themes with css vars, if that's an approach you want to go down. I have a global class that's just a bunch of var overrides

[buschtoens]

For the record: Can I use CSS Variables (Custom Properties)
There is no support for Internet Explorer.

[nightire]

@buschtoens Yes, this is the main reason we can't rely on Custom Properties yet.