Develop vs Build Styling very different [v 2.13.8 / 2.11.3 (cli) ] #22718

fiftymissioncap · 2020-04-01T14:41:04Z

Description

difference between the develop and build static sites. both commands are working. the styling is quite different. the develop site works as expected. the build site has the the css inline in the head tag but outside of any other tag. just appears as rendered text in the browser.

Steps to reproduce

gatsby develop
view site
gatsby build
view site

both commands execute successfully

Expected result

sites should be virtually identical between develop and build

Actual result

the styling is quite different. the develop site works as expected. the build site has the the css inline in the head tag but outside of any other tag. just appears as rendered text in the browser.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

 System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (1) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Shell: 4.4.19 - /bin/bash
  Binaries:
    Node: 12.0.0 - ~/.nvm/versions/node/v12.0.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.0.0/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.0.0/bin/npm
  Languages:
    Python: 2.7.15+ - /usr/bin/python
  npmPackages:
    gatsby: ^2.7.5 => 2.13.8
    gatsby-image: ^2.3.1 => 2.3.1
    gatsby-plugin-graphql-codegen: ^2.6.1 => 2.6.1
    gatsby-plugin-react-helmet: ^3.1.2 => 3.1.2
    gatsby-plugin-sass: ^2.1.3 => 2.1.3
    gatsby-plugin-sharp: ^2.5.3 => 2.5.3
    gatsby-plugin-typescript: ^2.3.1 => 2.3.1
    gatsby-source-filesystem: ^2.1.5 => 2.1.5
    gatsby-transformer-remark: ^2.6.7 => 2.6.7
    gatsby-transformer-sharp: ^2.4.3 => 2.4.3
  npmGlobalPackages:
    gatsby-cli: 2.11.3

gatsby.config.js

