Selector [contenteditable] is not pure. Issue with importing scss file

[oskaryil]

Describe the bug

I'm using sass in a Next.js React project. I'm unable to import the react-grid scss into my scss file.

$primary-color: #fff !default;

@import '@silevis/reactgrid/styles.csss';

Current behavior
It's giving me this error:

  156 | }
  157 | 
> 158 | [contenteditable] {
      |                                                 ^
  159 |   -webkit-user-select: text;
  160 |   user-select: text;
This error occurred during the build process and can only be dismissed by fixing the error.

Expected behavior
I'd like to override the scss variables to edit the styles of the react-grid component.

Screenshots or gifs

Your environment details

• Device: Desktop
• OS: macOS
• Browser: Chrome

[webloopbox]

@oskaryil I've checked this and importing the scss file in a nextjs project with the latest version of ReactGrid should work correctly. Could you provide a sandbox with the reproduced issue?

[oskaryil]

@oskaryil I've checked this and importing the scss file in a nextjs project with the latest version of ReactGrid should work correctly. Could you provide a sandbox with the reproduced issue?

Strange. I have a more or less clean project using this template https://github.com/theodorusclarence/ts-nextjs-tailwind-starter. Did you try importing the scss file inside your own scss file?

[webloopbox]

Strange. I have a more or less clean project using this template https://github.com/theodorusclarence/ts-nextjs-tailwind-starter.
Did you try importing the scss file inside your own scss file?

Yes, I have prepared a nextjs (14.2.0) template with the latest version of ReactGrid. Please take a look:
https://stackblitz.com/edit/yet-another-react-lightbox-nextjs-nfavno?file=package.json

[webloopbox]

@oskaryil Is this issue still relevant?

[Igormandello]

Hey there!

This might happen because "non-pure" selectors are not allowed inside module SCSS files. I had this issue when importing my <component>.module.scss inside the <component>.tsx file.

For me, the solution was pretty straightforward:

• Move your custom SCSS file to ./src/styles/reactgrid.scss
• Import it inside ./src/pages/_app.tsx

If you want to know why this happens, please take a look at this discussion

EDIT: If you don't want to import the custom variables globally, follow this approach.

[webloopbox]

Thanks for this thread. At the moment, reactgrid.scss contains one global selector, so it can't be imported as .module.scss due to constraints imposed by Next.js.

[MichaelMatejko]

I agree with the message on the screenshot with black background: add class to make it pure

[Igormandello]

@webloopbox Even though I found the usage of contenteditable in the code during the copy handler, I couldn't figure out where it's being applied. Do we really need it?

[webloopbox]

@Igormandello This selector was likely added with Safari browsers in mind. The most sensible approach would be to apply a CSS class to this.

[Igormandello]

@webloopbox I have implemented something really similar to #402 and while testing I noticed something:
We don't need to remove the [contenteditable], because in the end - if we want to import styles.scss inside a .module file - we will need to compensate the global class names using a :global selector inside the module class.

For example, one way of using it as a module could be:

// custom.module.scss

$primary-color: #4285f4;

.my-custom-module {
  :global {
    @import "@silevis/reactgrid/styles.scss";

   .rg-input {
      border: none;
    }
  }
}

and then, inside your component:

// Component.tsx

import style from "~/styles/custom.module.scss";

export default function Component() {
  return (
    <div className={style["my-custom-module"]}>
      {/* ReactGrid component */}
    </div>
  );
}

Even if we remove the [contenteditable] selector, the module will still not be pure unless we wrap it inside a custom class. If we wrap it inside a custom class, we don't need to remove the selector.

[oskaryil]

Hey there! This might happen because "non-pure" selectors are not allowed inside module SCSS files. I had this issue when importing my <component>.module.scss inside the <component>.tsx file.

For me, the solution was pretty straightforward:

• Move your custom SCSS file to ./src/styles/reactgrid.scss
• Import it inside ./src/pages/_app.tsx

If you want to know why this happens, please take a look at this discussion

Thanks! I just tried doing it this way and it works. I'll proceed with this workaround for now.