Doesn't work with astro

[Waqas Tahir]

error :

Unexpected use of css. Make sure that solid-styled's plugin is setup correctly.

configuration:
I tried this

export default defineConfig({
    integrations: [solidJs(), integratePaths()],
    plugins : [
        solidStyled({
            prefix: 'my-prefix', // optional
            filter: {
                include: 'src/**/*.{ts,js,tsx,jsx}',
                exclude: 'node_modules/**/*.{ts,js,tsx,jsx}',
            },
        }),
    ]
});

also this

function integratePaths() {
    return {
        name: 'anique-solid-vite-config',
        hooks: {
            'astro:config:setup': ({updateConfig}) => {
                updateConfig({
                    vite: {
                        plugins : [
                            solidStyled({
                                prefix: 'my-prefix', // optional
                                filter: {
                                    include: 'src/**/*.{ts,js,tsx,jsx}',
                                    exclude: 'node_modules/**/*.{ts,js,tsx,jsx}',
                                },
                            }),
                        ]
                    },
                });
            },
        },
    };
}
export default defineConfig({
    integrations: [solidJs(), integratePaths()]
});

[Waqas Tahir]

Maybe the vite plugins configuration needs to go in the vite block like this
https://github.com/mayank99/astro-css-in-js-tests/blob/f91ab3d2a55f86e98057f774f7867fb52ccd48bf/vanilla-extract/astro.config.mjs#L8C1-L10C4

But I am now going to use vanilla extract since the table in the astro issue says that solid-styled cause FOUC
withastro/astro#4432

[Alexis H. Munsayac]

Your setup for Astro is wrong, refer to here: https://github.com/lxsmnsyc/solid-styled/blob/main/examples/astro-demo/astro.config.mjs

But I am now going to use vanilla extract since the table in the astro issue says that solid-styled cause FOUC

A lot of CSS solutions with runtime suffers from this problem in Astro. Unless Astro provides a solution, FOUC remains a problem.

[xypnox]

A lot of CSS solutions with runtime suffers from this problem in Astro.

@lxsmnsyc The solid-styled-components package has a extractCss function that can be used in an astro to render the styles to avoid the FOUC.

Ex: https://github.com/xypnox/xip/blob/main/packages/xip-warehouse/src/components/styleLoader.astro

There is <StyleRegistry> but I can't figure out how to use it with astro.

[Alexis H. Munsayac]

@xypnox the problem I'm referring to specifically is cross-request pollution