Unable to compile BluePrint v5 SCSS

[JoeDuncko]

Follow up to #6051 as per #6051 (comment), as I don't think a new issue was ever created.

Environment

• Package version(s):
  • node: v20.10.0
  • "vite": "^5.0.12",
  • "@blueprintjs/core": "5.8.2"
  • "@blueprintjs/node-build-scripts": "9.2.1"
  • "sass": "^1.70.0"
• Operating System: macOS 14.3.1 (23D60)
• Browser name and version: Chrome 122.0.6261.69

Steps to reproduce

I did my best to follow along with the instructions at https://blueprintjs.com/docs/#core/classes.namespacing (though, note that the scss files no longer seem to live in /lib/scss, but in /core/src), along with the Vite-specific modifications at #5297 (comment) .

// App.tsx

import "@blueprintjs/core/src/blueprint.scss";

[rest of app here]

// vite.config.js

import {
    sassNodeModulesLoadPaths,
    sassSvgInlinerFactory,
} from "@blueprintjs/node-build-scripts";

const config = ({ mode }) => {
    return defineConfig({
       ...
        css: {
            devSourcemap: true,
            preprocessorOptions: {
                scss: {
                    functions: {
                        "svg-icon($path, $selectors: null)":
                            sassSvgInlinerFactory(
                                join(__dirname, "/src/icons"),
                                { optimize: true, encodingFormat: "uri" }
                            ),
                    },
                    loadPaths: sassNodeModulesLoadPaths,
                },
            },
        },
    });
};

export default config;

/resources/icons are copied to /src/icons.

Actual behavior

When running npm run build I get the following error:

[vite:css] [sass] [object Promise] must be a Sass value type.
   ╷
39 │       background: svg-icon("16px/chevron-right.svg", (path: (fill: $pt-icon-color)));
   │                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@blueprintjs/core/src/components/breadcrumbs/_breadcrumbs.scss 39:19  @import
  node_modules/@blueprintjs/core/src/components/_index.scss 5:9                      @import
  node_modules/@blueprintjs/core/src/blueprint.scss 18:9                             root stylesheet
file: /Users/joeduncko/Documents/GitHub/greenfield/frontend/node_modules/@blueprintjs/core/src/blueprint.scss
Error: [object Promise] must be a Sass value type.
   ╷
39 │       background: svg-icon("16px/chevron-right.svg", (path: (fill: $pt-icon-color)));
   │                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@blueprintjs/core/src/components/breadcrumbs/_breadcrumbs.scss 39:19  @import
  node_modules/@blueprintjs/core/src/components/_index.scss 5:9                      @import
  node_modules/@blueprintjs/core/src/blueprint.scss 18:9                             root stylesheet
error during build:
Error: [object Promise] must be a Sass value type.
   ╷
39 │       background: svg-icon("16px/chevron-right.svg", (path: (fill: $pt-icon-color)));
   │                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@blueprintjs/core/src/components/breadcrumbs/_breadcrumbs.scss 39:19  @import
  node_modules/@blueprintjs/core/src/components/_index.scss 5:9                      @import
  node_modules/@blueprintjs/core/src/blueprint.scss 18:9                             root stylesheet
    at Object.wrapException (/Users/joeduncko/Documents/GitHub/greenfield/frontend/node_modules/sass/sass.dart.js:2119:43)
    at Object.unwrapValue (/Users/joeduncko/Documents/GitHub/greenfield/frontend/node_modules/sass/sass.dart.js:30225:15)
    at /Users/joeduncko/Documents/GitHub/greenfield/frontend/node_modules/sass/sass.dart.js:102081:49
    at _wrapJsFunctionForAsync_closure.$protected (/Users/joeduncko/Documents/GitHub/greenfield/frontend/node_modules/sass/sass.dart.js:4899:15)
    at _wrapJsFunctionForAsync_closure.call$2 (/Users/joeduncko/Documents/GitHub/greenfield/frontend/node_modules/sass/sass.dart.js:34081:12)
    at Object._asyncStartSync (/Users/joeduncko/Documents/GitHub/greenfield/frontend/node_modules/sass/sass.dart.js:4863:20)
    at _parseFunctions__closure1.$call$body$_parseFunctions__closure (/Users/joeduncko/Documents/GitHub/greenfield/frontend/node_modules/sass/sass.dart.js:102090:16)
    at _parseFunctions__closure1.call$1 (/Users/joeduncko/Documents/GitHub/greenfield/frontend/node_modules/sass/sass.dart.js:102046:19)
    at _EvaluateVisitor__runBuiltInCallable_closure9.call$0 (/Users/joeduncko/Documents/GitHub/greenfield/frontend/node_modules/sass/sass.dart.js:88890:35)
    at /Users/joeduncko/Documents/GitHub/greenfield/frontend/node_modules/sass/sass.dart.js:85863:29

Expected behavior

I expected the SCSS files to successfully compile, with the intention to attempt to override the SCSS variables with the @use "" with {} syntax, as noted on #5297 (comment) .

Happy to expand the above with any relevant information.

[justinbhopper]

@JoeDuncko Along with the aforementioned Vite modifications, you'll need to use the legacy SASS svg-inliner mentioned here:

#6051 (comment)

Use this legacy inliner instead of the sassSvgInlinerFactory coming from @blueprintjs/node-build-scripts.

So the end result will be something like:

// vite.config.js

import { sassNodeModulesLoadPaths from "@blueprintjs/node-build-scripts";
import { legacySassSvgInlinerFactory } from "./legacySassSvgInlinerFactory";

const config = ({ mode }) => {
    return defineConfig({
       ...
        css: {
            devSourcemap: true,
            preprocessorOptions: {
                scss: {
                    functions: {
                        "svg-icon($path, $selectors: null)":
                            legacySassSvgInlinerFactory(
                                join(__dirname, "/src/icons"),
                                { optimize: true, encodingFormat: "uri" }
                            ),
                    },
                    loadPaths: sassNodeModulesLoadPaths,
                },
            },
        },
    });
};

export default config;

It's my understanding that those using Vite cannot move to using the current version of the Sass inliner coming from Blueprint yet because Vite does not yet support the new compiler API that Blueprint has moved onto using:
vitejs/vite#7116

At least that's what this comment here says: #6051 (comment)

[JoeDuncko]

@justinbhopper Thank you so much, that solved it and I'm able to compile the SCSS!

Closing as this is solved.