Stand Alone Example Based on examples/example-nextjs

[derekjwilliams]

I've created a standalone example based on the code in examples/example-nextjs. This was motivated by difficulty getting the example application running. This could well be a skills issue on my part, but I'm likely not alone.

The standalone example can be found here:

https://github.com/derekjwilliams/stylex-example-nextjs

The README describes the project, I've included it below

Example Next.js StyleX Project

Original Code

This is from the excellent code at https://github.com/facebook/stylex/tree/main/examples/example-nextjs

Motivation

The original code is great, but is part of the larger stylex build, https://github.com/facebook/stylex. When a user attempts to build the example at https://github.com/facebook/stylex/tree/main/examples/example-nextjs they may run into quite a few errors on the build. This is primarily due to dependencies in the configuration.

What I Tried First

I performed a full build of the stylex repo, following the README. I then navigated to the next js example and tried a few things, the most obvious being npm run example:build, npm install, etc.. Various errors were encountered.

What This Repo Has Going For It

This repo contains the code from stylex/examples/example-nextjs but in a standalone state.

Changes

Configuration

Changes were made to the configuration files postcss.config.js, next.config.js.

Test Files

Two of the files (typetests/theming1.tsx and typetests/typetests.ts) have been completely commented out because they were causing errors when building.

Aliases Removed

For example, in components/Card.tsx

-import { globalTokens as $, spacing, text } from '@/app/globalTokens.stylex';
+import { globalTokens as $, spacing, text } from '../app/globalTokens.stylex';
 import { colors } from '@stylexjs/open-props/lib/colors.stylex';
-import { tokens } from '@/app/CardTokens.stylex';
+import { tokens } from '../app/CardTokens.stylex';

This is becasue the aliases were throwing errors on build, this is likely an easy fix, but I personally avoid aliases so it was not a high priority for me.