Sass additionalData and @use

[pepa-linha]

Hello,

it is possible set additionalData for all Sass files via css.preprocessorOptions.scss.additionalData = '@import "foo.scss"' but when Sass files contains @use then reports an error:

@ use rules must be written before any other rules.

Any ideas?

Thanks

[oneillsp96]

An easy but inefficient way would be to just chuck the @use into additionalData, like this:

scss: {
// additionalData: // @use "sass:math"; // @import "foo.scss"; //
// }

Otherwise you could just manually import only what you need in each file.
You can use this regex to find the first line in a file: ^(?<!\n)
Then simply replaceAll with the global file you need

[pepa-linha]

In each file, I would like to have only what I import and what I use (@use).

So this is not the right way to go. The current solution is that additionalData is a function and I insert the content after the last @use via the content parameter. But I would probably expect this from the additionalData behavior itself, otherwise it's not very useful.

[lehni]

@pepa-linha thanks for the hint. This works great! Here the code I ended up using to do so:

const imports = `@import 'imports';`
const additionalData = content => {
  // If there are @use statements, insert the import after the last one,
  // otherwise insert it before all content.
  const match = content.match(/@use '[^']+';/g)
  if (match) {
    const last = match[match.length - 1]
    return content.replace(last, `${last}\n${imports}`)
  } else {
    return `${imports}\n${content}`
  }
}

[pepa-linha]

Great, I ended up with similar code.

[manuelodelain]

Thanks @pepa-linha and @lehni for your solution!

Unfortunately I had issues if both my additional data and my components include @use.

As a more complete solution I use the code from sass-resources-loader https://github.com/shakacode/sass-resources-loader/blob/ec1d6e5bf9668c1c68a7f10adb30c30740dedd96/src/utils/processResources.js#L13
and create a function which return the formatted content.

// Matches opening and closing parenthesis across multiple lines
const multilineParenthesisRegex = '\\([\\s\\S]*?\\);?';
// Finds any @use statement
const useRegex = `^@use \\S*(?: with ${multilineParenthesisRegex}|.*)?\n?$`;
// Same as above, but adds the m (multiline) flag
const useRegexTest = new RegExp(useRegex, 'm');
// Makes sure that only the last instance of `useRegex` variable is found
const useRegexReplace = new RegExp(`${useRegex}(?![\\s\\S]*${useRegex})`, 'gm');

export function hoistUseStatements(resources: string): (key: string) => string {
    return function(source: string): string {
        if (useRegexTest.test(source)) {
            const output = source.replace(
                useRegexReplace,
                (useStatements) => `${useStatements}\n${resources}`,
            );

            // De-duplicate identical imports
            const importedResources: Record<string, boolean | undefined> = {};
            return output.replace(new RegExp(useRegex, 'mg'), (importedResource: string) => {
                if (importedResources[importedResource]) {
                    return '';
                }

                importedResources[importedResource] = true;
                return importedResource;
            });
        }

        return `${resources}\n${source}`;
    }
};

And use it in vite.config.ts

import { hoistUseStatements } from "./hoist-use-statements"

export default defineConfig({
    // ...
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: hoistUseStatements(`@import "./src/scss/_resources.scss";`),
            },
        },
    },
})