improve: @rolldown/plugin-emotion autoLabel=dev-only should check process.env.NODE_ENV

[hieuvuvan]

Related packages

• plugin-babel
• plugin-emotion
• plugin-jsx-remove-attributes
• plugin-styled-jsx
• plugin-transform-imports
• oxc-unshadowed-visitor
• pluginutils

Description

i use emotionjs for my component lib with @emotion/babel-plugin config like this

{
  "plugins": [["@emotion", { "labelFormat": "UI-[local]" }]]
}

do this so with simple Button

export function Button({ children }: ButtonProps) {
  return <StyledButton type="button">{children}</StyledButton>;
}

const StyledButton = styled.button`
  color: red;
`;

it generate output like this

/**
* My Button
*/
function Button({ children }) {
	return /* @__PURE__ */ jsx(StyledButton, {
		type: "button",
		children
	});
}
const StyledButton = /*#__PURE__*/ _styled("button", process.env.NODE_ENV === "production" ? { target: "emddiua0" } : {
	target: "emddiua0",
	label: "UI-StyledButton"
})(process.env.NODE_ENV === "production" ? {
	name: "hwfcu5",
	styles: "color:red"
} : {
	name: "hwfcu5",
	styles: "color:red",
	toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
//#endregion
export { Button };

note that it has process.env.NODE_ENV === "production" check, so for my consumer of the ui lib when run in dev mode it has debug "UI-StyledButton" info, and not in production

I want replace my rollup + babel + @emotion/babel-plugin setup with rolldown + @rolldown/plugin-emotion, but current @rolldown/plugin-emotion autoLabel=dev-only not generate check like this. Can we improve that?

Suggested solution

in @rolldown/plugin-emotion we could improve autoLabel=dev-only that generate process.env.NODE_ENV check or add another option for this

Alternative

current i use rolldown + @rolldown/plugin-babel + @emotion/babel-plugin for workaround

Additional context

No response

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.