@stencil/sass - npm Package Compare versions

Comparing version 1.4.0-0 to 1.4.0

dist/diagnostics.js

@@ -20,2 +20,3 @@ export function loadDiagnostic(context, sassError, filePath) {
     if (typeof filePath === 'string') {
+        diagnostic.language = /(\.scss)$/i.test(filePath) ? 'scss' : 'sass';
         diagnostic.absFilePath = filePath;
@@ -22,0 +23,0 @@ diagnostic.relFilePath = formatFileName(context.config.rootDir, diagnostic.absFilePath);

dist/util.js

@@ -13,2 +13,4 @@ import * as path from 'path';
     renderOpts.data = sourceText;
+    // activate indented syntax if the file extension is .sass
+    renderOpts.indentedSyntax = /(\.sass)$/i.test(fileName);
     renderOpts.includePaths = Array.isArray(opts.includePaths) ? opts.includePaths.slice() : [];
@@ -15,0 +17,0 @@ // add the directory of the source file to includePaths

package.json

 {
   "name": "@stencil/sass",
-  "version": "1.4.0-0",
+  "version": "1.4.0",
   "license": "MIT",
@@ -17,3 +17,3 @@ "main": "dist/index.js",
     "version": "npm run build",
-    "release": "np",
+    "release": "np --no-2fa",
     "test": "jest",
@@ -23,18 +23,18 @@ "test.watch": "jest --watch"
   "peerDependencies": {
-    "@stencil/core": "^1.0.2"
+    "@stencil/core": ">=1.0.2"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^8.0.1",
+    "@rollup/plugin-node-resolve": "^10.0.0",
     "@stencil/core": "^1.14.0",
-    "@types/jest": "24.9.1",
-    "@types/node": "13.9.8",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^14.14.7",
     "@types/sass": "1.16.0",
-    "jest": "24.9.0",
-    "np": "6.2.0",
+    "jest": "^26.6.3",
+    "np": "^7.0.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.17.1",
-    "sass": "1.26.8",
-    "terser": "^4.8.0",
-    "ts-jest": "^24.3.0",
-    "typescript": "3.9.5"
+    "rollup": "^2.33.1",
+    "sass": "1.29.0",
+    "terser": "^5.3.8",
+    "ts-jest": "^26.4.4",
+    "typescript": "4.0.5"
   },
@@ -41,0 +41,0 @@ "repository": {

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 @@

Fixed alerts

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

Improved metrics

Total package byte prevSize

4634068

increased by1.75%

Lines of code

18718

increased by1.77%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

87

increased by33.85%

No dependency changes