Next.js is failing, I don't know why #565

BMCwebdev · 2024-05-03T21:52:02Z

BMCwebdev
May 3, 2024

Edit - perhaps I should re-title this to "Re-defining Vars from Token Library (like OpenProps)...uhhh, maybe I don't get it?
The follow up comment has more useful information

I am trying to implement my component library, that is built with StyleX, into a Next.js app.

I am fairly confident that my library is set up correctly. When used elsewhere it is working. To review: I am not compiling any of StyleX, that is left to happen by the consuming app (my Next js app in this case). There are several packages. One is the component library, one is a token library built just like the open-props version in the StyleX Next.js demo. The token libraries are not bundles, it's just the raw xxx.stylex.js files.

In Next.js I am getting the error The return value of stylex.defineVars() must be bound to a named export.

I have come to think of this error as a "Hey, StyleX never even ran on your token files".

I have set up the next.config.js and the babelrc.js files like the Next.js StyleX demo, including the transpilePackages

module.exports = {
  presets: ["next/babel"],
  plugins: [
    [
      "@stylexjs/babel-plugin",
      {
        dev: process.env.NODE_ENV === "development",
        test: process.env.NODE_ENV === "test",
        runtimeInjection: false,
        genConditionalClasses: true,
        treeshakeCompensation: true,
        unstable_moduleResolution: {
          type: "commonJS",
          rootDir: __dirname,
        },
      },
    ],
  ],
};

/** @type {import('next').NextConfig} */
const stylexPlugin = require("@stylexjs/nextjs-plugin");

const nextConfig = {
  // Configure `pageExtensions` to include MDX files
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
  transpilePackages: [
    "@acme/experiment-625",
    "@acme/stitch-tokens"
  ],
  // Optionally, add any other Next.js config below
};

module.exports = stylexPlugin({
  rootDir: __dirname,
})(nextConfig);

The error

./node_modules/.pnpm/@acme+experiment-625@0.0.10_@acme+stitch-tokens@0.0.3_@stylexjs+stylex@0.5.1__4deoahi5m3hoj2ju67qe3blvou/node_modules/@acme/experiment-625/dist/experiment-625.es.js

Error: /Users/brian.mccarthy/git/frontdoor-ui/node_modules/.pnpm/@acme+experiment-625@0.0.10_@acme+stitch-tokens@0.0.3_@stylexjs+stylex@0.5.1__4deoahi5m3hoj2ju67qe3blvou/node_modules/@acme/experiment-625/dist/experiment-625.es.js: The return value of stylex.defineVars() must be bound to a named export.
    at transformFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)

Any help would be greatly appreciated. This one has me stumped, and I am new to Next.js

If the new CLI is remotely functioning I'd be happy to be a test subject!

Answered by BMCwebdev

May 5, 2024

What worked for me.

Moving token file out of component library and into token library. Though it seems that stylex.js files should work alongside the component file. I'll have to do some more testing to figure out, but for this week I need to work on other tickets and at least this is working for now. I'll take the win.
Make sure that token file has alongside it a d.ts file. Completely copy the Open Props demo pattern. I skipped this part when trying to debug quickly.

View full answer

BMCwebdev · 2024-05-04T01:03:02Z

BMCwebdev
May 4, 2024
Author

Okay, here is my debug process. Also my TLDR guess, it's because these are the only files where I am re-defining vars like this
[tileColumns.default]: 'minmax(0px, 1fr)',

The looooooong version:

Because it was complaining about defineVars in particular, I decided to debug the one place in my component library where I am using defineVars (the other uses of defineVars are all in token files similar to the open-props demo).

This would be my Layout Components directory. In here is the only non-token stylex.ts file. I removed the whole directory, which was easy because nothing in the Next app is using the layout components yet (might be useful info). Tada, it worked in Next.js

I put back the Layout Components directory. Next I wanted to see if it was specifically the stylex.ts file. So I took that file, layoutTokens.stylex.ts, out of the component library and put it into the token library. When running the Next app I now would get the StyleX create error (the one that says things must be static values or something to that effect).

Okay, so next I just removed the two layout component files that were using the layoutTokens.stylex.ts. Ah ha. Success.

So something is going on here with my Layout Components. I have other components that are using stylex.create, that import tokens from my token libary using defineVars. That is all working. There's something particular about these layout components.

Granted these two components are the most complex uses I have made so far with StyleX. I'm going to add them to this post. I know they are going to make @nmn sad (haha) but I just need them for now while I iterate on better Design System options. This is also going to be long, because they cover many options.

You are a saint for reading this!!!!!!

I'm hoping there is something more useful here for you and not just some silly mistake I made.

Okay, here we go!

// layoutTokens.stylex.ts
import * as stylex from '@stylexjs/stylex';

export const tileColumns = stylex.defineVars({
  default: '1fr',
  small: '1fr',
  medium: '1fr',
  large: '1fr',
});

export const column = stylex.defineVars({
  flex: '1 1 auto',
  width: 'auto',
  maxWidth: 'auto',
  minWidth: 'auto',
  defaultDirection: 'row',
  smallDirection: 'row',
  mediumDirection: 'row',
});

// Tiles.tsx
import React from 'react';
import * as stylex from '@stylexjs/stylex';

import { sizes } from '@acme/stitch-tokens/sizes.stylex';
import { tileColumns } from '@acme/stitch-tokens/layoutTokens.stylex';

type ComponentType = 'div' | 'span';
export type Space = '0' | '25' | '50' | '100' | '200' | '300' | '400' | '500';
type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';

interface TilesProps {
  as?: ComponentType;
  columns?: Columns;
  columnsSM?: Columns;
  columnsMD?: Columns;
  columnsLG?: Columns;
  children?: React.ReactNode;
  space?: Space;
  hspace?: Space;
  vspace?: Space;
}

const SMALL = '@media (max-width: 767px)';
const MEDIUM = '@media (min-width: 768px) and (max-width: 1023px)';
const LARGE = '@media (min-width: 1024px)';

