Good pattern ideas for reuseable CSS properties

[BMCwebdev]

Hey there! So I am building a Stack layout component. There will be a prop for align which will map to align-content CSS. For the sake of this question, let's say they can enter any valid value for the align-content property. Anyone got any good ideas or patterns how to handle this? Other components could probably benefit from the same work. I could place this in some sort of util file and export it, but would that be too much of a performance hit, and I should just go ahead and list it out in every component that would use it instead?

Also, AFAIK using something like CSSStyleDeclaration['justifyContent'] as a type is just going to give me string. But it would be nice if we there were someway to reference all the possible values for a CSS property. I think I've seen a package on NPM, but anyone have a recommendation?

The basic setup I have in the component for now

// won't actually give me what I want, but placeholder for better idea
type JustifyContent = CSSStyleDeclaration['justifyContent'];

interface StackProps {
  justifyContent?: JustifyContent;
}

and then the stylex.create

const alignStyles = stylex.create({
  normal: {
    alignContent: 'normal'
  },
  start: {
    alignContent: 'start'
  },
  center: {
    alignContent: 'center'
  },
  end: {
    alignContent: 'end'
  },
  flexStart: {
    alignContent: 'flex-start'
  },
  flexEnd: {
    alignContent: 'flex-end'
  },
  baseline: {
    alignContent: 'baseline'
  },
  firstBaseline: {
    alignContent: 'first baseline'
  },
  lastBaseline: {
    alignContent: 'last baseline'
  },
  spaceBetween: {
    alignContent: 'space-between'
  },
  spaceAround: {
    alignContent: 'space-around'
  },
  spaceEvenly: {
    alignContent: 'space-evenly'
  },
  stretch: {
    alignContent: 'stretch'
  },
  safeCenter: {
    alignContent: 'safe center'
  },
  unsafeCenter: {
    alignContent: 'unsafe center'
  },
  inherit: {
    alignContent: 'inherit'
  },
  initial: {
    alignContent: 'initial'
  },
  revert: {
    alignContent: 'revert'
  },
  revertLayer: {
    alignContent: 'revert-layer'
  },
  unset: {
    alignContent: 'unset'
  }
});

[necolas]

Everything is already typed in StyleX

https://github.com/facebook/stylex/blob/main/packages/stylex/src/StyleXCSSTypes.js#L403

[BMCwebdev]

Oh that's nice, thank you.

[BMCwebdev]

1. Want to make sure I got this right. I see that alignContent in StyleXCSSTypes has

  | 'flex-start'
  | 'flex-end'
  | 'center'
  | 'space-between'
  | 'space-around'
  | 'stretch'

as well as all which equals
null | 'initial' | 'inherit' | 'unset'

Was there a particular reason not to include all of the options for alignContent? MDN's align-content page. Granted some of those options are rarely used, but others, like space-evenly?.

2. I know that you can use null to remove styles. And null is in the all type. But not sure how I am to use it in this setup:

import React from 'react';
import * as stylex from '@stylexjs/stylex';
import { alignContent } from '@stylexjs/stylex/lib/StyleXCSSTypes';

type AlignContent = alignContent;


interface ComponentProps {
  verticalAlign?: AlignContent;
}

// seeing as I am getting all of these keys from StyleXCSSTypes,
// and they are the same as the CSS value, I wonder if there is a different way to do this?

const alignStyles = stylex.create({
  flexStart: {
    alignContent: 'flex-start'
  },
  flexEnd: {
    alignContent: 'flex-end'
  },
  center: {
    alignContent: 'center'
  },
  spaceBetween: {
    alignContent: 'space-between'
  },
  spaceAround: {
    alignContent: 'space-around'
  },
  stretch: {
    alignContent: 'stretch'
  },
});

const Component: React.FC<ComponentProps> = ({
  verticalAlign = 'start',
}) => {
  return (
    <Component {...stylex.props(alignStyles[verticalAlign])}>
      ...
    </Component>
  );
};

export default Component;

in this code I'll get an error of Type 'null' cannot be used as an index type. on verticalAlign in
<Component {...stylex.props(alignStyles[verticalAlign])}>

As always, my thanks! You all are the best!

[nmn]

Was there a particular reason not to include all of the options for alignContent?

Yeah please create bugs to report any missing types.

I know that you can use null to remove styles. And null is in the all type. But not sure how I am to use it in this setup:

The null is to be used within the styles

const alignStyles = stylex.create({
  remove: {
    alignContent: null
  },
});

In your case if there is no style being applied anyway, you don't need null to remove anything.

[necolas]

Open a bug for missing types. And you need to use a condition like verticalAlign && styles[verticalAlign]

[BMCwebdev]

Will do on opening the bug.

I wasn't using a condition because I assumed that by assigning a value to verticalAlign here

const Component: React.FC<ComponentProps> = ({
  verticalAlign = 'start',
}) => {

it meant it was always present, so no need for the conditional statement?

On the null issue, not sure how to fix that. I could add a null key to my stylex.create, but then I would be defining what null returns, and I feel like I'd be negating whatever magic Stylex is doing with null to remove styles.

Also, are you on Discussion duty, necolas, because nmn is gallivanting in Miami? 😉

[necolas]

start isn't a key in your styles, but flexStart is

[BMCwebdev]

Ah, yes, bad copy paste. Thanks.

Yeah, I'm still not sure I understand how null works with StyleX. Should I have a null variant? As a string? I'll play with it this weekend to understand it.

[nmn]

You don't need a null variant since you're choosing when to apply alignItems to begin with. You can just set nothing and you don't need to "unset" anything.