upgrade(styles): Outsource CSS in dedicated file

- Update webpack bundling BREAKING CHANGE: new file style.css
podlove · Jul 29, 2017 · 51a0a72 · 51a0a72
1 parent 3126b60
commit 51a0a72
Show file tree

Hide file tree

Showing 30 changed files with 445 additions and 196 deletions.
diff --git a/docs/standalone.html b/docs/standalone.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <PodlovePlayer></PodlovePlayer>

diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
   "devDependencies": {
     "ava": "0.18.2",
     "babel-core": "6.22.0",
-    "babel-loader": "7.0.0",
+    "babel-loader": "^7.1.1",
     "babel-plugin-add-module-exports": "0.2.1",
     "babel-plugin-lodash": "3.2.11",
     "babel-plugin-transform-object-rest-spread": "6.23.0",
@@ -90,15 +90,16 @@
     "css-loader": "0.25.0",
     "cz-conventional-changelog": "^2.0.0",
     "eslint-plugin-html": "3.0.0",
+    "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "0.11.1",
     "generate-changelog": "1.1.0",
-    "html-webpack-plugin": "2.26.0",
-    "inject-loader": "3.0.0",
+    "html-webpack-plugin": "^2.29.0",
+    "inject-loader": "^3.0.1",
     "lolex": "1.6.0",
     "node-sass": "4.1.1",
     "nyc": "10.1.2",
     "raw-loader": "0.5.1",
-    "sass-loader": "4.1.1",
+    "sass-loader": "^6.0.6",
     "semver": "5.3.0",
     "sinon": "2.1.0",
     "snazzy": "7.0.0",
@@ -108,10 +109,10 @@
     "transform-runtime": "0.0.0",
     "vue-loader": "^12.2.2",
     "vue-template-compiler": "^2.4.2",
-    "webpack": "2.3.2",
+    "webpack": "^3.4.1",
     "webpack-bundle-analyzer": "2.4.0",
     "webpack-dashboard": "0.3.0",
-    "webpack-dev-server": "2.4.5"
+    "webpack-dev-server": "^2.6.1"
   },
   "engines": {
     "node": ">=5.0.0"

diff --git a/src/components/App.vue b/src/components/App.vue
@@ -38,15 +38,17 @@
 
 <style lang="scss">
   @import 'variables';
-  @import 'resets/resets';
   @import 'global';
+  @import 'utils';
   @import 'font';
+  @import 'resets/resets';
 
+  @import 'inputs';
   @import 'embed';
-  @import 'utils';
-
+  @import 'share';
 
   @import 'transitions';
+  @import 'animations';
 
   .podlove {
     display: block;

diff --git a/src/components/player/control-bar/PlayButton.vue b/src/components/player/control-bar/PlayButton.vue
@@ -102,7 +102,6 @@
 
 <style lang="scss">
   @import 'variables';
-  $button-width: 50px;
 
   .play-button {
     display: flex;

diff --git a/src/components/player/progress-bar/CurrentChapter.vue b/src/components/player/progress-bar/CurrentChapter.vue
@@ -38,8 +38,6 @@
 </script>
 
 <style lang="scss">
-  @import 'animations';
-
   .timer-chapter {
     width: 100%;
     text-align: center;

diff --git a/src/components/player/progress-bar/Progress.vue b/src/components/player/progress-bar/Progress.vue
@@ -142,15 +142,6 @@
 <style lang="scss">
   @import 'variables';
 
-  $progress-height: 44px;
-
-  $progress-track-height: 2px;
-
-  $progress-thumb-height: 14px;
-  $progress-thumb-width: 6px;
-  $progress-thumb-active-height: 18px;
-  $progress-thumb-active-width: 8px;
-
   .progress {
     width: 100%;
     position: relative;

diff --git a/src/components/player/progress-bar/Timer.vue b/src/components/player/progress-bar/Timer.vue
@@ -43,9 +43,6 @@ export default {
   @import 'variables';
   @import 'font';
 
-  $timer-width: 80px;
-  $timer-height: 20px;
-
   // Timer
   .timer-progress {
     display: flex;

diff --git a/src/components/shared/InputSelect.vue b/src/components/shared/InputSelect.vue
@@ -29,15 +29,14 @@
 <style lang="scss">
   @import 'variables';
 
-.input-select {
-  display: block;
-  width: 100%;
-
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 0;
-  padding: $padding / 4;
-  height: $input-height;
-}
+  .input-select {
+    display: block;
+    width: 100%;
 
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 0;
+    padding: $padding / 4;
+    height: $input-height;
+  }
 </style>
diff --git a/src/components/shared/InputSlider.vue b/src/components/shared/InputSlider.vue
@@ -60,7 +60,6 @@
 
 <style lang="scss">
   @import 'variables';
-  $slider-height: 44px;
 
   .input-slider {
     height: $slider-height;

diff --git a/src/components/shared/Overlay.vue b/src/components/shared/Overlay.vue
@@ -41,7 +41,6 @@
 
 <style lang="scss">
   @import 'variables';
-  @import 'animations';
 
   .overlay-container {
     position: absolute;

diff --git a/src/components/shared/Slider.vue b/src/components/shared/Slider.vue
@@ -62,7 +62,6 @@
 
 <style lang="scss">
   @import 'variables';
-  $slider-height: 44px;
 
   .podlove-player--slider {
     height: $slider-height;

diff --git a/src/components/shared/TabHeaderItem.vue b/src/components/shared/TabHeaderItem.vue
@@ -64,14 +64,14 @@
   @import 'variables';
 
   .tab-header-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: ($padding / 2) $padding;
-      width: 100%;
-      margin: 0;
-      height: $tabs-header-height;
-      transition: all $animation-duration;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: ($padding / 2) $padding;
+    width: 100%;
+    margin: 0;
+    height: $tabs-header-height;
+    transition: all $animation-duration;
 
     .caption {
       display: flex;

diff --git a/src/components/tabs/audio/Audio.vue b/src/components/tabs/audio/Audio.vue
@@ -34,7 +34,6 @@
 
 <style lang="scss">
   @import 'variables';
-  @import 'inputs';
 
   .audio {
     width: 100%;

diff --git a/src/components/tabs/audio/AudioRate.vue b/src/components/tabs/audio/AudioRate.vue
@@ -113,8 +113,3 @@
     }
   }
 </script>
-
-<style lang="scss">
-  @import 'variables';
-  @import 'inputs';
-</style>
diff --git a/src/components/tabs/audio/AudioVolume.vue b/src/components/tabs/audio/AudioVolume.vue
@@ -76,7 +76,6 @@
 
 <style lang="scss">
   @import 'variables';
-  @import 'inputs';
 
   .audio {
     .mute-control {

diff --git a/src/components/tabs/chapters/ChapterEntry.vue b/src/components/tabs/chapters/ChapterEntry.vue
@@ -145,8 +145,6 @@
   @import 'variables';
   @import 'font';
 
-  $index-width: 40px;
-
   .chapters--entry {
     width: 100%;
     position: relative;

diff --git a/src/components/tabs/share/Share.vue b/src/components/tabs/share/Share.vue
@@ -49,8 +49,6 @@
 <style lang="scss">
   @import 'variables';
 
-  $content-meta-height: 75px;
-
   .share {
     padding: $padding 0 0 0;
 

diff --git a/src/components/tabs/share/ShareChannels.vue b/src/components/tabs/share/ShareChannels.vue
@@ -1,8 +1,8 @@
 <template>
   <ul class="channel-list">
     <li><ChannelTwitterComponent :text="shareText"></ChannelTwitterComponent></li>
-    <li><ChannelFacebookComponent :link="link"></ChannelFacebookComponent></li>
-    <li><ChannelGooglePlusComponent :link="link"></ChannelGooglePlusComponent></li>
+    <li><ChannelFacebookComponent :link="shareLink"></ChannelFacebookComponent></li>
+    <li><ChannelGooglePlusComponent :link="shareLink"></ChannelGooglePlusComponent></li>
     <li><ChannelMailComponent :text="shareText" :subject="shareSubject"></ChannelMailComponent></li>
     <li v-if="type !== 'show'"><ChannelEmbedComponent :color="theme.tabs.share.platform.button"></ChannelEmbedComponent></li>
   </ul>
@@ -127,8 +127,6 @@
 <style lang="scss">
   @import 'variables';
 
-  $button-size: 60px;
-
   .channel-list {
     display: flex;
     justify-content: center;

diff --git a/src/components/tabs/share/ShareEmbed.vue b/src/components/tabs/share/ShareEmbed.vue
@@ -97,8 +97,6 @@
 
 <style lang="scss">
   @import 'variables';
-  @import 'utils';
-  @import 'inputs';
 
   .embed-code {
     width: 100%;
@@ -108,7 +106,7 @@
 
   .embed-overlay {
     .overlay {
-      width: 250px;
+      width: $share-embed-width;
     }
   }
 

diff --git a/src/components/tabs/share/ShareLink.vue b/src/components/tabs/share/ShareLink.vue
@@ -58,7 +58,3 @@
     }
   }
 </script>
-
-<style lang="scss">
-    @import 'inputs';
-</style>
diff --git a/src/components/tabs/share/channels/ChannelEmbed.vue b/src/components/tabs/share/channels/ChannelEmbed.vue
@@ -29,9 +29,3 @@
     }
   }
 </script>
-
-<style lang="scss">
-  @import 'share';
-
-  $channel-color: #888;
-</style>
diff --git a/src/components/tabs/share/channels/ChannelFacebook.vue b/src/components/tabs/share/channels/ChannelFacebook.vue
@@ -24,8 +24,6 @@
 </script>
 
 <style lang="scss">
-  @import 'share';
-
   $channel-color: #3b5998;
 
   .channel-icon.facebook {

diff --git a/src/components/tabs/share/channels/ChannelGooglePlus.vue b/src/components/tabs/share/channels/ChannelGooglePlus.vue
@@ -24,8 +24,6 @@
 </script>
 
 <style lang="scss">
-  @import 'share';
-
   $channel-color: #dd4b39;
 
   .channel-icon.google-plus {

diff --git a/src/components/tabs/share/channels/ChannelMail.vue b/src/components/tabs/share/channels/ChannelMail.vue
@@ -24,8 +24,6 @@
 </script>
 
 <style lang="scss">
-  @import 'share';
-
   $channel-color: #888;
 
   .channel-icon.mail {

diff --git a/src/core/index.js b/src/core/index.js
@@ -9,8 +9,4 @@ const createRenderer = instance => {
   return instance
 }
 
-const Renderer = createRenderer(Vue)
-
-export {
-  Renderer
-}
+export const Renderer = createRenderer(Vue)
diff --git a/src/embed/embed.js b/src/embed/embed.js
@@ -93,6 +93,7 @@ const configNode = (config = {}) =>
     .then(config => tag('script', `window.PODLOVE = ${JSON.stringify(config)}`))
 
 // Player Logic
+const styleBundle = config => tag('link', '', {rel: 'stylesheet', href: `${get(config.reference, 'base', '.')}/style.css`})
 const vendorBundle = config => tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', '.')}/vendor.js`})
 const appBundle = config => tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', '.')}/window.js`})
 
@@ -108,6 +109,7 @@ window.podlovePlayer = (selector, config) => {
   return Bluebird.all([
     playerEntry,
     configNode(config),
+    styleBundle(config),
     vendorBundle(config),
     appBundle(config),
     dynamicResizer

diff --git a/src/statics/share.html b/src/statics/share.html
@@ -8,6 +8,7 @@
             overflow: hidden;
         }
     </style>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <PodlovePlayer></PodlovePlayer>

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -26,6 +26,22 @@ $input-height: 35px;
 $addon-button-width: 80px;
 $mute-control-width: calc(60px + #{$padding});
 $content-option-width: 175px;
+$button-width: 50px;
+$slider-height: 44px;
+$index-width: 40px;
+
+$progress-height: 44px;
+$progress-track-height: 2px;
+$progress-thumb-height: 14px;
+$progress-thumb-width: 6px;
+$progress-thumb-active-height: 18px;
+$progress-thumb-active-width: 8px;
+
+$timer-width: 80px;
+$timer-height: 20px;
+
+$content-meta-height: 75px;
+$share-embed-width: 250px;
 
 // levels
 $tab-shadow: 100;