Difference in compiling SSAS using gulp serve and spfx-fast-serve

[PrzemyslawLiszka]

Hello, First of all I want say big THANK YOU for this tool. During working with spfx-fast-server we noticed that default gulp server and spfx-fast-server generate different CSS styles. Probably we missing PostCss because when we using SASS like below background: linear-gradient(to right, red, green); background-clip: text

When we build solution using gulp serve to our CSS styles will be looking like below: background: linear-gradient(to right, red, green); -webkit-background-clip: text; background-clip: text;

But when we build solution using npm run serve styles will be generated but without -webkit-background-clip: text

[PrzemyslawLiszka]

After some investigation we noticed something. We checked lib folder with compiled CSS files if files contains -webkit-background-clip: text and files that is stored in lib folder contains this CSS. But when we checked what is send from server in <style data-load-themed-styles we noticed that there is nothing like -webkit-background-clip: text it looks like content for this tag is content that is before autoprefixing by PostCSS.

Also we noticed that if we changed something in module.scss then in lib folder generated css file is not updated - old content is still present in this folder.

[s-KaiNet]

The lib folder doesn't play any role in fast-serve scenario, because everything is served from memory.

To your question - background-clip is supported by all browsers, so you shouldn't see any visual differences without prefixing. Do you really need -webkit-background-clip? Why you cannot just use background-clip?

[PrzemyslawLiszka]

Hello and thank you for answer. For chrome based browsers background-clip is supported with -webkit-background-clip you can check that on site that you provided.

In my opinion fast-server is lacking PostCSS and autoprefixer plugin. I checked how default gulp server is building ssas files and in step when ssas files is built they are using PostCSS with plugin autoprefixer. You can check that in node_modules -> @microsoft -> gulp-core-build-sass -> SassTask.json

So I'm thinking that we should try make fast-server and gulp build exactly that same CSS - currently when building by gulp serve and fast-serve css has differences.

[s-KaiNet]

Thanks, I haven't noticed that yellow info about prefixes :)

You're right, in this case, we need to add an auto prefixing feature somehow. I will check what can be done here. Postcss will make scss compilation in fast-serve slower, I will compare the performance. Maybe there a lightweight webpack loader for auto prefixing, then I will add it. Thank you for all the details you provided!

[PrzemyslawLiszka]

I'm glad we could help. Our entire team uses fast-serve and we are very happy with it. This is great tool and we think that is wort to support it.

Thanks for great work!

[s-KaiNet]

I've published a beta version, could you try it and say if it works for you:

1. In your SPFx solution run npm install spfx-fast-serve-helpers@1.15.4-beta.0 --save-dev --save-exact
2. Run it and see if prefixes work as exptected.

[s-KaiNet]

FYI I assumed you use SPFx 1.15, if not, then please tell me the version you use.

[PrzemyslawLiszka]

Thanks for fast reaction. I checked beta version and for me it looks like it works correctly. After building the prefixes were added so for me everything is working correctly. And your assumption was correct - we using SPFX 1.15.

Regards, Przemek

[s-KaiNet]

Closing as 1.15.4 version is published.