Next.js Typescript Compilation Warning

🐛 Bug Report

I got a postcss error while using react-spectrum with Next.js 12 & Typescript.

🤔 Expected Behavior

There shouldn’t be any warning or errors.

😯 Current Behavior

Error prevents the UI from re-rendering with new styles.

wait  - compiling / (client and server)...
warn  - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/@react-spectrum/breadcrumbs/dist/main.css
Warning

(1:83) postcss-preset-env: start value has mixed support, consider using flex-start instead

🔦 Context

Trying to test out react spectrum components with Next.js 12 and typescript.

💻 Code Sample

_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  const { locale } = useLocale();
  return (
    <SSRProvider>
      <Provider theme={lightTheme} locale={locale}>
        <Component {...pageProps} />
      </Provider>
    </SSRProvider>
  );
}

next.config.js

const withTM = require('next-transpile-modules')([
  '@adobe/react-spectrum',
  ...
]);

module.exports = withTM({
  reactStrictMode: true,
});

🌍 Your Environment

Software	Version(s)
react-spectrum	^3.15.0
Browser	Chrome@latest
Operating System	MacOs M1

[snowystinger]

ok, I took a look, here it is working https://codesandbox.io/s/relaxed-hoover-45cut?file=/pages/_app.tsx

you’ve conflated colorScheme and theme for your provider props, see https://react-spectrum.adobe.com/react-spectrum/Provider.html#themes

[hamidihekmat]

ok, I took a look, here it is working https://codesandbox.io/s/relaxed-hoover-45cut?file=/pages/_app.tsx

you’ve conflated colorScheme and theme for your provider props, see https://react-spectrum.adobe.com/react-spectrum/Provider.html#themes

Oh I see, I cloned the repo that @reidbarber provided. I hope they fix the warning issues in the next update regarding postcss-preset-env

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/@react-spectrum/breadcrumbs/dist/main.css
Warning

(1:745) postcss-preset-env: start value has mixed support, consider using flex-start instead