Merge pull request #450 from webpack/fix-css

bebraw · web-flow · commit 0a1f99277d7b · 2016-11-29T15:08:35.000+02:00
Fix asset handling
diff --git a/components/container/container.jsx b/components/container/container.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import './container-style';
 
 export default (props = {}) => {
   let { className = '' } = props;
diff --git a/components/logo/logo.jsx b/components/logo/logo.jsx
@@ -1,8 +1,5 @@
 import React from 'react';
 import Logo from '../../assets/site-logo.svg';
-// TODO: Without this useless import, the icon in the footer breaks. Very weird.
-import '../../assets/icon-square-small.svg';
-import './logo-style';
 
 export default () => {
   return (
diff --git a/components/navigation/navigation.jsx b/components/navigation/navigation.jsx
@@ -2,21 +2,19 @@ import React from 'react';
 import Link from '../link/link';
 import Container from '../container/container';
 import Logo from '../logo/logo';
-import './navigation-style';
-import './search-style';
 
 // TODO: Maybe by updating the routing scheme later on we can avoid hardcoding this?
 let Sections = [
-  { 
-    title: 'Concepts', 
-    url: 'concepts' 
+  {
+    title: 'Concepts',
+    url: 'concepts'
   },
-  { 
-    title: 'Guides', 
-    url: 'guides' 
+  {
+    title: 'Guides',
+    url: 'guides'
   },
-  { 
-    title: 'Documentation', 
+  {
+    title: 'Documentation',
     url: 'configuration',
     children: [
       { title: 'API', url: 'api' },
@@ -25,17 +23,17 @@ let Sections = [
       { title: 'Plugins', url: 'plugins' }
     ]
   },
-  { 
-    title: 'Donate', 
-    url: '//opencollective.com/webpack' 
+  {
+    title: 'Donate',
+    url: '//opencollective.com/webpack'
   }
 ];
 
 // TODO: Move back to using state once we can handle algolia on our own
 export default class Navigation extends React.Component {
   render() {
     let { pageUrl, sections } = this.props;
-    
+
     return (
       <header className="navigation">
         <Container className="navigation__inner">
@@ -66,15 +64,15 @@ export default class Navigation extends React.Component {
           </nav>
 
           <div className="navigation__search">
-            <input 
-              type="text" 
+            <input
+              type="text"
               className="navigation__search-input"
               placeholder="Search documentation…"
               onBlur={ this._toggleSearch.bind(this) } />
-            <button 
+            <button
               className="navigation__search-icon icon-magnifying-glass"
               onClick={ this._toggleSearch.bind(this) } />
-            <button 
+            <button
               className="navigation__search-icon icon-cross"
               onClick={ this._toggleSearch.bind(this) } />
           </div>
@@ -126,7 +124,7 @@ export default class Navigation extends React.Component {
 
   /**
    * Check if section is active
-   * 
+   *
    * @param {object} section - An object describing the section
    * @return {bool} - Whether or not the given section is active
    */
@@ -141,7 +139,7 @@ export default class Navigation extends React.Component {
 
   /**
    * Toggle the SidebarMobile component
-   * 
+   *
    * @param {object} e - Native click event
    */
   _toggleSidebar(e) {
@@ -153,7 +151,7 @@ export default class Navigation extends React.Component {
 
   /**
    * Toggle the search input
-   * 
+   *
    */
   _toggleSearch() {
     let container = document.querySelector('.navigation');
@@ -165,11 +163,11 @@ export default class Navigation extends React.Component {
 
   /**
    * Expand the search input
-   * 
+   *
    */
   _openSearch() {
     let container = document.querySelector('.navigation');
-    
+
     container.classList.add('navigation--search-mode');
   }
 }
diff --git a/components/page/page.jsx b/components/page/page.jsx
@@ -6,6 +6,7 @@ import Sidecar from '../sidecar/sidecar';
 import Contributors from '../contributors/contributors';
 import '../../styles';
 import './page-style';
+import '../sidebar/sidebar-style';
 
 export default ({ section, page }) => {
   let edit = `https://github.com/webpack/webpack.js.org/edit/develop/content/${page.url}.md`;
diff --git a/components/sidebar-item/sidebar-item.jsx b/components/sidebar-item/sidebar-item.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Link from '../link/link';
-import './sidebar-item-style';
 
 export default class SidebarItem extends React.Component {
   constructor(props) {
diff --git a/components/sidebar-mobile/sidebar-mobile.jsx b/components/sidebar-mobile/sidebar-mobile.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Link from '../link/link';
-import './sidebar-mobile-style';
 
 let initialTouchPosition = {};
 let lastTouchPosition = {};
@@ -14,24 +13,24 @@ export default class SidebarMobile extends React.Component {
 
   render() {
     return (
-      <nav 
-        className="sidebar-mobile" 
-        ref={ ref => this.container = ref } 
+      <nav
+        className="sidebar-mobile"
+        ref={ ref => this.container = ref }
         onTouchStart={this._handleTouchStart.bind(this)}
         onTouchMove={this._handleTouchMove.bind(this)}
         onTouchEnd={this._handleTouchEnd.bind(this)}>
 
-        <div 
+        <div
           className="sidebar-mobile__toggle"
           onTouchStart={this._handleTouchStart.bind(this)}
           onTouchMove={this._handleOpenerTouchMove.bind(this)}
           onTouchEnd={this._handleTouchEnd.bind(this)} />
 
         <div className="sidebar-mobile__content">
-          <i 
+          <i
             className="sidebar-mobile__close icon-cross"
             onClick={ this._close.bind(this) } />
-          
+
           { this._getSections() }
         </div>
       </nav>
@@ -75,10 +74,10 @@ export default class SidebarMobile extends React.Component {
             className="sidebar-mobile__section-header"
             key={ absoluteUrl }
             to={ absoluteUrl }
-            onClick={ this._close.bind(this) }>  
+            onClick={ this._close.bind(this) }>
             <h3>{ section.title }</h3>
           </Link>
-          
+
           { this._getPages(section.pages) }
         </div>
       );
@@ -104,8 +103,8 @@ export default class SidebarMobile extends React.Component {
 
       return (
         <Link
-          key={ url } 
-          className={ `sidebar-mobile__page ${active ? 'sidebar-mobile__page--active' : ''}` } 
+          key={ url }
+          className={ `sidebar-mobile__page ${active ? 'sidebar-mobile__page--active' : ''}` }
           to={ url }
           onClick={ this._close.bind(this) }>
           { page.title }
diff --git a/components/sidebar/sidebar.jsx b/components/sidebar/sidebar.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import SidebarItem from '../sidebar-item/sidebar-item';
-import './sidebar-style';
 
 export default props => {
   let { sectionName, pages, currentPage } = props;
@@ -9,8 +8,8 @@ export default props => {
     <nav className="sidebar">
       <div className="sidebar__inner">
         <h3 className="sidebar-item__version">Version 2.1</h3>
-        <SidebarItem 
-          url={ `/${sectionName}` } 
+        <SidebarItem
+          url={ `/${sectionName}` }
           title="Introduction"
           currentPage= { currentPage }
         />
diff --git a/components/site/site.jsx b/components/site/site.jsx
@@ -6,6 +6,12 @@ import Footer from '../footer/footer';
 import SidebarMobile from '../sidebar-mobile/sidebar-mobile';
 import './site-style';
 import '../../styles/icon.font.js';
+import '../container/container-style.scss';
+import '../navigation/navigation-style';
+import '../navigation/search-style';
+import '../sidebar-mobile/sidebar-mobile-style';
+import '../sidebar-item/sidebar-item-style';
+import '../logo/logo-style';
 
 export default props => {
   // Retrieve section data
diff --git a/components/splash-file/splash-file.js b/components/splash-file/splash-file.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import FileSize from 'filesize';
-import './splash-file-style';
 
 export default props => {
   return (
@@ -10,4 +9,4 @@ export default props => {
       <b className="splash-file__size">{ FileSize(props.size) }</b>
     </div>
   );
-};
+};
diff --git a/components/splash-viz/splash-viz.jsx b/components/splash-viz/splash-viz.jsx
@@ -3,7 +3,6 @@ import Link from '../link/link';
 import SplashFile from '../splash-file/splash-file';
 import Icon from '../../assets/icon-square-big.svg';
 import Modules from '../../assets/modules.png';
-import './splash-viz-style';
 
 export default class SplashViz extends React.Component {
   constructor(props) {
diff --git a/components/splash/splash.jsx b/components/splash/splash.jsx
@@ -4,6 +4,8 @@ import Container from '../container/container';
 import SplashViz from '../splash-viz/splash-viz';
 import '../../styles';
 import './splash-style';
+import '../splash-viz/splash-viz-style';
+import '../splash-file/splash-file-style';
 import Support from '../support/support';
 
 export default props => {
@@ -17,8 +19,8 @@ export default props => {
 
       <Container className="splash__section">
         <h1>{ page.title }</h1>
-        <div dangerouslySetInnerHTML={{ 
-          __html: page.content 
+        <div dangerouslySetInnerHTML={{
+          __html: page.content
         }} />
       </Container>
 
diff --git a/components/vote/app.jsx b/components/vote/app.jsx
@@ -2,8 +2,6 @@ import React from 'react';
 import 'whatwg-fetch';
 import SidebarItem from '../sidebar-item/sidebar-item';
 import * as api from "./api";
-import './app-style';
-import './influence-style';
 import VoteButton from './button/button';
 import Influence from './influence.jsx';
 
diff --git a/components/vote/button/button.jsx b/components/vote/button/button.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-require("./button-style.scss");
 
 export default (props) => {
   let { value, myValue, maxDown, maxUp, color, onVote, className } = props;
diff --git a/components/vote/influence-style.scss b/components/vote/influence-style.scss
@@ -7,7 +7,7 @@
   }
 
   i {
-    font-style: italic; 
+    font-style: italic;
   }
 
   &__section {
diff --git a/components/vote/influence.jsx b/components/vote/influence.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import './influence-style.scss';
 
 export default class InfluenceComponent extends React.Component {
     constructor(props) {
@@ -19,4 +18,4 @@ export default class InfluenceComponent extends React.Component {
             </section>
         ));
     }
-}
+}
diff --git a/components/vote/list.jsx b/components/vote/list.jsx
@@ -4,6 +4,9 @@ import Container from '../container/container';
 import VoteApp from './app';
 import '../../styles';
 import './list-style';
+import './app-style';
+import './influence-style';
+import './button/button-style';
 
 export default ({ section, page }) => {
   return (
diff --git a/package.json b/package.json
@@ -39,10 +39,10 @@
   },
   "devDependencies": {
     "alex": "^3.1.0",
-    "antwar": "0.8.1-alpha.edb2b960",
-    "antwar-helpers": "0.8.1-alpha.549a2f3a",
-    "antwar-interactive": "0.8.1-alpha.549a2f3a",
-    "antwar-prevnext-plugin": "0.8.1-alpha.549a2f3a",
+    "antwar": "0.8.1-alpha.d45b49e2",
+    "antwar-helpers": "0.8.1-alpha.d45b49e2",
+    "antwar-interactive": "0.8.1-alpha.d45b49e2",
+    "antwar-prevnext-plugin": "0.8.1-alpha.d45b49e2",
     "async": "^2.1.2",
     "autoprefixer": "^6.3.7",
     "babel-core": "^6.10.4",
@@ -51,6 +51,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.16.0",
     "babel-preset-env": "^0.0.8",
     "babel-preset-react": "^6.11.1",
+    "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.25.0",
     "eslint": "3.6.0",
     "eslint-loader": "^1.5.0",
diff --git a/template.ejs b/template.ejs
@@ -13,7 +13,7 @@
     <% for (var file in webpackConfig.template.cssFiles) { %>
       <link href="<%= webpackConfig.template.cssFiles[file] %>" rel="stylesheet">
     <% } %>
-    
+
     <script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
   </head>
   <body>
@@ -29,7 +29,7 @@
         activationElement: false
       };
     </script>
-    
+
     <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
   </body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import React from 'react';`
`2`		`-import './container-style';`
`3`	`2`
`4`	`3`	`export default (props = {}) => {`
`5`	`4`	`let { className = '' } = props;`