@stencil/sass - npm Package Compare versions

Comparing version 1.4.1 to 2.0.0-0

dist/declarations.d.ts

@@ -34,3 +34,3 @@ export * from '@stencil/core/internal';
      */
-    injectGlobalPaths?: string[];
+    injectGlobalPaths?: ([string, string] | string)[];
     /**
@@ -37,0 +37,0 @@ * Enable Sass Indented Syntax for parsing the data string or file.

dist/util.js

@@ -28,16 +28,18 @@ import * as path from 'path';
         // 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] : injectGlobalPath;
+            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('');
@@ -44,0 +46,0 @@ renderOpts.data = injectText + renderOpts.data;

package.json

 {
   "name": "@stencil/sass",
-  "version": "1.4.1",
+  "version": "2.0.0-0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

readme.md

@@ -36,4 +36,8 @@ # @stencil/sass
 
-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
@@ -44,4 +48,4 @@ exports.config = {
       injectGlobalPaths: [
-        'src/globals/variables.scss',
-        'src/globals/mixins.scss'
+        'src/global/variables.scss', //adds @import 'src/global/variables.scss' statement
+        'src/global/mixins.scss' //adds @import 'src/global/mixins.scss' statement
       ]
@@ -53,2 +57,20 @@ })
 
+#### 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/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'
+      ]
+    })
+  ]
+};
+```
+
 Note that each of these files are always added to each component, so in most cases they shouldn't contain CSS because it'll get duplicated in each component. Instead, `injectGlobalPaths` should only be used for Sass variables, mixins and functions, but does not contain any CSS.
@@ -55,0 +77,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4634070

increased by0.04%

Lines of code

18718

increased by0.03%

Number of lines in readme file

87

increased by33.85%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes