Moving From JSS to CSS-Modules & Fundamental Styles

[texttechne]

Hi,

I've noticed the switch to CSS modules from JSS: #5611
And there was also some discussion about it in the UI5 webcomponents repo: provide reusable CSS to apps built with web components.

In found this statement quite remarkable:

fonts, backgrounds, colours, margins, paddings - already available via @sap-ui/common-css

And taking a look at the fundamental project, the common-css package brings all the stuff i've ever wanted from a web app dev standpoint: https://sap.github.io/fundamental-styles/?path=/docs/common-css-introduction--docs
These atomic & thereby reusable parts (based on SCSS) are more powerful & contain much more styles than the ThemingParameters.

However, I've got my problems to understand how all of this fits together. Can I really use the common-css package with confidence?

I don't get why neither ui5-webcomponents nor ui5-webcomponents-react seem to be using these fundamental styles or are directly linking to this project...

[Lukas742]

Hi @texttechne,

The common-css package is a relatively new addition to the fundamental-styles library. When we started developing our library, common-css wasn't available, so we implemented all styles ourselves. Due to limited capacity, we haven't yet had the time to explore integrating these style classes into our components, but it's on our roadmap, although we don't have a timeline for it yet.

In general, common-css is an official offering of SAP and aligns with the current SAP UX Fiori guidelines. For more detailed questions, it's probably best to ask them in their repository.

I've noticed the switch to CSS modules from JSS: #5611

I'm not entirely clear on how this refactoring relates to using common-css. Could you please elaborate on this?

I don't get why neither ui5-webcomponents nor ui5-webcomponents-react seem to be using these fundamental styles or are directly linking to this project...

I'll bring this up in our internal cross-team sync and let you know of the outcome.

[texttechne]

I've noticed the switch to CSS modules from JSS: #5611

I'm not entirely clear on how this refactoring relates to using common-css. Could you please elaborate on this?

That was just the backdrop to my question: The way I found out about common-css... so not really relevant...

[texttechne]

Ok, so my questions regarding the switch from JSS to CSS modules:

1. I use the spacing helper quite a lot, but I don't see that we have CSS variables for that (I might be ignorant of something here though)... So how would you envision users to handle spacing if not using somehting like the common-css package?

2. And the second more general question: Will you still support ThemingParameters and spacing in the future? I mean, I can still install react-jss for my projects myself, but without these helper classes I am kind of forced to switch my old projects to CSS modules as well, right? Or will you support those helper classes indefinitely? Kind of a breaking change thing...

[texttechne]

Writing the third reply here, I realize that I haven't sorted stuff in my head previously... it's always a process, I guess. Sorry for sorting my thoughts so late anyways!

I don't get why neither ui5-webcomponents nor ui5-webcomponents-react seem to be using these fundamental styles or are directly linking to this project...

I'll bring this up in our internal cross-team sync and let you know of the outcome.

Yeah, that would be cool! And you're right, I should also ask those guys a couple of questions regarding stability and progress of the project. But in the end I'm missing confidence that the styles of the common-css package work exactly as the UI5-webcomponents or UI5-Webcomponents-React styles are working...

In the end the only reliable solution to that concern would be that both projects would already rely on the common-css package. Despite all of the other good arguments for doing that, reducing redundancy, not inventing the wheel again and again, ...

[Lukas742]

Hi @texttechne

sorry for the late reply, I unfortunately missed your additional questions.

1. I use the spacing helper quite a lot, but I don't see that we have CSS variables for that (I might be ignorant of something here though)... So how would you envision users to handle spacing if not using somehting like the common-css package?

spacing was basically our idea of bringing the standard paddings and margins of SAP/OpenUI5 into UI5 Web Components for React. Now that the SAP portfolio of general web development support is maturing more and more, we don't see the need to maintain these utilities, that only work as inline-style or if a CSS-in-JS solution is used, anymore.
Therefore, we will most probably remove these in our 2.0 major release in favor of the common-css classes (e.g. margins). This is in fact one of the first things we want to explore when it comes to using common-css in our package.

2. And the second more general question: Will you still support ThemingParameters and spacing in the future? I mean, I can still install react-jss for my projects myself, but without these helper classes I am kind of forced to switch my old projects to CSS modules as well, right? Or will you support those helper classes indefinitely? Kind of a breaking change thing...

Regarding spacing, please see the answer above.
We will keep the ThemingParameters although they are only useful when used inline or with CSS-in-JS. The CSS variables the ThemingParameters are exposing are bundled in by the ui5-webcomponents package and are maintained in the theming-base-content repo. These variables are the baseline of our theming approach and I'm not aware of any plans to change that.

Yeah, that would be cool! And you're right, I should also ask those guys a couple of questions regarding stability and progress of the project. But in the end I'm missing confidence that the styles of the common-css package work exactly as the UI5-webcomponents or UI5-Webcomponents-React styles are working...

A colleague will contact you about this topic :)

[texttechne]

Thanks! I think that I get now how you want move forwards regarding this topic and how the projects are related then. Sounds good!

For me as end user this will mean, that I'll have to install the common-css package in future releases to get the indispensable spacing helpers. And with that I probably won't have the need to rely on JSS anymore, which would make stuff a bit easier I guess.

Thanks so much for all the details!

[petermuessig]

Hi @texttechne , long time no hear/see - are you planning to come to UI5con?

Regarding the common-css: it is still more poc than reality. Our goal is to introduce a common css layer across all SAP UI technologies which can share basic page assets, colors, metrics, fonts for static web UI elements such as texts, busy indicators, ... As we see in UI5 Web Components or the wrappers for React/NGX, a layer to provide the page basics - to style the page itself is necessary as the Web Components only take care about their shadow dom. And therefore, the common-css should bridge that gap. It should be also easily accessible with plain CSS, or easily loadable with CSS imports, or other framework specific options.

It may also be the case that the common-css will already be part of the Web Components wrappers but maybe also as you describe individually loadable.

Details will hopefully follow soon...

BR,
Peter

[texttechne]

Hi @petermuessig,
yeah too long... I will be at the UI5Con, so I'll see you there!

Regarding the common-css: it is still more poc than reality.

Ok, good to know, so it's still in its early stages. So I'll stay patient and wait until UI5 WC and UI5 WCR are relying on it internally.

But it looks very promising and from my point of view, definitely a move in the right direction!
Thank you so much for all the details!