Not working in Gatsby production mode

[ryan-ds]

Environment

node: 8.12.0
gatsby: 2.12.0
gatsby-plugin-linaria: 1.2.0
linaria: 1.3.1
react: 16.8.6

Description

• I have created a new starter project with Gatsby via the following command:
  npx gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default

• Then added the required packages via:
  yarn add gatsby-plugin-linaria linaria

• After that, I added the gatsby-plugin-linaria plugin at the end of plugins in the gatsby-config.js file.

• Lastly I edited the components/header.js file to reflect the following:

import { Link } from 'gatsby'
import { styled } from 'linaria/react'
import PropTypes from 'prop-types'
import React from 'react'

const MainHeader = styled.header`
  background: rebeccapurple;
  margin-bottom: 1.45rem;
`

const Header = ({ siteTitle }) => (
  <MainHeader>
    <div
      style={{
        margin: `0 auto`,
        maxWidth: 960,
        padding: `1.45rem 1.0875rem`,
      }}
    >
      <h1 style={{ margin: 0 }}>
        <Link
          to="/"
          style={{
            color: `white`,
            textDecoration: `none`,
          }}
        >
          {siteTitle}
        </Link>
      </h1>
    </div>
  </MainHeader>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

---

After following these steps, I ran the project in development via npm start and it works flawlessly.

But running in production via npm run build && npm run serve, the build is successful but the styles do not get applied. The class is applied but the styles are not reflected anywhere.

I also tried deleting the public, .cache and linaria-cache folders but it didn't make any difference.

[ryands17]

@silvenon I guess the issue is in the gatsby-ssr.js file where for some reason this line is not being executed

if (type === 'style' && LINARIA_STYLESHEET_RULE.test(props['data-href'])) {
  // code here is not executed
}

The regex doesn't seem to match meaning it's not getting the required linaria.css file in the getHeadComponents method.

[silvenon]

Does the latest v1.2.1 fix the issue?

[ryands17]

@silvenon Nope, version 1.2.1 has the same issue. In the getHeadComponents method, I tried logging the props argument and it doesn't have contain any css file matching the LINARIA_STYLESHEET_RULE regex.

[cometkim]

The gatsby-ssr impl only adjusts the priority for the <link> matched to the regex, so codes inside filter not being executed means there is no effect.

There may be another (something like loader changed inside of gatsby?) cause.

[cometkim]

Options for enable/disable critical css would be nice BTW.

[ryan-ds]

@cometkim @silvenon yes if I omit the gatsby-ssr.js file, it still doesn't have any effect, so I guess the issue is regarding the loaders changed in production mode

[ryan-ds]

@cometkim @silvenon if possible could you pls suggest a version of this plugin as well as the gatsby and linaria versions working together so that I can test the application which I am refactoring currently

[cometkim]

@ryan-ds @silvenon gotcha,

The build failed v2.11.0~2.11.6
, and succeed from v2.11.7 but the page does not work properly.

• https://github.com/gatsbyjs/gatsby/compare/[email protected]@2.11.0
• https://github.com/gatsbyjs/gatsby/compare/[email protected]@2.11.7

And the develop was broken from v2.12.1

• https://github.com/gatsbyjs/gatsby/compare/[email protected]@2.12.1

[cometkim]

gatsbyjs/gatsby@268ed27 found this.

[cometkim]

Working on this. it would be resolved with a few cleanups.

[cometkim]

done. 😎

[ryands17]

@cometkim tried by cloning your branch and running the build but it fails with this error

[cometkim]

@ryands17 I think it just have been fixed in last commit. Could you try it again?

[ryands17]

It works flawlessly. Thanks a lot :)

[silvenon]

Published in v1.2.2 🚀