Custom Vite plugins

To enhance the development experience with GamefaceUI, we have included additional Vite plugins in the boilerplate template we provide. These plugins streamline UI development and address specific issues related to Gameface.

Plugins

The template currently integrates two custom plugins:

1. vite-gameface: Ensures the UI is built in an optimized manner, free of errors or warnings when running in Gameface.
2. vite-solid-style-to-css: Converts styles from the style property into CSS classes for improved performance.

Vite Gameface Plugin

Resolving Unclosed Tags

SolidJS optimizes the build output by minimizing file size, which includes generating HTML with unclosed tags. However, Gameface requires valid HTML structure and cannot parse files with unclosed tags. This plugin addresses the issue by restructuring the tags into a valid format.

Fixing SVG Component Attributes

The template project includes SVG components, which introduce compatibility issues with Gameface. When SVG files are transformed into .tsx components, the resulting <svg> elements may contain unclosed inner tags and attributes without proper quotation marks. These issues prevent Gameface from parsing the SVG elements correctly.

The plugin resolves these problems by reformatting the <svg> templates into a valid structure, ensuring compatibility with Gameface.

Vite solid style to css plugin

The vite-solid-style-to-css plugin is designed to convert the style={{}} properties into CSS class names. This plugin extracts styles from the style, generates unique class names, and moves the styles into a CSS file (for production builds) or a style block (during development). This optimization improves performance by minimizing inline styles and utilizing CSS for better caching and reusability.

Key Features

• Automatically converts style={{}} properties into CSS classes.
• Ensures unique class names to avoid style conflicts.

Configuration Options

The plugin offers several configuration options to customize its behavior:

• suppressWarnings (boolean): Default - false. Suppresses any warnings generated by the plugin.

For example, if you want to suppress warnings, you can set the suppressWarnings option to true in your vite.config.mts file:

...
export default defineConfig({
  root: root,
  plugins: [
    solidStyleToCssPlugin({
        suppressWarnings: true
    }),
    ...
  ],
  ...
});

Example

Consider the following source code:

const Component = () => {
    return <div style={{ width: '50%', height: '50%' }} />
}

The plugin will automatically transform the div element into:

<div class="_div_12345"></div>

The generated _div_12345 class will contain the following CSS:

._div_12345 {
    width: 50%;
    height: 50%;
}

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.