Invalid CSS breaks survey-core with NextJS 15

[iotashan]

survey-creator/packages/survey-creator-core/src/components/simulator.scss

Line 70 in f33bd23

::i-block-chrome,

::i-block-chrome is not valid CSS, and breaks if you try to use survey-creator-react with Next.js 15

import 'survey-creator-core/survey-creator-core.min.css';

Unsupported pseudo class or element: i-block-chrome

[tsv2013]

This was done to fix the surveyjs/survey-library#5507 issue
And reserve place for scroll bar in safari - e28ef3c

[tsv2013]

@iotashan Probably you can setup to skip this rule check for this code, or for the whole survey-creator-core.min.css file

[JaneSjs]

Hello @iotashan,
I created a fresh NextJS 15 application (v15.0.3). Please download it at
next-15.zip. I successfully ran the npm run dev and npm run build commands and didn't get the mentioned error.
Please try the demo on your end and clarify how to reproduce the issue.

Thanks

[ojkaas]

I also get the same error, tried the demo project and that works, set the package version to the same versions in my project, but then I get the same error. Will try to see if I can create something reproducible but the current project I cannot easily share. Any tips in the meantime how I could skip this check?

[JaneSjs]

Hello Everyone,
@ojkaas, thank you for contacting us. I would appreciate it if you could recreate this issue on a sample demo and share it for research. In the meantime, you can try to suppress this warning using the following options.

In Next.js, you can configure PostCSS to ignore non-standard CSS rules. Add or modify your postcss.config.js as follows:

module.exports = {
  plugins: {
    'postcss-custom-properties': {}, // Include other plugins as needed
    'postcss-preset-env': {
      stage: 0,
      features: {
        'custom-selectors': false, // Disable optimizations for non-standard selectors
      },
    },
  },
};

Alternatively, modify your Webpack configuration in next.config.js to suppress CSS warnings related to ::i-block-chrome.

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'css-loader',
          options: {
            warn: false, // Suppress CSS warnings
          },
        },
      ],
    });
    return config;
  },
};

I hope that either option can help you.