fix(gatsby): create a single CSS file to avoid code-splitting issues #11800

KyleAMathews · 2019-02-15T17:18:29Z

…by split CSS files loading in different orders Fixes #11072

wardpeet · 2019-02-15T17:35:46Z

Might be nice to add a link to the webpack docs in code. Would be handy to have a nice way to turn it on and off because I think css codesplitting doesn't break when cssmodules is used so if we could like add it as a option to our loaders that would be awesome.

Maybe not worth the extra code. Code looks 👍

KyleAMathews · 2019-02-15T17:39:10Z

Things can still break with CSS Modules (that's what Twitter uses and they still had a lot of trouble) but yeah, it'd be harder.

We could definitely document how to re-enable CSS splitting — let's see if anyone asks for it first though.

KyleAMathews · 2019-02-15T17:39:26Z

Publishing!

dustinhorton · 2019-02-15T17:57:18Z

I use CSS modules and it’s definitely still been an issue—so much so that I’ve not been using gatsby-link as a workaround. Really excited to try this.

wardpeet · 2019-02-15T18:06:56Z

oh yeah specificity of course 🤦‍♂️. Yeah it can still break

dustinhorton · 2019-02-16T03:30:18Z

@KyleAMathews This didn't fix the issue for me. Still think what I mentioned @ #8092 (comment) is right—it's the preloading & injecting CSS onto the page that's the issue.

Also think pre-loading CSS, if not code-splitting it, would be extraneous (and possibly continue breaking sites in the same way when hovering gatsby-links).

I can privately share a link where I've deployed a site updated to the latest version, and can 100% repro the issue.

KyleAMathews · 2019-02-16T08:15:08Z

Yes please share your code — not sure what CSS would be preloaded anymore? The point of this PR was that we're not code-splitting CSS anymore.

dustinhorton · 2019-02-16T13:47:56Z

https://www.classchirp.com/blog

There's a link near the top that's prefixed with 'hover me', and text right above it that will increase with size.

// package.json

[…]
"gatsby": "^2.1.4",
"gatsby-link": "^2.0.10",
[…]

Here's the network tab showing CSS being preloaded on that hover:

KyleAMathews · 2019-02-16T14:13:29Z

Do you have a lock file? Doesn't seem like you've upgraded.

dustinhorton · 2019-02-16T15:18:29Z

I’m on mobile until early tomorrow and seemingly can’t view it on GitHub because the diff is too large. Will update then.

https://i.imgur.com/ubf4c83.png

dustinhorton · 2019-02-17T19:50:48Z

@KyleAMathews From my yarn.lock:

gatsby@^2.1.4:
  version "2.1.4"
  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.1.4.tgz#a69ee6212d37326cb93238a5cf21d3237d7a6f16"
  dependencies:
    "@babel/code-frame" "^7.0.0"
    "@babel/core" "^7.0.0"
    "@babel/parser" "^7.0.0"
    "@babel/polyfill" "^7.0.0"
    "@babel/runtime" "^7.0.0"
    "@babel/traverse" "^7.0.0"
    "@gatsbyjs/relay-compiler" "2.0.0-printer-fix.2"
    "@reach/router" "^1.1.1"
    address "1.0.3"
    autoprefixer "^9.4.3"
    babel-core "7.0.0-bridge.0"
    babel-eslint "^9.0.0"
    babel-loader "^8.0.0"
    babel-plugin-add-module-exports "^0.2.1"
    babel-plugin-dynamic-import-node "^1.2.0"
    babel-plugin-remove-graphql-queries "^2.6.0"
    babel-preset-gatsby "^0.1.7"
    better-opn "0.1.4"
    better-queue "^3.8.6"
    bluebird "^3.5.0"
    browserslist "3.2.8"
    cache-manager "^2.9.0"
    cache-manager-fs-hash "^0.0.6"
    chalk "^2.3.2"
    chokidar "^2.0.2"
    common-tags "^1.4.0"
    compression "^1.7.3"
    convert-hrtime "^2.0.0"
    copyfiles "^1.2.0"
    core-js "^2.5.0"
    css-loader "^1.0.0"
    debug "^3.1.0"
    del "^3.0.0"
    detect-port "^1.2.1"
    devcert-san "^0.3.3"
    domready "^1.0.8"
    dotenv "^4.0.0"
    eslint "^5.6.0"
    eslint-config-react-app "^3.0.0"
    eslint-loader "^2.1.0"
    eslint-plugin-flowtype "^2.46.1"
    eslint-plugin-graphql "^2.0.0"
    eslint-plugin-import "^2.9.0"
    eslint-plugin-jsx-a11y "^6.0.3"
    eslint-plugin-react "^7.8.2"
    event-source-polyfill "^1.0.5"
    express "^4.16.3"
    express-graphql "^0.6.12"
    fast-levenshtein "~2.0.4"
    file-loader "^1.1.11"
    flat "^4.0.0"
    friendly-errors-webpack-plugin "^1.6.1"
    fs-exists-cached "1.0.0"
    fs-extra "^5.0.0"
    gatsby-cli "^2.4.10"
    gatsby-link "^2.0.10"
    gatsby-plugin-page-creator "^2.0.6"
    gatsby-react-router-scroll "^2.0.4"
    glob "^7.1.1"
    graphql "^14.1.1"
    graphql-playground-middleware-express "^1.7.10"
    graphql-relay "^0.6.0"
    graphql-skip-limit "^2.0.5"
    graphql-tools "^3.0.4"
    graphql-type-json "^0.2.1"
    hash-mod "^0.0.5"
    invariant "^2.2.4"
    is-relative "^1.0.0"
    is-relative-url "^2.0.0"
    jest-worker "^23.2.0"
    joi "12.x.x"
    json-loader "^0.5.7"
    json-stringify-safe "^5.0.1"
    kebab-hash "^0.1.2"
    lodash "^4.17.10"
    lokijs "^1.5.6"
    md5 "^2.2.1"
    md5-file "^3.1.1"
    mime "^2.2.0"
    mini-css-extract-plugin "^0.4.0"
    mitt "^1.1.2"
    mkdirp "^0.5.1"
    moment "^2.21.0"
    name-all-modules-plugin "^1.0.1"
    normalize-path "^2.1.1"
    null-loader "^0.1.1"
    opentracing "^0.14.3"
    optimize-css-assets-webpack-plugin "^5.0.1"
    physical-cpu-count "^2.0.0"
    postcss-flexbugs-fixes "^3.0.0"
    postcss-loader "^2.1.3"
    raw-loader "^0.5.1"
    react-dev-utils "^4.2.1"
    react-error-overlay "^3.0.0"
    react-hot-loader "^4.6.2"
    redux "^4.0.0"
    request "^2.85.0"
    semver "^5.6.0"
    shallow-compare "^1.2.2"
    sift "^5.1.0"
    signal-exit "^3.0.2"
    slash "^1.0.0"
    socket.io "^2.0.3"
    string-similarity "^1.2.0"
    style-loader "^0.21.0"
    terser-webpack-plugin "^1.2.2"
    type-of "^2.0.1"
    url-loader "^1.0.1"
    uuid "^3.1.0"
    v8-compile-cache "^1.1.0"
    webpack "~4.28.4"
    webpack-dev-middleware "^3.0.1"
    webpack-dev-server "^3.1.14"
    webpack-hot-middleware "^2.21.0"
    webpack-merge "^4.1.0"
    webpack-stats-plugin "^0.1.5"
    yaml-loader "^0.5.0"

pieh · 2019-02-17T19:58:04Z

It definitely looks like css is split still https://www.classchirp.com/webpack.stats.json.

dustinhorton · 2019-02-19T07:08:45Z

Anything else I can provide?

KyleAMathews · 2019-02-19T08:15:13Z

Can you share your site's code?

dustinhorton · 2019-02-19T18:11:23Z

@KyleAMathews I've just added you as a collaborator. Branch is gatsby-link. Let me know if there's another way you'd prefer I share the code.

KyleAMathews · 2019-02-20T12:00:07Z

Confirmed the bug — both on @dustinhorton's site + on using-css-modules + using-sass. Looks like it's specific to gatsby-plugin-sass as other types of css are being combined correctly.

KyleAMathews · 2019-02-20T12:21:14Z

This fixes things #11927

fix: Only create one CSS file during builds to avoid problems caused …

0a3705f

…by split CSS files loading in different orders Fixes #11072

KyleAMathews requested a review from a team as a code owner February 15, 2019 17:18

DSchau changed the title ~~fix: Only create one CSS file during builds to avoid problems caused by split CSS files loading in different orders~~ fix(gatsby): create a single CSS file to avoid code-splitting issues Feb 15, 2019

wardpeet approved these changes Feb 15, 2019

View reviewed changes

KyleAMathews merged commit 7058a25 into master Feb 15, 2019

KyleAMathews deleted the css-splits branch February 15, 2019 17:39

zslabs mentioned this pull request Feb 20, 2019

Webfont usage within Sass (flickering) #9826

Closed

KyleAMathews mentioned this pull request Feb 23, 2019

A "styles.js" file is being loaded (that shouldn't exist) #12018

Closed

silvenon mentioned this pull request Feb 25, 2019

[v2] gatsby - Duplicate styles when serving site #7517

Closed

krismorf mentioned this pull request Feb 27, 2019

Upgrading to Gatsby 2.1 breaks multiple stylesheet output (via custom webpack config) #12151

Closed

vivshaw mentioned this pull request Apr 13, 2019

gatsby build results in different CSS to that of gatsby develop #8560

Closed

pieh mentioned this pull request Apr 19, 2019

Fix styles to be sorted on static-entry.js #13482

Closed

enmanuelduran mentioned this pull request Jun 30, 2019

CSS modules break production build and upgrading gatsby packages wont work #15258

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(gatsby): create a single CSS file to avoid code-splitting issues #11800

fix(gatsby): create a single CSS file to avoid code-splitting issues #11800

KyleAMathews commented Feb 15, 2019

wardpeet commented Feb 15, 2019

KyleAMathews commented Feb 15, 2019

KyleAMathews commented Feb 15, 2019

dustinhorton commented Feb 15, 2019

wardpeet commented Feb 15, 2019

dustinhorton commented Feb 16, 2019 •

edited

Loading

KyleAMathews commented Feb 16, 2019

dustinhorton commented Feb 16, 2019 •

edited

Loading

KyleAMathews commented Feb 16, 2019

dustinhorton commented Feb 16, 2019 •

edited

Loading

dustinhorton commented Feb 17, 2019

pieh commented Feb 17, 2019

dustinhorton commented Feb 19, 2019

KyleAMathews commented Feb 19, 2019

dustinhorton commented Feb 19, 2019

KyleAMathews commented Feb 20, 2019

KyleAMathews commented Feb 20, 2019

fix(gatsby): create a single CSS file to avoid code-splitting issues #11800

fix(gatsby): create a single CSS file to avoid code-splitting issues #11800

Conversation

KyleAMathews commented Feb 15, 2019

wardpeet commented Feb 15, 2019

KyleAMathews commented Feb 15, 2019

KyleAMathews commented Feb 15, 2019

dustinhorton commented Feb 15, 2019

wardpeet commented Feb 15, 2019

dustinhorton commented Feb 16, 2019 • edited Loading

KyleAMathews commented Feb 16, 2019

dustinhorton commented Feb 16, 2019 • edited Loading

KyleAMathews commented Feb 16, 2019

dustinhorton commented Feb 16, 2019 • edited Loading

dustinhorton commented Feb 17, 2019

pieh commented Feb 17, 2019

dustinhorton commented Feb 19, 2019

KyleAMathews commented Feb 19, 2019

dustinhorton commented Feb 19, 2019

KyleAMathews commented Feb 20, 2019

KyleAMathews commented Feb 20, 2019

dustinhorton commented Feb 16, 2019 •

edited

Loading

dustinhorton commented Feb 16, 2019 •

edited

Loading

dustinhorton commented Feb 16, 2019 •

edited

Loading