Build CSS assets with Webpack (#26820)

* Divide entrypoint and chunk assets into CSS and JS when inserting them into index.html Until now, Webpack generated only JS assets, but now there are also CSS. When generating index.html on the server, each type needs a different tag: `<link rel="stylesheet">` vs `<script>`. Divide the assets into groups and insert appropriate tags. * Remove unneeded eslint comment * Switch stylesheets from Webpack chunks * Use a forked css-extract-plugin that adds data-webpack attribute to links * Include link to Webpack main stylesheet in desktop * Webpackify the login section CSS * Rename and document the flipRTL function
Automattic · Sep 21, 2018 · 40d13b3 · 40d13b3
1 parent 86a870f
commit 40d13b3
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 64 deletions.
diff --git a/assets/stylesheets/sections/login.scss b/assets/stylesheets/sections/login.scss
diff --git a/client/document/desktop.jsx b/client/document/desktop.jsx
@@ -54,6 +54,12 @@ class Desktop extends React.Component {
 						}
 						type="text/css"
 					/>
+					<link
+						rel="stylesheet"
+						type="text/css"
+						data-webpack={ true }
+						href={ `/calypso/build.${ isRTL ? 'rtl.css' : 'css' }` }
+					/>
 					<link rel="stylesheet" id="desktop-css" href="/desktop/wordpress-desktop.css" />
 				</Head>
 				<body className={ classNames( { rtl: isRTL } ) }>

diff --git a/client/document/index.jsx b/client/document/index.jsx
@@ -22,6 +22,10 @@ import getStylesheet from './utils/stylesheet';
 import WordPressLogo from 'components/wordpress-logo';
 import { jsonStringifyForHtml } from '../../server/sanitize';
 
+const cssChunkLink = asset => (
+	<link key={ asset } rel="stylesheet" type="text/css" data-webpack={ true } href={ asset } />
+);
+
 class Document extends React.Component {
 	render() {
 		const {
@@ -57,6 +61,8 @@ class Document extends React.Component {
 			inlineScriptNonce,
 		} = this.props;
 
+		const csskey = isRTL ? 'css.rtl' : 'css.ltr';
+
 		const inlineScript =
 			`COMMIT_SHA = ${ jsonStringifyForHtml( commitSha ) };\n` +
 			( user ? `var currentUser = ${ jsonStringifyForHtml( user ) };\n` : '' ) +
@@ -93,6 +99,8 @@ class Document extends React.Component {
 						}
 						type="text/css"
 					/>
+					{ entrypoint[ csskey ].map( cssChunkLink ) }
+					{ chunkFiles[ csskey ].map( cssChunkLink ) }
 					{ sectionCss && (
 						<link
 							rel="stylesheet"
@@ -171,10 +179,10 @@ class Document extends React.Component {
 							} }
 						/>
 					) }
-					{ entrypoint.map( asset => (
+					{ entrypoint.js.map( asset => (
 						<script key={ asset } src={ asset } />
 					) ) }
-					{ chunkFiles.map( chunk => (
+					{ chunkFiles.js.map( chunk => (
 						<script key={ chunk } src={ chunk } />
 					) ) }
 					<script nonce={ inlineScriptNonce } type="text/javascript">

diff --git a/client/lib/i18n-utils/switch-locale.js b/client/lib/i18n-utils/switch-locale.js
@@ -6,6 +6,7 @@
 import request from 'superagent';
 import i18n from 'i18n-calypso';
 import debugFactory from 'debug';
+import { map } from 'lodash';
 
 /**
  * Internal dependencies
@@ -30,6 +31,7 @@ function setLocaleInDOM( localeSlug, isRTL ) {
 	const cssUrl = window.app.staticUrls[ `style${ debugFlag }${ directionFlag }.css` ];
 
 	switchCSS( 'main-css', cssUrl );
+	switchWebpackCSS( isRTL );
 }
 
 let lastRequestedLocale = null;
@@ -105,6 +107,38 @@ export async function switchCSS( elementId, cssUrl ) {
 	newLink.id = elementId;
 }
 
+/*
+ * CSS links come in two flavors: either RTL stylesheets with `.rtl.css` suffix, or LTR ones
+ * with `.css` suffix. This function sets a desired `isRTL` flag on the supplied URL, i.e., it
+ * changes the extension if necessary.
+ */
+function setRTLFlagOnCSSLink( url, isRTL ) {
+	if ( isRTL ) {
+		return url.endsWith( '.rtl.css' ) ? url : url.replace( /\.css$/, '.rtl.css' );
+	}
+
+	return ! url.endsWith( '.rtl.css' ) ? url : url.replace( /\.rtl.css$/, '.css' );
+}
+
+function switchWebpackCSS( isRTL ) {
+	const currentLinks = document.querySelectorAll( 'link[rel="stylesheet"][data-webpack]' );
+
+	return map( currentLinks, async currentLink => {
+		const currentHref = currentLink.getAttribute( 'href' );
+		const newHref = setRTLFlagOnCSSLink( currentHref, isRTL );
+		if ( currentHref === newHref ) {
+			return;
+		}
+
+		const newLink = await loadCSS( newHref, currentLink );
+		newLink.setAttribute( 'data-webpack', true );
+
+		if ( currentLink.parentElement ) {
+			currentLink.parentElement.removeChild( currentLink );
+		}
+	} );
+}
+
 /**
  * Loads a CSS stylesheet into the page.
  *

diff --git a/client/login/magic-login/index.jsx b/client/login/magic-login/index.jsx
@@ -33,6 +33,11 @@ import RequestLoginEmailForm from './request-login-email-form';
 import GlobalNotices from 'components/global-notices';
 import Gridicon from 'gridicons';
 
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
 class MagicLogin extends React.Component {
 	static propTypes = {
 		path: PropTypes.string.isRequired,

diff --git a/client/login/wp-login/index.jsx b/client/login/wp-login/index.jsx
@@ -30,6 +30,11 @@ import {
 } from 'state/analytics/actions';
 import { withEnhancers } from 'state/utils';
 
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
 export class Login extends React.Component {
 	static propTypes = {
 		clientId: PropTypes.string,

diff --git a/client/sections-helper.js b/client/sections-helper.js
@@ -34,7 +34,6 @@ export function getSections() {
 }
 
 function maybeLoadCSS( sectionName ) {
-	//eslint-disable-line no-unused-vars
 	const section = find( sections, { name: sectionName } );
 
 	if ( ! ( section && section.css ) ) {

diff --git a/client/wordpress-com.js b/client/wordpress-com.js
@@ -411,7 +411,6 @@ sections.push( {
 	enableLoggedOut: true,
 	secondary: false,
 	isomorphic: true,
-	css: 'login',
 } );
 
 sections.push( {

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -132,7 +132,7 @@
     "lru": "3.1.0",
     "lunr": "2.3.3",
     "marked": "0.5.0",
-    "mini-css-extract-plugin-with-rtl": "0.1.3",
+    "mini-css-extract-plugin-with-rtl": "github:Automattic/mini-css-extract-plugin-with-rtl",
     "mkdirp": "0.5.1",
     "moment": "2.22.2",
     "morgan": "1.9.1",