Follow up UI Libs that use state

[BMCwebdev]

I wanted to follow up about a post that’s already been closed. It is in regards to React Aria Components library and how they use state as a way to style components, as well as data-attributes. Another page where they talk about it.

I mentioned that I would attempt the easy path of using is() and data-attributes for now. However I quickly ran into issues with that. Mostly they revolve around where in the object should I use the data-attribute? How do I combine it with say a :hover or @media query? Do I group them together or inline them into each individual line of style? Side note, this is something I am still playing with in general, such as grouping all the [DARK] styles together. Trying to see which way reads better.

I found that this would not work

  destructive: {
    backgroundColor: {
      default: '#B91C1C',
      ':hover': '#991B1B',
      ':is([data-pressed])': '#7F1D1D', // does not work
    },
    color: 'white',
  },

I had to nest it inside of the :hover

  destructive: {
    backgroundColor: {
      default: '#B91C1C',
      ':hover': {
        default: '#991B1B',
        ':is([data-pressed])': '#7F1D1D',
      },
    },
    color: 'white',
  },

Neither of these options worked well for me either

    backgroundColor: {
      default: '#F3F4F6',
      ':hover': {
        default: 'rgba(0, 0, 0, 0.05)',
        [DARK]: 'rgba(255, 255, 255, 0.1)',
        ':is(data-pressed)': { // is not working
          default: 'rgba(0, 0, 0, 0.1)',
          [DARK]: 'rgba(255, 255, 255, 0.2)',
        },
      },
      ':disabled': 'transparent', // confusing
    },

    backgroundColor: {
      default: '#F3F4F6',
      ':hover': {
        default: 'rgba(0, 0, 0, 0.05)',
        ':is(data-pressed)':'rgba(0, 0, 0, 0.1)',
        [DARK]: {
          default: 'rgba(255, 255, 255, 0.1)',
          ':is(data-pressed)': 'rgba(255, 255, 255, 0.2)',
        },
      },
      ':disabled': 'transparent', // confusing
    },

This pattern did work

    backgroundColor: {
      default: '#F3F4F6',
      ':hover': {
        default: 'rgba(0, 0, 0, 0.05)',
        ':is(data-pressed)': 'rgba(0, 0, 0, 0.1)',
      },
      ':disabled': 'transparent', // confusing
    },
    [DARK]: {
      backgroundColor: {
        ':hover': {
          default: 'rgba(255, 255, 255, 0.1)',
          ':is([data-pressed])': 'rgba(255, 255, 255, 0.2)',
        },
      },
    },

I’m sure I am making the maintainers cringe as they say “this is exactly what we don’t want people doing”

My next attempt is to try to use the helper function from that original post. That way I don’t have to use these is() with data-attributes. I’ll end up using this function everywhere, so not sure what kind of performance hit that will generate. I’m curious if anyone has thought about this more since December? It’s a popular library and maybe someone else in the community is working with it as well?

By the way, this is in the code above ':disabled': 'transparent', // confusing as a note to myself because there is also a prop of isDisabled. So this is a possible pitfall where someone might have a props.isDisabled && disabledStyles and also be using :disabled in some other style object. More cringe for the maintainers! You can’t stop everyone from making every possible bad choice! 🙃

[BMCwebdev]

Noticed something else interesting. First, I have removed all the confusing :disabled styles. If I use the pattern above that worked, and then if I have a disabled variant, and in the StyleX prop I call them both

      {...stylex.props(
        buttonStyle.base,
        props.isDisabled && disabled.base,
      )}

In order to not have a hover style I need to override it in the disabled style object. I try to set it to null like this

