Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: strf-9440 Stencil Bundle: fail on scss failure compilation #884

Merged
merged 1 commit into from
Mar 10, 2022

Conversation

jairo-bc
Copy link
Contributor

@jairo-bc jairo-bc commented Mar 9, 2022

What?

Scss compilation validation task during theme bundling by running stencil bundle command

Tickets / Documentation

Screenshots (if appropriate)

Screenshot 2022-03-09 at 20 19 02

Screenshot 2022-03-09 at 20 47 32

cc @bigcommerce/storefront-team

@jairo-bc jairo-bc requested a review from a team March 9, 2022 20:47

try {
const css = await stencilStyles.compileCss('scss', params);
const css = cssCompiler.compile(configuration, themeAssetsPath, fileName);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to await cssCompiler.compile here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes!

throw new Error(`Error: ${e.message}, while reading files from "${stylesPath}".`.red);
}

for await (const file of cssFiles) {
Copy link
Contributor

@jmwiese jmwiese Mar 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the use of for await here mean that cssFiles is an async iterable object? It seems like we're doing await inside of the try so does that mean the filter/slice operation results in an async type?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it was a leftover from previous solution. But you are right, that for await should be used for async iterable objects. On other hand it also supports sync iterables, I think it's cleaner to separate those concerns

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the problem was in the eslint as well: https://eslint.org/docs/rules/no-await-in-loop
But those operation steps should go in sync way, so I disabled that rule for the next line

@jairo-bc jairo-bc force-pushed the STRF-9440 branch 2 times, most recently from dcb13a4 to 294bfea Compare March 10, 2022 12:13
@jairo-bc jairo-bc merged commit c5cd24d into bigcommerce:master Mar 10, 2022
@mattcoy-arcticleaf
Copy link
Contributor

Hi @jairo-bc , this is great in theory, but in practice it is breaking our themes. We declare SCSS variables in a separate file that gets included before our other SCSS files. The compiler is telling us that a variable is undefined, and thus it will not bundle the theme. However, the variable is defined, it's just in another file. Try it out yourself by declaring a variable, and then using it in another file. This is a common practice for developers, and I don't think it should be disallowed.

@mattcoy-arcticleaf
Copy link
Contributor

@jairo-bc , sorry, this appears to now be fixed in 4.1!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants