fix scoped styles broken inside docs

marcosmoura · marcosmoura · commit ea8e425ed2be · 2017-01-08T15:50:26.000-02:00
diff --git a/build/webpack/prod-docs.js b/build/webpack/prod-docs.js
@@ -21,7 +21,7 @@ export default merge(baseConfig, {
   vue: {
     loaders: {
       css: ExtractTextPlugin.extract('css'),
-      scss: ExtractTextPlugin.extract(['css', 'sass'])
+      scss: ExtractTextPlugin.extract('css!sass')
     },
     postcss: [
       autoprefixer({
diff --git a/build/webpack/prod-lib.js b/build/webpack/prod-lib.js
@@ -38,7 +38,7 @@ export default merge(baseConfig, {
   vue: {
     loaders: {
       css: ExtractTextPlugin.extract('css'),
-      scss: ExtractTextPlugin.extract(['css', 'sass'])
+      scss: ExtractTextPlugin.extract('css!sass')
     },
     postcss: [
       autoprefixer({
diff --git a/docs/src/App.vue b/docs/src/App.vue
@@ -186,7 +186,7 @@
   </div>
 </template>
 
-<style lang="scss">
+<style lang="sass">
   @import '../../src/core/stylesheets/variables.scss';
 
   $sizebar-size: 280px;
diff --git a/docs/src/components/ApiTable.vue b/docs/src/components/ApiTable.vue
@@ -24,7 +24,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .api-table + .api-table {
     margin-top: 42px;
   }
diff --git a/docs/src/components/CodeBlock.vue b/docs/src/components/CodeBlock.vue
@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   @import '../../../src/core/stylesheets/variables.scss';
 
   .code-block {
@@ -118,7 +118,7 @@
   }
 </style>
 
-<style lang="scss">
+<style lang="sass">
   @import '../../../src/core/stylesheets/variables.scss';
 
   .code-block {
diff --git a/docs/src/components/DocsComponent.vue b/docs/src/components/DocsComponent.vue
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .component-docs {
     position: relative;
     z-index: 1;
diff --git a/docs/src/components/ExampleBox.vue b/docs/src/components/ExampleBox.vue
@@ -48,7 +48,7 @@ var App = new Vue({
   </div>
 </template>
 
-<style lang="scss">
+<style lang="sass">
   .example-box .code-content {
     .code-block {
       margin: -16px;
@@ -64,7 +64,7 @@ var App = new Vue({
   }
 </style>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .example-box {
     margin-bottom: 16px;
   }
diff --git a/docs/src/components/PageContent.vue b/docs/src/components/PageContent.vue
@@ -23,7 +23,7 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .page-content {
     min-height: 100%;
     max-height: 100%;
diff --git a/docs/src/index.js b/docs/src/index.js
@@ -68,8 +68,10 @@ router.beforeEach((to, from, next) => {
 
     Docs.closeSidenav();
 
-    handleSectionTheme(to);
-
     next();
   });
 });
+
+router.afterEach((to) => {
+  handleSectionTheme(to);
+});
diff --git a/docs/src/pages/About.vue b/docs/src/pages/About.vue
@@ -70,7 +70,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   section {
     max-width: 960px;
 
diff --git a/docs/src/pages/Changelog.vue b/docs/src/pages/Changelog.vue
@@ -4,7 +4,7 @@
   </page-content>
 </template>
 
-<style lang="scss">
+<style lang="sass">
   .changelog section {
     max-width: 960px;
 
diff --git a/docs/src/pages/Error.vue b/docs/src/pages/Error.vue
@@ -11,7 +11,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   section {
     margin-top: 64px;
     text-align: center;
diff --git a/docs/src/pages/GettingStarted.vue b/docs/src/pages/GettingStarted.vue
@@ -112,7 +112,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .main-content {
     position: relative;
   }
diff --git a/docs/src/pages/Introduction.vue b/docs/src/pages/Introduction.vue
@@ -34,7 +34,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .introduction {
     max-width: 960px;
     margin: 0 auto;
diff --git a/docs/src/pages/components/Avatar.vue b/docs/src/pages/components/Avatar.vue
@@ -137,7 +137,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .md-avatar + .md-avatar {
     margin-left: 8px;
   }
diff --git a/docs/src/pages/components/BottomBar.vue b/docs/src/pages/components/BottomBar.vue
@@ -325,7 +325,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .md-bottom-bar {
     position: absolute;
     right: 0;
diff --git a/docs/src/pages/components/ButtonToggle.vue b/docs/src/pages/components/ButtonToggle.vue
@@ -460,7 +460,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .md-button-toggle + .md-button-toggle {
     margin-top: 16px;
   }
diff --git a/docs/src/pages/components/Buttons.vue b/docs/src/pages/components/Buttons.vue
@@ -448,7 +448,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .disabled-button {
     margin-left: 8px;
   }
diff --git a/docs/src/pages/components/Card.vue b/docs/src/pages/components/Card.vue
@@ -1051,7 +1051,7 @@
               &lt;/md-card&gt;
             </code-block>
 
-            <code-block lang="scss">
+            <code-block lang="sass">
               .card-example {
                 .md-subhead {
                   .md-icon {
@@ -1094,7 +1094,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .card-holder {
     .md-card {
       width: 100%;
diff --git a/docs/src/pages/components/Dialog.vue b/docs/src/pages/components/Dialog.vue
@@ -577,7 +577,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .dialog-fab {
     height: 200px;
   }
diff --git a/docs/src/pages/components/EmptyComponent.vue b/docs/src/pages/components/EmptyComponent.vue
@@ -49,6 +49,6 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
 
 </style>
diff --git a/docs/src/pages/components/Icon.vue b/docs/src/pages/components/Icon.vue
@@ -155,7 +155,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   strong {
     margin: auto 16px auto 0;
     display: inline-block;
diff --git a/docs/src/pages/components/InkRipple.vue b/docs/src/pages/components/InkRipple.vue
@@ -116,7 +116,7 @@
               &lt;/md-card&gt;
             </code-block>
 
-            <code-block lang="scss">
+            <code-block lang="sass">
               .has-ripple {
                 margin-bottom: 16px;
                 padding: 20px;
@@ -148,7 +148,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .has-ripple {
     margin-bottom: 16px;
     padding: 20px;
diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue
@@ -442,7 +442,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
 
 </style>
 
diff --git a/docs/src/pages/components/List.vue b/docs/src/pages/components/List.vue
@@ -951,7 +951,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .phone-viewport {
     height: 400px;
   }
diff --git a/docs/src/pages/components/Menu.vue b/docs/src/pages/components/Menu.vue
@@ -594,7 +594,7 @@
               &lt;md-button class=&quot;md-raised md-primary&quot; @click.native=&quot;$refs.menu.open&quot;&gt;Open contact card&lt;/md-button&gt;
             </code-block>
 
-            <code-block lang="scss">
+            <code-block lang="sass">
               .author-card {
                 padding: 8px 16px;
                 display: flex;
@@ -630,7 +630,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .md-menu {
     margin-right: 36px;
   }
diff --git a/docs/src/pages/components/Progress.vue b/docs/src/pages/components/Progress.vue
@@ -99,7 +99,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .progress-area {
     height: 44px;
 
diff --git a/docs/src/pages/components/Select.vue b/docs/src/pages/components/Select.vue
@@ -363,7 +363,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .field-group {
     display: flex;
   }
diff --git a/docs/src/pages/components/Sidenav.vue b/docs/src/pages/components/Sidenav.vue
@@ -190,7 +190,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .phone-viewport p {
     padding: 8px 16px;
   }
diff --git a/docs/src/pages/components/Snackbar.vue b/docs/src/pages/components/Snackbar.vue
@@ -170,7 +170,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
 
 </style>
 
diff --git a/docs/src/pages/components/Spinner.vue b/docs/src/pages/components/Spinner.vue
@@ -132,7 +132,7 @@
               &lt;/md-theme&gt;
             </code-block>
 
-            <code-block lang="scss">
+            <code-block lang="sass">
               .complete-example {
                 width: 56px;
                 height: 56px;
@@ -194,7 +194,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .spinner-demo {
     min-height: 55px;
   }
diff --git a/docs/src/pages/components/Table.vue b/docs/src/pages/components/Table.vue
@@ -660,7 +660,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .md-table + .md-table-card,
   .md-table-card + .md-table-card {
     margin-top: 24px;
diff --git a/docs/src/pages/components/Toolbar.vue b/docs/src/pages/components/Toolbar.vue
@@ -813,7 +813,7 @@
               &lt;/div&gt;
             </code-block>
 
-            <code-block lang="scss">
+            <code-block lang="sass">
               .complete-example {
                 height: 540px;
                 display: flex;
@@ -867,7 +867,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .md-toolbar + .md-toolbar {
     margin-top: 16px;
   }
diff --git a/docs/src/pages/components/Tooltip.vue b/docs/src/pages/components/Tooltip.vue
@@ -150,7 +150,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .md-button,
   .md-avatar {
     margin: 24px;
diff --git a/docs/src/pages/components/Whiteframe.vue b/docs/src/pages/components/Whiteframe.vue
@@ -96,7 +96,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   .md-whiteframe {
     width: 100px;
     height: 100px;
diff --git a/docs/src/pages/themes/Configuration.vue b/docs/src/pages/themes/Configuration.vue
@@ -116,7 +116,7 @@
   </page-content>
 </template>
 
-<style lang="scss" scoped>
+<style lang="sass" scoped>
   section {
     max-width: 960px;
 
diff --git a/docs/src/pages/themes/DynamicThemes.vue b/docs/src/pages/themes/DynamicThemes.vue
diff --git a/docs/src/pages/ui-elements/Layout.vue b/docs/src/pages/ui-elements/Layout.vue
diff --git a/docs/src/pages/ui-elements/Typography.vue b/docs/src/pages/ui-elements/Typography.vue
diff --git a/package.json b/package.json
diff --git a/src/components/mdTabs/mdTabs.vue b/src/components/mdTabs/mdTabs.vue
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`</div>`
`25`	`25`	`</template>`
`26`	`26`
`27`		`-<style lang="scss" scoped>`
	`27`	`+<style lang="sass" scoped>`
`28`	`28`	`.api-table + .api-table {`
`29`	`29`	`margin-top: 42px;`
`30`	`30`	`}`