Extraction should reuse the preprocess defined in svelte.config.js

[bfontaine]

Hello,

When you use the prependData key of the SCSS preprocessor to make SCSS variables global to the app and use these implicitely-defined variables in a component, npm run extract crashes because it can’t find them:

 my-app % npm run extract

> my-app@0.0.1 extract
> lingui extract

⠋ Error at /home/baptiste/GitHub/my-app/src/routes/+page.svelte: Error: Undefined variable.
  ╷
3 │         color: $red;
  │                ^^^^
  ╵
  src/routes/+page.svelte 3:10  root stylesheet
    at Object.wrapException (/home/baptiste/GitHub/my-app/node_modules/sass/sass.dart.js:2119:43)
    at _EvaluateVisitor1.visitVariableExpression$1 (/home/baptiste/GitHub/my-app/node_modules/sass/sass.dart.js:95227:15)
    at VariableExpression0.accept$1$1 (/home/baptiste/GitHub/my-app/node_modules/sass/sass.dart.js:115865:22)
    at VariableExpression0.accept$1 (/home/baptiste/GitHub/my-app/node_modules/sass/sass.dart.js:115868:19)
    at _EvaluateVisitor1.visitDeclaration$1 (/home/baptiste/GitHub/my-app/node_modules/sass/sass.dart.js:94406:28)
    at Declaration0.accept$1$1 (/home/baptiste/GitHub/my-app/node_modules/sass/sass.dart.js:92929:22)
    at Declaration0.accept$1 (/home/baptiste/GitHub/my-app/node_modules/sass/sass.dart.js:92932:19)
    at _EvaluateVisitor_visitStyleRule__closure1.call$0 (/home/baptiste/GitHub/my-app/node_modules/sass/sass.dart.js:97445:16)
    at _EvaluateVisitor1._evaluate0$_withStyleRule$1$2 (/home/baptiste/GitHub/my-app/node_modules/sass/sass.dart.js:96251:25)
    at _EvaluateVisitor1._evaluate0$_withStyleRule$2 (/home/baptiste/GitHub/my-app/node_modules/sass/sass.dart.js:96256:19) {
  formatted: 'Error: Undefined variable.\n' +
    '  ╷\n' +
    '3 │         color: $red;\n' +
    '  │                ^^^^\n' +
    '  ╵\n' +
    '  src/routes/+page.svelte 3:10  root stylesheet',
  line: 3,
  column: 10,
  file: '/home/baptiste/GitHub/my-app/src/routes/+page.svelte',
  status: 1
}
✔ 
Catalog statistics for src/locales/{locale}: 
┌─────────────┬─────────────┬─────────┐
│ Language    │ Total count │ Missing │
├─────────────┼─────────────┼─────────┤
│ en (source) │      0      │    -    │
│ ja          │      0      │    0    │
└─────────────┴─────────────┴─────────┘

(use "npm run extract" to update catalogs with new messages)
(use "npm run compile" to compile catalogs for production)

See a minimal example here: https://github.com/bfontaine/my-lingui-app This is the SvelteKit demo app with svelte-i18n-lingui and an app.scss that defines a single variable, a svelte.config.js that prepends it in the scss preprocessor, and a component that uses the variable.

The build works without any issue, so npm extract should somehow be able to handle this.

Any idea? Thanks in advance!

[bfontaine]

From what I understand, the Svelte extractor uses its own preprocess config and so ignores the one in svelte.config.js.

Edit: indeed, if I modify node_modules/svelte-i18n-lingui/dist/extractor.js to include the {scss: {prependData: "..."}} config in the sveltePreprocess() call, it works:

index 990434b..bb7fb3c 100644
--- extractor.js
+++ extractor.js
@@ -130,7 +130,7 @@ export const svelteExtractor = {
        try {
            const { code: processedCode, map: _processedMap } = await preprocess(
                source,
-               [sveltePreprocess()],
+               [sveltePreprocess({scss:{prependData: "@import './src/theme/app.scss';"}})],
                { filename }
            );