Shipping native Macaron functions along with design system

[zwgnr]

import * as macaronCore from '@macaron-css/core'
export const css = macaronCore.style;

Hi, I am trying to include/bundle some useful Macaron functions inside of a design system package. Specifically things like style functions in order to give users a "css" prop to use without having to install macaron/core or macaron/react itself. Also things like createTheme to make custom themes. This pattern works with other libraries, including VE. Currently when importing a function from my package in the consuming app the below error is thrown. This doesn't happen when importing any functions directly form Macaron or when importing {style as css} from @macaron-css/core in the app. This also doesn't work when importing directly to another file within in the same directory, before compiling.

Uncaught Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

• You may have created styles outside of a '.css.ts' context
• You may have incorrect configuration

Any suggestions on how to resolve this? thanks!

[Mokshit06]

The way macaron figures out which code blocks to extract is by checking the function name and then checking if it's imported from one of macaron packages (@\macaron-css/*). This is done to make sure that no extra code is executed, and to only run code related to macaron because function names like style are very common and executing all could cause issues.

I wouldn't recommend exporting macaron's functions like this since they wouldnt be extracted by default, but if you really want to do this then the way to make it work is to call this css fn inside macaron$ like

import { css } from '';
import { macaron$ as m } from '@macaron-css/core'

const red = m(() => css({
  color: 'red'
}))

You would still need to install @macaron-css/core though, so it would be better to just make the users import directly from macaron