Known Behavior

Dynamic style Properties

When signals are used to dynamically update a style property at runtime, those properties will not be converted into CSS classes.

For instance, consider the following example:

const Component = () => {
    const [bgColor, setBgColor] = createSignal('red');

    return <div style={{ height: '50%', 'background-color': bgColor() }} />
}

The plugin will transform the div element as follows:

<div class="_div_12345" style="background-color: red;"></div>

In this case, the background-color property remains inline and will be updated dynamically using the bgColor signal.

The generated _div_12345 class will include only the static styles:

._div_12345 {
    height: 50%;
}

Combining class with style properties

The plugin assigns unique CSS classes to elements with transformed style properties, but there are limitations when combining style with the class property.

Currently, using the style property alongside a spread operator that includes a class property is not supported. For example:

const Component = () => {
    const additionalProperties = {
        class: 'test-class'
    };

    return <div style={{ height: '50%' }} {...additionalProperties} />;
};

In this case, the style property for the div element will not be transformed. Additionally, if the suppressWarnings flag is not set to true in the plugin’s initialization within the vite.config.mts file, a warning will be displayed:

[vite-style-to-css-plugin] warning: The JSX element <div> contains a "style" attribute along with a spread
operator ({...additionalProperties}). This combination is not supported, so the styles for this element will not be transformed.

Other combinations are supported, and the style property will be correctly transformed into a CSS class. For instance:

import MyCSSModule from './MyCSSModule.module.css';

const Component = () => {
    const [dynamicClass, setDynamicClass] = createSignal('test-class-1');

    return (
        <div
            style={{ height: '50%' }}
            class={dynamicClass() + ' ' + MyCSSModule.AnotherTestClass + ' test-class-3'}
        />
    );
};

MyCSSModule.module.css:

.test-class-2 { }

This will be transformed into:

<div class="test-class-1 test-class-2 test-class-3 _div_12345"></div>

The generated class will always be appended at the end of the class attribute.