feat: support "hoistUseStatements" loader option (#162)

rchl · web-flow · commit e53770df1463 · 2021-06-01T13:47:35.000+02:00
diff --git a/README.md b/README.md
@@ -16,13 +16,14 @@
 * Share variables, mixins, functions across all style files (no `@import` needed)
 * Support for SASS, LESS and Stylus
 * Aliases (`~/assets/variables.css`) and globbing as supported
+* Support for hoisting `@use` imports
 * Compatible with Nuxt's `build.styleResources` (and will take them over directly if included!)
 * Blazing fast:tm:
 
 ## Warning
 
 **Do not import actual styles**.
-Use this module only to import variables, mixins, functions (et cetera) as they won't exist in the actual build. Importing actual styles will include them in every component and will also make your build/HMR magnitudes slower. 
+Use this module only to import variables, mixins, functions (et cetera) as they won't exist in the actual build. Importing actual styles will include them in every component and will also make your build/HMR magnitudes slower.
 **Do not do this!**
 
 ## Setup
@@ -45,7 +46,8 @@ export default {
    sass: [],
    scss: [],
    less: [],
-   stylus: []
+   stylus: [],
+   hoistUseStatements: true  // Hoists the "@use" imports. Applies only to "sass", "scss" and "less". Default: false.
   }
 }
 ```
diff --git a/index.d.ts b/index.d.ts
@@ -1,4 +1,4 @@
-import NuxtConfiguration from '@nuxt/config'
+import '@nuxt/config'
 
 declare module '@nuxt/config/types/index' {
   export default interface NuxtConfiguration {
@@ -7,6 +7,7 @@ declare module '@nuxt/config/types/index' {
       scss?: string[] | string
       less?: string[] | string
       stylus?: string[] | string
+      hoistUseStatements?: boolean
     }
   }
 }
diff --git a/lib/module.js b/lib/module.js
@@ -16,7 +16,9 @@ export default function nuxtStyledResources(moduleOptions) {
   // A bit messy. Check for truthyness and keys and return
   const legacyResources = legacyStyledResources && Object.keys(legacyStyledResources).length && legacyStyledResources
 
-  const resources = legacyResources || styleResources
+  const resources = Object.assign({}, legacyResources || styleResources)
+  const hoistUseStatements = resources.hoistUseStatements || false
+  delete resources.hoistUseStatements
 
   const styleResourcesEntries = Object.entries(resources)
 
@@ -52,11 +54,11 @@ export default function nuxtStyledResources(moduleOptions) {
   }
 
   if (sass.length) {
-    this.extendBuild(extendSass(sass))
+    this.extendBuild(extendSass({ resources: sass, hoistUseStatements }))
   }
 
   if (scss.length) {
-    this.extendBuild(extendScss(scss))
+    this.extendBuild(extendScss({ resources: scss, hoistUseStatements }))
   }
 
   if (stylus.length) {
@@ -67,15 +69,15 @@ export default function nuxtStyledResources(moduleOptions) {
   }
 
   if (less.length) {
-    this.extendBuild(extendLess(less))
+    this.extendBuild(extendLess({ resources: less, hoistUseStatements }))
   }
 }
 
-const extendWithSassResourcesLoader = matchRegex => resources => (config) => {
+const extendWithSassResourcesLoader = matchRegex => options => (config) => {
   // Yes, using sass-resources-loader is **intended here**
   // Despite it's name it can be used for less as well!
   const sassResourcesLoader = {
-    loader: 'sass-resources-loader', options: { resources }
+    loader: 'sass-resources-loader', options
   }
 
   // Gather all loaders that test against scss or sass files
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
   "dependencies": {
     "consola": "^2.4.0",
     "glob-all": "^3.1.0",
-    "sass-resources-loader": "^2.0.0"
+    "sass-resources-loader": "^2.2.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^7.5.0",
diff --git a/test/fixture/sass/components/Sass.vue b/test/fixture/sass/components/Sass.vue
@@ -5,6 +5,8 @@
 </template>
 
 <style lang="scss">
+  @use 'sass:math';
+
   .ymca {
     color: $gray;
     line-height: pow(4, 2);
diff --git a/test/fixture/sass/nuxt.config.js b/test/fixture/sass/nuxt.config.js
@@ -9,7 +9,8 @@ module.exports = {
   },
   styleResources: {
     scss: ['@/assets/nested/index.scss', 'mathsass'],
-    sass: ['@/assets/nested/index.sass']
+    sass: ['@/assets/nested/index.sass'],
+    hoistUseStatements: true
   },
   buildModules: ['@@'],
   build: {
diff --git a/yarn.lock b/yarn.lock
@@ -2458,12 +2458,10 @@ async-each@^1.0.1:
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
   integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
 
-async@^2.1.4:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
-  dependencies:
-    lodash "^4.17.14"
+async@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"
+  integrity sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==
 
 asynckit@^0.4.0:
   version "0.4.0"
@@ -5429,10 +5427,10 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@^7.1.1, glob@^7.1.2:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+glob@^7.1.1, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.1.7:
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -5441,10 +5439,10 @@ glob@^7.1.1, glob@^7.1.2:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.1.7:
-  version "7.1.7"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
-  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+glob@^7.1.2:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -7120,7 +7118,7 @@ loader-runner@^4.1.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
   integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==
 
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.0.4, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -7216,12 +7214,12 @@ lodash@4.17.11:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
 
-lodash@^4.15.0, lodash@^4.17.13, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5, lodash@^4.7.0:
+lodash@^4.15.0, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.2.1:
+lodash@^4.17.11, lodash@^4.17.12, lodash@^4.2.1:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -9831,15 +9829,15 @@ sass-loader@^7.1.0:
     pify "^4.0.1"
     semver "^6.3.0"
 
-sass-resources-loader@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/sass-resources-loader/-/sass-resources-loader-2.0.1.tgz#c8427f3760bf7992f24f27d3889a1c797e971d3a"
-  integrity sha512-UsjQWm01xglINC1kPidYwKOBBzOElVupm9RwtOkRlY0hPA4GKi2KFsn4BZypRD1kudaXgUnGnfbiVOE7c+ybAg==
+sass-resources-loader@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/sass-resources-loader/-/sass-resources-loader-2.2.1.tgz#d7dbc36ccb25b2d8ffa508b1b8630b987df1e5c3"
+  integrity sha512-WlofxbWOVnxad874IHZdWbP9eW1pbyqsTJKBsMbeB+YELvLSrZQNDTpH70s6F19BwtanR3NEFnyGwJ9WyotJTQ==
   dependencies:
-    async "^2.1.4"
-    chalk "^1.1.3"
-    glob "^7.1.1"
-    loader-utils "^1.0.4"
+    async "^3.2.0"
+    chalk "^4.1.0"
+    glob "^7.1.6"
+    loader-utils "^2.0.0"
 
 sass@^1.34.0:
   version "1.34.0"

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import NuxtConfiguration from '@nuxt/config'`
	`1`	`+import '@nuxt/config'`