const tilesStyles = stylex.create({
  base: {
    display: 'grid',
  }
});
const columnsDefaultStyles = stylex.create({
  1: {
    gridTemplateColumns: 'minmax(0px, 1fr)',
    [tileColumns.default]: 'minmax(0px, 1fr)',
    [tileColumns.small]: 'minmax(0px, 1fr)',
    [tileColumns.medium]: 'minmax(0px, 1fr)',
    [tileColumns.large]: 'minmax(0px, 1fr)',
  },
  2: {
    gridTemplateColumns: 'repeat(2, minmax(0px, 1fr))',
    [tileColumns.default]: 'repeat(2, minmax(0px, 1fr))',
    [tileColumns.small]: 'repeat(2, minmax(0px, 1fr))',
    [tileColumns.medium]: 'repeat(2, minmax(0px, 1fr))',
    [tileColumns.large]: 'repeat(2, minmax(0px, 1fr))',
  },
  3: {
    gridTemplateColumns: 'repeat(3, minmax(0px, 1fr))',
    [tileColumns.default]: 'repeat(3, minmax(0px, 1fr))',
    [tileColumns.small]: 'repeat(3, minmax(0px, 1fr))',
    [tileColumns.medium]: 'repeat(3, minmax(0px, 1fr))',
    [tileColumns.large]: 'repeat(3, minmax(0px, 1fr))',
  },
  4: {
    gridTemplateColumns: 'repeat(4, minmax(0px, 1fr))',
    [tileColumns.default]: 'repeat(4, minmax(0px, 1fr))',
    [tileColumns.small]: 'repeat(4, minmax(0px, 1fr))',
    [tileColumns.medium]: 'repeat(4, minmax(0px, 1fr))',
    [tileColumns.large]: 'repeat(4, minmax(0px, 1fr))',
  },
  5: {
    gridTemplateColumns: 'repeat(5, minmax(0px, 1fr))',
    [tileColumns.default]: 'repeat(5, minmax(0px, 1fr))',
    [tileColumns.small]: 'repeat(5, minmax(0px, 1fr))',
    [tileColumns.medium]: 'repeat(5, minmax(0px, 1fr))',
    [tileColumns.large]: 'repeat(5, minmax(0px, 1fr))',
  },
  6: {
    gridTemplateColumns: 'repeat(6, minmax(0px, 1fr))',
    [tileColumns.default]: 'repeat(6, minmax(0px, 1fr))',
    [tileColumns.small]: 'repeat(6, minmax(0px, 1fr))',
    [tileColumns.medium]: 'repeat(6, minmax(0px, 1fr))',
    [tileColumns.large]: 'repeat(6, minmax(0px, 1fr))',
  },
  7: {
    gridTemplateColumns: 'repeat(7, minmax(0px, 1fr))',
    [tileColumns.default]: 'repeat(7, minmax(0px, 1fr))',
    [tileColumns.small]: 'repeat(7, minmax(0px, 1fr))',
    [tileColumns.medium]: 'repeat(7, minmax(0px, 1fr))',
    [tileColumns.large]: 'repeat(7, minmax(0px, 1fr))',
  },
  8: {
    gridTemplateColumns: 'repeat(8, minmax(0px, 1fr))',
    [tileColumns.default]: 'repeat(8, minmax(0px, 1fr))',
    [tileColumns.small]: 'repeat(8, minmax(0px, 1fr))',
    [tileColumns.medium]: 'repeat(8, minmax(0px, 1fr))',
    [tileColumns.large]: 'repeat(8, minmax(0px, 1fr))',
  }
});
const columnsStylesSM = stylex.create({
  1: {
    [tileColumns.small]: 'minmax(0px, 1fr)',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  2: {
    [tileColumns.small]: 'repeat(2, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  3: {
    [tileColumns.small]: 'repeat(3, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  4: {
    [tileColumns.small]: 'repeat(4, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  5: {
    [tileColumns.small]: 'repeat(5, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  6: {
    [tileColumns.small]: 'repeat(6, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  7: {
    [tileColumns.small]: 'repeat(7, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  8: {
    [tileColumns.small]: 'repeat(8, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  }
});
const columnsStylesMD = stylex.create({
  1: {
    [tileColumns.medium]: 'minmax(0px, 1fr)',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  2: {
    [tileColumns.medium]: 'repeat(2, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  3: {
    [tileColumns.medium]: 'repeat(3, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  4: {
    [tileColumns.medium]: 'repeat(4, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  5: {
    [tileColumns.medium]: 'repeat(5, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  6: {
    [tileColumns.medium]: 'repeat(6, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  7: {
    [tileColumns.medium]: 'repeat(7, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  8: {
    [tileColumns.medium]: 'repeat(8, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
});
const columnsStylesLG = stylex.create({
  1: {
    [tileColumns.large]: 'minmax(0px, 1fr)',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  2: {
    [tileColumns.large]: 'repeat(2, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  3: {
    [tileColumns.large]: 'repeat(3, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  4: {
    [tileColumns.large]: 'repeat(4, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  5: {
    [tileColumns.large]: 'repeat(5, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  6: {
    [tileColumns.large]: 'repeat(6, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  7: {
    [tileColumns.large]: 'repeat(7, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  },
  8: {
    [tileColumns.large]: 'repeat(8, minmax(0px, 1fr))',
    gridTemplateColumns: {
      default: tileColumns.default,
      [SMALL]: tileColumns.small,
      [MEDIUM]: tileColumns.medium,
      [LARGE]: tileColumns.large,
    }
  }
});
const spaceStyles = stylex.create({
  0: {
    gap: sizes.spacing_0
  },
  25: {
    gap: sizes.spacing_25
  },
  50: {
    gap: sizes.spacing_50
  },
  100: {
    gap: sizes.spacing_100
  },
  200: {
    gap: sizes.spacing_200
  },
  300: {
    gap: sizes.spacing_300
  },
  400: {
    gap: sizes.spacing_400
  },
  500: {
    gap: sizes.spacing_500
  }
});
const hspaceStyles = stylex.create({
  0: {
    columnGap: sizes.spacing_0
  },
  25: {
    columnGap: sizes.spacing_25
  },
  50: {
    columnGap: sizes.spacing_50
  },
  100: {
    columnGap: sizes.spacing_100
  },
  200: {
    columnGap: sizes.spacing_200
  },
  300: {
    columnGap: sizes.spacing_300
  },
  400: {
    columnGap: sizes.spacing_400
  },
  500: {
    columnGap: sizes.spacing_500
  }
});
const vspaceStyles = stylex.create({
  0: {
    rowGap: sizes.spacing_0
  },
  25: {
    rowGap: sizes.spacing_25
  },
  50: {
    rowGap: sizes.spacing_50
  },
  100: {
    rowGap: sizes.spacing_100
  },
  200: {
    rowGap: sizes.spacing_200
  },
  300: {
    rowGap: sizes.spacing_300
  },
  400: {
    rowGap: sizes.spacing_400
  },
  500: {
    rowGap: sizes.spacing_500
  }
});
    

export const Tiles: React.FC<TilesProps> = ({
  as: Component = 'div',
  children,
  columns = '1',
  columnsSM = '1',
  columnsMD,
  columnsLG,
  space = '50',
  hspace,
  vspace,
}) => {

  return (
    <Component {...stylex.props(
      tilesStyles.base,
      columnsDefaultStyles[columns],
      columnsSM && columnsStylesSM[columnsSM],
      columnsMD && columnsStylesMD[columnsMD],
      columnsLG && columnsStylesLG[columnsLG],
      spaceStyles[space],
      hspace && hspaceStyles[hspace],
      vspace && vspaceStyles[vspace],
    )}>
      {children}
    </Component>
  )
};

// Columns.tsx
import React, { createContext, useContext } from 'react';
import * as stylex from '@stylexjs/stylex';

import { sizes } from '@acme/stitch-tokens/sizes.stylex';
import { column } from '@acme/stitch-tokens/layoutTokens.stylex';

const SMALL = '@media (max-width: 767px)';
const MEDIUM = '@media (max-width: 1023px)';

const columnsStyles = stylex.create({
  base: {
    display: 'flex',
    flexDirection: 'row',
    [column.defaultDirection]: 'row',
    [column.smallDirection]: 'row',
    [column.mediumDirection]: 'row',
  },
});

const reverseBelowStyles = stylex.create({
  sm: {
    [column.smallDirection]: 'column-reverse',
    flexDirection: {
      default: column.defaultDirection,
      [SMALL]: column.smallDirection,
      [MEDIUM]: column.mediumDirection,
    },
    flex: {default: column.flex, [SMALL]: '1 0 auto'},
    width: {default: column.width, [SMALL]: '100%'},
    maxWidth: {default: column.maxWidth, [SMALL]: '100%'},
    minWidth: {default: column.minWidth, [SMALL]: '100%'},
  },
  md: {
    [column.smallDirection]: 'column-reverse',
    [column.mediumDirection]: 'column-reverse',
    flexDirection: {
      default: column.defaultDirection,
      [SMALL]: column.smallDirection,
      [MEDIUM]: column.mediumDirection,
    },
    flex: {default: column.flex, [MEDIUM]: '1 0 auto'},
    width: {default: column.width, [MEDIUM]: '100%'},
    maxWidth: {default: column.maxWidth, [MEDIUM]: '100%'},
    minWidth: {default: column.minWidth, [MEDIUM]: '100%'},
  },
});
const collapseColumnsStyles = stylex.create({
  sm: {
    [column.smallDirection]: 'column',
    flexDirection: {
      default: column.defaultDirection,
      [SMALL]: column.smallDirection,
      [MEDIUM]: column.mediumDirection,
    }
  },
  md: {
    [column.smallDirection]: 'column',
    [column.mediumDirection]: 'column',
    flexDirection: {
      default: column.defaultDirection,
      [SMALL]: column.smallDirection,
      [MEDIUM]: column.mediumDirection,
    }
  },
});

const collapseColumnStyles = stylex.create({
  sm: {
    flex: {default: column.flex, [SMALL]: '1 0 auto'},
    width: {default: column.width, [SMALL]: '100%'},
    maxWidth: {default: column.maxWidth, [SMALL]: '100%'},
    minWidth: {default: column.minWidth, [SMALL]: '100%'},
  },
  md: {
    flex: {default: column.flex, '@media (max-width: 1023px)': '1 0 auto'},
    width: {default: column.width, '@media (max-width: 1023px)': '100%'},
    maxWidth: {default: column.maxWidth, '@media (max-width: 1023px)': '100%'},
    minWidth: {default: column.minWidth, '@media (max-width: 1023px)': '100%'},
  },
});


const spaceStyles = stylex.create({
  0: {
    gap: sizes.spacing_0
  },
  25: {
    gap: sizes.spacing_25
  },
  50: {
    gap: sizes.spacing_50
  },
  100: {
    gap: sizes.spacing_100
  },
  200: {
    gap: sizes.spacing_200
  },
  300: {
    gap: sizes.spacing_300
  },
  400: {
    gap: sizes.spacing_400
  },
  500: {
    gap: sizes.spacing_500
  }
});
const alignStyles = stylex.create({
  initial: {
    alignItems: 'initial'
  },
  inherit: {
    alignItems: 'inherit'
  },
  unset: {
    alignItems: 'unset'
  },
  revert: {
    alignItems: 'revert'
  },
  revertLayer: {
    alignItems: 'revertLayer'
  },
  normal: {
    alignItems: 'normal'
  },
  start: {
    alignItems: 'start'
  },
  center: {
    alignItems: 'center'
  },
  end: {
    alignItems: 'end'
  },
  flexStart: {
    alignItems: 'flex-start'
  },
  flexEnd: {
    alignItems: 'flex-end'
  },
  baseline: {
    alignItems: 'baseline'
  },
  firstBaseline: {
    alignItems: 'firstBaseline'
  },
  lastBaseline: {
    alignItems: 'lastBaseline'
  },
  spaceBetween: {
    alignItems: 'space-between'
  },
  spaceAround: {
    alignItems: 'space-around'
  },
  spaceEvenly: {
    alignItems: 'space-evenly'
  },
  stretch: {
    alignItems: 'stretch'
  },
  safeCenter: {
    alignItems: 'safe center'
  },
  unsafeCenter: {
    alignItems: 'unsafe center'
  }
});
const justifyStyles = stylex.create({
  initial: {
    justifyContent: 'initial'
  },
  inherit: {
    justifyContent: 'inherit'
  },
  unset: {
    justifyContent: 'unset'
  },
  revert: {
    justifyContent: 'revert'
  },
  revertLayer: {
    justifyContent: 'revertLayer'
  },
  normal: {
    justifyContent: 'normal'
  },
  start: {
    justifyContent: 'start'
  },
  center: {
    justifyContent: 'center'
  },
  end: {
    justifyContent: 'end'
  },
  flexStart: {
    justifyContent: 'flex-start'
  },
  flexEnd: {
    justifyContent: 'flex-end'
  },
  left: {
    justifyContent: 'left'
  },
  right: {
    justifyContent: 'right'
  },
  spaceBetween: {
    justifyContent: 'space-between'
  },
  spaceAround: {
    justifyContent: 'space-around'
  },
  spaceEvenly: {
    justifyContent: 'space-evenly'
  },
  stretch: {
    justifyContent: 'stretch'
  },
  safeCenter: {
    justifyContent: 'safe center'
  },
  unsafeCenter: {
    justifyContent: 'unsafe center'
  }
});

const columnWidths = stylex.create({
  content: {
    flex: '0 1 auto',
    width: 'auto',
    minWidth: 'auto',
    maxWidth: 'auto',
    [column.flex]: '0 1 auto',
    [column.width]: 'auto',
    [column.minWidth]: 'auto',
    [column.maxWidth]: 'auto',
  },
  auto: {
    flex: '1 1 auto',
    width: 'auto',
    minWidth: 'auto',
    maxWidth: 'auto',
    [column.flex]: '1 1 auto',
    [column.width]: 'auto',
    [column.minWidth]: 'auto',
    [column.maxWidth]: 'auto',
  },
  '1/5': {
    flex: '0 1 20%',
    width: '20%',
    minWidth: 'auto',
    maxWidth: '20%',
    [column.flex]: '0 1 20%',
    [column.width]: '20%',
    [column.minWidth]: '20%',
    [column.maxWidth]: '20%',
  },
  '1/4': {
    flex: '0 1 25%',
    width: '25%',
    minWidth: 'auto',
    maxWidth: '25%',
    [column.flex]: '0 1 25%',
    [column.width]: '25%',
    [column.minWidth]: '25%',
    [column.maxWidth]: '25%',
  },
  '1/3': {
    flex: '0 1 33.333333%',
    width: '33.333333%',
    minWidth: 'auto',
    maxWidth: '33.333333%',
    [column.flex]: '0 1 33.333333%',
    [column.width]: '33.333333%',
    [column.minWidth]: '33.333333%',
    [column.maxWidth]: '33.333333%',
  },
  '2/5': {
    flex: '0 1 40%',
    width: '40%',
    minWidth: 'auto',
    maxWidth: '40%',
    [column.flex]: '0 1 40%',
    [column.width]: '40%',
    [column.minWidth]: '40%',
    [column.maxWidth]: '40%',
  },
  '1/2': {
    flex: '0 1 50%',
    width: '50%',
    minWidth: 'auto',
    maxWidth: '50%',
    [column.flex]: '0 1 50%',
    [column.width]: '50%',
    [column.minWidth]: '50%',
    [column.maxWidth]: '50%',
  },
  '3/5': {
    flex: '0 1 60%',
    width: '60%',
    minWidth: 'auto',
    maxWidth: '60%',
    [column.flex]: '0 1 60%',
    [column.width]: '60%',
    [column.minWidth]: '60%',
    [column.maxWidth]: '60%',
  },
  '2/3': {
    flex: '0 1 66.666667%',
    width: '66.666667%',
    minWidth: 'auto',
    maxWidth: '66.666667%',
    [column.flex]: '0 1 66.666667%',
    [column.width]: '66.666667%',
    [column.minWidth]: '66.666667%',
    [column.maxWidth]: '66.666667%',
  },
  '3/4': {
    flex: '0 1 75%',
    width: '75%',
    minWidth: 'auto',
    maxWidth: '75%',
    [column.flex]: '0 1 75%',
    [column.width]: '75%',
    [column.minWidth]: '75%',
    [column.maxWidth]: '75%',
  },
  '4/5': {
    flex: '0 1 80%',
    width: '80%',
    minWidth: 'auto',
    maxWidth: '80%',
    [column.flex]: '0 1 80%',
    [column.width]: '80%',
    [column.minWidth]: '80%',
    [column.maxWidth]: '80%',
  }
});

type ComponentType = 'div' | 'span';
type Space = '0' | '25' | '50' | '100' | '200' | '300' | '400' | '500';
type ColumnWidths = 'content' | 'auto' | '1/5' | '1/4' | '1/3' | '2/5' | '1/2' | '3/5' | '2/3' | '3/4' | '4/5';
type AlignContent = 'normal' | 'start' | 'center' | 'end' | 'flexStart' | 'flexEnd' | 'baseline' | 'firstBaseline' | 'lastBaseline' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly' | 'stretch' | 'safeCenter' | 'unsafeCenter' | 'inherit' | 'initial' | 'revert' | 'revertLayer' | 'unset';
type JustifyContent = 'normal' | 'start' | 'center' | 'end' | 'flexStart' | 'flexEnd' | 'left' | 'right' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly' | 'stretch' | 'safeCenter' | 'unsafeCenter' | 'inherit' | 'initial' | 'revert' | 'revertLayer' | 'unset';
type Reverse = boolean;
type BelowTypes = 'sm' | 'md' | undefined;

interface BelowContextType {
  collapseBelow?: BelowTypes;
  reverseBelow?: BelowTypes;
}
const BelowContext = createContext<BelowContextType | undefined>(undefined);
const useBelowContext = () => useContext(BelowContext);


interface ColumnsProps {
  as?: ComponentType;
  children?: React.ReactNode;
  space?: Space;
  collapseBelow?: BelowTypes;
  verticalAlign?: AlignContent;
  horizontalAlign?: JustifyContent;
  reverse?: Reverse;
  reverseBelow?: BelowTypes;
}

export const Columns: React.FC<ColumnsProps> = ({
  as: Component = 'div',
  children,
  space = '50',
  collapseBelow,
  verticalAlign = 'spaceBetween',
  horizontalAlign = 'flexStart',
  reverseBelow
}) => {
  const contextValue: BelowContextType = { collapseBelow, reverseBelow };
  return (
    <BelowContext.Provider value={contextValue}>
      <Component {...stylex.props(
        columnsStyles.base,
        spaceStyles[space],
        alignStyles[verticalAlign],
        justifyStyles[horizontalAlign],
        collapseBelow && collapseColumnsStyles[collapseBelow],
        reverseBelow && reverseBelowStyles[reverseBelow],
      )}>
        {children}
      </Component>
    </BelowContext.Provider>
  )
};

interface ColumnProps {
  as?: ComponentType;
  children?: React.ReactNode;
  width?: ColumnWidths;
}

export const Column: React.FC<ColumnProps> = ({
  as: Component = 'div',
  children,
  width = 'auto',
}) => {
  const { collapseBelow, reverseBelow } = useBelowContext() || {};
  return (
    <Component {...stylex.props(
      columnWidths[width],
      collapseBelow && collapseColumnStyles[collapseBelow],
      reverseBelow && collapseColumnStyles[reverseBelow],
    )}>
      {children}
    </Component>
  )
};

These are also using the size tokens, so here is that file too just for good measure

import { defineVars } from '@stylexjs/stylex';

export const sizes = defineVars({
  spacing_0: "0rem",
  spacing_25: "0.125rem",
  spacing_50: "0.25rem",
  spacing_100: "0.5rem",
  spacing_200: "0.75rem",
  spacing_300: "1rem",
  spacing_400: "1.25rem",
  spacing_500: "1.5rem",
  spacing_600: "2rem",
  spacing_650: "2.25rem",
  spacing_700: "2.5rem",
  spacing_800: "3rem",
  spacing_900: "3.5rem",
  spacing_1000: "4rem",
  spacing_1200: "6rem",
  spacing_1300: "7.5rem",
  px_0: "0px",
  px_25: "2px",
  px_50: "4px",
  px_100: "8px",
  px_200: "12px",
  px_300: "16px",
  px_400: "20px",
  px_500: "24px",
  px_600: "32px",
  px_650: "36px",
  px_700: "40px",
  px_800: "48px",
  px_900: "56px",
  px_1000: "64px",
  px_1200: "96px",
  px_1300: "120px",
  border_sm: "1px",
  border_md: "2px",
  radius_xs: "2px",
  radius_sm: "4px",
  radius_md: "8px",
  radius_lg: "12px",
  radius_full: "9999px",
  column_narrow: "4",
  column_regular: "12",
  column_wide: "12",
  column_xs: "4",
  column_sm: "4",
  column_md: "4",
  column_lg: "12",
  column_xl: "12",
  column_xxl: "12",
  min_width_narrow: "0",
  min_width_regular: "64rem",
  min_width_wide: "75rem",
  min_width_xs: "0",
  min_width_sm: "30rem",
  min_width_md: "48rem",
  min_width_lg: "64rem",
  min_width_xl: "75rem",
  min_width_xxl: "90rem",
  // gutter_narrow: space.500,
  // gutter_regular: space.500,
  // gutter_wide: space.500,
  // gutter_xs: space.500,
  // gutter_sm: space.500,
  // gutter_md: space.500,
  // gutter_lg: space.500,
  // gutter_xl: space.500,
  // gutter_xxl: space.500,
  gutter: "1.5rem",
  // margin_narrow: space.500,
  // margin_regular: space.500,
  // margin_wide: space.500,
  // margin_xs: space.500,
  // margin_sm: space.500,
  // margin_md: space.500,
  // margin_lg: space.500,
  // margin_xl: space.500,
  // margin_xxl: space.500,
  margin: "1.5rem",
  fixed_container_narrow: "45rem",
  fixed_container_regular: "60rem",
  fixed_container_wide: "71.25rem",
  fixed_container_xs: "100%",
  fixed_container_sm: "30rem",
  fixed_container_md: "45rem",
  fixed_container_lg: "60rem",
  fixed_container_xl: "71.25rem",
  fixed_container_xxl: "85rem",
  fluid_1: "clamp(.5rem, 1vw, 1rem)",
  fluid_2: "clamp(1rem, 2vw, 1.5rem)",
  fluid_3: "clamp(1.5rem, 3vw, 2rem)",
  fluid_4: "clamp(2rem, 4vw, 3rem)",
  fluid_5: "clamp(4rem, 5vw, 5rem)",
  fluid_6: "clamp(5rem, 7vw, 7.5rem)",
  fluid_7: "clamp(7.5rem, 10vw, 10rem)",
  fluid_8: "clamp(10rem, 20vw, 15rem)",
  fluid_9: "clamp(15rem, 30vw, 20rem)",
  fluid_10: "clamp(20rem, 40vw, 30rem)",
});

1 reply

BMCwebdev May 5, 2024
Author

What worked for me.

Moving token file out of component library and into token library. Though it seems that stylex.js files should work alongside the component file. I'll have to do some more testing to figure out, but for this week I need to work on other tickets and at least this is working for now. I'll take the win.
Make sure that token file has alongside it a d.ts file. Completely copy the Open Props demo pattern. I skipped this part when trying to debug quickly.

Answer selected by BMCwebdev

nmn · 2024-05-08T18:08:53Z

nmn
May 8, 2024
Collaborator

@BMCwebdev You likely ran into some build setup issues and moving things around fixed them.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next.js is failing, I don't know why #565

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Next.js is failing, I don't know why #565

BMCwebdev May 3, 2024

Replies: 2 comments · 1 reply

BMCwebdev May 4, 2024 Author

BMCwebdev May 5, 2024 Author

nmn May 8, 2024 Collaborator

BMCwebdev
May 3, 2024

Replies: 2 comments 1 reply

BMCwebdev
May 4, 2024
Author

BMCwebdev May 5, 2024
Author

nmn
May 8, 2024
Collaborator