CircleCI hangs on Parcel build when Sass is imported into components

[jaredscheib]

From #4043 circle build failing currently:

[jaredscheib]

Still happening. See https://circleci.com/gh/influxdata/chronograf/14247 for example.

[chnn]

@jaredscheib @alexpaxton and I narrowed down the issue.

Parcel appears to hang forever when attempting to build components that import a Sass file.

• Only happens on linux (e.g. CircleCI environment)
• Happens with node 8.10.0, 8.11.2, and 10.8.0 (have not tested other versions)
• Happens with both Yarn 1.5.x and 1.9.2
• Can be fixed by importing CSS instead of SCSS,
• Can be fixed by importing the Sass file into ui/src/style/chronograf.scss instead of in a component

We are currently using the latter solution above as a stop gap until we decide upon on a more final solution.

[mavarius]

While this issue is solved, in part, with the stop gap implemented above; it is not ideal. The shift to moving the stylesheets to the component folder isn't just a folder structure change but was instead a step towards allowing our build process to automatically namespace class names per their component.

The goal is to import the stylesheets into the components and access them as objects in our className props. In order to implement this, Parcel will need to support the scss files imports and our build process will need to include a function to prepend the component name to each class name when compiling our bundled stylesheet.

[jaredscheib]

Thanks @mavarius! I say we open an issue with parcel and use this issue to track that. When that issue is resolved, we can refactor our import paths and file structure as you've suggested. Mind filing what you wrote above as an issue in parcel and linking it back here, @chnn?

[chnn]

I'm reluctant to open an issue unless I have a concrete reproduction. It also seems that the parcel maintainers are aware of Sass related issues—see this comment, for example.

I would say let's give this a few weeks to fix itself. Importing Sass inside components vs. inside chonograf.scss is a purely superficial difference on our end. I don't think it blocks scoped CSS either, if that is what we're after.

@mavarius Let's talk at some point about scoped CSS. There's quite a few varieties of scoped CSS out there that function differently. We also need to figure what place it has in Chronograf 1.x vs. 2.x vs. an external reusable UI package.

[chnn]

By the way, I did attempt once more this morning to make the issue reproducible outside of our CircleCI environment. Even running the same exact same Docker image used in our CI worked fine on my local machine.

I was able to narrow it down to a single problematic file, src/style/modules/mixins. Removing that import would make the build run just fine, fwiw.