LWC Non-Default Template CSS Display

[Kristoffer Greene]

The template CSS files for templates aside from the main/default sharing the folder names don’t display correctly. On some Windows machines at least, it displays a template’s (not necessarily even the same one) html file instead of the correct CSS file.

How to reproduce:

1. Create a new LWC component.
2. Create a new template inside the LWC folder aside from the default. For example, if the LWC component is newLwcComponent and the corresponding default/main template files are newLwcComponent.html and newLwcComponent.css, create a new set of template files named say, newTemplate.html and newTemplate.css. These other templates can be switched with the render() method when imported.
3. Attempt to open and view newTemplate.css.

Workaround:
Edit the css files in another editor and deploy the lwc bundle as usual with IC2.

[Scott Wells]

Thanks for filing, Kristoffer. I'll plan a fix for one of the near-term builds.

[Scott Wells]

I just submitted a fix for this for the next build (either later this week or early next week). There are two parts to the fix:

1. You're allowed to add a component CSS file per-component in a bundle directory. If there are multiple components in the same bundle directory without CSS files, the user is prompted for the component for which a CSS file should be created. If there is only one component without a CSS file, a CSS file is created for that component without the prompt.
2. The tabbed editor now includes other CSS files in the bundle directory.

[Scott Wells]

Delivered in 2.0.6.9.