refactor: changed injectGlobalPaths to use @use instead of @import (#36)

src/declarations.ts

@@ -36,7 +36,7 @@ export interface PluginOptions {
    * Used for Sass variables, mixins and functions files that do not contain any CSS.
    * This config is custom to `@stencil/sass`.
    */
-  injectGlobalPaths?: string[];
+  injectGlobalPaths?: ([string, string] | string)[];
 
   /**
    * Enable Sass Indented Syntax for parsing the data string or file.

src/util.ts

@@ -34,22 +34,25 @@ export function getRenderOptions(opts: d.PluginOptions, sourceText: string, file
 
   if (injectGlobalPaths.length > 0) {
     // automatically inject each of these paths into the source text
-    const injectText = injectGlobalPaths.map(injectGlobalPath => {
-      if (!path.isAbsolute(injectGlobalPath)) {
+    const injectText = injectGlobalPaths.map((injectGlobalPath) => {
+      const includesNamespace = Array.isArray(injectGlobalPath);
+      let importPath = includesNamespace ? injectGlobalPath[0] as string : injectGlobalPath as string;
+
+      if (!path.isAbsolute(importPath)) {
         // convert any relative paths to absolute paths relative to the project root
 
         if (context.sys && typeof context.sys.normalizePath === 'function') {
           // context.sys.normalizePath added in stencil 1.11.0
-          injectGlobalPath = context.sys.normalizePath(path.join(context.config.rootDir, injectGlobalPath));
+          importPath = context.sys.normalizePath(path.join(context.config.rootDir, importPath));
         } else {
           // TODO, eventually remove normalizePath() from @stencil/sass
-          injectGlobalPath = normalizePath(path.join(context.config.rootDir, injectGlobalPath));
+          importPath = normalizePath(path.join(context.config.rootDir, importPath));
         }
       }
 
       const importTerminator = renderOpts.indentedSyntax ? '\n' : ';';
 
-      return `@import "${injectGlobalPath}"${importTerminator}`;
+      return `@use "${importPath}"${includesNamespace ? ` as ${injectGlobalPath[1]}` : ''}${importTerminator}`;
     }).join('');
 
     renderOpts.data = injectText + renderOpts.data;

test/utils.spec.ts

@@ -25,17 +25,45 @@ describe('getRenderOptions', () => {
     expect(output.file).toBeUndefined();
   });
 
-  it('should inject global sass array and not change input options or include globals in output opts', () => {
+  it('should inject global sass array, not change input options or include globals in output opts', () => {
     const input: d.PluginOptions = {
       injectGlobalPaths: ['/my/global/variables.scss']
     };
     const output = util.getRenderOptions(input, sourceText, fileName, context);
-    expect(output.data).toBe(`@import "/my/global/variables.scss";body { color: blue; }`);
+    expect(output.data).toBe(`@use "/my/global/variables.scss";body { color: blue; }`);
     expect(output.injectGlobalPaths).toBeUndefined();
     expect(input.injectGlobalPaths).toHaveLength(1);
     expect(input.injectGlobalPaths[0]).toBe('/my/global/variables.scss');
   });
 
+  it('should inject global sass array, not change input options or include globals in output opts, and add namespace', () => {
+    const input: d.PluginOptions = {
+      injectGlobalPaths: [['/my/global/variables.scss', 'var']]
+    };
+    const output = util.getRenderOptions(input, sourceText, fileName, context);
+    expect(output.data).toBe(`@use "/my/global/variables.scss" as var;body { color: blue; }`);
+    expect(output.injectGlobalPaths).toBeUndefined();
+    expect(input.injectGlobalPaths).toHaveLength(1);
+    expect(input.injectGlobalPaths[0][0]).toBe('/my/global/variables.scss');
+    expect(input.injectGlobalPaths[0][1]).toBe('var');
+  });
+
+  it('should inject global sass array, not change input options or include globals in output opts, and discern when to add namespace', () => {
+    const input: d.PluginOptions = {
+      injectGlobalPaths: [
+        ['/my/global/variables.scss', 'var'],
+        '/my/global/mixins.scss'
+      ]
+    };
+    const output = util.getRenderOptions(input, sourceText, fileName, context);
+    expect(output.data).toBe(`@use "/my/global/variables.scss" as var;@use "/my/global/mixins.scss";body { color: blue; }`);
+    expect(output.injectGlobalPaths).toBeUndefined();
+    expect(input.injectGlobalPaths).toHaveLength(2);
+    expect(input.injectGlobalPaths[0][0]).toBe('/my/global/variables.scss');
+    expect(input.injectGlobalPaths[0][1]).toBe('var');
+    expect(input.injectGlobalPaths[1]).toBe('/my/global/mixins.scss');
+  });
+
   it('should add dirname of filename to existing includePaths array and not change input options', () => {
     const input: d.PluginOptions = {
       includePaths: ['/some/other/include/path']