gridsome / gridsome/gridsome

Some CSS is lost in production build but fine in development.

Open
#989 7 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
8.5k
Forks
466
PR merge metrics
No merged PRs in 30d

Description

## Description

When I deploy to Netlify (and therefore run the build command for production) everything works as expected, except that some CSS is completely missing from the generated CSS file.

This is concerning because I've only spotted it in one place but this could have the wider potential to be breaking things I cannot yet see.

What's even more bizarre is that this is affecting a component that is being used multiple times, yet only breaks on **ONE** of them even though they all follow the same format.

### Steps to reproduce

This works fine locally but the problem appears to surface with the production build command.

I cannot state the steps but my repo is public so you can refer to my project there.

#### Repository (master branch) of my Gridsome project
https://github.com/michaelpumo/michaelpumo

#### Specific component this affects
https://github.com/michaelpumo/michaelpumo/tree/master/src/components/ButtonIcon/ButtonIcon.vue

#### HTML output
![output-html](https://user-images.githubusercontent.com/4269460/74614810-36922f80-5113-11ea-89ec-b1654788c245.png)

### Expected result

The yellow colour should be present. The class name is present but the associated CSS is not.

This is what it should look like (local development):
![local](https://user-images.githubusercontent.com/4269460/74614692-0302d580-5112-11ea-9802-dbf9e5ad5a15.png)

### Actual result

CSS responsible for the yellow colour does not appear in the CSS output.

This is what it ends up like (production development):
![prod](https://user-images.githubusercontent.com/4269460/74614711-275eb200-5112-11ea-8a5c-bdb0d36c406d.png)

### Environment

```
System:
OS: macOS 10.15.3
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
Node: 10.16.3 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.7 - /usr/local/bin/npm
Browsers:
Chrome: 80.0.3987.106
Firefox: 72.0.2
Safari: 13.0.5
npmPackages:
gridsome: ^0.7.12 => 0.7.12
gridsome-source-graphql-prismic: ^0.1.6 => 0.1.6
npmGlobalPackages:
@gridsome/cli: 0.3.1
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.