Return compiled CSS as string

Question

Return compiled CSS as string

KarlPurk opened this issue 9 years ago · 8 comments

Would you be open to extending the plugin to provide the ability to return the compiled css as a string?

import style from './style.scss!';

@Component({
    template: '...',
    style: [style]
})

Cheers!

Answer 1 · 2016-02-12T10:56:22.000Z

I've implemented this in a fork, no tests or bundle support:
kevcjones-archived@fabd142

Answer 2 · 2016-02-15T15:08:49.000Z

After playing with this idea last week, I realised that this wouldn't be a very good idea. A better idea is to create a separate plugin for this purpose.

Answer 3 · 2016-02-16T08:18:57.000Z

Thank you for the feedback 👍

Answer 4 · 2016-03-01T07:51:41.000Z

I would really like having this implemented in this plugin. Would it be possible for the plugin to detect the import type? So default import vs. module import? If so the functionality should be relatively easy to implement.
Having two separate plugins for importing sass files into my project is no optimal solution and I would like to make use of both ways.

Answer 5 · 2016-03-01T08:31:02.000Z

I don't know if this is possible with SystemJS plugins. You can look at the plugin API.

I believe you have to implement fetch and translate but I don't know how to set a result in fetch and give it to translate. The SystemJS internals are not known to me.

Any pull requests are welcome.

Answer 6 · 2016-03-01T08:40:50.000Z

This is possible, but the problem with implementing this with a single plugin is what drives the decision to import vs inject?

I originally thought this could be driven at design time by config, but then you are limited to one or the other option.

The best solution would probably be to chain multiple loaders (similar to webpack) but I don't think systemjs currently supports this? - and this would still require two loaders, one for scss and one for injecting into head.

For our use case, my colleague developed plugin-scss which allows scss to be imported as a string. We can then inject it into the head manually if we desire or work with the compiled scss directly.

Answer 7 · 2016-03-01T08:51:21.000Z

Ah I understand 👍
This is indeed a different approach as this plugin was designed for. Also I don't know if it's a good idea to mix the behaviour of this plugin with the different approach of your plugin so I think it's the best solution to have two different plugins for that. Maybe in the future it is possible to have chained multiple loaders in SystemJS / jspm so we can merge together 😎

Answer 8 · 2016-03-01T09:16:50.000Z

Watching that space 😎

If nothing else the variation we have is useful for our needs with angular2 and it was highly educating to write when learning JSPM and SystemJS. So thanks for the starting point. 👍