Merge pull request #627 from Automattic/update/external-css

Framework: Extract styles into 2 separate css files for better distribution and debugging

.gitignore

@@ -26,6 +26,7 @@ coverage
 # Compiled scripts and build directories
 public/scripts/bundle*
 public/scripts/assets.json
+public/styles/bundle*.css
 public/static
 server/build
 

app/routes.js

@@ -62,7 +62,7 @@ let publicRoutes = [
 			{
 				path: 'confirm-domain',
 				slug: 'confirmDomain',
-				static: false,
+				static: true,
 				component: SunriseConfirmDomainContainer
 			},
 			{

client/index.js

@@ -79,6 +79,8 @@ function init() {
 		} );
 	}
 
+	window.switchLocale = switchLocale;
+
 	if ( window.localeData ) {
 		i18n.setLocale( window.localeData );
 	}
@@ -105,8 +107,6 @@ function boot() {
 	render();
 	i18n.stateObserver.on( 'change', render );
 
-	window.switchLocale = switchLocale;
-
 	setLocaleCookie( i18n.getLocaleSlug() );
 }
 

lib/stylizer/index.js

@@ -26,5 +26,7 @@ export function addCss( css, styles ) {
 }
 
 export function insertCss( styles ) {
-	return styles._insertCss();
+	// _insertCss is injected by the isomorphic-style-loader
+	// so it won't be available in production
+	return styles._insertCss && styles._insertCss();
 }

package.json

@@ -8,21 +8,17 @@
     "build:client": "webpack --config webpack.client.config.js --progress --colors",
     "build:server": "webpack --config webpack.server.config.js --progress --colors",
     "build:static": "BUILD_STATIC=true REFRESH_I18N_CACHE=true node server/build/bundle",
-    "build:static:rtl": "BUILD_STATIC=true REFRESH_I18N_CACHE=true node server/build/bundle.rtl",
-    "clean": "rm -f public/scripts/bundle.*.js && rm -f public/scripts/assets.json && rm -rf server/build && npm run clean:i18n-cache && npm run clean:static",
+    "clean": "rm -f public/scripts/bundle.*.js && rm -f public/styles/bundle.*.css && rm -f public/scripts/assets.json && rm -rf server/build && npm run clean:i18n-cache && npm run clean:static",
     "clean:all": "rm -rf node_modules && npm run clean",
     "clean:i18n-cache": "rm -f server/i18n-cache/data/*",
     "clean:static": "rm -rf public/static",
     "generate": "npm run build && npm run build:static",
-    "generate:rtl": "BUILD_RTL=true npm run build && npm run build:static:rtl",
     "hooks": "node hooks/manage",
     "lint": "eslint --max-warnings 0 app client server && sass-lint --config .sass-lint.yml --max-warnings 0 --verbose",
     "preinstall": "npm run-script clean",
-    "prod:static": "NODE_ENV=production npm install && NODE_ENV=production npm run generate && NODE_ENV=production npm run generate:rtl",
+    "prod:static": "NODE_ENV=production npm install && NODE_ENV=production npm run generate",
     "qs": "npm run build && node server/build/bundle",
-    "qs:rtl": "BUILD_RTL=true npm run build && node server/build/bundle.rtl",
     "start": "npm install && npm run build && node server/build/bundle",
-    "start:rtl": "BUILD_RTL=true npm install && BUILD_RTL=true npm run build && BUILD_RTL=true node server/build/bundle.rtl",
     "start:static": "npm run prod:static && node server/static",
     "test": "NODE_PATH=.:app jest",
     "translate": "mkdir -p server/build && i18n-calypso -p delphin -e date -i 'app/**/*.js' -o server/build/delphin.pot"
