Using css tempalte tag in solid-start routes/pages results in an error.

[jfcieslak]

Using css tempalte tag in solid-start routes/pages causes an error. Minimum repro example:

import { css } from 'solid-styled'

export default function Page() {
    css`
        .content {
            padding: 2rem;
        }
    `
    return (
        <main>
            <div class="content">This is a plain card</div>
        </main>
    )
}

Error:

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

Using css template on other components (e.g. ~/components/Component.tsx) works perfectly fine.

Config:

export default defineConfig({
    vite: {
        plugins: [
            solidStyled({
                filter: {
                    include: 'src/**/*.tsx',
                    exclude: 'node_modules/**/*.{ts,js}',
                },
            }) as PluginOption,
        ],
    },
})

[lxsmnsyc]

did you have the correct file extension?

[jfcieslak]

yes, here is a full reproduction. https://github.com/jfcieslak/solid-styled-issue-35-repro

[jon-zuka]

Pasting the error for others to find:

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