Merge pull request #115 from pocka/fix/reset-all-style

Do not reset all styles with all: initial

example/stories/issues/21/BulmaButton.vue

@@ -0,0 +1,26 @@
+<script>
+export default {
+  mounted() {
+    const style = document.createElement('style')
+
+    style.textContent = `
+      body {
+        color: tomato;
+      }
+    `
+
+    style.dataset.savi = 'true'
+
+    document.querySelector('head').appendChild(style)
+  },
+  beforeDestroy() {
+    document
+      .querySelector('head')
+      .removeChild(document.querySelector('style[data-savi]'))
+  }
+}
+</script>
+
+<template>
+  <span>BUTTON</span>
+</template>

example/stories/issues/21/index.stories.js

@@ -0,0 +1,17 @@
+import { storiesOf } from '@storybook/vue'
+
+import BulmaButton from './BulmaButton'
+
+storiesOf('Issues/#21', module).add(
+  'Do not reset preview style',
+  () => ({
+    components: { BulmaButton },
+    template: '<bulma-button/>'
+  }),
+  {
+    info: {
+      docsInPanel: false,
+      summary: '<https://github.com/pocka/storybook-addon-vue-info/issues/21>'
+    }
+  }
+)

src/components/Component/style.css

@@ -1,3 +1,7 @@
+.container {
+  font-family: Roboto, sans-serif;
+}
+
 .container > :not(:first-child) {
   margin-top: 24px;
 }
@@ -6,9 +10,10 @@
   font-size: 24px;
   margin: 0;
 
+  color: #333;
   font-weight: 400;
 }
 
 .required {
-  color: #A01A1A;
+  color: #a01a1a;
 }

src/components/Docs/style.css

@@ -6,7 +6,6 @@
   left: 0;
   padding: 40px;
 
-  font-family: Roboto, sans-serif;
   overflow: auto;
 }
 

src/components/Header/index.vue

@@ -14,7 +14,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div :class="$style.container">
     <h1 :class="$style.title">{{ title }}</h1>
     <h2 :class="$style.subtitle">{{ subtitle }}</h2>
   </div>

src/components/Header/style.css

@@ -1,4 +1,10 @@
-.title, .subtitle {
+.container {
+  color: #333;
+  font-family: Roboto, sans-serif;
+}
+
+.title,
+.subtitle {
   margin: 0;
 }
 
@@ -13,5 +19,4 @@
   margin-top: 8px;
 
   font-weight: 400;
-  color: #333;
 }

src/components/Preview/style.css

@@ -1,5 +1,4 @@
 .preview {
-  all: initial;
   position: relative;
   display: block;
 }

src/components/SectionContainer/style.css

@@ -12,6 +12,7 @@
   color: #fff;
   background-color: #333;
   border-radius: 4px 4px 0 0;
+  font-family: Roboto, sans-serif;
   text-transform: uppercase;
   text-align: center;
 }

src/components/Summary/style.css

@@ -1,3 +1,7 @@
+.container {
+  font-family: Roboto, sans-serif;
+}
+
 .container h1 {
   font-size: 24px;
 }