Cannot import slick-theme from the slick-carousel package

[mgomulak]

Describe the bug

Working on a project which uses the slick-carousel package. As soon as i import slick-carousel/slick/slick-theme.scss an error is thrown.

  Plugin: vite:css
  File: .../node_modules/slick-carousel/slick/slick-theme.scss
  Error: expected ")".
     ╷
  24 │ @function slick-image-url(../../node_modules/slick-carousel/slick/$url) {
     │                           ^
     ╵
    node_modules/slick-carousel/slick/slick-theme.scss 24:27  @import
    src/styles/app.scss 1:9                                   root stylesheet
      at Object._newRenderError (.../node_modules/sass/sass.dart.js:13168:19)
      at Object._wrapException (...node_modules/sass/sass.dart.js:12994:16)
      at _render_closure1.call$2 (../node_modules/sass/sass.dart.js:81074:21)
      at _RootZone.runBinary$3$3 (.../node_modules/sass/sass.dart.js:27256:18)
      at _FutureListener.handleError$1 (.../node_modules/sass/sass.dart.js:25812:19)
      at _Future__propagateToListeners_handleError.call$0 (.../node_modules/sass/sass.dart.js:26110:49)
      at Object._Future__propagateToListeners (.../node_modules/sass/sass.dart.js:4536:77)
      at _Future._completeError$2 (.../node_modules/sass/sass.dart.js:25942:9)
      at _AsyncAwaitCompleter.completeError$2 (.../node_modules/sass/sass.dart.js:25596:12)
      at Object._asyncRethrow (.../node_modules/sass/sass.dart.js:4335:17)

The affected function

@function slick-image-url($url) {
    @if function-exists(image-url) {
        @return image-url($url);
    }
    @else {
        @return url($slick-loader-path + $url);
    }
}

[github-actions]

Hello @Eameija. Please provide a online reproduction by codesandbox or a minimal GitHub repository. Issues labeled by need reproduction will be closed if no activities in 3 days.

[mgomulak]

Reproduction

Minimal reproduction sandbox:

https://codesandbox.io/s/vite-slick-carousel-g36ci

[bluwy]

I'm able to reproduce this in Vite 2.8.6. It seems to be an issue where Vite isn't handling url concatenation properly. I'm getting an error like this:

  Plugin: vite:css
  File: /Users/bjorn/Work/repros/vite-slick-carousel/node_modules/.pnpm/slick-carousel@1.8.1/node_modules/slick-carousel/slick/slick-theme.scss
  Error: Expected digit.
     ╷
  29 │         @return url(node_modules/.pnpm/slick-carousel@1.8.1/node_modules/slick-carousel/slick/$slick-loader-path + $url);
     │                                   ^
     ╵
    node_modules/.pnpm/slick-carousel@1.8.1/node_modules/slick-carousel/slick/slick-theme.scss 29:35  @import
    test.scss 1:9                                                                                     root stylesheet
      at Object.wrapException (/Users/bjorn/Work/repros/vite-slick-carousel/node_modules/.pnpm/sass@1.49.9/node_modules/sass/sass.dart.js:1254:17)
      at Object.throwWithTrace0 (/Users/bjorn/Work/repros/vite-slick-carousel/node_modules/.pnpm/sass@1.49.9/node_modules/sass/sass.dart.js:22810:15)
      at ScssParser0.wrapSpanFormatException$1$1 (/Users/bjorn/Work/repros/vite-slick-carousel/node_modules/.pnpm/sass@1.49.9/node_modules/sass/sass.dart.js:88518:13)
      at ScssParser0.wrapSpanFormatException$1 (/Users/bjorn/Work/repros/vite-slick-carousel/node_modules/.pnpm/sass@1.49.9/node_modules/sass/sass.dart.js:88524:19)
      at ScssParser0.parse$0 (/Users/bjorn/Work/repros/vite-slick-carousel/node_modules/.pnpm/sass@1.49.9/node_modules/sass/sass.dart.js:92239:19)
      at Object.Stylesheet_Stylesheet$parse0 (/Users/bjorn/Work/repros/vite-slick-carousel/node_modules/.pnpm/sass@1.49.9/node_modules/sass/sass.dart.js:22198:56)
      at /Users/bjorn/Work/repros/vite-slick-carousel/node_modules/.pnpm/sass@1.49.9/node_modules/sass/sass.dart.js:69162:63
      at _wrapJsFunctionForAsync_closure.$protected (/Users/bjorn/Work/repros/vite-slick-carousel/node_modules/.pnpm/sass@1.49.9/node_modules/sass/sass.dart.js:3737:15)
      at _wrapJsFunctionForAsync_closure.call$2 (/Users/bjorn/Work/repros/vite-slick-carousel/node_modules/.pnpm/sass@1.49.9/node_modules/sass/sass.dart.js:27919:12)
      at _awaitOnObject_closure.call$1 (/Users/bjorn/Work/repros/vite-slick-carousel/node_modules/.pnpm/sass@1.49.9/node_modules/sass/sass.dart.js:27907:32)

There seems to be a PR to potentially fix it upstream kenwheeler/slick#4146

[sapphi-red]

Closing as it is organized into #7651.