refactor: automatically inject @/style/imports using import option provided by stylus loader (#2515)

2026-04-20 11:30:43 -05:00 · 2018-10-15 17:02:48 +02:00
parent 9357a608f2
commit 30d46ffc30
58 changed files with 10 additions and 115 deletions
--- a/packages/@vue/cli-ui/src/App.vue
+++ b/packages/@vue/cli-ui/src/App.vue
@@ -34,8 +34,6 @@ export default {
 </style>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .app
  display flex
  flex-direction column
--- a/packages/@vue/cli-ui/src/components/ClientAddonComponent.vue
+++ b/packages/@vue/cli-ui/src/components/ClientAddonComponent.vue
@@ -39,8 +39,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .loading
  v-box()
  box-center()
--- a/packages/@vue/cli-ui/src/components/ConfigurationItem.vue
+++ b/packages/@vue/cli-ui/src/components/ConfigurationItem.vue
@@ -38,8 +38,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .configuration-item
  padding $padding-item

--- a/packages/@vue/cli-ui/src/components/ConnectionStatus.vue
+++ b/packages/@vue/cli-ui/src/components/ConnectionStatus.vue
@@ -31,8 +31,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .content
  display flex
  align-items center
--- a/packages/@vue/cli-ui/src/components/ContentView.vue
+++ b/packages/@vue/cli-ui/src/components/ContentView.vue
@@ -25,8 +25,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .content-view
  height 100%

--- a/packages/@vue/cli-ui/src/components/FileDiff.vue
+++ b/packages/@vue/cli-ui/src/components/FileDiff.vue
@@ -103,8 +103,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 status-color($color)
  .name
    color $color
--- a/packages/@vue/cli-ui/src/components/FileDiffChange.vue
+++ b/packages/@vue/cli-ui/src/components/FileDiffChange.vue
@@ -76,8 +76,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .file-diff-change
  font-family $font-mono
  font-size 12px
--- a/packages/@vue/cli-ui/src/components/FileDiffChunk.vue
+++ b/packages/@vue/cli-ui/src/components/FileDiffChunk.vue
@@ -22,8 +22,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .file-diff-chunk
  .changes
    overflow-x auto
--- a/packages/@vue/cli-ui/src/components/FileDiffView.vue
+++ b/packages/@vue/cli-ui/src/components/FileDiffView.vue
@@ -247,8 +247,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .file-diff-view
  v-box()
  height 100%
--- a/packages/@vue/cli-ui/src/components/FolderExplorer.vue
+++ b/packages/@vue/cli-ui/src/components/FolderExplorer.vue
@@ -399,8 +399,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .toolbar
  padding $padding-item 0
  h-box()
--- a/packages/@vue/cli-ui/src/components/FolderExplorerItem.vue
+++ b/packages/@vue/cli-ui/src/components/FolderExplorerItem.vue
@@ -38,8 +38,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .folder-explorer-item
  padding $padding-item
  h-box()
--- a/packages/@vue/cli-ui/src/components/InstantSearchPagination.vue
+++ b/packages/@vue/cli-ui/src/components/InstantSearchPagination.vue
@@ -55,8 +55,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .instant-search-pagination
  margin $padding-item 0
  .content
--- a/packages/@vue/cli-ui/src/components/ItemLogo.vue
+++ b/packages/@vue/cli-ui/src/components/ItemLogo.vue
@@ -98,8 +98,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .item-logo
  margin-right $padding-item
  position relative
--- a/packages/@vue/cli-ui/src/components/ListItemInfo.vue
+++ b/packages/@vue/cli-ui/src/components/ListItemInfo.vue
@@ -60,8 +60,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .list-item-info
  v-box()
  align-items stretch
--- a/packages/@vue/cli-ui/src/components/LoggerMessage.vue
+++ b/packages/@vue/cli-ui/src/components/LoggerMessage.vue
@@ -34,8 +34,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .logger-message
  h-box()
  align-items baseline
--- a/packages/@vue/cli-ui/src/components/LoggerView.vue
+++ b/packages/@vue/cli-ui/src/components/LoggerView.vue
@@ -111,8 +111,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .logger-view
  background $vue-ui-color-light
  height 174px
--- a/packages/@vue/cli-ui/src/components/NavContent.vue
+++ b/packages/@vue/cli-ui/src/components/NavContent.vue
@@ -26,8 +26,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .nav-content
  width 100%
  height 100%
--- a/packages/@vue/cli-ui/src/components/NavList.vue
+++ b/packages/@vue/cli-ui/src/components/NavList.vue
@@ -46,8 +46,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .nav-list
  overflow-x hidden
  overflow-y auto
--- a/packages/@vue/cli-ui/src/components/NpmPackageSearch.vue
+++ b/packages/@vue/cli-ui/src/components/NpmPackageSearch.vue
@@ -147,8 +147,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .npm-package-search
  height 100%
  display flex
--- a/packages/@vue/cli-ui/src/components/PackageSearchItem.vue
+++ b/packages/@vue/cli-ui/src/components/PackageSearchItem.vue
@@ -111,8 +111,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .package-search-item
  padding $padding-item
  h-box()
--- a/packages/@vue/cli-ui/src/components/ProgressScreen.vue
+++ b/packages/@vue/cli-ui/src/components/ProgressScreen.vue
@@ -73,8 +73,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .loading-screen
  position absolute
  z-index 900
--- a/packages/@vue/cli-ui/src/components/ProjectDependencyItem.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectDependencyItem.vue
@@ -138,8 +138,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-dependency-item
  padding $padding-item
  cursor default
--- a/packages/@vue/cli-ui/src/components/ProjectFeatureItem.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectFeatureItem.vue
@@ -32,8 +32,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-feature-item
  .vue-ui-switch
    padding $padding-item
--- a/packages/@vue/cli-ui/src/components/ProjectNav.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectNav.vue
@@ -165,8 +165,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-nav
  background $vue-ui-color-light-neutral
  .vue-ui-dark-mode &
--- a/packages/@vue/cli-ui/src/components/ProjectNavButton.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectNavButton.vue
@@ -86,8 +86,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 $bg = $vue-ui-color-light-neutral
 $bg-dark = $vue-ui-color-dark

--- a/packages/@vue/cli-ui/src/components/ProjectNavMore.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectNavMore.vue
@@ -27,8 +27,6 @@
 </template>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-nav-more
  .vue-ui-dropdown.open .dropdown-trigger .vue-ui-button
    &,
--- a/packages/@vue/cli-ui/src/components/ProjectPluginItem.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectPluginItem.vue
@@ -138,8 +138,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-plugin-item
  padding $padding-item
  cursor default
--- a/packages/@vue/cli-ui/src/components/ProjectPresetItem.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectPresetItem.vue
@@ -48,8 +48,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-preset-item
  padding $padding-item
  padding-left 0
--- a/packages/@vue/cli-ui/src/components/ProjectSelectList.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectSelectList.vue
@@ -145,8 +145,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-select-list
  height 100%
  overflow-y auto
--- a/packages/@vue/cli-ui/src/components/ProjectSelectListItem.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectSelectListItem.vue
@@ -83,8 +83,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .content
  padding $padding-item
  display grid
--- a/packages/@vue/cli-ui/src/components/ProjectTasksDropdown.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectTasksDropdown.vue
@@ -155,8 +155,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 bullet-color($color)
  .bullet
    background-color $color
--- a/packages/@vue/cli-ui/src/components/Prompt.vue
+++ b/packages/@vue/cli-ui/src/components/Prompt.vue
@@ -34,8 +34,6 @@ export default {
 </script>

 <style lang="stylus">
-@import "~@/style/imports"
-
 .prompt
  list-item()
  .prompt-content
--- a/packages/@vue/cli-ui/src/components/PromptCheckbox.vue
+++ b/packages/@vue/cli-ui/src/components/PromptCheckbox.vue
@@ -59,8 +59,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .prompt-content
  v-box()
  align-items stretch
--- a/packages/@vue/cli-ui/src/components/PromptColor.vue
+++ b/packages/@vue/cli-ui/src/components/PromptColor.vue
@@ -53,8 +53,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .color-preview
  padding-left $padding-item

--- a/packages/@vue/cli-ui/src/components/PromptConfirm.vue
+++ b/packages/@vue/cli-ui/src/components/PromptConfirm.vue
@@ -28,8 +28,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .prompt-confirm
  .vue-ui-switch
    padding $padding-item
--- a/packages/@vue/cli-ui/src/components/PromptError.vue
+++ b/packages/@vue/cli-ui/src/components/PromptError.vue
@@ -19,8 +19,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .prompt-error
  padding 0 $padding-item $padding-item

--- a/packages/@vue/cli-ui/src/components/PromptsList.vue
+++ b/packages/@vue/cli-ui/src/components/PromptsList.vue
@@ -73,8 +73,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .group
  margin-bottom ($padding-item * 2)

--- a/packages/@vue/cli-ui/src/components/StatusBar.vue
+++ b/packages/@vue/cli-ui/src/components/StatusBar.vue
@@ -184,8 +184,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .status-bar
  position relative
  z-index 1
--- a/packages/@vue/cli-ui/src/components/StepWizard.vue
+++ b/packages/@vue/cli-ui/src/components/StepWizard.vue
@@ -58,8 +58,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .step-wizard
  box-sizing border-box

--- a/packages/@vue/cli-ui/src/components/SuggestionBar.vue
+++ b/packages/@vue/cli-ui/src/components/SuggestionBar.vue
@@ -93,8 +93,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .suggestions
  h-box()
 </style>
--- a/packages/@vue/cli-ui/src/components/SuggestionBarItem.vue
+++ b/packages/@vue/cli-ui/src/components/SuggestionBarItem.vue
@@ -105,8 +105,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .suggestion-details
  padding ($padding-item * 2 - 8px) ($padding-item * 2)
  box-sizing border-box
--- a/packages/@vue/cli-ui/src/components/TaskItem.vue
+++ b/packages/@vue/cli-ui/src/components/TaskItem.vue
@@ -81,8 +81,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .task-item
  padding $padding-item

--- a/packages/@vue/cli-ui/src/components/TerminalView.vue
+++ b/packages/@vue/cli-ui/src/components/TerminalView.vue
@@ -230,8 +230,6 @@ export default {
 </style>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .terminal-view
  v-box()
  align-items stretch
--- a/packages/@vue/cli-ui/src/components/TopBar.vue
+++ b/packages/@vue/cli-ui/src/components/TopBar.vue
@@ -173,8 +173,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .top-bar
  background $vue-ui-color-light
  padding $padding-item
--- a/packages/@vue/cli-ui/src/components/ViewBadge.vue
+++ b/packages/@vue/cli-ui/src/components/ViewBadge.vue
@@ -24,8 +24,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .view-badge
  .content
    font-size 12px
--- a/packages/@vue/cli-ui/src/style/main.styl
+++ b/packages/@vue/cli-ui/src/style/main.styl
@@ -1,5 +1,4 @@
@import '~prismjs/themes/prism.css'
-@import 'imports'

 html,
 body,
@@ -166,7 +165,7 @@ ansi-colors('white', $vue-ui-color-light)
 .vue-ui-dark-mode
  .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted
    color lighten(#905, 40%)
-  
+
  .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted
    color lighten(#690, 40%)

@@ -178,6 +177,6 @@ ansi-colors('white', $vue-ui-color-light)

  .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string
    color lighten(#9a6e3a, 20%)
-  
+
  .token.punctuation
    color lighten(#999, 20%)
--- a/packages/@vue/cli-ui/src/views/About.vue
+++ b/packages/@vue/cli-ui/src/views/About.vue
@@ -53,8 +53,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .about
  padding 42px
  max-width 840px
--- a/packages/@vue/cli-ui/src/views/NotFound.vue
+++ b/packages/@vue/cli-ui/src/views/NotFound.vue
@@ -7,8 +7,6 @@
 </template>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .not-found
  v-box()
  box-center()
--- a/packages/@vue/cli-ui/src/views/ProjectConfigurationDetails.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectConfigurationDetails.vue
@@ -175,8 +175,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-configuration-details
  v-box()
  align-items stretch
--- a/packages/@vue/cli-ui/src/views/ProjectConfigurations.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectConfigurations.vue
@@ -99,8 +99,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-configurations
  .content-view /deep/ > .content
    overflow-y hidden
--- a/packages/@vue/cli-ui/src/views/ProjectCreate.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
@@ -688,8 +688,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-create
  display grid
  grid-template-columns 1fr
--- a/packages/@vue/cli-ui/src/views/ProjectDependencies.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectDependencies.vue
@@ -209,8 +209,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-dependencies
  .content-view /deep/ > .content
    overflow-y auto
--- a/packages/@vue/cli-ui/src/views/ProjectHome.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectHome.vue
@@ -41,8 +41,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-home
  display flex
  flex-direction column
--- a/packages/@vue/cli-ui/src/views/ProjectPlugins.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectPlugins.vue
@@ -114,8 +114,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-plugins
  .content-view /deep/ > .content
    overflow-y auto
--- a/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue
@@ -255,8 +255,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-plugins-add
  display grid
  grid-template-columns 1fr
--- a/packages/@vue/cli-ui/src/views/ProjectSelect.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectSelect.vue
@@ -171,8 +171,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .folder-explorer
  height 100%

--- a/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
@@ -334,8 +334,6 @@ export default {
 </script>

 <style lang="stylus" scoped>
-@import "~@/style/imports"
-
 .project-task-details
  v-box()
  align-items stretch
--- a/packages/@vue/cli-ui/vue.config.js
+++ b/packages/@vue/cli-ui/vue.config.js
@@ -23,5 +23,13 @@ module.exports = {
          }
        })
      )
+  },
+
+  css: {
+    loaderOptions: {
+      stylus: {
+        import: ['~@/style/imports']
+      }
+    }
  }
 }