const disabled = stylex.create({
  base: {
    backgroundColor: { default: '#F3F4F6', [DARK]: {default: '#27272A', ':hover': null}},
...

but it does not work. The hover style in buttonStyle.base still shows up. If I copy the same pattern that the buttonStyle.base is using, and group all the [DARK] styles together, then it does work

const disabled = stylex.create({
  base: {
    backgroundColor: '#F3F4F6',
    [DARK]: {
      backgroundColor: {
        default: '#27272A',
        ':hover': {
          default: null,
        },
      },
    },
}

[nmn]

I noticed a few examples use :is(data-pressed) instead of :is([data-pressed]). This might be the error you're running into?

Another thing is that you should probably not be using :hover with RAC at all and use only the hooks provided by the component. They do custom hover handling and the native :hover is pretty problematic which has been covered before.

[nmn]

Some of what you're describing might be bugs. Would you be willing to create a small reproduction in a Stackblitz project for debugging the issue?

[BMCwebdev]

Oh would you look at that, you're right, I missed those [brackets].

As for the issue where null doesn't null out the value when the shape of the style object is different, I set up a Stackblitz. Haven't used it before so I just forked your StyleX demo and made a simple example.
https://stackblitz.com/edit/stylex-next-hnbf35?file=app%2Fpage.tsx

I also totally derailed myself from the original question I was going to ask in this discussion. In regards to getting state passed into the StyleX prop function for React-Aria-Components. I was wondering if you had thought about this more since December. RAC perhaps some better documentation as well since then, but I think the main issue still exists. I'm trying to use your helper function suggestion, will update if I have success.

And hate to bombard you, but while I have your ear, or eye I guess. I'm trying to use the Ecosystem Vite plugins. I am using StyleX in a component library that I have built. As I understand it, I do not want StyleX to compile the build that I publish as a package on GitHub. Rather I want the consumers of the library to compile. I currently do this in my component library vite.config for the vite StyleX plugin.

...(command !== 'build' ? [stylexPlugin()] : []), // Only include stylexPlugin when not building

this way I still get StyleX to compile when I run npm run dev but not npm run build.

However, in the Vite app that consumes the component library I have errors. StyleX and the Vite plugin is set up to run as normal, no extra code like above.
When I run the build, the css file is generated in the build. I'm not sure if the HTML is being compiled. When I run npm run dev I get the Internal server error: 'stylex.create' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'

I have reached out to both Vite plugin maintainers, I get the same result with both plugins. But thought I would ask here as well if you had any ideas.

Thank you so much for all the help @nmn ! Been following along and listened to the 3 hour podcast the other night (I was actually sick with the flu and wanted to chime in but couldn't stop coughing). Really excited about what's coming down the line for StyleX. Just getting over the on-boarding hurdles.

[BMCwebdev]

Ultimately it seems that none of the Vite plugins (and I toyed with the rollup one and the plugins you have for the svelte and one other). Nothing seems to compile away StyleX that is in node-modules when using npm run dev. FYI this is also a Remix app.

[BMCwebdev]

For those following along, I got HorusGoul vite plugin working. The solution will prob work with nonzzz as well, but haven't tested it out yet.
I got it working by adding this to the vite config

  ssr: {
    noExternal: ['@acme/library-ui'],
  },

I am not using any other config option (no build rollup option, no optimizeDeps options). It is importing the css twice when I look in the browser inspector, but I'll deal with that for now, just happy to get it working. Build is still working too, at least the CSS is compiled and no errors.

I haven't confirmed this does anything more than initially work, but I'm happy I got that far at least.

[nmn]

When I run the build, the css file is generated in the build. I'm not sure if the HTML is being compiled. When I run npm run dev I get the Internal server error: 'stylex.create' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'

Vite doesn't like to compile node_modules. I don't remember, but you have to specifically configure it to compile particular imported packages.

I'm working on a change to the Babel plugin which will output the CSS as data URL imports in the JS file and rely on a PostCSS/LightningCSS plugin instead. This should help solve a lot of the integration issues people have been dealing with.

[BMCwebdev]

Hmmm seems my React-Aria-Components (which my component library is built on) is no longer working now though. I tested in a branch that doesn't have StyleX (pre implementing it) and even added the other change

  ssr: {
    noExternal: ['@acme/library-ui'],
  },

And RAC continues to work. I still render markup, but things like the JS (data-attributes being added on hover and forcus for example) no longer work.

Not able to tell yet, but it seems that when the StyleX plugin runs on my @acme/component-library it breaks RAC, but only in this setup where the plugin is running on a node_modules ES build. In the component library repo eveything works fine with RAC and StyleX.

I think I just need to quit on this until someone with more knowledge than I can provide an implementation that works.

[BMCwebdev]

Hmmm, not sure ssr noExternal actually fixed anything.

[nmn]

This sure is weird. Please share a reproduction for me, or just hold tight till we ship further improvements for integrating.

[nmn]

Still reading all your later comments, but you were using media queries wrong. ALL conditions for applying styles should be nested within the property value.

Here's the fixed code: https://stackblitz.com/edit/stylex-next-mucdgf?file=app%2Fpage.tsx

This is the code you need:

const buttonStyle = stylex.create({
  base: {
    padding: '1em',
    borderRadius: '12px',
    backgroundColor: {
      default: 'yellow',
      ':hover': 'darkred',
      [LIGHT]: {
        default: null,
        ':hover': 'red',
      },
    },
  },
});
const working = stylex.create({
  base: {
    backgroundColor: {
      default: 'green',
      [LIGHT]: 'lightgreen',
    },
  },
});

Another important thing that may have tripped you up: lightred is not a real CSS color.

[BMCwebdev]

Thank you @nmn . I had started this way and was experimenting with grouping them all together. That might be useful for something like @supports. But nothing I'm concerned about right now. I'll use the approved pattern.

As for compiling not working when Stylex was in a node_modules in a Vite app, HorusGoul updated his plugin to address the issue. It's working great now.

[BMCwebdev]

Again, thanks for all the help @nmn !

I'm just pasting in my updates in case this is helpful for anyone. What I have been working on is converting React Aria Components Tailwind starter kit to Stylex. Using the Button component as the first test. Does this seem to match up with the intended use of Stylex?

I am still having trouble using the spread helper function you suggested in this post for React Aria Components. Hopefully something more first class will emerge. I've started asking over on their GitHub as well.

In the meantime I am using the less than perfect data-attributes option. When doing that it seems I need to nest something like :is([data-pressed]) inside of :hover otherwise it doesn't take effect. This code would probably look less busy if I didn't have to do that.

Original RAC

import React from 'react';
import { composeRenderProps, Button as RACButton, ButtonProps as RACButtonProps } from 'react-aria-components';
import { tv } from 'tailwind-variants';
import { focusRing } from './utils';

export interface ButtonProps extends RACButtonProps {
  variant?: 'primary' | 'secondary' | 'destructive' | 'icon'
}
let button = tv({
  extend: focusRing,
  base: `
    px-5 
    py-2 
    text-sm 
    text-center 
    transition 
    rounded-lg 
    border 
    border-black/10 
    dark:border-white/10 
    shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] 
    dark:shadow-none 
    cursor-default
  `,
  variants: {
    variant: {
      primary: `
        bg-blue-600 
        hover:bg-blue-700 
        pressed:bg-blue-800 
        text-white
      `,
      secondary: `
        bg-gray-100 
        hover:bg-gray-200 
        pressed:bg-gray-300 
        text-gray-800 
        dark:bg-zinc-600 
        dark:hover:bg-zinc-500 
        dark:pressed:bg-zinc-400 
        dark:text-zinc-100
      `,
      destructive: `
        bg-red-700 
        hover:bg-red-800 
        pressed:bg-red-900 
        text-white
      `,
      icon: `
        border-0 
        p-1 
        flex 
        items-center 
        justify-center 
        text-gray-600 
        hover:bg-black/[5%] 
        pressed:bg-black/10 
        dark:text-zinc-400 
        dark:hover:bg-white/10 
        dark:pressed:bg-white/20 
        disabled:bg-transparent
      `
    },
    isDisabled: {
      true: `
        bg-gray-100 
        dark:bg-zinc-800 
        text-gray-300 
        dark:text-zinc-600 
        forced-colors:text-[GrayText] 
        border-black/5 
        dark:border-white/5
      `
    }
  },
  defaultVariants: {
    variant: 'primary'
  }
});


export function Button(props: ButtonProps) {
  return (
    <RACButton
      {...props}
      className={composeRenderProps(
        props.className,
        (className, renderProps) => button({...renderProps, variant: props.variant, className})
      )} />
  );
}

Converted to Stylex

import {
  Button as RACButton,
  ButtonProps as RACButtonProps,
} from 'react-aria-components';
import * as stylex from '@stylexjs/stylex';

import { styleXFocusRing } from './utils';

export interface ButtonProps extends RACButtonProps {
  variant?: 'primary' | 'secondary' | 'destructive' | 'icon';
}

export const DARK = '@media (prefers-color-scheme: dark)';
const buttonStyle = stylex.create({
  base: {
    padding: '0.5rem 1.25rem',
    fontSize: '0.875rem',
    lineHeight: '1.25rem',
    textAlign: 'center',
    transitionProperty:
      'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
    transitionDuration: '150ms',
    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
    borderRadius: '0.5rem',
    borderWidth: '1px',
    borderColor: { default: 'rgba(0, 0, 0, 0.1)', [DARK]: 'rgba(255, 255, 255, 0.1)' },
    boxShadow: {
      default: 'inset 0 1px 0 0 rgba(255,255,255,0.1)',
      [DARK]: 'none',
    },
    cursor: 'default',
  },
});
const variants = stylex.create({
  primary: {
    backgroundColor: {
      default: '#2563eb',
      ':hover': {
        default: '#1D4ED8',
        ':is([data-pressed])': '#1E40AF',
      },
    },
    color: 'white',
  },
  secondary: {
    backgroundColor: {
      default: '#F3F4F6',
      ':hover': {
        default: '#E5E7EB',
        ':is([data-pressed])': {
          default: '#D1D5DB',
        },
      },
      [DARK]: {
        default: '#4B5563',
        ':hover': {
          default: '#71717a',
          ':is([data-pressed])': {
            default: '#a1a1aa',
          },
        },
      },
    },
    color: {default: '#1F2937', [DARK]: '#F4F4F5',}
  },
  destructive: {
    backgroundColor: {
      default: '#B91C1C',
      ':hover': {
        default: '#991B1B',
        ':is([data-pressed])': '#7F1D1D',
      },
    },
    color: 'white',
  },
  icon: {
    borderWidth: '0px',
    padding: '0.25rem',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: {default: '#4B5563', [DARK]: '#9ca3af'},
    backgroundColor: {
      default: 'transparent',
      ':hover': {
        default: 'rgba(0, 0, 0, 0.05)',
        ':is([data-pressed])': 'rgba(0, 0, 0, 0.1)',
      },
      [DARK]: {
        ':hover': {
          default: 'rgba(255, 255, 255, 0.1)',
          ':is([data-pressed])': 'rgba(255, 255, 255, 0.2)',
        },
      },
    },
  },
});
const disabled = stylex.create({
  base: {
    backgroundColor: {
      default: '#F3F4F6',
      [DARK]: {
        default: '#27272a',
      },
    },
    color: {default: '#D1D5DB', [DARK]: '#52525B'},
    borderColor: {default: 'rgba(0, 0, 0, 0.05)', [DARK]: 'rgba(255, 255, 255, 0.05)'},
  },
});

export function Button({ variant = 'primary', ...props }: ButtonProps) {
  const variantStyles = variant ? variants[variant] : undefined;
  return (
    <RACButton
      {...props}
      {...stylex.props(
        buttonStyle.base,
        variantStyles,
        styleXFocusRing.base,
        props.isDisabled && disabled.base,
      )}
    />
  );
}

[BMCwebdev]

Made some public repos/package. I have not implemented the helper ..spread function yet. Will give that a try.

Component library that uses React Aria Components starter kit (Tailwind version) that I am converting to Stylex. So far only Button component has been converted.
https://github.com/BMCwebdev/rac-stylex

Example Remix-Vite app that imports the above component library.
https://github.com/BMCwebdev/remix-app

[BMCwebdev]

Follow up about getting RAC state into Stylex spread function.
#509