[Feature request]: Enable loading css resources from view model

[bigopon]

At the moment, doing the following is not working

import {viewResources} from 'aurelia-framework'

@viewResources(PLATFORM.moduleName('./app.css'))
export class App {

}

This is for https://github.com/aurelia/templating/issues/581

[jods4]

First thing to check when it comes to loading CSS with Aurelia: are your loaders properly configured?

If answer is yes, it would be nice to provide a few details on the error you get or what is actually happening.

Generally speaking, there is no special considerations for this in Webpack plugin, so apart from your configuration there's a good chance that problems stem from the runtime.

[Alexander-Taran]

Hmm @bigopon can you clarify the difference with this approach and import './xxx.css'

[bigopon]

For following comparison:

In a custom element view, we can require css

<template>
  <require from='some.css'></require>
</template>

Now if we do the same thing in custom attribute, it would be consistent, the way we load css resources.

There is no issue with import 'some.css', but it would make quite a puzzle for maintenance there, as why require here and there and import there and where ?

[Alexander-Taran]

@bigopon so to summarize it's kinda syntactic sugar. Right? no difference in produced result. I.e. css is not scoped shadowDommed.. or anything?

[bigopon]

kind of no. but we can always do some more work to scope it , if need be.

[Alexander-Taran]

well newcomer advocate in me says it won't be used by many. It adds consistency in thinking about implementation details.. So you could achieve the same semantic meaning with decorator as with require tag but nobody will know or find out. 99.9% will end up with import 'some.css' anyway just because there are 100% more examples like this not specific to Aurelia

[doktordirk]

well, actually, i just checked if that would be possible. so, there would be some demand

edit1: as well neither

$view= `<template>
    <require from='./xy.css'></require>
...

nor

@inlineView(`<template>
    <require from='./xy.css'></require>
...

works 😒

edit2: ah, something like that i'd like to 'scoped' styles https://github.com/vuejs/vue-loader

[jods4]

I am closing this as there is no "feature" to add here. I don't want to add magic and complexity inside the plugin, there's enough already.

Basically, this is about configuring your CSS loaders properly. It's explained in details here: https://github.com/aurelia/webpack-plugin/wiki/CSS-doesn't-load

Note that if you use the suggested config:

  rules: [
    {
      test: /\.css$/i,
      loader: 'css-loader',
      issuer: /\.html?$/i
    },
    {
      test: /\.css$/i,
      loader: ['style-loader', 'css-loader'],
      issuer: /\.[tj]s$/i
    }
  ]

Then it won't work because when the issuer is .js then style-loader is applied. This is meant to make this code work:

import "style.css";

export class VM {} 

But if you use

@viewResources(PLATFORM.moduleName("style.css")) 
export class VM { }

Then Aurelia is loading your CSS, even though it is references in a .js, and it expects plain CSS text, not a style-loader module.

Webpack provides many tools to control which loaders are applied in different situations. You need to play with that so that CSS loaders are applied in a way that matches how you use them.

For example, if you never import CSS directly and always go through Aurelia (either with <require> in view or @viewResources in js) you can just go with:

  rules: [
    {
      test: /\.css$/i,
      loader: 'css-loader',
    },
  ]

This simple config will work for the code by OP.

If you have CSS imports in your node_modules (rather uncommon), you may want to apply different rules based on path.