Not working @stylexjs/postcss-plugin: 0.10.0 (@property style error)

[bog2an]

Hi !) help plz)
Doesn't want to pass variables var(--1u5tued) in @stylexjs/postcss-plugin: 0.10.0.
"next": "14.2.21",

<a href={`tel:${phone}`} {...stylex.props([styles.phoneIcon(isMenuVisible, headerType)])}>
  <PhoneIcon />
</a>

import { colors } from '@/shared/tokens/colors.stylex';
import * as stylex from '@stylexjs/stylex';

export const styles = stylex.create({
  phoneNumber: (isClicked: boolean) => ({
    cursor: 'pointer',
    color: isClicked ? colors.secondaryInverseText : colors.primaryIcon,
    textDecoration: 'none',
    fontWeight: 300,
    display: {
      default: 'flex',
      '@media (max-width: 767px)': 'none',
    },
    alignItems: 'center',
  }),
  phoneIcon: (isClicked: boolean, headerType: string) => ({
    fill: 'none',
    display: 'none',
    '@media (max-width: 767px)': {
      ':not(#__unused__) > svg': {
        width: headerType === 'selection' ? '6.666rem' : '8.533rem',
        height: headerType === 'selection' ? '6.666rem' : '8.533rem',
        stroke: isClicked ? '#fff' : colors.primaryIcon,
      },
      textDecoration: 'none',
      display: 'flex',
      alignItems: 'center',
      cursor: 'pointer',
    },
  }),
  comagicPhone: {},
});

initial-value: "*"; - It should be 8.533rem. This code works in "@stylexjs/postcss-plugin": "0.10.0-beta.2".

package.json:

"dependencies": {
    "@stylexjs/stylex": "^0.10.0",
    "@stylexjs/open-props": "^0.10.0",
    ...
}
"devDependencies": {
    "@babel/cli": "^7.25.7",
    "@babel/core": "^7.25.8",
    "@babel/eslint-parser": "^7.25.8",
    "@babel/plugin-syntax-flow": "^7.25.7",
    "@babel/preset-env": "^7.25.8",
    "@babel/preset-flow": "^7.25.7",
    "@babel/preset-react": "^7.25.7",
    "@babel/preset-typescript": "^7.25.7",
    "@babel/template": "^7.25.7",
    "@babel/types": "^7.25.8",
    "@stylexjs/eslint-plugin": "^0.10.0",
    "@stylexjs/postcss-plugin": "0.10.0",
    ...
}

[bog2an]

postcss.config.js

const fs = require('fs');
const path = require('path');

const projectRoot = __dirname;
const monorepoRoot = path.join(projectRoot, '../../');

function getPackageIncludePaths(packageName, nodeModulePaths) {
  let packagePath = null;

  for (const nodeModulePath of nodeModulePaths) {
    const packageJsonPath = path.resolve(nodeModulePath, packageName, 'package.json');
    if (fs.existsSync(packageJsonPath)) {
      packagePath = path.dirname(packageJsonPath);
      break;
    }
  }
  if (!packagePath) {
    throw new Error(`Could not find package ${packageName}`);
  }

  return [path.join(packagePath, '**/*.{js,mjs}'), '!' + path.join(packagePath, 'node_modules/**/*.{js,mjs}')];
}

const openPropsIncludePaths = getPackageIncludePaths('@stylexjs/open-props', [
  path.join(projectRoot, 'node_modules'),
  path.join(monorepoRoot, 'node_modules'),
]);

// The existing @stylexjs/nextjs-plugin will be deprecated in the next release.
// https://stylexjs.com/blog/v0.10.0/#easier-adoption-with-the-all-new-postcss-plugin
module.exports = {
  plugins: {
    '@stylexjs/postcss-plugin': {
      include: ['app/**/*.{js,jsx,ts,tsx}', 'src/**/*.{js,jsx,ts,tsx}', ...openPropsIncludePaths],
      useCSSLayers: false,
    },
    autoprefixer: {},
  },
};

.babelrc.js

const path = require('path');
module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      '@stylexjs/babel-plugin',
      // See all options in the babel plugin configuration docs:
      // https://stylexjs.com/docs/api/configuration/babel-plugin/
      {
        dev: process.env.NODE_ENV === 'development',
        genConditionalClasses: true,
        treeshakeCompensation: true,
        aliases: {
          '@/*': [path.join(__dirname, './src/*')],
        },
        unstable_moduleResolution: {
          type: 'commonJS',
          rootDir: path.join(__dirname, '../..'),
        },
      },
    ],
  ],
};

[nonzzz]

operate system?

[bog2an]

Mac ARM

[necolas]

Please post this as an issue, not a discussion. Thanks

[nmn]

This issue is fixed in #863. Will release a patch release with the fix later today.