module.exports = {
  /* Your site config here */
  siteMetadata: {
    title: `Environment Awareness Tracker (EAT)`,
    description:
      "Lorem ipsum ... .",
    url: "https://www.mcr.com", // No trailing slash allowed!
    image: "sheild.svg", // Path to your image you placed in the 'static' folder
  },
  plugins: [
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/assets/`,
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-transformer-remark`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-typescript`,

    {
      resolve: `gatsby-plugin-graphql-codegen`,
      options: {
        key: 'gatsby',
        documentPaths: [
          './src/**/*.{ts,tsx}',
          './node_modules/gatsby-*/**/*.js',
        ],
        codegenDelay: 200,
        fileName: `types/graphql-types-gatsby.ts`


      }
    }
  ]
}

additional info:

using sass to imprt stylesheets
react components using sass and css modules

The text was updated successfully, but these errors were encountered:

fiftymissioncap · 2020-04-01T14:49:55Z

one more note ...

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.adf03b3d909d0a1f5515.css">@import url(https://fonts.googleapis.com/css?family=Raleway);html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decorat

the style sheet is being injected: <style data-href="/styles.adf03b3d909d0a1f5515.css">

but is being followed by the scss file contents

now that i see it, its more likely my setup issue. i was confused initially as develop was working fine. any ideas how i troubleshoot sass & css modules for gatsby build?

Js-Brecht · 2020-04-01T16:19:04Z

the style sheet is being injected: <style data-href="/styles.adf03b3d909d0a1f5515.css">

but is being followed by the scss file contents

That should be fine. The browser doesn't do anything with data-* attributes. That <style> tag should be valid. But the styles are just being injected as plain text onto the page??? That's really strange! Can you share a simplified reproduction?

vladar · 2020-04-01T17:12:05Z

Yes, please provide a minimal reproduction and we'll be able to take a look.

Thanks for using Gatsby! 💜

fiftymissioncap · 2020-04-01T19:38:25Z

hi there,

thanks for the response. i was able to reproduce the same behaviour with a gatsby starter: https://github.com/kwixand/gatsby-starter-typescript-scss-modules

same outcome observed: develop site looks fine but the production build (gatsby build) is completely off. the site builds but the styles rendered as text on the page. see screenshot

the one change i made to the starter was to refer to a scss import from node_modules (just like my gatsby app) in the layout.tsx component:

//import './Layout.scss'
import 'vital-css/sass/vital.sass'

let me know if you still need a reproducible package. its basically the starter kit above plus the one line change.

Js-Brecht · 2020-04-01T19:45:33Z

I just created a new site from that starter, and I don't see the problem 😕

Js-Brecht · 2020-04-01T19:47:35Z

That vital-css is an npm package?

fiftymissioncap · 2020-04-01T19:55:15Z

That vital-css is an npm package?

yes, its an npm package i added. that's the only difference to the starter

  },
  "devDependencies": {
    "node-sass": "^4.13.1",
    "prettier": "^1.15.3",
    "stylelint": "^9.9.0",
    "stylelint-config-prettier": "^4.0.0",
    "stylelint-config-recommended-scss": "^3.2.0",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-order": "^2.0.0",
    "stylelint-scss": "^3.4.2",
    "tslint": "^5.12.0",
    "tslint-config-prettier": "^1.17.0",
    "tslint-react": "^3.6.0",
    "vital-css": "^2.2.1"
  }

i see a difference between gatsby develop and gatsby build

Js-Brecht · 2020-04-01T19:57:32Z

It's inlining an svg element from that vital-css package inside of the CSS, which is breaking the styles for some reason

Js-Brecht · 2020-04-01T20:16:36Z

There's actually 4 different inlined svg elements used as background-image css attributes. As soon as I delete those from the rendered HTML, it starts working correctly.

fiftymissioncap · 2020-04-01T20:47:10Z

got it. thanks for the update.

i don't need that css package. i'll replace it with something else.

i thought that something was breaking in the gatsby build. so if its just related to the css library and how it inlines svgs then i'll just use another css toolkit/lib.

just a question ... should the gatsby build handle inline svgs in a scss file? just curious

Js-Brecht · 2020-04-01T20:48:39Z

Well, I think it's a problem because Gatsby is inlining the generated CSS into the HTML. Which is normally what you want, but in this case it's breaking the styles because of those svgs. I think it'll work correctly if it just does a <link>, but that might result in FOUC, if you're relying on those styles

Js-Brecht · 2020-04-01T20:56:54Z

I can confirm that if it is loaded as a synchronous link (<link rel="stylesheet">) it's fine. But Gatsby doesn't currently have a good way to make that happen.

I wonder if style-loader would help in this particular case 🤔 ... I think that it'd just wind up with the styles loaded twice: once as a <link> and one inline, but it's worth a try.

Js-Brecht · 2020-04-01T21:04:42Z

I wonder if style-loader would help in this particular case 🤔 ... I think that it'd just wind up with the styles loaded twice: once as a <link> and one inline, but it's worth a try.

Nah, it doesn't. Gatsby just overrides it anyway.

fiftymissioncap · 2020-04-01T21:24:50Z

ok. thanks. i'll go with the synchronous link or change the css library.

thanks for your help and quick assistance. i thought it was a something i was doing wrong or a gatsby issue (which it still may be) but i've got a work around now.

if you think this is not a major issue feel free to close it or keep it open (or merge it with another issue) if you think it needs to be handled by gatsby.

Js-Brecht · 2020-04-01T22:19:13Z

I think that this is not something easily handled by Gatsby. Inlining the CSS into the HTML is an important optimization, so turning it off isn't a good idea; and I don't think this issue is common enough to justify executing some string matching on all css just to check for extra HTML elements, like <svg>, in order to exclude the css chunk from being inlined. Since it's kind of a one-off type situation, I think it should be up to the user/3rd party package author to handle this use case.

That's just my opinion, though; I'll leave it up to the ones in power. 🙂 Maybe it'd make sense to add some kind of warning if this kind of scenario is detected. 🤷‍♂

A couple solutions/workarounds:

Perhaps there is a webpack plugin out there somewhere that will transform inlined svg elements in css from utf8 to base64.
Here's a decent way to include the css as a <link> element:

// gatsby-ssr.js
import React from 'react';
import vital from '!file-loader!extract-loader!css-loader!sass-loader!vital-css/sass/vital.sass';

export const onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
    const components = getHeadComponents();
    replaceHeadComponents(components.concat([
        <link rel="stylesheet" href={vital} />
    ]));
}

Another alternative might be to alter the <style> elements by changing the <svg> elements to base64; or extract the svg to a file and replace the data: with the url. That can be done during onPreRenderHTML(), too.

github-actions · 2020-04-22T00:03:28Z

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

github-actions · 2020-05-02T00:04:17Z

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

fiftymissioncap added the type: bug An issue or pull request relating to a bug in Gatsby label Apr 1, 2020

vladar added the status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. label Apr 1, 2020

github-actions bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Apr 22, 2020

github-actions bot closed this as completed May 2, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Develop vs Build Styling very different [v 2.13.8 / 2.11.3 (cli) ] #22718

Develop vs Build Styling very different [v 2.13.8 / 2.11.3 (cli) ] #22718

fiftymissioncap commented Apr 1, 2020

fiftymissioncap commented Apr 1, 2020

Js-Brecht commented Apr 1, 2020

vladar commented Apr 1, 2020

fiftymissioncap commented Apr 1, 2020 •

edited

Js-Brecht commented Apr 1, 2020

Js-Brecht commented Apr 1, 2020

fiftymissioncap commented Apr 1, 2020 •

edited

Js-Brecht commented Apr 1, 2020 •

edited

Js-Brecht commented Apr 1, 2020

fiftymissioncap commented Apr 1, 2020

Js-Brecht commented Apr 1, 2020 •

edited

Js-Brecht commented Apr 1, 2020 •

edited

Js-Brecht commented Apr 1, 2020

fiftymissioncap commented Apr 1, 2020

Js-Brecht commented Apr 1, 2020 •

edited

github-actions bot commented Apr 22, 2020

github-actions bot commented May 2, 2020

Develop vs Build Styling very different [v 2.13.8 / 2.11.3 (cli) ] #22718

Develop vs Build Styling very different [v 2.13.8 / 2.11.3 (cli) ] #22718

Comments

fiftymissioncap commented Apr 1, 2020

Description

Steps to reproduce

Expected result

Actual result

Environment

fiftymissioncap commented Apr 1, 2020

Js-Brecht commented Apr 1, 2020

vladar commented Apr 1, 2020

fiftymissioncap commented Apr 1, 2020 • edited

Js-Brecht commented Apr 1, 2020

Js-Brecht commented Apr 1, 2020

fiftymissioncap commented Apr 1, 2020 • edited

Js-Brecht commented Apr 1, 2020 • edited

Js-Brecht commented Apr 1, 2020

fiftymissioncap commented Apr 1, 2020

Js-Brecht commented Apr 1, 2020 • edited

Js-Brecht commented Apr 1, 2020 • edited

Js-Brecht commented Apr 1, 2020

fiftymissioncap commented Apr 1, 2020

Js-Brecht commented Apr 1, 2020 • edited

github-actions bot commented Apr 22, 2020

github-actions bot commented May 2, 2020

fiftymissioncap commented Apr 1, 2020 •

edited

fiftymissioncap commented Apr 1, 2020 •

edited

Js-Brecht commented Apr 1, 2020 •

edited

Js-Brecht commented Apr 1, 2020 •

edited

Js-Brecht commented Apr 1, 2020 •

edited

Js-Brecht commented Apr 1, 2020 •

edited