mayank99 / ecsstatic

the predefinite CSS-in-JS library for vite
https://ecsstatic.dev
Other
273 stars 8 forks source link

Support alias paths #8

Closed tomahl closed 1 year ago

tomahl commented 1 year ago

Hey,

Trying out this awesome project and noticed that variables imported with custom aliases does not work:

[plugin:ecsstatic] Unable to resolve expression in template literal.

import { COLORS } from '@constants/colors'; // <-- Does not work
import { COLORS } from '../../../constants/colors'; // <-- Works

const fooBar = css`
    color: ${COLORS.red}
`

tsconfig.json

{
    "compilerOptions": {
        "paths": {
            "@constants/*": ["./src/constants/*"]
        }
    }
}

vite.config.ts

export default defineConfig({
    resolve: {
        alias: {
            '@constants': path.resolve(__dirname, './src/constants'),
        },
    },
    plugins: [ecsstatic()],
});

Thanks for your hard work! 👍

mayank99 commented 1 year ago

This is interesting, I would have expected vite to resolve those aliases before executing the plugin. Will look into it, thanks

mayank99 commented 1 year ago

Fixed in 0.5.1 🎉 example: https://stackblitz.com/edit/github-uier57?file=src%2Fconstants%2Fcolors.ts,src%2FLogo.tsx

tomahl commented 1 year ago

Great, thanks 👍