[BUG] import "@mdxeditor/editor/style.css"; with webpack

[greyblake]

Thanks for the great work! I'm trying out it, unfortunately I am getting errors as I import styles:

import "@mdxeditor/editor/style.css";

ERROR in ../../node_modules/.pnpm/@mdxeditor+editor@2.20.7_@codemirror+language@6.10.2_@lezer+common@1.2.1_@lezer+highlight@1.2_5uao62zhhvnofl6cqyupgxc6jm/node_modules/@mdxeditor/editor/dist/style.css (../../node_modules/.pnpm/@mdxeditor+editor@2.20.7_@codemirror+language@6.10.2_@lezer+common@1.2.1_@lezer+highlight@1.2_5uao62zhhvnofl6cqyupgxc6jm/node_modules/@mdxeditor/editor/dist/style.css.webpack[javascript/auto]!=!../../node_modules/.pnpm/css-loader@6.7.3_webpack@5.76.0_@swc+core@1.3.22_webpack-cli@5.0.1_/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/less-loader@11.1.0_less@4.1.3_webpack@5.76.0_@swc+core@1.3.22_webpack-cli@5.0.1_/node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../node_modules/.pnpm/@mdxeditor+editor@2.20.7_@codemirror+language@6.10.2_@lezer+common@1.2.1_@lezer+highlight@1.2_5uao62zhhvnofl6cqyupgxc6jm/node_modules/@mdxeditor/editor/dist/style.css)
Module build failed (from ../../node_modules/.pnpm/less-loader@11.1.0_less@4.1.3_webpack@5.76.0_@swc+core@1.3.22_webpack-cli@5.0.1_/node_modules/less-loader/dist/cjs.js):

:is(._tableEditor_13kqw_664>tbody>tr>td:not(._toolCell_13kqw_675),._tableEditor_13kqw_664>tbody>tr>th:not(._toolCell_13kqw_675):not(:last-of-type))>div {
                                                               ^
Missing closing ')'

I've checked out https://github.com/webpack/webpack/issues/8814#issuecomment-677828996, unfortunately adding sideEffects: true, does not help.

Context

• Tried both versions 2.x.x and 3.x.x
• Webpack 5.28.0
• React 18.0.4

Any ideas?

UPDATE: It works with "@mdxeditor/editor": "^1.14.1"

[petyosi]

As far as I can tell, the above refers to this part: https://github.com/mdx-editor/editor/blob/4035c3e23e674d588af9e82d978b4afb74035473/src/styles/ui.module.css#L724-L741

In its bundled form, this looks like this:

:is(._tableEditor_uazmk_713>tbody>tr>td:not(._toolCell_uazmk_724),._tableEditor_uazmk_713>tbody>tr>th:not(._toolCell_uazmk_724):not([data-tool-cell="true"]))>div {
      outline: none;
    }

:is(._tableEditor_uazmk_713>tbody>tr>td:not(._toolCell_uazmk_724),._tableEditor_uazmk_713>tbody>tr>th:not(._toolCell_uazmk_724):not([data-tool-cell="true"]))>div>p {
        margin: 0;
      }

I can't spot an invalid nested parenthesis here, do you see a problem?

[greyblake]

@petyosi Thanks for the quick reply.

I cannot spot anything wrong neither.

I wonder if there are also other people who ran into this issue, so far it does not look so.

[petyosi]

At this point there's not much that I can do here. If you discover something that can be done on the package side, let me know.

[greyblake]

I found what was the real issue, it was our webpack configuration, in particular less-loader.