Steps to reproduce:
- Create a solid project with
npm init solid@0.5.14 (SolidStart: No, Template: ts, Use Typescript: Yes)
- Update
package.json:
{
// other fields...
"dependencies": {
"@macaron-css/core": "1.5.2",
"@macaron-css/solid": "1.5.3",
"@macaron-css/vite": "1.5.1",
"solid-js": "1.9.3"
},
"overrides": {
"vite": "5.4.11"
}
}
npm install
- Update
vite.config.ts to use macaron plugin: plugins: [macaronVitePlugin(), solidPlugin()]
- Set
moduleResolution to "bundler" in tsconfig.json (otherwise TS complains about imports)
- Create/update files:
// src/App.tsx
import './a' // import to prevent tree-shaking
import { textAlign } from './prelude'
export default function App() {
return <div class={textAlign.center}>Hello</div>
}
// src/prelude.ts
import { keyframes, style } from '@macaron-css/core'
// key: namespace
export namespace textAlign {
export const center = style({ textAlign: 'center' })
export const end = style({ textAlign: 'end' })
}
// key: a call to `keyframes()`
keyframes({})
// src/a.tsx
import { styled } from '@macaron-css/solid'
import { textAlign } from './prelude'
// key: a call to `styled()`, with a reference to the class
styled('div', {
base: [textAlign.center],
})
- Remove other files in
src except index.tsx.
- Start dev server with
npm run dev
Expected
Hello is displayed on the center
Actual
Hello is displayed on the right side (text-align: end; is applied)
Note
I tried to reduce the reproduction as small as possible, but there may be some unnecessary code
Steps to reproduce:
npm init solid@0.5.14(SolidStart: No, Template: ts, Use Typescript: Yes)package.json:{ // other fields... "dependencies": { "@macaron-css/core": "1.5.2", "@macaron-css/solid": "1.5.3", "@macaron-css/vite": "1.5.1", "solid-js": "1.9.3" }, "overrides": { "vite": "5.4.11" } }npm installvite.config.tsto use macaron plugin:plugins: [macaronVitePlugin(), solidPlugin()]moduleResolutionto"bundler"intsconfig.json(otherwise TS complains about imports)srcexceptindex.tsx.npm run devExpected
Hellois displayed on the centerActual
Hellois displayed on the right side (text-align: end;is applied)Note
I tried to reduce the reproduction as small as possible, but there may be some unnecessary code