@@ -53,6 +49,7 @@
   },
   "dependencies": {
     "@automattic/dops-components": "github:automattic/dops-components",
+    "@automattic/webpack-rtl-plugin": "Automattic/webpack-rtl-plugin.git#v2.0.1",
     "async": "^2.0.0-rc.3",
     "autoprefixer": "^6.3.6",
     "babel-core": "^6.7.4",
@@ -73,6 +70,7 @@
     "css-loader": "^0.23.1",
     "debug": "^2.2.0",
     "express": "^4.14.0",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "i18n-calypso": "1.7.0",
     "inherits": "^2.0.1",
     "isomorphic-style-loader": "^1.0.0",
@@ -103,9 +101,9 @@
     "redux-form": "^5.3.1",
     "redux-logger": "^2.6.1",
     "redux-thunk": "^2.0.1",
-    "rtlcss": "^2.0.6",
     "sass-loader": "^3.2.0",
     "source-map-support": "^0.4.0",
+    "style-loader": "^0.13.1",
     "superagent": "^1.8.3",
     "superagent-jsonp": "^0.1.1",
     "svg-react-loader": "^0.3.5",

server/index.js

@@ -1,4 +1,3 @@
-/* global BUILD_RTL*/
 // External dependencies
 import { combineReducers, createStore, applyMiddleware } from 'redux';
 import curry from 'lodash/curry';
@@ -35,7 +34,7 @@ const app = express(),
 	template = fs.readFileSync( templatePath, 'utf8' ),
 	templateCompiler = pug.compile( template, { filename: templatePath, pretty: true } );
 
-function renderPage( props, localeData ) {
+function renderPage( props, localeData, isRtl = false ) {
 	const store = createStore(
 		combineReducers( {
 			...reducers,
@@ -62,19 +61,24 @@ function renderPage( props, localeData ) {
 	const assets = JSON.parse( fs.readFileSync( path.join( 'public', bundlePath, 'assets.json' ) ) );
 	// `main` is an array of JS files after a hot update has been applied
 	const bundleFileName = typeof assets.main === 'string' ? assets.main : assets.main[ 0 ];
+	let stylesFileName;
+	if ( Array.isArray( assets.main ) ) {
+		stylesFileName = assets.main.filter( asset => ( isRtl ? /rtl\.css$/ : /[^rlt].css$/ ).test( asset ) ).shift();
+	}
 
 	return templateCompiler( {
 		content,
 		isEnabled,
-		isRtl: BUILD_RTL,
+		isRtl,
 		localeData,
 		title,
-		css: css.join( '' ),
-		bundle: path.join( bundlePath, bundleFileName )
+		css: process.env.BUILD_STATIC ? '' : css.join( '' ),
+		bundle: path.join( bundlePath, bundleFileName ),
+		styles: stylesFileName ? path.resolve( bundlePath, stylesFileName ) : undefined
 	} );
 }
 
-const generateStaticFile = filePath => {
+const generateStaticFile = ( filePath, isRtl ) => {
 	match( { routes, location: filePath }, ( error, redirectLocation, props ) => {
 		const locale = getLocaleSlug( filePath ),
 			localeData = i18nCache.get( locale ),
@@ -91,7 +95,7 @@ const generateStaticFile = filePath => {
 			fs.mkdirSync( directory );
 		}
 
-		fs.writeFile( path.join( directory, 'index.html' ), renderPage( props, localeData ), function( writeError ) {
+		fs.writeFile( path.join( directory, 'index.html' ), renderPage( props, localeData, isRtl ), function( writeError ) {
 			if ( writeError ) {
 				return console.log( writeError );
 			}
@@ -117,25 +121,21 @@ const generateStaticFiles = rootRoutes => {
 
 	addStaticSlugs( rootRoutes );
 
-	config( 'languages' )
-		.filter( language => language.isRtl === BUILD_RTL )
-		.map( language => language.langSlug ).forEach( locale => {
-			staticSlugs.forEach( slug => generateStaticFile( getPath( slug, {}, { locale } ) ) );
-		} );
+	config( 'languages' ).forEach( language => {
+		const { langSlug, isRtl } = language;
+		staticSlugs.forEach( slug => generateStaticFile( getPath( slug, {}, { locale: langSlug } ), isRtl ) );
+	} );
 };
 
 const generateStatic404Files = () => {
 	config( 'languages' )
-		.filter( language => language.isRtl === BUILD_RTL )
 		// we filter out `en` because it lives in the top-level static directory, not under `/en/`
 		.filter( language => language.langSlug !== config( 'i18n_default_locale_slug' ) )
 		.map( language => `/${ language.langSlug }/404` )
 		.forEach( generateStaticFile );
 
-	if ( ! BUILD_RTL ) {
-		// generate English 404
-		generateStaticFile( '404' );
-	}
+	// generate English 404
+	generateStaticFile( '404' );
 };
 
 const init = () => {

server/views/index.pug

@@ -1,16 +1,18 @@
 doctype html
 html(dir=isRtl ? 'rtl' : 'ltr' )
 	head
-		if localeData
-			script(type='text/javascript')!='var localeData = ' + JSON.stringify( localeData ) + ';'
 		title=title
 		meta(name="viewport" content="width=device-width, initial-scale=1.0")
 		link(rel="stylesheet", href="/styles/reset.css")
-		style(type='text/css').
-			#{css}
-
+		if css
+			style(type='text/css').
+				#{css}
+		if styles
+			link(rel="stylesheet", href=styles)
 	body
 		#content!= content
 		if isEnabled( 'sentry' )
 			script(src="https://cdn.ravenjs.com/3.7.0/raven.min.js")
+		if localeData
+			script(type='text/javascript')!='var localeData = ' + JSON.stringify( localeData ) + ';'
 		script(src=bundle)

webpack.base.config.js

@@ -1,8 +1,6 @@
 // External dependencies
 var autoprefixer = require( 'autoprefixer' ),
-	path = require( 'path' ),
-	rtlcss = require( 'rtlcss' ),
-	webpack = require( 'webpack' );
+	path = require( 'path' );
 
 var config = {
 	module: {
@@ -39,7 +37,7 @@ var config = {
 	},
 
 	postcss() {
-		return process.env.BUILD_RTL ? [ autoprefixer, rtlcss ] : [ autoprefixer ];
+		return [ autoprefixer ];
 	},
 
 	resolve: {
@@ -52,19 +50,7 @@ var config = {
 	},
 
 	// Enables source maps both for the client and server.
-	// - In development this property might be overridden to make debugging easier/faster.
-	// - This is required in production to be able to debug client-side errors more easily.
-	// Note:
-	// - Source maps won't be used server-side in production since we serve static pages.
-	// - Source maps are disabled for the RTL build in production to keep the
-	//   size of our diffs down.
-	devtool: process.env.NODE_ENV === 'production' && process.env.BUILD_RTL ? undefined : 'source-map',
-
-	plugins: [
-		new webpack.DefinePlugin( {
-			BUILD_RTL: JSON.stringify( !! process.env.BUILD_RTL )
-		} )
-	]
+	devtool: process.env.NODE_ENV === 'production' ? undefined : 'source-map'
 };
 
 module.exports = config;

webpack.client.config.js

@@ -1,31 +1,19 @@
 // External dependencies
 var baseConfig = require( './webpack.base.config' ),
+	ExtractTextPlugin = require( 'extract-text-webpack-plugin' ),
+	WebpackRTLPlugin = require( '@automattic/webpack-rtl-plugin' ),
 	merge = require( 'webpack-merge' ),
 	path = require( 'path' ),
 	fs = require( 'fs' ),
 	webpack = require( 'webpack' ),
 	NODE_ENV = process.env.NODE_ENV || 'development';
 
 var config = merge.smart( baseConfig, {
-	devServer: {
-		port: 1337,
-		historyApiFallback: true
-	},
-
 	entry: [
 		'babel-polyfill',
 		path.join( __dirname, 'client' )
 	],
 
-	module: {
-		loaders: [
-			{
-				test: /\.jsx?$/,
-				loaders: [ 'react-hot' ]
-			}
-		]
-	},
-
 	node: {
 		console: false,
 		process: true,
@@ -40,8 +28,8 @@ var config = merge.smart( baseConfig, {
 		path: path.resolve( __dirname, 'public/scripts' ),
 		publicPath: '/scripts/',
 		devtoolModuleFilenameTemplate: 'app:///[resource-path]',
-		filename: process.env.BUILD_RTL ? 'bundle.rtl.[hash].js' : 'bundle.[hash].js',
-		sourceMapFilename: process.env.BUILD_RTL ? 'bundle.rtl.[hash].map.js' : 'bundle.[hash].map.js'
+		filename: 'bundle.[hash].js',
+		sourceMapFilename: 'bundle.[hash].map.js'
 	},
 
 	plugins: [
@@ -64,27 +52,61 @@ var config = merge.smart( baseConfig, {
 } );
 
 if ( NODE_ENV === 'development' ) {
-	// Switches loaders to debug mode. This is required to make CSS hot reloading works correctly (see
-	// http://bit.ly/1VTOHrK for more information).
-	config.debug = true;
+	config = merge.smart( config, {
+		devServer: {
+			port: 1337,
+			historyApiFallback: true
+		},
+
+		module: {
+			loaders: [
+				{
+					test: /\.jsx?$/,
+					loaders: [ 'react-hot' ]
+				}
+			]
+		},
+
+		// Switches loaders to debug mode. This is required to make CSS hot reloading works correctly (see
+		// http://bit.ly/1VTOHrK for more information).
+		debug: true,
 
-	// Use a more performant type of sourcemaps for our development env
-	// For a comparison see: https://webpack.github.io/docs/configuration.html#devtool
-	config.devtool = 'cheap-module-eval-source-map';
+		// Use a more performant type of sourcemaps for our development env
+		// For a comparison see: https://webpack.github.io/docs/configuration.html#devtool
+		devtool: 'cheap-module-eval-source-map'
+	} );
 }
 
 if ( NODE_ENV === 'production' ) {
-	config.plugins.push(
-		new webpack.optimize.UglifyJsPlugin( {
-			sourceMap: !! config.devtool,
-			output: {
-				comments: false
-			},
-			compress: {
-				warnings: false
-			}
-		} )
-	);
+	config = merge.smart( config, {
+		module: {
+			loaders: [
+				{
+					test: /\.scss$/,
+					loader: ExtractTextPlugin.extract( {
+						loader: [
+							'css?modules&importLoaders=1&localIdentName=[path][local]&camelCase=dashes',
+							'postcss',
+							'sass'
+						]
+					} )
+				}
+			]
+		},
+		plugins: [
+			new ExtractTextPlugin( '../styles/bundle.[contenthash].css' ),
+			new WebpackRTLPlugin( { filename: '../styles/bundle.[contenthash].rtl.css' } ),
+			new webpack.optimize.UglifyJsPlugin( {
+				sourceMap: !! config.devtool,
+				output: {
+					comments: false
+				},
+				compress: {
+					warnings: false
+				}
+			} )
+		]
+	} );
 }
 
 module.exports = config;

webpack.server.config.js

@@ -31,7 +31,7 @@ var config = merge.smart( baseConfig, {
 
 	output: {
 		path: path.resolve( __dirname, 'server/build' ),
-		filename: process.env.BUILD_RTL ? 'bundle.rtl.js' : 'bundle.js'
+		filename: 'bundle.js'
 	},
 
 	target: 'node',