-
Notifications
You must be signed in to change notification settings - Fork 20
Open
Description
Steps to reproduce:
- Create a solid project with
npm init [email protected]
(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"
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
src
exceptindex.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