Any solution for build classes

[keyasc]

I've been trying to make a bootstrap-like column system where I can use COL-SM-X COL-LG-X COL-MD-X etc but I've found it impossible since I would have to create a property for each element and apply the media queries, is there a way to do this without repeating spaghetti code?

I could do something with grid but I would still have to somehow inject a calculation of the child components and this would imply more dynamism to calculate how much space they are occupying.

grid.stylex.js

export const grid = stylex.create({
  col: (xs, sm, md, lg, xl, xxl) => ({
    display: 'grid',
    gridTemplateColumns: {
      ['@media (min-width: 0) and (max-width: 640px)']: `repeat(${xs}, 1fr)`,
      ['@media (min-width: 640px) and (max-width: 768px)']: `repeat(${sm}, 1fr)`,
      ['@media (min-width: 768px) and (max-width: 1024px)']: `repeat(${md}, 1fr)`, 
      ['@media (min-width: 1024px) and (max-width: 1280px)']: `repeat(${lg}, 1fr)`,
      ['@media (min-width: 1280px) and (max-width: 1536px)']: `repeat(${xl}, 1fr)`,
      ['@media (min-width: 1536px)']: `repeat(${xxl}, 1fr)`,
    }
  })
});

grid-component.tsx

type GridProps = {
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
  xxl?: number;
  children: React.ReactNode;
};

export const GridCol = ({ xs = 1, sm, md, lg, xl, xxl, children }: GridProps) => {
  sm = sm ?? xs;
  md = md ?? sm;
  lg = lg ?? md;
  xl = xl ?? lg;
  xxl = xxl ?? xl;

  return (
    <div {...stylex.props(grid.col(xs, sm, md, lg, xl, xxl))}>
      {children}
    </div>
  );
};

[Jta26]

I think this will likely need to be done in the same way that bootstrap implements it post-build (by having bunch of copy paste). Unless you use dynamic styles, StyleX fundamentally builds down to plain css (same with bootstrap). We don't have a way of doing build-time compiling across files.

Using dynamic styles for this is overall worse than a bunch of copy paste though because dynamic styles are inline, so you are creating a lot of extra non-deduplicated styles.

To avoid using dynamic styles for this, you should just define styles for every numbered column break you need. You could do the column definitions in a stylex.defineVars() call, and you can store the media queries in locally-scoped variables to avoid a ton of incomprehensible media query copy-pasta.

grid.stylex.js

const extraSmall = '@media (min-width: 0) and (max-width: 640px)';
...

export const gridVars = stylex.defineVars({
  col1: {
    [extraSmall]:  'repeat(1, 1fr)',
    ...
  },
 col2: {
    [extraSmall]: 'repeat(2, 1fr)',
    ...
  },
  ...
});

Then use it like

import {gridVars} from  './grid.stylex.js';

const styles = stylex.create({
  gridCol1: {
    display: 'grid',
    gridTemplateColumns: gridVars.col1
  },
  gridCol2: {
    display: 'grid',
    gridTemplateColumns: gridVars.col2
  }
});


function MyComponent() {
  return <div {...stylex.props(styles.gridCol1)}/>

}

StyleX is designed such that the style de-duplication should happen at build time, and developers should not have to worry about writing duplicate styles. We actually prefer a little verbosity here.

You technically could export the stylex.create() in the code above in it's own file, however global style definitions outside of defineVars are kind of an anti-pattern in StyleX. Our goal with StyleX is to make styles atomic and defined at the component-level, without the need for magic keywords like in bootstrap.

[keyasc]

Thank you, it will be very useful to me

[nmn]

I wanted to give you another alternative that should be preferable:

Accept a style prop that sets gridTemplateColumns for you.

Instead of accepting the list of xs, sm, md, lg, xl, xxl props with numbers as value, accept a single style prop that lets the user of the component set gridTemplateColumns on their own.

type GridProps = {
  style?: stylex.StyleXStyles<{gridTemplateColumns?: string}>;
  children: React.ReactNode;
};

export const GridCol = ({ style, children }: GridProps) => {
  return (
    <div {...stylex.props(grid.col, style)}>
      {children}
    </div>
  );
};

const grid = stylex.create({
  col: {
    display: 'grid',
    gridTemplateColumns: '1fr',
  },
});

Now, any user of the GridCol component can pass in their own value for gridTemplateColumns. They can use the exact number of media queries that they actually need instead of the component always using 6 media queries whether you need it or not.

Further, in the "default" case, instead of using repeat(1, 1fr) six times for six media queries, you can simply use a simple 1fr which is more likely to be used elsewhere in your codebase that repeat(1, 1fr).

---

The one remaining concern you might have with this solution is the lack of a way to use consistent media queries. A stylex.defineConsts API to define sharable constants such as media queries is already in the works to solve that problem.

[nmn]

@keyasc We intentionally disallow anything that could be considered a "descendent selector". Please read the "Thinking in StyleX" page on stylexjs.com to know why.

It both creates larger CSS and makes style composition less reliable.

[keyasc]

@nmn I understand, I suppose there must be another way to improve the development experience by somehow adding more dynamism that does not affect the final result of the build.

[nmn]

@keyasc what are you trying to achieve? Instead of something like this:

.example {
  &-1 {
    color: red;
  }
  &-2 {
    color: blue;
  }
}

Why can't you just do:

const exampleStyles = stylex.create({
  _1: {color: 'red'},
  _2: {color: 'blue'},
});

The &-1 BEM pattern was created to generate unique classNames. You don't need that with StyleX.

[keyasc]

@nmn

I feel like it's not well expressed but it's more or less a way to make it more dynamic.

export const exampleStyles = stylex.create({
  _1: {
     color: {
        [':hover', ':focus', ':active']: 'red'
     }
  },
  _2: (dimension) => ({
     color: {
        [`@media (max-width:${dimension})`]: 'orange'
      }
  })
});

I guess the "_2" option is already being worked on with the defineConst proposal

[nmn]

Yes, and dimension can already be a local constant rather than an argument.

So this is possible today:

const MOBILE = '@media (max-width: 768px)';
const exampleStyles = stylex.create({
  _1: {
     color: {
        default: 'red',
        ':hover': 'red',
        ':focus': 'red',
        ':active': 'red',
     }
  },
  _2: {
     color: {
        default: null,
        [MOBILE]: 'orange'
      }
  }
});

If you want to enforce consistency, you can do so with types:

export type TMobile = '@media (max-width: 768px)';

And then you can use the types to enforce consistency:

// You'll get a type error if your string doesn't match.
const MOBILE: TMobile = '@media (max-width: 768px)';
const exampleStyles = stylex.create({
  _1: {
     color: {
        default: 'red',
        ':hover': 'red',
        ':focus': 'red',
        ':active': 'red',
     }
  },
  _2: {
     color: {
        default: null,
        [MOBILE]: 'orange'
      }
  }
});

---

Finally, I see you put an export on your styles. Avoid doing this. In most cases, you should just write the styles in the component you use them. Don't try to make your styles DRY. Just repeat yourself as much as is needed. The compiler will de-duplicate the styles anyway.