search

neos / neos-ui

Neos CMS UI written in ReactJS with Immutable data structures.
GNU General Public License v3.0
264 stars 136 forks source link

Use native CSS variables instead of compiling them into the bundle #3201

Open Sebobo opened 2 years ago

Sebobo commented 2 years ago

Description

There is no compatibility reason anymore to replace the css variables during compile time. Therefore we can remove this PostCSS step and supply all variables natively. This also helps with plugin development

Expected behavior

All CSS variables are actual CSS variables and the UI still looks the same

Actual behavior

All CSS variables are replaced with their value

Affected Versions

Neos: all using the new Neos UI

UI: all

mhsdesign commented 2 years ago

Good idea.

Would interfere with the iframe when using it on :root

(as the host css is also loaded in the iframe for the inline toolbar)

mhsdesign commented 2 years ago

is done via https://github.com/neos/neos-ui/pull/3200

we decided to prefix them with neos-

mhsdesign commented 2 years ago

This also helps with plugin development

i guess so one can better reuse the styles?

how do we want to solve this for the separate distributed react-ui components package? Should we register our css variables then also on the root?

Sebobo commented 2 years ago

Yes I did that already for backend modules in https://github.com/neos/neos-development-collection/blob/8.2/Neos.Neos/Resources/Private/Styles/_CSSVariables.scss But without namespacing there. So we should adjust either the one or the other side so they match in the future. If we namespace the ones for the backend we can have the old variables fall back to them to avoid breakiness.

mhsdesign commented 2 years ago

So this section is only for the case if someone uses react-ui-components without the post-css-replace-variables thing and relies on real css variables beeing there?

https://github.com/neos/neos-development-collection/blob/6f0e5c9a4304027d3023a70d4bb41c033cd62982/Neos.Neos/Resources/Private/Styles/_CSSVariables.scss#L44-L107

Sebobo commented 2 years ago

Yes or mixes react ui components with custom elements that should use the same variables.

mhsdesign commented 2 years ago

Would interfere with the iframe when using it on :root

wie kritisch siehst du das? -> also bei der ui wird das Host.css im iframe geladen für das styling der inline toolbar

Sebobo commented 2 years ago

With namespacing shouldn't be an issue right? And if the site has its own with the same name, it should override ours.

mhsdesign commented 2 years ago

Im rethinking in general how we distribute the react ui components https://github.com/neos/neos-ui/issues/3213#issuecomment-1272531861

and would like to chat with you about that soon