[BUG] media queries not working on production build

[Mikescops]

Describe the bug

Hello @Dwlad90,

I'm struggling with a simple thing, I'm using a media query to conditionally display an element

elemet: {
        display: {
            default: 'flex',
            '@media (max-width: 768px)': 'none'
        }
}

On dev it works perfectly but whenever I build for production this style is completely absent from the build. I inspected the generated css file and could not find it.

I'm using "@stylexjs/stylex": "0.10.1" if that matters.

Error stack

None

OS

No response

Browser

No response

Compiler version

"@stylexswc/unplugin": "0.6.6"

Bundler plugin(s) version

"@stylexswc/unplugin": "0.6.6"

To Reproduce

1. Add a media query to an element
2. Build for production
3. See the result

Provide link to a repository with a minimal reproduction case.

No response

Additional information

• I have checked with the latest version

[Dwlad90]

Hi @Mikescops,

Unfortunately, I was unable to reproduce the bug according to the instructions.

I added styles to the demo application @stylexswc/vite-unplugin-example and built in prod mode(as well as in dev mode). The styles were generated and applied to the element without problems.

Could you provide a little more information on how to reproduce the incorrect behavior of the plugin?

[Mikescops]

Yep so I tried to reproduce extensively on your demo, and I couldn't figure out how to reproduce.

I could fix the issue on my initial project, I think it is because I tried to be smart and wanted to make a helper to merge parent styles inside components coming from the design-system.

Here is the code I made:

import React from "react";
import stylex, { type StyleXStyles } from "@stylexjs/stylex";

/** Base component interface */
export interface BaseComponent {
    /** Function to apply all styles */
    stylesFn: typeof stylex.props;
}

export type WithStylesProps<P extends BaseComponent> = Omit<P, "stylesFn"> & {
    styles?: StyleXStyles[];
};

/**
 * HOC to inject stylesFn into components while supporting HMR
 */
export function withStyles<P extends BaseComponent>(Component: React.ComponentType<P>) {
    const WrappedComponent = React.forwardRef<React.ComponentProps<React.ComponentType<P>>, WithStylesProps<P>>(
        (props, ref) => {
            const {
                styles: additionalStyles = [],
                children,
                ...restProps
            } = props as WithStylesProps<P> & React.PropsWithChildren<unknown>;

            const mergedStyles = (...baseStyles: StyleXStyles[]) => stylex.props(...baseStyles, ...additionalStyles);

            return (
                <Component
                    {...(restProps as P)} // Cast to P to ensure compatibility
                    stylesFn={mergedStyles}
                    ref={ref} // Forward ref compatibility
                >
                    {children}
                </Component>
            );
        }
    );

    // Set a display name for better debugging
    WrappedComponent.displayName = `withStyles(${Component.displayName || Component.name || "Component"})`;

    return WrappedComponent;
}

And I was using it that way:

export interface TextProps extends BaseComponent {
    /** Unique key for the text */
    id?: string;
    /** Text size */
    size?: keyof typeof sizeVariant;
    /** Whether to remove the margin */
    noMargin?: boolean;
    /** Text title */
    title?: string;
    /** Text content */
    children: React.ReactNode;
    /** Tab index for focus */
    tabIndex?: number;
}

/** A simple text component */
const TextComponent = ({ size = "medium", noMargin, title, id, children, tabIndex, stylesFn }: TextProps) => {
    const baseStyles = [localStyles.text, sizeVariant[size], noMargin ? localStyles.noMargin : null];

    return (
        <p {...stylesFn(baseStyles)} title={title} id={id} tabIndex={tabIndex}>
            {children}
        </p>
    );
};

export const Text = withStyles(TextComponent);

So I could do things like this:

<Text styles={[localStyles.link, localStyles.linkDropdown]} noMargin tabIndex={0}>

For some reason, that i can't figure out for now, if display was set to 'flex' in the original Text component and if I add display with media queries (with the default: xxx, '@media': xxx syntax) the extra style never gets applied. Otherwise my solution was working fine so far.

Anyway I went back to the less sexy solution of merging manually the extra styles coming from parent and everything works just fine.

Thanks for checking and sorry to have made you lose some time here.

[Dwlad90]

No problem🙂 I'll close this issue then, we'll reopen it if necessary.