stylex is adding the class names to my element but its not applying the styles.

Lolhp0 commented 2 weeks ago

first of all the code:

import Image from "next/image";
import * as stylex from '@stylexjs/stylex';

const s = stylex.create({
  h1: {
    fontSize: '4rem',
  },
  boldness: {fontWeight: 800}
})
export default function Home() {
  return (
    <>
      <h1 {...stylex.props(s.h1, s.boldness)}>hi</h1>
    </>
  );
}

the output of this is

<h1 class="x5f6h7s xuv8nkb">hi</h1>

but the styles are NOT being applied to the class names for some reason. here's my next.config.ts

import type { NextConfig } from "next";
import stylexPlugin from "@stylexjs/nextjs-plugin";

const nextConfig: NextConfig = {
  /* config options here */
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
};
const __dirname = new URL(".", import.meta.url).pathname;
export default stylexPlugin({
  rootDir: __dirname,
})(nextConfig);

and .babelrc.js

module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      '@stylexjs/babel-plugin',
      {
        dev: false,
        stylexSheetName: '<>',
        genConditionalClasses: true,
        unstable_moduleResolution: {
          type: 'commonJS',
          rootDir: __dirname,
        },
      },
    ],
  ],
};

can someone help me out? I am using next 15 app router and typescript

Lolhp0 commented 2 weeks ago

UPDATE (new issues)

ive made multiple changes and theres new issues now. let me start by providing codes.

Header.tsx

import React from 'react'
import * as stylex from "@stylexjs/stylex";

const Header = () => {
  return (
    <header {...stylex.props(styles.headerWidth, styles.headerHeight, styles.headerPosition, styles.headerZindex, styles.headerTop, styles.headerLeft, styles.headerRight)}>

    </header>
  )
}

const styles = stylex.create({
    headerWidth: {width: "100%"},
    headerHeight: {height: "60px"},
    headerPosition: {position: "sticky"},
    headerTop: {top: 0},
    headerLeft: {left: 0},
    headerRight: {right: 0},
    headerZindex: {zIndex: 9999},
})

export default Header

next.config.ts

import type { NextConfig } from "next";
import stylexPlugin from "@stylexjs/nextjs-plugin";

const nextConfig: NextConfig = {
  /* config options here */
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
  transpilePackages: ["@stylexjs/open-props"],
};
const __dirname = new URL(".", import.meta.url).pathname;

export default stylexPlugin({
  rootDir: __dirname,
})(nextConfig);

.babelrc.js

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

layout.tsx

import type { Metadata } from "next";
import "./globals.css";
import * as stylex from "@stylexjs/stylex";
import Script from "next/script";
import Header from "@/components/Header";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={``}>
        <div id="__jsx">
          <div dir="ltr">
            <div
              {...stylex.props(
                styles.fullWidth,
                styles.minHeightScreen,
                styles.systemFont,
                styles.display,
                styles.flexDir,
                styles.background,
                styles.color
              )}
            >
              <Header/>
              {children}
            </div>
          </div>
        </div>
      </body>
    </html>
  );
}

const styles = stylex.create({
  fullWidth: { width: "100%" },
  minHeightScreen: { minHeight: "100dvh" },
  systemFont: { fontFamily: "system-ui, sans-serif" },
  display: {display: "flex"},
  flexDir: {flexDirection: "column"},
  position: {position: "relative"},
  background: {background: "#000"},
  color: {color: "#fff"}
});

and page.tsx

import Image from "next/image";
import * as stylex from "@stylexjs/stylex";

export default function Home() {
  return (
    <>
        <h1 id="home-text" {...stylex.props(styles.font, styles.size, styles.underline)}>Hello WORLD</h1>
    </>
  );
}

const styles = stylex.create({
  font: {
    fontWeight: 800,
  },
  size: {
    fontSize: "3rem",
  },
  underline: {
    textDecoration: "underline"
  }
})

ISSUES

after running npm run build and pushing the changes in github, i hosted it on vercel. it's adding all the class names to the header and wherever styles are being used, but it's not applying the styles to those class names. At first i was confused so I decided to go to the sources tab to check the css file, and here's what it's looking like:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.x1bvjpef {
    text-decoration: underline
}

.x8cw2a4:not(#\#) {
    font-size: 3rem
}

.xuv8nkb:not(#\#) {
    font-weight: 800
}

meanwhile the

looks like this:

<header class="xh8yej3 xng8ra x7wzq59 x1q2oy4v x13vifvy xu96u03 x3m8u43"></header>

without any styles being applied.

the URL is: https://stylex-thsec.vercel.app. and the github repo is: https://github.com/Lolhp0/stylex_thsec

NOTE

I have run npm run build multiple times aswell as pushed many many changes to the github tho I dont think that would be causing any issues, just figured to state this.

nmn commented 2 weeks ago

Thanks for the github repo. I will investigate and let you know. As Next.js has been changing rapidly, the best solution might be to migrate to using the StyleX CLI instead of the next-plugin. I will make a PR to your repo with how to go about doing that.

It is a lot more reliable as long are you're not depending on external packages that themselves depend on StyleX. We will also be making further improvements to the CLI to make that even better.

It might also be useful to try using https://github.com/dwlad90/stylex-swc-plugin instead.

Lolhp0 commented 1 week ago

hello, thanks for the reply. I tried making a new blank project and it seems that everything is working fine. I dont know what the issue was with the old one yet. ill check out the swc plugin

nmn commented 1 week ago

@Lolhp0 the @stylexjs/next-plugin package hasn't been tested with Next 15 so it's possible somethings don't work consistently. It is also important to delete the .next folder before each new build to ensure it works correctly.

Going forward we recommend using the CLI for a Next.js project or the community SWC plugin.

Lolhp0 commented 1 week ago

Alright. also when will it be tested with next 15? because theres like many issues like when i try to define variables and use them in a class, it gives me an error that there should only be static styles in create() and I had followed the documentation on the site as well as used a seperate file for defining variables just like in the documentation. Aswell as it seems like stylex isnt really compatitable with pages router cuz it just wont apply the styles to the classes even tho its adding the class names. But that might just be a bug from stylex since as you said its not tested for Next15 yet.

nmn commented 1 week ago

@Lolhp0 as I said, please use the CLI instead of the Next plugin. StyleX is based on Babel and the Next team doesn't invest in the Babel+Webpack implementation as much and can run into various issues.

The CLI works for simple projects right now and will continue to get better in the coming weeks and will work with any Next version (as long as it is configured with an src/ folder).

See this PR for an example: https://github.com/facebook/stylex/pull/618

BjornHMS commented 1 week ago

I've been having the same issue. I've noticed that the first page that I load after running "yarn dev" always has all it's styles correctly loaded, and If i traverse from that page to any other page, everything works fine.

However, if I reload the page while on any other page than the first one I went to after "yarn dev" It has all it's classnames, but none of the style definitions.

Edit: I'm using Next v14.2

nmn commented 5 days ago

@BjornHMS are you ussing the next-plugin or the cli? We will be deprecating the next-plugin package in favour of the cli which should work more reliably.

If you see issues with the CLI, please create an issue with a small repro project so I can help debug.

facebook / stylex