Mitosis + Meta StyleX

[bastiW]

Anyone tried using Mitosis together with StyleX?

StyleX combines static css styling with the dynamic of JS style.

Currently I see the following benefits using stylex over using the CSS property in mitosis.

• TypeSafe and auto completion EDIT: This is possible with Mitosis out of the box
• Conditional styling based on props / state of the component

I think that those two things are currently not possible with css property in mitosis. Please correct me if I am wrong.

[PatrickJS]

yeah the creator of StyleX mentioned he was interested in doing this. although it's a huge task

[bastiW]

Did some testing with react, vue, qwik, angular and solidjs.

I used vite to setup the SPAs with the vite-plugin-stylex

Mitosis Code

The code looks like this in the button.lite.tsx

import { Show } from '@builder.io/mitosis';
import * as stylex from '@stylexjs/stylex';

export interface ButtonProps {
  attributes?: any;
  text?: string;
  link?: string;
  openLinkInNewTab?: boolean;
}

const styles = stylex.create({
  base: {
    fontSize: 16,
    lineHeight: 1.5,
    color: 'white',
    background: 'yellow'
  },
  highlighted: {
    color: 'black',
  },
});

export default function Button(props: ButtonProps) {
  return (
    <Show
      when={props.link}
      else={<span {...props.attributes}>{props.text}</span>}
    >
      <a
        {...props.attributes}
        {...stylex.props(styles.base, styles.highlighted)}
        role="button"
        href={props.link}
        target={props.openLinkInNewTab ? '_blank' : undefined}
      >
        {props.text}
      </a>
    </Show>
  );
}

Linter

The linter in the component complains.

ESLint: Mitosis component files should only contain import declarations, the component itself (in a default export), and type declarations(@builder.io/mitosis/only-default-function-and-imports)

React

Works already out of the box. Only one minor issue:

• The import statement of stylex is not at the top of the file

SolidJS

Works out of the box. Expect the same minor issue as in react.

Vue

Only tried with compsition API, as I am not sure if styleX works with options api in any way. The following changes needs to be made to fix stylex

• The input needs to be transformed
• Move the stylex creation to <script lang="ts"> instead of <script setup lang="ts">

Current output

<template>
  <template v-if="link">
    <a
      role="button"
      :href="link"
      :target="openLinkInNewTab ? '_blank' : undefined"
      v-bind="{
        ...attributes,
        ...stylex.props(styles.base, styles.highlighted),
      }"
      >{{ text }}</a
    >
  </template>

  <template v-else>
    <span v-bind="attributes">{{ text }}</span>
  </template>
</template>

<script setup lang="ts">
import * as stylex from "@stylexjs/stylex";
const styles = stylex.create({
  base: {
    fontSize: 16,
    lineHeight: 1.5,
    color: "white",
    background: "yellow",
  },
  highlighted: {
    color: "black",
  },
});

export interface ButtonProps {
  attributes?: any;
  text?: string;
  link?: string;
  openLinkInNewTab?: boolean;
}

const props = defineProps<ButtonProps>();
</script>

Expected output

<template>
  <template v-if="link">
    <a
      role="button"
      :href="link"
      :target="openLinkInNewTab ? '_blank' : undefined"
      v-bind="{
        ...attributes,
        ...stylex.props(styles.base, styles.highlighted),
      }"
      >{{ text }}</a
    >
  </template>

  <template v-else>
    <span v-bind="attributes">{{ text }}</span>
  </template>
</template>

<script setup lang="ts">
import stylex from "@stylexjs/stylex";

export interface ButtonProps {
  attributes?: any;
  text?: string;
  link?: string;
  openLinkInNewTab?: boolean;
}

const props = defineProps<ButtonProps>();
</script>

<script lang="ts">

const styles = stylex.create({
  base: {
    fontSize: 16,
    lineHeight: 1.5,
    color: "white",
    background: "yellow",
  },
  highlighted: {
    color: "black",
  },
});
</script>

Angular

There is no optimal way on how to use StyleX with Angular yet. Some disscussions here facebook/stylex#97

Qwik

Output was completely broken. Did not investigate into the expected output.

Current Output

Error: SyntaxError: Identifier expected. (3:8)
  1 | import{Fragment,component$,h}from"@builder.io/qwik";
  2 |
> 3 | import{* as stylex}from"@stylexjs/stylex";
    |        ^
  4 |
  5 | export interface ButtonProps {
  6 |   attributes?: any;
========================================================================
import{Fragment,component$,h}from"@builder.io/qwik";

import{* as stylex}from"@stylexjs/stylex";

export interface ButtonProps {
  attributes?: any;
  text?: string;
  link?: string;
  openLinkInNewTab?: boolean;
}
export const styles = stylex.create({
  base: {
    fontSize: 16,
    lineHeight: 1.5,
    color: 'white',
    background: 'yellow'
  },
  highlighted: {
    color: 'black'
  }
});export const Button=component$((props:ButtonProps)=>{

return (<>{props.link?<a role="button"{...props.attributes}{...stylex.props(styles.base, styles.highlighted)} href={props.link} target={props.openLinkInNewTab ? '_blank' : undefined}>{props.text}</a>:<span{...props.attributes}>{props.text}</span>}</>)});

export default Button;

========================================================================
    at File.toString (C:\Users\username\mitosis-ds\basic\node_modules\.pnpm\@builder.io+mitosis@0.1.0\node_modules\@builder.io\mitosis\dist\src\generators\qwik\src-generator.js:96:23)
    at C:\Users\username\mitosis-ds\basic\node_modules\.pnpm\@builder.io+mitosis@0.1.0\node_modules\@builder.io\mitosis\dist\src\generators\qwik\component-generator.js:137:35
    at C:\Users\username\mitosis-ds\basic\node_modules\.pnpm\@builder.io+mitosis-cli@0.1.0\node_modules\@builder.io\mitosis-cli\dist\build\build.js:432:158
    at step (C:\Users\username\mitosis-ds\basic\node_modules\.pnpm\@builder.io+mitosis-cli@0.1.0\node_modules\@builder.io\mitosis-cli\dist\build\build.js:44:23)
    at Object.next (C:\Users\username\mitosis-ds\basic\node_modules\.pnpm\@builder.io+mitosis-cli@0.1.0\node_modules\@builder.io\mitosis-cli\dist\build\build.js:25:53)
    at fulfilled (C:\Users\username\mitosis-ds\basic\node_modules\.pnpm\@builder.io+mitosis-cli@0.1.0\node_modules\@builder.io\mitosis-cli\dist\build\build.js:16:58)

[nmn]

StyleX works great with Qwik. I have a bunch of integrations mentioned here:
https://stylexjs.com/docs/learn/ecosystem/

The qwik integration in particular, is here: https://github.com/nmn/qwik-stylex

Not sure about the Mitosis output though.