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

[BerkayAkgurgen]

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

`

{productStaticArray.map((item) => ( ))}

`

// 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

[BerkayAkgurgen]

The problem is resolved. You need to delete the .next file every time cuz of the cache.