Skip to content

Add stencilBoolean function to SCSS compiler#156

Open
34638a wants to merge 6 commits into
bigcommerce:masterfrom
34638a:master
Open

Add stencilBoolean function to SCSS compiler#156
34638a wants to merge 6 commits into
bigcommerce:masterfrom
34638a:master

Conversation

@34638a

@34638a 34638a commented Jul 8, 2026

Copy link
Copy Markdown

#RFC Proposal: Support for Stencil Boolean values in SASS.

What/Why?

Current state of stencil helpers does not support the processing of true or false values from config.json. These boolean states are configurable via UI and therefore should be importable into SCSS if required, not just into Handlebars.

Rollout/Rollback

Unknown as this is a outside contribution, in theory it would be to merge and bump all required packages to the new version downstream.

Testing

Tests are included, cloned from structure for stencilNumber(...) and contents replaced to reflect testing for truthiness.

Documentation:

The following values are considered true for the purposes of usage of stencilBoolean(...) as per the Javascript Truthy:

if (true);
if ({});
if ([]);
if (42);
if ("0");
if ("false");
if (new Date());
if (-42);
if (12n);
if (3.14);
if (-3.14);
if (Infinity);
if (-Infinity);

Any value not in the list above is considered false when injected into SASS. Once this state has been transferred from config.json to SASS, the way that SASS handles Booleans applies.

See Mozilla Truthy Glossary documentation for more information on Javascript Truthy: https://developer.mozilla.org/en-US/docs/Glossary/Truthy
See SASS documentation on Boolean values: https://sass-lang.com/documentation/values/booleans/

Implementation Warning:

CSS does not have a value representation of true and false and therefore cannot be directly translated from SCSS to CSS. One way to handle this is to use numeric 1 for true and numeric 0 for false, but implementation like this is up to the developer. What follows is a function that can be used in SCSS to perform a cast from SASS truthy to 1 else 0.

/**
 * Simple casting macro for resolving a true value to 1 and a false value to 0.
 */
@function castSASSBooleanForCSS1And0($isSassTruthy) {
    @if $isSassTruthy {
        @return 1;
    }
    @return 0;
}

Note

Low Risk
Additive SCSS helper following existing stencil* patterns; no auth or data-path changes, with unit tests covering lookup and coercion behavior.

Overview
Adds stencilBoolean($name) to the SCSS compiler’s theme-setting helpers so boolean (and other truthy/falsy) values from config.json can drive Sass @if and similar logic, alongside existing helpers like stencilNumber.

The function resolves the setting key (including nested paths via _.get), applies JavaScript truthy coercion with Boolean(...), and returns Sass.types.Boolean.TRUE or FALSE. Missing or invalid keys evaluate to false.

Tests mirror the stencilNumber suite (flat/nested keys, bad key, Sass type). Fixture settings and a sample castSASSBooleanForCSS1And0 SCSS helper document mapping booleans to 1/0 for CSS output.

Reviewed by Cursor Bugbot for commit 2cf456c. Bugbot is set up for automated code reviews on this repo. Configure here.

34638a and others added 5 commits July 8, 2026 13:06
Functional as a number returned 1 for truthy 0 for falsy. This is a RFC proposal and not a fully complete Pull Request to begin the conversation about adding this function into the SASS system.
This is an RFC proposal and a fully complete Pull Request to begin the conversation about adding this function into the SASS system.
# Conflicts:
#	lib/ScssCompiler.js

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 1f01fcf. Configure here.

Comment thread test/mocks/themes/valid/assets/scss/tools/onemore.scss Outdated
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.

1 participant