Component level scss processing about analog HOT 14 CLOSED

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.

from analog.

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

from analog.

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

from analog.

@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);
                }
              });
            } 

from analog.

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.

from analog.

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.

from analog.

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

from analog.

@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)

from analog.

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

from analog.

@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

from analog.

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

from analog.

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

from analog.

thank you

from analog.

Fixed and released as 0.2.0-alpha.10

from analog.