[Bug]: Rspack lightningcss-loader not supporting vue :deep()

[lzxb]

System Info

System:
OS: macOS 15.1.1
CPU: (8) arm64 Apple M1
Memory: 98.61 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v22.11.0/bin/yarn
npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
pnpm: 9.15.0 - ~/.nvm/versions/node/v22.11.0/bin/pnpm
bun: 1.1.27 - ~/.bun/bin/bun
Browsers:
Safari: 18.1.1

Details

.faq-desc {
  background: red;
}
.faq-desc :deep(.ui-collapse)-item.expanded {
  border-bottom-width: 0;
}

.faq-desc :deep(.ui-collapse)-item-title {
  flex: 1;
  transition: all linear 0.4s;
}

.faq-desc :deep(.ui-collapse)-item-header {
  border: none;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 500;
  height: auto;
  align-items: flex-start;
}

.faq-desc :deep(.ui-collapse)-item-header:hover .fmui-collapse-item-title {
  transform: translate(8px);
}

.faq-desc :deep(.ui-collapse)-item-content {
  padding: 0;
  font-size: 14px;
  font-weight: 400;
}

.faq-desc :deep(.ui-collapse)-item-content>div {
  margin-bottom: 20px;
  padding-top: 10px;
}

Vue component CSS, lost after builtin:lightningcss-loader processing

Reproduce link

https://github.com/lzxb/rspack-vue-deep-error

Reproduce Steps

pnpm i
pnpm build

[lzxb]

be related to parcel-bundler/lightningcss#871

[GiveMe-A-Name]

According to parcel-bundler/lightningcss#871, The syntax like :deep(.ui-collapse)-item-content>div should handle by vue-loader firstly. Lightingcss can't handle the syntax

[1714080902120]

@lzxb hi, have you found a solution?

[jerrychan7]

@1714080902120 @lzxb There are two cases with different causes and solutions:

1. Write with less and its parent selectors:

   :deep(.your-class) {
     &-suffix {}
   }

   This will compile to:

   :deep(.your-class)-suffix {}

   This is because less directly replaces & with :deep(.your-class), so you need to avoid writing the prefix class name in the :deep selector. You can change it to:

   :deep(*).your-class {
     &-suffix {}
   }

2. Multiple parameters of deep:

   :deep(.your-class, .another-class) {
     &-suffix {}
   }

   It may be due to a bug in vue-style-loader that only the first parameter .your-class is retained, so the result of direct compilation is the same as case 1: :deep(.your-class)-suffix {}

   I tried the following:

   :deep(.a1), :deep(.b1) {}
   :deep(.a2, .b2) {}
   :deep(.a3) {}  :deep(.b3) {}
   :deep(*).a4, :deep(*).b4 {}
   :deep(*):where(.a5, .b5) {}
   :deep(:where(.a6, .b6)) {}

   This is divided into two cases:

   1. When the build target has any incompatible :is, Lightning CSS will generate:

      [scoped] .a1 {}  [scoped] .b1 {}
      [scoped] .a2 {}
      [scoped] .a3 {}  [scoped] .b3 {}
      [scoped] *.a4 {} [scoped] *.b4 {}
      [scoped] *:where(.a5, .b5) {}
      [scoped] :where(.a6, .b6) {}

   2. When building targets that are all compatible with :is, Lightning CSS will generate:

      [scoped]:is(:deep(.a1), :deep(.b1)) {}
      [scoped] .a2 {}
      [scoped] .a3 {}  [scoped] .b3 {}
      [scoped]:is(:deep(*).a4, :deep(*).b4) {}
      [scoped] *:where(.a5, .b5) {}
      [scoped] :where(.a6, .b6) {}

   If :deep is in a CSS pseudo-class, it will not be correctly converted to [scoped], which may also be caused by a bug in vue-style-loader.
   So the solution here is:

   :deep(*):where(.your-class, .another-class) {
     &-suffix {}
   }
   // or
   :deep(*):is(.your-class, .another-class) {
     &-suffix {}
   }

   Using :is has better compatibility, but it will increase the priority. You need to choose according to the situation.

[1714080902120]

@jerrychan7 Thanks! But this scheme may not be a good fit for me, as there are more than 700 places in the project that need to be checked😭. If I can find a way to adjust the order here, maybe this problem will be solved

[1714080902120]

it seems work well after i rewrote the code:

// vue-loader pitcher.js
        if (cssLoaderIndex > -1) {
            // if inlined, ignore any loaders after css-loader and replace w/ inline
            // loader
            const lightningcssLoaderIndex = loaders.findIndex((loader) => {
                return /builtin:lightningcss-loader/.test(loader.path);
            });
            const injectLoaders = lightningcssLoaderIndex > -1 ? [...loaders.splice(lightningcssLoaderIndex, lightningcssLoaderIndex + 1)] : [];

            const afterLoaders = query.inline != null
                ? [styleInlineLoaderPath]
                : loaders.slice(0, cssLoaderIndex + 1);
            const beforeLoaders = loaders.slice(cssLoaderIndex + 1);
            injectLoaders.push(stylePostLoaderPath);
            return genProxyModule([...afterLoaders, ...injectLoaders, ...beforeLoaders], context, !!query.module || query.inline != null, query.lang || 'css');
        }

Only rewrite the source code in vue-loader can work expectly.
I've tried to adjust the order with my custom loader, but unfortunately failed, vueStyleLoader was triggered because of lightningcss repeatedly, causing scopedId to be inserted twice😢.
I also want to use normalModuleFactory.hooks.beforeLoaders to adjust the loader order, but rspack doesn't expose this hooks.