revert(): Back to 1.4

Author: jaredcbaum

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/sass",
-  "version": "1.4.1",
+  "version": "1.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package.json

@@ -33,15 +33,37 @@ Sass options can be passed to the plugin within the stencil config, which are us
 
 ### Inject Globals Sass Paths
 
-The `injectGlobalPaths` config is an array of paths that automatically get added as `@import` declarations to all components. This can be useful to inject Sass variables, mixins and functions to override defaults of external collections. For example, apps can override default Sass variables of [Ionic components](https://www.npmjs.com/package/@ionic/core). Relative paths within `injectGlobalPaths` should be relative to the stencil config file.
+The `injectGlobalPaths` config is an array of paths that automatically get added as imports to all components. This can be useful to inject Sass variables, mixins and functions to override defaults of external collections. For example, apps can override default Sass variables of [Ionic components](https://www.npmjs.com/package/@ionic/core). Relative paths within `injectGlobalPaths` should be relative to the stencil config file.
+
+#### v1 
+
+v1.x of stencil/sass uses sass `@import` syntax to add files listed in the `injectGlobalPaths` option to each stylesheet.  Do not use `@use` in your components if using v1 because it is not permitted by sass to have `@import` statements before `@use` statements.  Below is an example of using `injectGlobalPaths` in v1.
+
+```js
+exports.config = {
+  plugins: [
+    sass({
+      injectGlobalPaths: [
+        'src/global/variables.scss', //adds @import 'src/global/variables.scss' statement
+        'src/global/mixins.scss' //adds @import 'src/global/mixins.scss' statement
+      ]
+    })
+  ]
+};
+```
+
+#### v2
+
+v2.x of stencil/sass uses sass `@use` syntax to add files listed in `injectGlobalPaths` to each stylesheet.  Because the `@use` syntax also supports namespacing by default, the option is now available to customize the namespace. `injectGlobalPaths` can now be an array of TS tuples.  The first position is the filepath and the second position is the namespace.  There is still the option to only use a string, which will default the namespace to the name of the file. These methods can be combined.
 
 ```js
 exports.config = {
   plugins: [
     sass({
       injectGlobalPaths: [
-        'src/globals/variables.scss',
-        'src/globals/mixins.scss'
+        ['src/global/variables.scss', 'var'], //adds "@use 'src/global/variables.scss' as var" statement
+        ['src/global/mixins.scss', '*'], //root namespace, no prefix needed to access
+        'src/global/animations.scss' //namespace defaults to 'animations'
       ]
     })
   ]

readme.md

@@ -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/declarations.ts

@@ -37,22 +37,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;

src/util.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']