-
Notifications
You must be signed in to change notification settings - Fork 22
Open
Description
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.tsto use macaron plugin:plugins: [macaronVitePlugin(), solidPlugin()] - Set
moduleResolutionto"bundler"intsconfig.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
srcexceptindex.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
Metadata
Metadata
Assignees
Labels
No labels