Component level scss processing

[pratikpparikh]

Please provide the environment you discovered this bug in.

Analog generated project

Which area/package is the issue in?

vite-plugin-angular

Description

I am having problem processing component level scss. Do you have an example of such?

this seems to be a bug because in plugin you are resolving the css but not processing it if it is a scss before resolving

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [ ] No

[zsyphon]

this is an issue for me too. Is there a fix?

[brandonroberts]

Inline component SCSS is not supported at the moment. Will look into see what is needed for this feature soon.

[pratikpparikh]

@brandonroberts line 176 in angular-vite-plugin.ts could be enhanced to use vite:css plugin. Below is pseudo code of how to find the plugin, the plugin has transform handle but not sure how to call it. Sorry don't know vite uses the plugin otherwise would have completed the following and submitted the PR.

if (hasStyleUrls(code)) {
              const styleUrls = resolveStyleUrls(code, id);
              //TODO: add resolution of css pre processing
              const cssPlugin = viteServer.config.worker.plugins.find(plugin => {plugin.name == 'vite:css'});
              styleUrls.forEach((styleUrl) => {
                if (cssPlugin) {
                  // need to use the plugin and call the transform method on it.
                } else {
                  this.addWatchFile(styleUrl);
                }
              });
            } 

[pratikpparikh]

Inline component SCSS is not supported at the moment. Will look into see what is needed for this feature soon.

This is not inline scss, this styleUrls that are not working as the current component-resolvers assume that file reference is complied css and does not require preprocessing.

[brandonroberts]

The vite:css plugin is already part of the pipeline. The file watchers are not responsible for the transform themselves. The styles get inlined during compilation, so they would have to be processed before then.

[pratikpparikh]

I was trying to help but I think i am clueless in how this works. What you are saying make sense, so I will wait for you to bridge this gap. This kinda blocker for me, so if you can close this as you get time then i would really appreciate it. Overall the plugin is working great for me.

[brandonroberts]

This fix has been included with the 0.2.0-alpha.8 release of the plugin. Thanks!

[pratikpparikh]

@brandonroberts thank you. I tested it but the styleUrls are not working, although inline style works fine. It results in following error:

8:16:52 PM [vite] Internal server error: Cannot read properties of null (reading '1') at Context. (/opt/development/trianz/analog/node_modules/@analogjs/vite-plugin-angular/src/lib/inline-styles-plugin.js:29:62) at Generator.next () at /opt/development/trianz/analog/node_modules/tslib/tslib.js:118:75 at new Promise () at Object.__awaiter (/opt/development/trianz/analog/node_modules/tslib/tslib.js:114:16) at Context.load (/opt/development/trianz/analog/node_modules/@analogjs/vite-plugin-angular/src/lib/inline-styles-plugin.js:25:28) at Object.load (file:///opt/development/trianz/analog/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:35266:50) at loadAndTransform (file:///opt/development/trianz/analog/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:39808:46) at doTransform (file:///opt/development/trianz/analog/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:39794:20) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[brandonroberts]

@pratikpparikh I'll take a look. If you have a reproduction or quick example snippet that would help also

[pratikpparikh]

@brandonroberts I tested it with your analog-app under apps. Just swap out inline scss style in product-list.component.ts with styleUrls: ['./product-list.component.scss'] and you will be able to reproduce.

Regards, Pratik Parikh

[brandonroberts]

Hmm interesting. There are already other components in the analog-app that use SCSS styleUrls. Thanks

[brandonroberts]

I see what's going on now. Those other ones are CSS styleUrls. I'll get a fix in

[pratikpparikh]

thank you

[brandonroberts]

Fixed and released as 0.2.0-alpha.10