feat(@quasar/app): Auto-inject Quasar stylus variables to any .styl file (no longer needed to add import quasar-variables)

rstoenescu · rstoenescu · commit 2a783786bb1b · 2019-04-14T17:20:15.000+03:00
diff --git a/app/lib/webpack/create-chain.js b/app/lib/webpack/create-chain.js
@@ -54,6 +54,9 @@ module.exports = function (cfg, configName) {
       pages: appPaths.resolve.src(`pages`),
       assets: appPaths.resolve.src(`assets`),
       boot: appPaths.resolve.src(`boot`),
+
+      // TODO: remove in final v1.0
+      // (no longer needed; automatically injects Stylus variables)
       'quasar-variables': appPaths.resolve.app(`.quasar/app.quasar-variables.styl`),
 
       // CLI/App using this one:
diff --git a/app/lib/webpack/inject.style-rules.js b/app/lib/webpack/inject.style-rules.js
@@ -4,7 +4,7 @@ const
   appPaths = require('../app-paths'),
   postCssConfig = require(appPaths.resolve.app('.postcssrc.js'))
 
-function injectRule (chain, pref, lang, test, loader, options) {
+function injectRule (chain, pref, lang, test, loader, loaderOptions) {
   const baseRule = chain.module.rule(lang).test(test)
 
   // rules for <style lang="module">
@@ -37,7 +37,7 @@ function injectRule (chain, pref, lang, test, loader, options) {
         1 + // stylePostLoader injected by vue-loader
         1 + // postCSS loader
         (!pref.extract && pref.minify ? 1 : 0) + // postCSS with cssnano
-        (loader ? 1 : 0),
+        (loader ? (loader === 'stylus-loader' ? 2 : 1) : 0),
       sourceMap: pref.sourceMap
     }
 
@@ -86,8 +86,19 @@ function injectRule (chain, pref, lang, test, loader, options) {
         .loader(loader)
         .options(Object.assign(
           { sourceMap: pref.sourceMap },
-          options
+          loaderOptions
         ))
+
+      if (loader === 'stylus-loader') {
+        // inject Stylus variables automatically
+        rule.use('style-resources-loader')
+          .loader('style-resources-loader')
+          .options({
+            patterns: [
+              appPaths.resolve.app(`.quasar/app.quasar-variables.styl`)
+            ]
+          })
+      }
     }
   }
 }
diff --git a/app/package.json b/app/package.json
@@ -81,6 +81,7 @@
     "register-service-worker": "1.6.2",
     "semver": "5.6.0",
     "strip-ansi": "=3.0.1",
+    "style-resources-loader": "1.2.1",
     "stylus": "0.54.5",
     "stylus-loader": "3.0.2",
     "terser-webpack-plugin": "1.2.3",
diff --git a/app/templates/app/app.quasar-variables.styl b/app/templates/app/app.quasar-variables.styl
@@ -12,7 +12,6 @@
 // NOTICE that you need lang="styl"
 //
 // <style lang="styl">
-// @import '~quasar-variables'
 // ........
 // </style>
 
diff --git a/app/yarn.lock b/app/yarn.lock
diff --git a/docs/src/components/ApiRows.styl b/docs/src/components/ApiRows.styl
@@ -1,5 +1,3 @@
-@import '~quasar-variables'
-
 .api-row
   padding 8px 16px 4px
   font-weight 300
diff --git a/docs/src/components/AppMenu.styl b/docs/src/components/AppMenu.styl
@@ -1,5 +1,3 @@
-@import '~quasar-variables'
-
 .app-menu
 
   .q-item__section--avatar
diff --git a/docs/src/components/CardTitle.vue b/docs/src/components/CardTitle.vue
@@ -27,8 +27,6 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
-
 $title-color = $grey-4
 
 .doc-card-title
diff --git a/docs/src/components/DocExample.vue b/docs/src/components/DocExample.vue
@@ -150,8 +150,6 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
-
 .doc-example
   &__toolbar
     background white
diff --git a/docs/src/components/DocLink.vue b/docs/src/components/DocLink.vue
@@ -32,8 +32,6 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
-
 .doc-link
   color $primary
   font-weight 500
diff --git a/docs/src/components/DocPage.vue b/docs/src/components/DocPage.vue
@@ -106,8 +106,6 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
-
 .doc-page
   padding 16px 46px
   font-weight 300
diff --git a/docs/src/css/app.styl b/docs/src/css/app.styl
@@ -1,4 +1,3 @@
-@import '~quasar-variables'
 @import './prism-theme.styl'
 
 body
diff --git a/docs/src/examples/shadows/Basic.vue b/docs/src/examples/shadows/Basic.vue
diff --git a/docs/src/examples/shadows/Inset.vue b/docs/src/examples/shadows/Inset.vue
@@ -7,14 +7,12 @@
 </template>
 
 <style lang="stylus" scoped>
-@import '~quasar-variables'
-
 .shadow-box
   width 90px
   height 90px
   margin 25px
   border-radius 50%
   font-size 12px
 .doc-inset-shadow
-  border 1px solid $grey-3
+  border 1px solid #eee
 </style>
diff --git a/docs/src/examples/shadows/PointingUp.vue b/docs/src/examples/shadows/PointingUp.vue
@@ -11,14 +11,10 @@
 </template>
 
 <style lang="stylus" scoped>
-@import '~quasar-variables'
-
 .shadow-box
   width 90px
   height 90px
   margin 25px
   border-radius 50%
   font-size 12px
-.doc-inset-shadow
-  border 1px solid $grey-3
 </style>
diff --git a/docs/src/examples/shadows/Standard.vue b/docs/src/examples/shadows/Standard.vue
@@ -11,14 +11,10 @@
 </template>
 
 <style lang="stylus" scoped>
-@import '~quasar-variables'
-
 .shadow-box
   width 90px
   height 90px
   margin 25px
   border-radius 50%
   font-size 12px
-.doc-inset-shadow
-  border 1px solid $grey-3
 </style>
diff --git a/docs/src/layouts/Layout.vue b/docs/src/layouts/Layout.vue
@@ -253,7 +253,6 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
 @import '../css/docsearch'
 
 .header
diff --git a/docs/src/pages/Landing.vue b/docs/src/pages/Landing.vue
@@ -218,8 +218,6 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
-
 .doc-landing-avatar > div
   border-radius 0
 
diff --git a/docs/src/pages/quasar-cli/cli-documentation/handling-webpack.md b/docs/src/pages/quasar-cli/cli-documentation/handling-webpack.md
@@ -88,7 +88,6 @@ Quasar comes with a bunch of useful Webpack aliases preconfigured. You can use t
 | `pages` | /src/pages |
 | `assets` | /src/assets |
 | `boot` | /src/boot |
-| `quasar-variables` | /.quasar/variables.styl |
 
 Also if you configure to build with the Vue compiler version (quasar.conf > build > vueCompiler: true), `vue$` resolves to  `vue/dist/vue.esm.js`.
 
diff --git a/docs/src/pages/style/color-palette.md b/docs/src/pages/style/color-palette.md
@@ -17,7 +17,7 @@ Also check [Theme Builder](/style/theme-builder) for a tool on customizing the b
 
 ## Color List
 
-Here's the list of colors provided out of the box. Within your app's `*.vue` files you can use them as CSS classes (in HTML templates) or as Stylus variables (in `<style lang="stylus">` tags -- don't forget to also `@import '~quasar-variables'`).
+Here's the list of colors provided out of the box. Within your app's `*.vue` files you can use them as CSS classes (in HTML templates) or as Stylus variables (in `<style lang="stylus">` tags.
 
 <color-list />
 
@@ -38,9 +38,6 @@ In your app's `*.vue` files you can use the colors as `$primary`, `$red-1`, and
 ```html
 <!-- Notice lang="stylus" -->
 <style lang="stylus">
-// "quasar-variables" is a Webpack alias injected by Quasar CLI
-@import '~quasar-variables'
-
 div
   color $red-1
   background-color $grey-5
diff --git a/docs/src/pages/style/stylus-variables.md b/docs/src/pages/style/stylus-variables.md
@@ -4,23 +4,24 @@ components:
   - style/StylusVariables
 ---
 
-There are Stylus variables built into Quasar that you can change and/or use within devland should you wish to. This applies to apps built with Quasar CLI or Vue CLI only.
+There are Stylus variables built into Quasar that you can change and/or use within devland should you wish to. This applies to apps built with Quasar CLI or Vue CLI only. It does NOT apply to UMD.
 
 ## Usage
-In your app's `*.vue` files you can use the colors as `$primary`, `$red-1`, and so on.
+In your app's `*.vue` files you can use any Quasar Stylus variables (examples: `$primary`, `$red-1`), and any other Stylus variables that you declared in your `/src/css/quasar.variables.styl` (when using Quasar CLI) and `src/styles/quasar.variables.styl` (when using Vue CLI).
 
 ```html
 <!-- Notice lang="stylus" -->
 <style lang="stylus">
-// "quasar-variables" is a Webpack alias injected by Quasar CLI
-@import '~quasar-variables'
-
 div
   color $red-1
   background-color $grey-5
 </style>
 ```
 
+::: warning
+If using Vue CLI, then you need to also add: `@import '~quasar-variables'` before using any Stylus variables.
+:::
+
 ## Customizing
 Depending on whether you are using Quasar CLI or Vue CLI, you will notice that your project folder has `src/css/quasar.variables.styl` (Quasar CLI) or `src/styles/quasar.variables.styl` (Vue CLI).
 
diff --git a/quasar/build/webpack.inject.base.js b/quasar/build/webpack.inject.base.js
@@ -31,8 +31,7 @@ module.exports = function (chain) {
       'quasar-css': resolve(`src/css/index.styl`),
       assets: resolve('dev/assets'),
       components: resolve('dev/components'),
-      data: resolve('dev/data'),
-      'quasar-variables': resolve(`src/css/variables.styl`)
+      data: resolve('dev/data')
     })
 
   chain.module.rule('lint')
@@ -174,5 +173,16 @@ function injectRule (chain, lang, test, loader, options) {
         { sourceMap: true },
         options
       ))
+
+    if (loader === 'stylus-loader') {
+      // inject Stylus variables automatically
+      rule.use('style-resources-loader')
+        .loader('style-resources-loader')
+        .options({
+          patterns: [
+            resolve(`src/css/variables.styl`)
+          ]
+        })
+    }
   }
 }
diff --git a/quasar/dev/components/components/carousel.vue b/quasar/dev/components/components/carousel.vue
@@ -244,8 +244,6 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
-
 .docs-carousel
   p.caption:not(:first-of-type)
     margin-top 38px
diff --git a/quasar/dev/components/components/list-expansion-item.vue b/quasar/dev/components/components/list-expansion-item.vue
@@ -689,8 +689,6 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
-
 .my-expand-link
   color $secondary
   background alpha($secondary, .1)
diff --git a/quasar/dev/components/components/list-item.vue b/quasar/dev/components/components/list-item.vue
@@ -756,8 +756,6 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
-
 .my-link
   color white
   background $deep-orange
diff --git a/quasar/dev/components/components/menu-test.vue b/quasar/dev/components/components/menu-test.vue
@@ -44,6 +44,4 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
-
 </style>
diff --git a/quasar/dev/components/components/splitter.vue b/quasar/dev/components/components/splitter.vue
@@ -169,8 +169,6 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
-
 .stylish-splitter
   border 3px solid $deep-orange
   height 700px
diff --git a/quasar/dev/components/css/flex-addon.styl b/quasar/dev/components/css/flex-addon.styl
diff --git a/quasar/dev/components/css/flex-addon.vue b/quasar/dev/components/css/flex-addon.vue
@@ -923,7 +923,7 @@ export default {
     return {}
   },
   created () {
-    import('./flex-addon.styl')
+    import('../../../src/css/flex-addon.styl')
   }
 }
 </script>
diff --git a/quasar/dev/components/css/material-ripples.vue b/quasar/dev/components/css/material-ripples.vue
@@ -88,8 +88,6 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
-
 .ripple-example
   border-radius 3px
   cursor pointer
diff --git a/quasar/dev/components/css/size-addon.vue b/quasar/dev/components/css/size-addon.vue
@@ -52,7 +52,7 @@ export default {
     }
   },
   created () {
-    import('./flex-addon.styl')
+    import('../../../src/css/flex-addon.styl')
   }
 }
 </script>
diff --git a/quasar/dev/components/form/select-part-1.vue b/quasar/dev/components/form/select-part-1.vue
@@ -626,8 +626,6 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
-
 .select-card
   transition .3s background-color
   &:not(.disabled):hover
diff --git a/quasar/dev/components/form/select-part-2.vue b/quasar/dev/components/form/select-part-2.vue
@@ -545,8 +545,6 @@ export default {
 </script>
 
 <style lang="stylus">
-@import '~quasar-variables'
-
 .select-card
   transition .3s background-color
   &:not(.disabled):hover
diff --git a/quasar/dev/components/other/web-storage.vue b/quasar/dev/components/other/web-storage.vue
@@ -44,8 +44,3 @@ export default {
   }
 }
 </script>
-
-<style lang="stylus">
-@import '~quasar-variables'
-
-</style>
diff --git a/quasar/dev/components/touch-directives/touch-style.styl b/quasar/dev/components/touch-directives/touch-style.styl
@@ -1,5 +1,3 @@
-@import '~quasar-variables'
-
 .docs-touch
   .custom-area
     height 350px
diff --git a/quasar/dev/components/web-tests/fast-test.vue b/quasar/dev/components/web-tests/fast-test.vue
diff --git a/quasar/package.json b/quasar/package.json
diff --git a/quasar/yarn.lock b/quasar/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-@import '~quasar-variables'`
`2`		`-`
`3`	`1`	`.api-row`
`4`	`2`	`padding 8px 16px 4px`
`5`	`3`	`font-weight 300`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-@import '~quasar-variables'`
`2`		`-`
`3`	`1`	`.app-menu`
`4`	`2`
`5`	`3`	`.q-item__section--avatar`