I can't make changes to the interface (next.js & react)

Describe the issue

The css codes I wrote do not appear in the interface. The strange thing is that sometimes everything is fine and sometimes all the styles disappear. This is how it looks on the console

// designs.stylex.js ` import * as stylex from '@stylexjs/stylex'; export const DARK = '@media (prefers-color-scheme: dark)';

export const color = stylex.defineVars({ none: 'none', primary: '#FF3674', secondary: '#5A15B4', tertiary: '#5AEAB9', white: '#ffffff', xxxLightGray: '#F7F7F7', xxLightGray: '#EBEBEB', xLightGray: '#DDDDDD', lightGray: '#B0B0B0', gray: '#717171', extraLightGray: '#A2A2A2', darkGray: '#33383b', xDarkGray: '#222222', xxDarkGray: '#1B1B1B', xxxDarkGray: '#151515', black: '#000000', secureGreen: '#00BF6C', primaryGradient: 'linear-gradient(270deg, #BE008F 0%, #FF304E 100%)', secondaryGradient: 'linear-gradient(90deg, #59086E 0%, #460479 50%, #440589 100%)', }); export const fontColor = stylex.defineVars({ white: color.white, light: color.lightGray, lightGray: color.extraLightGray, gray: color.gray, dark: color.xDarkGray, black: color.black, primary: color.primary, secondary: color.secondary, });

export const tokens = stylex.defineVars({ fontSizeM: '1rem', fontSizeL: '2rem', spaceM: '16px', spaceL: '20px', });

export const width = stylex.defineVars({ oneOfThird: '33%', half: '50%', full: '100%', screen: '100vw', });

export const gaps = stylex.defineVars({ xs: '8px', sm: '12px', md: '14px', lg: '28px', xl: '40px', });

export const fontSize = stylex.defineVars({ xxs: '11px', xs: '12px', s: '14px', m: '16px', l: '18px', xl: '22px', xxl: '26px', xxxl: '32px', });

export const padding = stylex.defineVars({ none: '0px', xxs: '2px', xs: '4px', s: '8px', m: '12px', l: '16px', xl: '32px', xxl: '64px', });

export const buttonPadding = stylex.defineVars({ xxs: '8px 14px', xs: '10px 18px', s: '11px 20px', m: '12px 22px', l: '13px 23px', xl: '14px 24px', xxl: '16px 28px', });

export const iconSize = stylex.defineVars({ s: '16px', m: '24px', l: '32px', });

export const height = stylex.defineVars({ oneOfThird: '33%', half: '50%', full: '100%', screen: '100vh', });

export const spacing = stylex.defineVars({ none: '0px', xs: '4px', s: '8px', m: '12px', l: '16px', xl: '28px', xxl: '48px', xxxl: '96px', });

export const borderRadius = stylex.defineVars({ none: '0px', xxs: '2px', xs: '4px', s: '8px', m: '12px', l: '16px', xl: '24px', xxl: '32px', full: '100px', });

export const boxShadow = stylex.defineVars({ light: '0px 2px 4px rgba(0, 0, 0, 0.1)', medium: '0px 4px 8px rgba(0, 0, 0, 0.1)', dark: '0px 8px 16px rgba(0, 0, 0, 0.1)', });

export const fontWeight = stylex.defineVars({ light: '300', regular: '400', medium: '500', semiBold: '600', }); // styles.ts import * as stylex from '@stylexjs/stylex'; import { borderRadius, color, fontColor, fontSize, gaps, height, spacing, width, } from '../../config/designs.stylex';

export const stylesItem = stylex.create({ image: { borderRadius: borderRadius.s, height: '320px', width: '320px', objectFit: 'cover', }, avatar: { display: 'flex', alignItems: 'center', gap: 0 ${gaps.xs}, marginBottom: spacing.s, fontSize: fontSize.xs, color: fontColor.gray, }, flex: { display: 'flex', justifyContent: 'center', alignItems: 'center', }, cardBodyWrapper: { position: 'relative', display: 'flex', width: width.full, height: height.full, flexDirection: 'column', borderRadius: borderRadius.s, }, pin: { position: 'absolute', right: '8px', top: '8px', zIndex: 20, }, cardFooterWrapper: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between', flexGrow: 1, margin: ${spacing.s} ${spacing.m} 0 ${spacing.s}, }, likeWrapper: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }, price: { fontSize: fontSize.s, color: fontColor.dark, margin: 0, }, likeButton: { cursor: 'pointer', }, svg: { fill: { ':hover': color.primary, }, }, brand: { marginTop: spacing.xs, display: 'inline-flex', alignItems: 'center', fontSize: fontSize.xs, color: fontColor.gray, }, parsedBadgeWrapper: { position: 'absolute', right: 0, left: 0, bottom: 0, display: 'flex', borderBottomRightRadius: borderRadius.s, borderBottomLeftRadius: borderRadius.s, }, parsedBadgeLeft: { display: 'flex', height: spacing.xl, width: width.half, alignItems: 'center', justifyContent: 'center', backgroundColor: color.white, opacity: 0.9, }, badgeLeftText: { fontSize: fontSize.xs, color: fontColor.gray, }, parsedBadgeRight: { display: 'flex', height: spacing.xl, width: width.half, alignItems: 'center', justifyContent: 'center', background: color.extraLightGray, opacity: 0.7, }, badgeRightText: { fontSize: fontSize.xs, color: fontColor.white, whiteSpace: 'nowrap', }, }); `

My code which I applied stylex

` <section {...stylex.props(styles.wrapper)}> <div {...stylex.props(styles.itemWrapper)}> {productStaticArray.map((item) => (

    ))}
  </div>
</section>

// next.config.js ` /* @type {import('next').NextConfig} / const stylexPlugin = require('@stylexjs/nextjs-plugin'); const nextConfig = { images: { remotePatterns: [ { protocol: 'xxx', hostname: 'images.xxxx.com', }, ], }, };

module.exports = stylexPlugin({ filename: 'stylex-bundle.css', rootDir: __dirname, useCSSLayers: true, })(nextConfig);

Expected behavior

The codes I wrote need to be implemented in a stable way

Steps to reproduce

"dependencies": { "@formatjs/intl-localematcher": "^0.5.0", "@stylexjs/babel-plugin": "^0.5.1", "@stylexjs/nextjs-plugin": "^0.5.1", "@stylexjs/open-props": "^0.5.1", "@stylexjs/stylex": "^0.5.1", "@stylexjs/webpack-plugin": "^0.5.1", "geist": "^1.1.0", "negotiator": "^0.6.3", "next": "14.0.1", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/negotiator": "^0.6.3", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.1", "postcss": "^8", "prettier": "^3.1.0", "prettier-plugin-organize-imports": "^3.2.3", "typescript": "^5" }

Test case

No response

Additional comments

No response

facebook / stylex