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

Tug · 2016-09-07T17:23:56Z

This PR extracts the generated CSS into 2 separate external styleshets for ltr and rtl languages.
This has a few advantages over the current solution:

It divides the build size and build time by 2
It simplifies the build script
We manage JS and CSS separately as it is supposed to be
User who switches from an ltr to an rtl (or vice-versa) language won't have to download the whole bundle again, just the stylesheet.

Testing Instructions

git checkout update/external-css
npm i
npm run start:static
Check public/scripts and assert that only 1 script (and it's mapping) is present and is minified
Check public/styles and assert that 2 stylesheets are present (along with reset.css) and that those stylesheets are minified
Navigate to http://delphin.localhost:1337/ and try switching languages, you shouldn't have any css issues

Reviews

Code
Product

yurynix · 2016-09-12T11:25:37Z

Here's what I think we should do as a short-term solution:

Lets upgrade to webpack2 Update to webpack2 #650
Make all the css non minimized ( that will happen after Update to webpack2 #650 on itself, since we don't actually minify them anywhere ( we don't have css?minimized) )
Use Minify original css romainberger/webpack-rtl-plugin#5 to minify both the RTL css and the original css

A better solution might be split webpack-rtl-plugin to 2 parts: loader and a plugin, the loader collects all the css and RTLifies them, later the plugin will emit an additional css.

Tug · 2016-09-12T11:46:23Z

About romainberger/webpack-rtl-plugin#5

This is a general plugin and I don't believe we should minify by defaut assets other than the one this plugin is responsible for.
If we do we should at least make it optional using a parameter.

On 12 Sep 2016, at 13:25, Yury Michurin [email protected] wrote:

Here's what I think we should do as a short-term solution:

Lets upgrade to webpack2 #650
Make all the css non minimized ( that will happen after #650 on itself, since we don't actually minify them anywhere ( we don't have css?minimized) )
Use romainberger/webpack-rtl-plugin#5 to minify both the RTL css and the original css
A better solution might be split webpack-rtl-plugin to 2 parts: loader and a plugin, the loader collects all the css and RTLifies them, later the plugin will emit an additional css.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.

yurynix · 2016-09-12T13:05:31Z

@Tug I think it should, it already does it for the RTL css.

yurynix · 2016-09-13T08:55:38Z

I've pushed a commit that makes everything work™

It does that by referencing directly to:

"webpack-rtl-plugin": "yurynix/webpack-rtl-plugin.git#test-build",

romainberger/webpack-rtl-plugin#5

and:

    "psuedomap": "bmb330/pseudomap",

isaacs/pseudomap#6

When you run:

npm run start:static

You'll get the correct RTL version:

And the build artifacts will be be:

Tug · 2016-09-13T13:08:44Z

Indeed it works! Congrats @yurynix
I'm moving this to blocked while we upgrade to webpack2 and use nice package dependencies for all those.

Tug · 2016-09-26T16:41:21Z

I had to build and publish the forked version of webpack-rtl-plugin here. I guess it's because npm prepublish is not called anymore on install so it's installed in delphin without lib/index.js which caused a failure.
I also tried to publish the package as @automattic/webpack-rtl-plugin on npmjs.org but those are for private packages only and I believe only registered&allowed npm users can actually install those.

Anyway it works now I think we're ready for a review!

drewblaisdell

This looks great. I left some notes, but they were mostly questions or references that I noticed that we should now remove. I agree that this is a good solution, and am mainly trying to understand the parts that confused me or the limitations of this and the previous solution.

We manage JS and CSS separately as it is supposed to be

Do we? We still use CSS modules, the withStyles HOC, and determine style names programmatically with JavaScript.
For my own understanding: why is this "as it is supposed to be"? It seems arbitrary, but provides an advantage in terms of code-splitting. Managing markup and JS separately is also "as it is supposed to be".

If we didn't support RTL, I don't think it would necessarily be an advantage, as we now have a global CSS file containing styles for every section of the site.

drewblaisdell · 2016-09-26T18:57:10Z

webpack.client.config.js

+			loaders: [
+				{
+					test: /\.jsx?$/,
+					loaders: [ 'react-hot' ]


I'm betting this is my lack of knowledge about webpack showing, but why use react-hot in production instead of development?

That's probably another error error here, thanks for noticing, I'm going to have to fix that and test again the different envs...

drewblaisdell · 2016-09-26T20:51:22Z

webpack.client.config.js

 	// 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;

-	// Use a more performant type of sourcemaps for our development env
-	// For a comparison see: https://webpack.github.io/docs/configuration.html#devtool
+	// Enables source maps


Minor, but is there a reason this comment changed? This is slightly misleading, as source maps are enabled in production.

I'm not sure why it has changed but yeah we should keep the previous one

drewblaisdell · 2016-09-26T21:00:22Z

server/index.js

@@ -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();


I haven't tested this, so apologies if this is just my poor regex understanding, but do we need to escape the . in the alternative condition? Also, rlt seems like a typo, but I think those characters in a pattern like [^this] can be in any order - is that correct?

drewblaisdell · 2016-09-26T21:02:22Z

client/index.js

 	if ( window.localeData ) {
 		i18n.setLocale( window.localeData );
+	} else if ( currentRouteSlug ) {
+		switchLocale( currentRouteSlug );


For my own understanding: how would this condition ever be reached?

I agree it's a bit confusing and I'm also having a hard time figuring out why I added this. I think it was made to display a localized 404 page using the locale slug. Since we're generating 404 pages now I don't think this is needed anymore.

drewblaisdell · 2016-09-26T21:04:17Z

lib/stylizer/index.js

@@ -26,5 +26,5 @@ export function addCss( css, styles ) {
 }

 export function insertCss( styles ) {
-	return styles._insertCss();
+	return styles._insertCss && styles._insertCss();


For my own understanding: why do we need this presence check now? If _insertCss isn't present in production/development, it might be worth commenting.

We need that check because _insertCss is added to every css modules by the isomorphic-style-loader I believe. In production we don't use that loader and we don't need to manually append css blocks to the page since we have a bundle so we're just ignoring this function.

drewblaisdell · 2016-09-26T21:17:29Z

package.json

    "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",


We still reference BUILD_RTL in the client webpack config. We should probably remove those ternaries.

Yep sorry, I didn't cleanup after rebasing

drewblaisdell · 2016-09-26T21:18:33Z

webpack.base.config.js

@@ -39,7 +38,7 @@ var config = {
 	},

 	postcss() {
-		return process.env.BUILD_RTL ? [ autoprefixer, rtlcss ] : [ autoprefixer ];


We should probably remove the other reference to BUILD_RTL below in this file as well.

drewblaisdell · 2016-09-26T21:18:58Z

package.json

    "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",


We should probably remove this script, as well as start:rtl.

drewblaisdell · 2016-09-26T22:07:15Z

I added a commit to address my notes about lingering BUILD_RTL references. I also noticed that we're attempting to load a non-existent stylesheet in development and added a commit to prevent this.

Tug · 2016-09-27T01:26:22Z

We manage JS and CSS separately as it is supposed to be

Do we? We still use CSS modules, the withStyles HOC, and determine style names programmatically with JavaScript.
For my own understanding: why is this "as it is supposed to be"? It seems arbitrary, but provides an advantage in terms of code-splitting. Managing markup and JS separately is also "as it is supposed to be".
If we didn't support RTL, I don't think it would necessarily be an advantage, as we now have a global CSS file containing styles for every section of the site.

I mean on production. I like the css module approach for developement but I don't think having our css bundled as text in our js is a good approach in production. Browsers are optimized to render css even before the js starts executing and I think generally we should keep doing what browsers would expect.
I agree we had a working "hack" thanks to the isomorphic style loader but I found it made the apps more complex (to grasp) for very little benefits and also duplicated a lot of data (styles) the user would have to download in the process.

…he url

scruffian · 2016-09-27T16:43:30Z

The code looks good. I noticed that the hash on the LTR bundle is different to the RTL bundle. Is there a reason for that?

Tug · 2016-09-27T17:00:47Z

@scruffian yes there are different for 2 reasons:

It's based on the output before minification (which is different for ltr and rtl)
They don't use the same hash function

drewblaisdell · 2016-09-27T18:01:48Z

Everything except CSS hot reloading in development seems to be working properly. When editing CSS, the app reloads but no new CSS is written onto the page.

fabianapsimoes · 2016-09-28T12:53:34Z

Product 👍

Everything except CSS hot reloading in development seems to be working properly.
But maybe we want to resolve this before merging? I'm switching the label, but feel free to switch it back if it makes sense.

Tug · 2016-09-28T16:15:55Z

@drewblaisdell @fabianapsimoes actually this is broken in master as well, probably due to our upgrade to webpack2. We will need to fix that in another PR. Merging.

fabianapsimoes · 2016-09-29T11:20:26Z

@Tug have you opened another PR already? Otherwise, we should create an issue so it doesn't fall through the cracks.

Tug · 2016-09-29T11:55:27Z

Now I have #683

Tug force-pushed the update/external-css branch from 8fce4cf to aa515fa Compare September 7, 2016 17:50

Tug added the blocked label Sep 7, 2016

Tug force-pushed the update/external-css branch 2 times, most recently from 5d1fec0 to 07140b7 Compare September 12, 2016 08:58

yurynix added [status] needs review and removed blocked labels Sep 13, 2016

Tug added blocked [status] in progress and removed [status] needs review labels Sep 13, 2016

Tug force-pushed the update/external-css branch 2 times, most recently from 534e404 to 593f25d Compare September 26, 2016 11:26

Tug and others added 4 commits September 26, 2016 13:33

Use on build and extract css as seperate resources

80eb2a7

Make /confirm-domain a static page

61cfaa8

Minify css by default

c6d5085

Webpack2 try + webpack-rtl-plugin minfies original

18d76e1

Tug force-pushed the update/external-css branch 3 times, most recently from 958b54c to 08142a0 Compare September 26, 2016 16:30

Tug added 2 commits September 26, 2016 18:30

Move webpack-rtl-plugin to a repository managed by Automattic

1c2b7bc

Removing unused dependency

16acdde

Tug force-pushed the update/external-css branch from 08142a0 to 16acdde Compare September 26, 2016 16:30

Tug added [status] needs review and removed blocked [status] in progress labels Sep 26, 2016

drewblaisdell reviewed Sep 26, 2016

View reviewed changes

drewblaisdell added 2 commits September 26, 2016 14:53

Remove remaining references to BUILD_RTL

9b1333e

Prevent bad link to stylesheet in index template

b4f0e33

drewblaisdell mentioned this pull request Sep 26, 2016

Framework: Update config to conform with webpack2 config schema #665

Merged

2 tasks

Tug added [status] in progress and removed [status] needs review labels Sep 27, 2016

Tug added 4 commits September 27, 2016 15:16

Do not switch locale dynamically on boot using the locale slug from t…

a082f91

…he url

Add a comment about our modification in insertCss

a9ed0a8

Restore comment about config.devtool in development

422403e

Fix a bug of react-hot loader disabled in development

cf53c35

Tug force-pushed the update/external-css branch from 1a585f3 to cf53c35 Compare September 27, 2016 13:16

Tug added [status] needs review and removed [status] in progress labels Sep 27, 2016

fabianapsimoes added [status] ready to merge and removed [status] needs review labels Sep 28, 2016

Refactor webpack client config to use smart merge

9864b3c

Tug merged commit 6508811 into master Sep 28, 2016

Tug deleted the update/external-css branch September 28, 2016 16:16

Tug removed the [status] ready to merge label Sep 29, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Tug commented Sep 7, 2016 •

edited by scruffian

Loading

yurynix commented Sep 12, 2016

Tug commented Sep 12, 2016

yurynix commented Sep 12, 2016

yurynix commented Sep 13, 2016 •

edited

Loading

Tug commented Sep 13, 2016

Tug commented Sep 26, 2016

drewblaisdell left a comment

drewblaisdell Sep 26, 2016

Tug Sep 26, 2016

drewblaisdell Sep 26, 2016 •

edited

Loading

Tug Sep 26, 2016

drewblaisdell Sep 26, 2016

drewblaisdell Sep 26, 2016 •

edited

Loading

Tug Sep 27, 2016

drewblaisdell Sep 26, 2016

Tug Sep 27, 2016

drewblaisdell Sep 26, 2016

Tug Sep 26, 2016

drewblaisdell Sep 26, 2016

drewblaisdell Sep 26, 2016

drewblaisdell commented Sep 26, 2016

Tug commented Sep 27, 2016

scruffian commented Sep 27, 2016

Tug commented Sep 27, 2016

drewblaisdell commented Sep 27, 2016

fabianapsimoes commented Sep 28, 2016

Tug commented Sep 28, 2016

fabianapsimoes commented Sep 29, 2016

Tug commented Sep 29, 2016

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

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

Conversation

Tug commented Sep 7, 2016 • edited by scruffian Loading

Testing Instructions

Reviews

yurynix commented Sep 12, 2016

Tug commented Sep 12, 2016

yurynix commented Sep 12, 2016

yurynix commented Sep 13, 2016 • edited Loading

Tug commented Sep 13, 2016

Tug commented Sep 26, 2016

drewblaisdell left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drewblaisdell Sep 26, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drewblaisdell Sep 26, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drewblaisdell commented Sep 26, 2016

Tug commented Sep 27, 2016

scruffian commented Sep 27, 2016

Tug commented Sep 27, 2016

drewblaisdell commented Sep 27, 2016

fabianapsimoes commented Sep 28, 2016

Tug commented Sep 28, 2016

fabianapsimoes commented Sep 29, 2016

Tug commented Sep 29, 2016

Tug commented Sep 7, 2016 •

edited by scruffian

Loading

yurynix commented Sep 13, 2016 •

edited

Loading

drewblaisdell Sep 26, 2016 •

edited

Loading

drewblaisdell Sep 26, 2016 •

edited

Loading