fix(build): Use static files for styles #2646

jimitndiaye · 2016-10-11T15:31:28Z

Uses extract-loader to prepare static files for styles rather than use style-loader and thus avoids FOUC.

Fix #2148
Fix #2020
Fix #2826

googlebot · 2016-10-11T15:31:29Z

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for the commit author(s). If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.

googlebot · 2016-10-11T15:42:07Z

CLAs look good, thanks!

filipesilva · 2016-10-14T17:01:53Z

@TheLarkInn can you review?

filipesilva · 2016-10-17T23:11:18Z

@jimitndiaye had a look with @TheLarkInn, it looks good but for this sort of enhancement we do need some tests.

The ones in https://github.com/angular/angular-cli/tree/master/tests/e2e/tests/build/styles can already validate that the dev build works as before, but we need to know that the prod builds work as intended.

Getting the styles file with hash is kinda hard since the hash is random, my suggestion is to both check index.html and match the filename the same way as in https://github.com/angular/angular-cli/blob/master/tests/e2e/tests/build/prod-build.ts#L36

Prod tests for css/sass/less would be ideal.

jimitndiaye · 2016-10-18T11:01:40Z

@filipesilva Sure, I'll add a check in https://github.com/angular/angular-cli/blob/master/tests/e2e/tests/build/prod-build.ts#L36 to check for the existence of the hashed styles file in index.html.
For the css/less/sass tests however, do you have any objections to adding them to their respective test file under https://github.com/angular/angular-cli/blob/master/tests/e2e/tests/build/styles? This would obviously add an additional ng build --prod to the promise chain plus equivalent asserts.

jimitndiaye · 2016-10-18T12:19:29Z

Ended up modifying https://github.com/angular/angular-cli/blob/master/tests/e2e/tests/build/styles/css.ts to include additional assertions for the prod build, since it was the only test case that dealt with the styles bundle.

Development builds continue to use style-loader for fast developer workflow (HMR). Production builds use static, minimized, CSS file.

…and sass

…in style bundle file name

jimitndiaye · 2016-10-18T15:25:22Z

e2e tests now include

verifying that prod build adds styles.*.bundle.css to index.html where * is a content hash.
verifying that css bundling works for css, less and sass, merging all styles into a single minified (for prod) CSS bundle.

jimitndiaye · 2016-10-19T09:42:26Z

@filipesilva The extract-text-plugin removes all the css from styles.bundle.js and puts in styles.bundle.css, leaving the javascript file largely empty (just no-op functions remain). This JS file is till being included in index.html, even though it doesn't really serve a useful purpose any more. What do you think about excluding it from the HtmlWebpackPlugin. At the moment it is just an extra HTTP request that serves no useful purpose. Just a few bytes but still unnecessary.
An alternative is to list the input styles in the main entry, avoiding the creation of styles.bundle.js while still creating styles.bundle.css

clydin · 2016-10-19T15:16:20Z

There is an open webpack issue regarding the no-op file: webpack/webpack#1967

filipesilva · 2016-10-23T16:36:41Z

Thanks for adding the tests @jimitndiaye, they look good! You're right that the css.ts file is the only one that really tests the global styles bundle. Tbh it should be called global-styles.ts instead I think... That was an oversight of the test refactor we had some time ago.

Regarding the no-op file, did you test removing it via HtmlWebpackPlugin? As I understand from @clydin's link, it still has a module, and I suppose it's still imported. If it's removed, it should just break the module loading I think. So in that sense it's better to wait for it to be fixed in webpack.

filipesilva · 2016-10-23T16:38:48Z

I marked it for a merge, unless you have more changes you want to do.

jimitndiaye · 2016-10-23T17:12:20Z

No if we're ok with importing the no-op file then i think it's all good

jimitndiaye · 2016-10-23T17:14:37Z

There's the option of including the global styles in the main entry though. This would mean styles.bundle.js would not be created and styles.bundle.css would be extracted from the main entry

filipesilva · 2016-10-23T18:28:44Z

That's a possibility, but would prefer it to be in a separate PR so that it could be evaluated separately as a workaround.

jimitndiaye · 2016-10-23T22:11:54Z

Sure. I'll get on that once this one is merged

clydin · 2016-10-25T18:27:59Z

With the lack of movement on the web pack issue that might be a better option. Although, personally I like the separation; seems cleaner.

PR angular#2646 introduced new e2e tests that give positive feedback without running all tests.

filipesilva · 2016-11-02T17:23:21Z

Thanks for the great on this @jimitndiaye!

hansl · 2016-11-03T00:55:56Z

tests/e2e/tests/build/styles/css.ts

+
+    .then(() => ng('build', '--prod'))
+    .then(() => new Promise<string>(() =>
+      glob.sync('dist/styles.*.bundle.css').find(file => !!file)))


You never resolve this promise, causing tests to stop early. This test is causing our e2e to not continue.

Also, no need to return a promise, just return the glob.sync.

Fix angular#2148 Fix angular#2020 Fix angular#2826 Close angular#2646

angular-automatic-lock-bot · 2019-09-10T05:41:03Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

googlebot added the cla: no label Oct 11, 2016

jimitndiaye force-pushed the master branch from 99d655f to ebe2e35 Compare October 11, 2016 15:42

googlebot added cla: yes and removed cla: no labels Oct 11, 2016

jimitndiaye mentioned this pull request Oct 11, 2016

Proposal: Use ExtractTextPlugin for global styles #2148

Closed

