Issue with Setting height: 100vh in stylex.create() Not Reflecting in Browser

[yonatan2703]

Title: Issue with Setting height: 100vh in stylex.create() Not Reflecting in Browser

Environment:

• Operating System: Ubuntu 22.04 (WSL)
• Next.js Version: 14.0.2
• Stylex Version: 0.3.0
• Webpack Version: (Included with Next.js)

Description: I'm experiencing a problem where setting height: 100vh in stylex.create() is not being reflected in the browser. Despite correctly implementing the Stylex syntax for defining styles, the specified height does not appear to be applied to the elements.

Example of the implementation:

import * as stylex from "@stylexjs/stylex";

export const styles = stylex.create({
    fullHeightContainer: {
        height: "100vh",
        // other styles...
    },
});

Steps to Reproduce:

1. Define a style in a Stylex style file using stylex.create() with height: "100vh".
2. Apply the style to a component in a Next.js project.
3. Run the project and observe the component in a web browser.

Expected Result: The element should have a height that covers 100% of the viewport height.

Actual Result: The element does not cover 100% of the viewport height. Inspecting the element in the browser's developer tools reveals that the height: 100vh style is not being applied.

Additional Information:

• Other styles defined in the same stylex.create() block are applied correctly.
• There is no console error or warning indicating a problem with the Stylex implementation.

I'm looking for guidance on whether this is a known issue or if there's a specific way to handle viewport height units in Stylex that I might have missed. Any help or pointers would be greatly appreciated.

Thanks for your assistance, Samplead Team

[timwehrle]

Hey! I haven't had any problems using 100vh. Are you sure there are no conflicting styles causing discrepancies? Is the class present but the style not applied? Or the other way around? Can you show how you implement the style?

[yonatan2703]

import { staticSpacing } from "@/themes/static-spacing.stylex";
import * as stylex from "@stylexjs/stylex";

export const styles = stylex.create({
    root: () => ({
        display: "flex",
        padding: staticSpacing.spacing0,
        alignItems: "flex-start",
        gap: staticSpacing.spacing0,
        height: "100vh",

        borderRadius: staticSpacing.radiusNone,
        background: "#ffffff",
    }),
});

This style is in a server component:

import SidePanel from "@/components/organism/side-panel";
import Messenger from "@/components/organism/messenger";
import * as stylex from "@stylexjs/stylex";
import { styles } from "./styles";

export default async function Page({
    params,
    searchParams,
}: {
    params: { slug: string };
    searchParams: { [key: string]: string | string[] | undefined };
}) {
    return (
        <div {...stylex.props(styles.root())}>
            <SidePanel />
            <Messenger />
        </div>
    );
}

This is the styles of the element when using 100vh:

And here with height: 100%

The reason for using it as a dynamic style is because of the issue with the import allias in next and TS

[timwehrle]

Have you tried using the code in the Next.js example? Or am I missing something because of the issue you're referring to with Next.js import alias and TS?

If this does not solve the problem, would you mind sharing a minimally reproducible example?

import { staticSpacing } from "@/themes/static-spacing.stylex";
import stylex from "@stylexjs/stylex";

export const styles = stylex.create({
    root:  {
        display: "flex",
        padding: staticSpacing.spacing0,
        alignItems: "flex-start",
        gap: staticSpacing.spacing0,
        height: stylex.firstThatWorks("100svh", "100vh"), // I like the svh more because of the better mobile experience ;)
        borderRadius: staticSpacing.radiusNone,
        background: "#ffffff",
    },
});

import SidePanel from "@/components/organism/side-panel";
import Messenger from "@/components/organism/messenger";
import stylex from "@stylexjs/stylex";
import { styles } from "./styles";

export default async function Page({
    params,
    searchParams,
}: {
    params: { slug: string };
    searchParams: { [key: string]: string | string[] | undefined };
}) {
    return (
        <div {...stylex.props(styles.root)}>
            <SidePanel />
            <Messenger />
        </div>
    );
}

[nmn]

@yonatan2703 Is that the exact code you're using? Can you also share the class names applied on the div and the generated CSS file?

[yonatan2703]

I believe the issue was caused by a combination of using the webpack plugin for nextjs and dynamic styles, so I don't think this issue is relevant due to a faulty configuration.

[nmn]

NOTE: height: stylex.firstThatWorks("100svh", "100vh"). There are some older browsers that try to apply svh and fail. You may have run into that and you won't see the problem if you use 100vh directly.

A workaround for this is as follows:

const styles = stylex.create({
  foo: {
    height: {
      default: '100vh',
      '@supports (height: 100svh)': '100svh',
    },
  }
});

For whatever reason, using @supports rules works correctly in these older browsers.