search

Dwlad90 / stylex-swc-plugin

Community NAPI-RS/SWC plugin for StyleX.
MIT License
47 stars 3 forks source link

Creating themes should not require an object literal #93

Open VersorVerbi opened 1 day ago

VersorVerbi commented 1 day ago

Describe the bug

One use-case for themes is to allow users to decide which theme they will use, including the base theme (default values as established in a defineVars call). As a matter of convenience, we should be able to reuse the same variables in a createTheme call. As of now, the Babel compiler allows this, e.g.,

const defaultTheme = stylex.createTheme(definedVars, definedVars);

The workaround is to copy-paste the entire object from the defineVars call and then keep them in sync manually.

Error stack

The application panicked (crashed).
Message:  stylex.create() can only accept a style object.
Location: D:\a\stylex-swc-plugin\stylex-swc-plugin\crates\stylex-shared\src\transform\stylex\transform_stylex_create_theme_call.rs:122

OS

Windows

Browser

No response

Compiler version

rs-compiler-win32-x64-msvc 0.4.1

Bundler plugin(s) version

0.4.1

To Reproduce

Define variables, then create a theme for those variables using the result of the stylex.defineVars call as the override theme (i.e., override a set of variables with itself).

E.g., in Dwlad90/nextjs-app-dir-stylex, add this to ButtonsDemo.tsx:

const blueTheme = stylex.createTheme(buttonTokens, buttonTokens);

Provide link to a repository with a minimal reproduction case.

No response

Additional information

Dwlad90 commented 1 day ago

Hi @VersorVerbi, Thanks for helping improve the project!

I checked your example in the original demo app with babel and the code does work without errors, but the second parameter does not affect or override the styles (I tried to move the styles from the example to a separate ButtonTokensOverride.stylex.ts file).

//Theme file

// other code...
export const buttonTokensOverride = stylex.defineVars({
  bgColor: "red",
  textColor: "white",
  cornerRadius: "4px",
  paddingBlock: "4px",
  paddingInline: "8px",
});
// other code...
//Component file

import * as stylex from "@stylexjs/stylex";
import { buttonTokens } from "./ButtonTokens.stylex";
import { buttonTokensOverride } from "./ButtonTokens2.stylex";

// other code...
const redTheme = stylex.createTheme(buttonTokens, buttonTokensOverride);
// other code...

It is similar to passing an empty object as the second parameter. So I am not sure that the error in this case is a bug.

In the official documentation (here and here) your case is not presented, only an object as the second argument.

PR #97 adds validation of function parameters stylex.createTheme, I think that will be the right solution.