'picker' is not recognized as a valid pseudo-element. Did you mean ':picker' (pseudo-class) or is this a typo?

[sakib412]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/9n5kry

To Reproduce

I was trying to customise select element (https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select#opting_in_to_the_custom_select_rendering)

If I add this in my css

select,
::picker(select) {
  appearance: base-select;
}

Turbopack is throwing an error 'picker' is not recognized as a valid pseudo-element. Did you mean ':picker' (pseudo-class) or is this a typo?

But if I run the same code without turbopack then everything is fine. This is only happening in turbopack.

Current vs. Expected behavior

This error is currently happening only in turbopack.

Expected to be work on both webpack and turbopack.

Provide environment information

Operating System: Macbook pro m2 chip
Binaries:
  Node: 22.14.0
  pnpm: 10.10.0
Relevant Packages:
  next: 15.4.0-canary.23
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: 
import type {NextConfig} from 'next';

import createNextIntlPlugin from '@ezy/i18n/plugin';
import NextBundleAnalyzer from '@next/bundle-analyzer';

const nextConfig: NextConfig = {
  assetPrefix: '/launch-builder',
  transpilePackages: ['@ezy/builder', '@ezy/ui'],
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'somecdn.b-cdn.net',
      },
    ],
  },
  reactStrictMode: false,
  poweredByHeader: false,
  typescript: {
    ignoreBuildErrors: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.txt$/,
      type: 'asset/source',
    });
    return config;
  },
  experimental: {
    optimizePackageImports: ['@ezy/builder', '@ezy/ui'],
    nodeMiddleware: true,
  },
  turbopack: {
    rules: {
      '*.txt': {
        loaders: ['raw-loader'],
        as: '*.js',
      },
    },
  },
};

const withBundleAnalyzer = NextBundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
});
const withNextIntl = createNextIntlPlugin();

export default withBundleAnalyzer(withNextIntl(nextConfig));

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

This is also happening in stable version. 15.3.1

[mischnic]

Once LightningCSS does a new release with parcel-bundler/lightningcss#957, we can do a version bump in Next.js and this will work.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.