error while compiling scss files - BundleValidator

eosbr61 commented 2 years ago

Expected behavior

When bundling cornerstone theme assets, artifact is generated successfully. Bundling works fine with version 3.10.1.

Actual behavior

When bundling cornerstone theme scss assets, fails on the following:

Example 1:

`Validating theme... /opt/hostedtoolcache/node/12.22.10/x64/lib/node_modules/@bigcommerce/stencil-cli/lib/bundle-validator.js:429 throw new Error( ^

Error: Undefined variable: "$color--custom-blue". on line 11 of stdin

color: $color--custom-blue;
-----------^ : while compiling css files from "/home/runner/work/custom-cornerstone/custom-project1-cornerstone/assets/scss/themeCustom.scss". at BundleValidator._validateCssFiles (/opt/hostedtoolcache/node/12.22.10/x64/lib/node_modules/@bigcommerce/stencil-cli/lib/bundle-validator.js:429:23) Error: Process completed with exit code 1.`

Example 2:

`Validating theme... /opt/hostedtoolcache/node/12.22.10/x64/lib/node_modules/@bigcommerce/stencil-cli/lib/bundle-validator.js:429 throw new Error( ^

Error: no mixin named breakpoint

   Backtrace:
    stdin:11
    on line 11 of stdin

@include breakpoint("small") { -----------^ : while compiling css files from "/home/runner/work/custom-cornerstone/custom-project2-cornerstone/assets/scss/themeCustom.scss". at BundleValidator._validateCssFiles (/opt/hostedtoolcache/node/12.22.10/x64/lib/node_modules/@bigcommerce/stencil-cli/lib/bundle-validator.js:429:23) Error: Process completed with exit code 1.`

Steps to reproduce behavior

using stencil version @bigcommerce/stencil-cli@3.11.0.
under cornerstone project assets/scss - create a new themeCustom.scss
add the following entry to the themeCustom.scss file: h1.productView-title, .page-heading, .card-title a { color: $color--custom-blue; }
create a directory under cornerstone project assets/scss/settings/custom/global/color
create a new file within assets/scss/settings/custom/global/color/_custom_color.scss
add the following entry to _custom_color.scss: $color--custom-blue: #0084d4;
create a new file within assets/scss/settings/custom/global/_custom_global.scss
add the following entry to _custom_global.scss: @import "color/custom_color";
update theme.scss: '@import "settings/custom/global/custom_global"; // 2 include after main global setting import' @import "themeCustom"; //add at end of file
execute command: stencil bundle

Environment

Stencil-cli version stencil --version: 3.11.0

Node version node -v: v12.22.10

NPM version npm -v: 6.14.16

OS: [Ubuntu | 20.04.4 LTS ] | [ MacOS Monterey | v12.2]

Cornerstone project that can be used to reproduce error (has setup mentioned above): Cornerstone-6.3.0.zip

jairo-bc commented 2 years ago

Hi @eosbr61,

I would recommend you to put your themeCustom.scss file lower in the file structure, cause root scss files tend to be independent (so have it own imports).

I know, that stencil start allows to do that, but it will resolve to 500 error on production with the approach you are taking.

eosbr61 commented 2 years ago

Hello @jairo-bc,

Thanks for the recommendation, especially when there is a potential for 500 errors. I am still not clear on placing themeCustom.scss file lower in the file structure and would like to get more details on what that means. This design approach is currently live (in production) and we have not noticed any 500 errors with the theme files loading incorrectly, however that doesn't mean I am not open to understanding your recommendation a bit better to prevent the issue if you are recognizing something that we are not. With that said, the current file structure where we are introducing scss files and hooking into current design is as follows:

scss ┣ common ┣ components ┣ layouts ┣ settings ┃ ┣ citadel ┃ ┣ custom ┃ ┃ ┗ global ┃ ┃ ┃ ┣ color ┃ ┃ ┃ ┃ ┗ _custom_color.scss ┃ ┃ ┃ ┗ _custom_global.scss ┃ ┣ foundation ┃ ┣ global ┃ ┃ ┣ _global.scss ┃ ┃ ┗ _tools.scss ┃ ┣ layouts ┃ ┣ normalize ┃ ┣ stencil ┃ ┗ vendor ┣ tools ┣ utilities ┣ vendor ┣ checkout.scss ┣ invoice.scss ┣ maintenance.scss ┣ optimized-checkout.scss ┣ theme.scss ┗ themeCustom.scss

when referencing the example project, it will be configured accordingly for the scss complier to load in the correct sequence to override the out-of-the-box styles. Is there something that is being missed in this approach that I am not understanding well?

jairo-bc commented 2 years ago

Those "root" files are basically. ┣ checkout.scss ┣ invoice.scss ┣ maintenance.scss ┣ optimized-checkout.scss ┣ theme.scss

All of them are directly imported in templates using stylesheet helper. That means they are the entry points for the scss compiler.

I think you don't have 500 error, because you don't import themeCustom.scss directly in your theme. To avoid the problem with stencil bundle , you could move themeCustom.scss for example toscss/custom/theme.scss

eosbr61 commented 2 years ago

@jairo-bc : Thanks for that information, that does clear up some confusion. We are actually loading the themCustom.scss via an import statement within theme.scss. The import statement is at the very bottom of the file theme.scss -> @import "themeCustom";. In addition there is an import statement @import "settings/custom/global/custom_global" that contains the defined variables used by themCustom.scss within theme.scss that is after the import to default global settings.

Again, 100% confident that is working in production today without any errors. Would you know why stencil bundle works when using version 3.10.1 or earlier and with the recent updates introduced to 3.11.0 it is failing.

eosbr61 commented 2 years ago

@jairo-bc : Applied your recommendation and moved themeCustom.css from the root and into a directory scss/custom/themeCustom.css.

scss ┣ common ┣ components ┣ custom ┃┗ themeCustom.scss ┣ layouts ┣ settings ┃ ┣ citadel ┃ ┣ custom ┃ ┃ ┗ global ┃ ┃ ┃ ┣ color ┃ ┃ ┃ ┃ ┗ _custom_color.scss ┃ ┃ ┃ ┗ _custom_global.scss ┃ ┣ foundation ┃ ┣ global ┃ ┃ ┣ _global.scss ┃ ┃ ┗ _tools.scss ┃ ┣ layouts ┃ ┣ normalize ┃ ┣ stencil ┃ ┗ vendor ┣ tools ┣ utilities ┣ vendor ┣ checkout.scss ┣ invoice.scss ┣ maintenance.scss ┣ optimized-checkout.scss ┣ theme.scss

Introducing the change and executing npx stencil bundle using version 3.11.0 / 3.10.1 were successful in the bundling task. I am guessing there are some implication on performance if not correctly designed moving forward with using version 3.11.0 and newer.

I am still curious on why the failure started with version 3.11.0, just to make sure there isn't an underlying issue with processing scss files.

In summary, it seems if we need an entry point that needs to be introduced to support custom styles not available out-of-the-box, placing the file in the root is the location and the scss files imported will need to be in a sub directory. Did I understand that correctly?

bigcommerce / stencil-cli