Transfer all assets management to webpack, switch to CSS Modules

Author: alex35mil

.gitignore

@@ -27,7 +27,7 @@ vendor/ruby
 .ruby-gemset
 
 # Generated js bundles
-/app/assets/javascripts/generated/*
+/app/assets/webpack/
 
 # Rubymine/IntelliJ
 .idea

Procfile.dev

@@ -1,4 +1,4 @@
 web: rails s
-client: sh -c 'rm app/assets/javascripts/generated/* || true && cd client && npm run build:dev:client'
+client: sh -c 'rm app/assets/webpack/* || true && cd client && npm run build:dev:client'
 server: sh -c 'cd client && npm run build:dev:server'
 hot: sh -c 'cd client && npm start'

app/assets/javascripts/application.js

@@ -10,14 +10,14 @@
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
 
-// CRITICAL that generated/vendor-bundle must be BEFORE bootstrap-sprockets and turbolinks since it is
-// exposing jQuery and jQuery-ujs
-//= require generated/vendor-bundle
-//= require generated/app-bundle
+// These assets are located in app/assets/webpack directory
+// CRITICAL that webpack/vendor-bundle must be BEFORE turbolinks
+// since it is exposing jQuery and jQuery-ujs
+//= require vendor-bundle
+//= require app-bundle
 
-// Next two depend on jQuery
+// Next one depend on jQuery
 //= require turbolinks
-//= require bootstrap-sprockets
 
 //= require react_on_rails
 

app/assets/stylesheets/_bootstrap-custom.scss

@@ -1,12 +1,3 @@
-// This variable $rails is used by bootstrap-custom so that fonts are loaded slightly differently
-// with Rails vs. the Webpack Dev Server
-$rails: true;
-
-// Those scss files are located under client/assets/stylesheets,
-// which has been added to the Rails asset pipeline search path.
-// See config/application.rb.
-@import 'bootstrap-custom';
-@import 'test-stylesheet';
-@import 'test-sass-stylesheet';
-
-@import 'bootstrap-sprockets';
+// These assets are located in app/assets/webpack directory
+@import 'vendor-bundle';
+@import 'app-bundle';

app/assets/stylesheets/application.css.scss

@@ -0,0 +1,123 @@
+---
+# Output debugging info
+# loglevel: debug
+
+# Major version of Bootstrap: 3 or 4
+bootstrapVersion: 3
+
+# Webpack loaders, order matters
+styleLoaders:
+  - style
+  - css
+  - sass
+
+# Extract styles to stand-alone css file
+# Different settings for different environments can be used,
+# It depends on value of NODE_ENV environment variable
+# This param can also be set in webpack config:
+#   entry: 'bootstrap-loader/extractStyles'
+extractStyles: false
+# env:
+#   development:
+#     extractStyles: false
+#   production:
+#     extractStyles: true
+
+# Customize Bootstrap variables that get imported before the original Bootstrap variables.
+# Thus original Bootstrap variables can depend on values from here. All the bootstrap
+# variables are configured with !default, and thus, if you define the variable here, then
+# that value is used, rather than the default. However, many bootstrap variables are derived
+# from other bootstrap variables, and thus, you want to set this up before we load the
+# official bootstrap versions.
+# For example, _variables.scss contains:
+# $input-color: $gray !default;
+# This means you can define $input-color before we load _variables.scss
+preBootstrapCustomizations: ./app/assets/styles/bootstrap-pre-customizations.scss
+
+# This gets loaded after bootstrap/variables is loaded and before bootstrap is loaded.
+# A good example of this is when you want to override a bootstrap variable to be based
+# on the default value of bootstrap. This is pretty specialized case. Thus, you normally
+# just override bootrap variables in preBootstrapCustomizations so that derived
+# variables will use your definition.
+#
+# For example, in _variables.scss:
+# $input-height: (($font-size-base * $line-height) + ($input-padding-y * 2) + ($border-width * 2)) !default;
+# This means that you could define this yourself in preBootstrapCustomizations. Or you can do
+# this in bootstrapCustomizations to make the input height 10% bigger than the default calculation.
+# Thus you can leverage the default calculations.
+# $input-height: $input-height * 1.10;
+# bootstrapCustomizations: ./app/assets/styles/bootstrap-customizations.scss
+
+# Import your custom styles here. You have access to all the bootstrap variables. If you require
+# your sass files separately, you will not have access to the bootstrap variables, mixins, clases, etc.
+# Usually this endpoint-file contains list of @imports of your application styles.
+# But since we use CSS Modules, we don't need it - every module gets imported from JS component.
+# appStyles: ./app/styles/app.scss
+
+### Bootstrap styles
+styles:
+
+  # Mixins
+  mixins: true
+
+  # Reset and dependencies
+  normalize: true
+  print: true
+  glyphicons: true
+
+  # Core CSS
+  scaffolding: true
+  type: true
+  code: true
+  grid: true
+  tables: true
+  forms: true
+  buttons: true
+
+  # Components
+  component-animations: true
+  dropdowns: true
+  button-groups: true
+  input-groups: true
+  navs: true
+  navbar: true
+  breadcrumbs: true
+  pagination: true
+  pager: true
+  labels: true
+  badges: true
+  jumbotron: true
+  thumbnails: true
+  alerts: true
+  progress-bars: true
+  media: true
+  list-group: true
+  panels: true
+  wells: true
+  responsive-embed: true
+  close: true
+
+  # Components w/ JavaScript
+  modals: true
+  tooltip: true
+  popovers: true
+  carousel: true
+
+  # Utility classes
+  utilities: true
+  responsive-utilities: true
+
+### Bootstrap scripts
+scripts:
+  transition: true
+  alert: true
+  button: true
+  carousel: true
+  collapse: true
+  dropdown: true
+  modal: true
+  tooltip: true
+  popover: true
+  scrollspy: true
+  tab: true
+  affix: true

app/assets/stylesheets/scaffolds.css.scss

@@ -0,0 +1,10 @@
+// Defining application SASS variables in stand-alone file,
+// so we can use them in bootstrap-loader and CSS Modules via sass-resources-loader
+$body-bg: #eff8fb;                          // background w/ character
+$navbar-default-bg: #ffffe0;                // fancy yellow navbar
+$font-size-base: 15px;                      // make it bigger!
+$font-family-sans-serif: 'OpenSans-Light';  // apply custom font
+
+// It will be used in SASS components imported as CSS Modules
+$comment-author-color: blue;
+$comment-text-color: purple;

client/.bootstraprc

@@ -0,0 +1,10 @@
+// These variables get loaded BEFORE Bootstrap thus overriding them in Bootstrap.
+@import "./app-variables";
+
+// This path is relative to this file!
+$fonts-url-path: "../fonts";
+
+@font-face {
+  font-family: "OpenSans-Light";
+  src: url("#{$fonts-url-path}/OpenSans-Light.ttf") format("truetype");
+}

app/assets/fonts/OpenSans-Bold.eot renamed to client/app/assets/fonts/OpenSans-Bold.eot

@@ -3,6 +3,8 @@ import React, { PropTypes } from 'react';
 import CommentForm from './CommentForm/CommentForm';
 import CommentList from './CommentList/CommentList';
 
+import './CommentBox.scss';
+
 export default class CommentBox extends React.Component {
 
   static propTypes = {

app/assets/fonts/OpenSans-Bold.svg renamed to client/app/assets/fonts/OpenSans-Bold.svg

@@ -0,0 +1,21 @@
+:global {
+
+  .element-enter {
+    opacity: 0.01;
+
+    &.element-enter-active {
+      opacity: 1;
+      transition: opacity 0.5s ease-in;
+    }
+  }
+
+  .element-leave {
+    opacity: 1;
+
+    &.element-leave-active {
+      opacity: 0.01;
+      transition: opacity 0.5s ease-in;
+    }
+  }
+
+}

app/assets/fonts/OpenSans-Bold.ttf renamed to client/app/assets/fonts/OpenSans-Bold.ttf

@@ -1,6 +1,8 @@
 import React, { PropTypes } from 'react';
 import marked from 'marked';
 
+import css from './Comment.scss';
+
 export default class Comment extends React.Component {
 
   static propTypes = {
@@ -13,8 +15,8 @@ export default class Comment extends React.Component {
     const rawMarkup = marked(text, { gfm: true, sanitize: true });
 
     return (
-      <div className="comment">
-        <h2 className="comment-author">
+      <div className={css.comment}>
+        <h2 className={css.commentAuthor}>
           {author}
         </h2>
         <span

app/assets/fonts/OpenSans-Bold.woff renamed to client/app/assets/fonts/OpenSans-Bold.woff

@@ -0,0 +1,11 @@
+.comment {
+
+  .commentAuthor {
+    color: $comment-author-color;   // <--- Loaded via sass-resources-loader
+  }
+
+  p {
+    color: $comment-text-color;     // <-- This one also
+  }
+
+}