`2`	`2`
`3`	`3`	`declare module '@nuxt/config/types/index' {`
`4`	`4`	`export default interface NuxtConfiguration {`
`@@ -7,6 +7,7 @@ declare module '@nuxt/config/types/index' {`
`7`	`7`	`scss?: string[] \| string`
`8`	`8`	`less?: string[] \| string`
`9`	`9`	`stylus?: string[] \| string`
	`10`	`+ hoistUseStatements?: boolean`
`10`	`11`	`}`
`11`	`12`	`}`
`12`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,9 @@ export default function nuxtStyledResources(moduleOptions) {`
`16`	`16`	`// A bit messy. Check for truthyness and keys and return`
`17`	`17`	`const legacyResources = legacyStyledResources && Object.keys(legacyStyledResources).length && legacyStyledResources`
`18`	`18`
`19`		`- const resources = legacyResources \|\| styleResources`
	`19`	`+ const resources = Object.assign({}, legacyResources \|\| styleResources)`
	`20`	`+ const hoistUseStatements = resources.hoistUseStatements \|\| false`
	`21`	`+ delete resources.hoistUseStatements`
`20`	`22`
`21`	`23`	`const styleResourcesEntries = Object.entries(resources)`
`22`	`24`
`@@ -52,11 +54,11 @@ export default function nuxtStyledResources(moduleOptions) {`
`52`	`54`	`}`
`53`	`55`
`54`	`56`	`if (sass.length) {`
`55`		`- this.extendBuild(extendSass(sass))`
	`57`	`+ this.extendBuild(extendSass({ resources: sass, hoistUseStatements }))`
`56`	`58`	`}`
`57`	`59`
`58`	`60`	`if (scss.length) {`
`59`		`- this.extendBuild(extendScss(scss))`
	`61`	`+ this.extendBuild(extendScss({ resources: scss, hoistUseStatements }))`
`60`	`62`	`}`
`61`	`63`
`62`	`64`	`if (stylus.length) {`
`@@ -67,15 +69,15 @@ export default function nuxtStyledResources(moduleOptions) {`
`67`	`69`	`}`
`68`	`70`
`69`	`71`	`if (less.length) {`
`70`		`- this.extendBuild(extendLess(less))`
	`72`	`+ this.extendBuild(extendLess({ resources: less, hoistUseStatements }))`
`71`	`73`	`}`
`72`	`74`	`}`
`73`	`75`
`74`		`-const extendWithSassResourcesLoader = matchRegex => resources => (config) => {`
	`76`	`+const extendWithSassResourcesLoader = matchRegex => options => (config) => {`
`75`	`77`	`// Yes, using sass-resources-loader is intended here`
`76`	`78`	`// Despite it's name it can be used for less as well!`
`77`	`79`	`const sassResourcesLoader = {`
`78`		`- loader: 'sass-resources-loader', options: { resources }`
	`80`	`+ loader: 'sass-resources-loader', options`
`79`	`81`	`}`
`80`	`82`
`81`	`83`	`// Gather all loaders that test against scss or sass files`