Draft: [FEATURE] Add f:format.cssVariables ViewHelper

[schliesser]

Issue #1228

Description

The new :html:<f:format.cssVariables> ViewHelper provides an easy way to format array-structured Fluid data as CSS custom properties (variables). This is particularly useful for passing data from fluid variables to CSS, allowing for dynamic and easily maintainable theme styling.

The ViewHelper recursively processes a given Fluid array, converting each key-value pair into a CSS variable. The array keys are transformed into CSS variable names (e.g., camelCaseKey becomes --camelcasekey), and the corresponding values are used as the variable values. Only string values are rendered.

Example

Fluid Template:

<f:variable name="themeData" value="{
    colors: {
        primary: '#ff8700',
        text: '#333333',
        accent: {
            blue: '#5599FF',
            green: '#28a745'
        }
    },
    spacing: {
        small: '8px',
        medium: '16px',
        large: '24px'
    }
}" />

/* Default theme variables */
<f:format.cssVariables variables="{themeData.colors}" />

/* Spacing variables with a prefix */
<f:format.cssVariables variables="{themeData.spacing}" prefix="layout-" />

/* Variables scoped to a specific class */
<f:format.cssVariables variables="{themeData.colors.accent}" selector=".special-content" />

Generated CSS Output:

/* Default theme variables */
:root {
    --primary: #ff8700;
    --text: #333333;
    --accent-blue: #5599FF;
    --accent-green: #28a745;
}

/* Spacing variables with a prefix */
:root {
    --layout-small: 8px;
    --layout-medium: 16px;
    --layout-large: 24px;
}

/* Variables scoped to a specific class */
.special-content {
    --blue: #5599FF;
    --green: #28a745;
}

Impact

This new ViewHelper simplifies the process of creating dynamic and themable components. By allowing developers to pass data directly from Fluid to CSS, it reduces the need for complex workarounds or manual synchronization between backend data and frontend styles. This leads to cleaner, more maintainable code and makes it easier to implement features like user-customizable themes.

[sascha-egerer]

I’m wondering why we should include CSS in the HTML document. I think this viewhelper is more of a personal use case and shouldn’t be part of the fluid itself.

[s2b]

I can see some use cases where this might be helpful, similarly to JSON formatting. I think it doesn't hurt to add this to Fluid, since it's a fairly simple implementation.

But now that I think about it, the ViewHelper should probably do less: It should just create a list of variables from the specified array and return them in one line. This would also allow usage in inline style attributes, just like JSON might be used in data-*.

[schliesser]

@s2b so I remove the argument "selector" and remove the brackets?

[s2b]

Or you leave it in but don't set a default and remove the brackets if it isn't set. Not sure which one is better.

[schliesser]

Heyho @s2b
it's been a while. Finally I had time to improve the PR.
I removed the default selector value as you suggested. With an empty selector the css variables are rendered with a space inbetween and no brackets.
If an selector is given, I add curly brackets and linebreaks.

Thanks for review in advance.

[s2b]

Am I missing something or does this example not belong here?

[schliesser]

Updated the example output.

[s2b]

Thanks! Just some small adjustments, then it can go in. :)

[schliesser]

@s2b do not merge yet plz

I need to add variable name conversions first:
Given the variable name is my_variable_foo this should be converted to --my-variable-foo, currently it would be outputted as --my_variable_foo.