jimitndiaye changed the title ~~fix(#2148): Use static files for styles~~ Use static files for styles Oct 11, 2016

jimitndiaye changed the title ~~Use static files for styles~~ fix(build): Use static files for styles Oct 11, 2016

jimitndiaye force-pushed the master branch from acd06b3 to e20e804 Compare October 13, 2016 11:09

filipesilva added the pr_action: review label Oct 14, 2016

filipesilva assigned TheLarkInn Oct 14, 2016

grizzm0 mentioned this pull request Oct 17, 2016

src/styles.scss compression #2578

Closed

filipesilva added state: WIP and removed pr_action: review labels Oct 17, 2016

jimitndiaye force-pushed the master branch from e20e804 to 58794f7 Compare October 18, 2016 12:16

jimitndiaye added 4 commits October 18, 2016 15:24

Add extract-text-webpack-plugin dependency

099d21b

Use extract-text-plugin to extract css bundle for production builds.

ca966bf

Development builds continue to use style-loader for fast developer workflow (HMR). Production builds use static, minimized, CSS file.

Added e2e tests for prod build covering style bundling for css, less …

ec26e19

…and sass

Update production build e2e test to expect 32 character content hash …

78f8610

…in style bundle file name

jimitndiaye force-pushed the master branch from de5006a to 78f8610 Compare October 18, 2016 14:26

jimitndiaye added 3 commits October 18, 2016 15:45

fix paths for styles.less and styles.scss in css e2e test

9bec7c9

use glob to find path to hashed styles bundle for prod build

b418afd

chore(style): remove unused fs import

0a6b40d

grizzm0 mentioned this pull request Oct 20, 2016

Inline SCSS/Template #2809

Closed

filipesilva added pr_action: merge and removed state: WIP labels Oct 23, 2016

filipesilva approved these changes Oct 23, 2016

View reviewed changes

filipesilva closed this in a6415cc Oct 28, 2016

devCrossNet added a commit to devCrossNet/universal-cli that referenced this pull request Oct 29, 2016

test(e2e): remove false positive

5c8c745

PR angular#2646 introduced new e2e tests that give positive feedback without running all tests.

devCrossNet mentioned this pull request Oct 29, 2016

test(e2e): remove false positive #2950

Closed

hansl reviewed Nov 3, 2016

View reviewed changes

filipesilva mentioned this pull request Nov 3, 2016

SCSS SourceMap pointing to the Parent selector only. #2826

Closed

grizzm0 mentioned this pull request Nov 3, 2016

ng build not get styles.css to dist/ #3006

Closed

cacogr mentioned this pull request Nov 21, 2016

index.html styles bundle link tag not closed causes problem with strict HTML validation #3217

Closed

grizzm0 mentioned this pull request Nov 28, 2016

fix(build): Missing css in CompressionPlugin #3300

Merged

MRHarrison pushed a commit to MRHarrison/angular-cli that referenced this pull request Feb 9, 2017

feat(build): use static files for css

99fdd33

Fix angular#2148 Fix angular#2020 Fix angular#2826 Close angular#2646

angular-automatic-lock-bot bot unassigned TheLarkInn Sep 10, 2019

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(build): Use static files for styles #2646

fix(build): Use static files for styles #2646

jimitndiaye commented Oct 11, 2016 •

edited by filipesilva

Loading

googlebot commented Oct 11, 2016

googlebot commented Oct 11, 2016

filipesilva commented Oct 14, 2016

filipesilva commented Oct 17, 2016

jimitndiaye commented Oct 18, 2016 •

edited

Loading

jimitndiaye commented Oct 18, 2016

jimitndiaye commented Oct 18, 2016 •

edited

Loading

jimitndiaye commented Oct 19, 2016 •

edited

Loading

clydin commented Oct 19, 2016

filipesilva commented Oct 23, 2016 •

edited

Loading

filipesilva commented Oct 23, 2016

jimitndiaye commented Oct 23, 2016

jimitndiaye commented Oct 23, 2016

filipesilva commented Oct 23, 2016

jimitndiaye commented Oct 23, 2016

clydin commented Oct 25, 2016 via email

filipesilva commented Nov 2, 2016

hansl Nov 3, 2016

angular-automatic-lock-bot bot commented Sep 10, 2019

fix(build): Use static files for styles #2646

fix(build): Use static files for styles #2646

Conversation

jimitndiaye commented Oct 11, 2016 • edited by filipesilva Loading

googlebot commented Oct 11, 2016

googlebot commented Oct 11, 2016

filipesilva commented Oct 14, 2016

filipesilva commented Oct 17, 2016

jimitndiaye commented Oct 18, 2016 • edited Loading

jimitndiaye commented Oct 18, 2016

jimitndiaye commented Oct 18, 2016 • edited Loading

jimitndiaye commented Oct 19, 2016 • edited Loading

clydin commented Oct 19, 2016

filipesilva commented Oct 23, 2016 • edited Loading

filipesilva commented Oct 23, 2016

jimitndiaye commented Oct 23, 2016

jimitndiaye commented Oct 23, 2016

filipesilva commented Oct 23, 2016

jimitndiaye commented Oct 23, 2016

clydin commented Oct 25, 2016 via email

filipesilva commented Nov 2, 2016

hansl Nov 3, 2016

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Sep 10, 2019

jimitndiaye commented Oct 11, 2016 •

edited by filipesilva

Loading

jimitndiaye commented Oct 18, 2016 •

edited

Loading

jimitndiaye commented Oct 18, 2016 •

edited

Loading

jimitndiaye commented Oct 19, 2016 •

edited

Loading

filipesilva commented Oct 23, 2016 •

edited

Loading