Fix raw styles with falsy conditions.

Author: cr0cK

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v1.5.1 (2024-03-13)
+
+### Fixed
+
+- Fix styles application when using raw styles in a `if` block.
+
 ## v1.5.0 (2024-03-09)
 
 ### Added

src/lib/BuildVariantsBuilder.ts

@@ -245,9 +245,17 @@ export default class BuildVariantsBuilder<
       variantsDefinitions: this._allVariantsDefinitions
     })
 
-    const cssPart = typeof cssOrFn === 'function' ? cssOrFn(builder) : cssOrFn
+    // pass the builder instance
+    if (typeof cssOrFn === 'function') {
+      return this._addCssPart(null, cssOrFn(builder), options)
+    }
 
-    return this._addCssPart(null, cssPart, options)
+    // pass raw object directly
+    if (apply) {
+      return this._addCssPart(null, cssOrFn, options)
+    }
+
+    return this
   }
 
   /**

src/tests/BuildVariantsBuilder.test.ts

@@ -278,6 +278,7 @@ describe('BuildVariantsBuilder', () => {
       }
 
       const css = testBuildVariants(props)
+        // should be not applied
         .if(false, builder_ => {
           return builder_
             .css({
@@ -294,6 +295,7 @@ describe('BuildVariantsBuilder', () => {
             })
             .end()
         })
+        // should be applyed
         .if(
           () => true,
           builder_ => {
@@ -303,24 +305,38 @@ describe('BuildVariantsBuilder', () => {
               })
               .variant('type', props.type, {
                 success: {
-                  background: 'lime'
+                  textDecoration: 'underline'
                 },
 
-                error: {
-                  background: 'orange'
-                }
+                error: {}
+              })
+              .compoundVariant('type', props.type, {
+                success: builder_ =>
+                  builder_
+                    // should not be applied because defined in a if(false) block
+                    .get('type', 'success')
+                    // should be applied
+                    .css({ fontWeight: 'bold' })
+                    .end(),
+                error: builder_ => builder_.get('type', 'error').end()
               })
               .end()
           }
         )
+        // should not be applyed
+        .if(false, {
+          fontSize: '16px'
+        })
+        // should be applyed
         .if(true, {
           border: '1px solid red'
         })
         .end()
 
       expect(css).toEqual({
         color: 'silver',
-        background: 'lime',
+        textDecoration: 'underline',
+        fontWeight: 'bold',
         border: '1px solid red'
       })
     })
@@ -722,7 +738,7 @@ describe('BuildVariantsBuilder', () => {
     describe('css()', () => {
       it('should apply css according weight', () => {
         const css = testBuildVariants({})
-          // should be applyied because using a weight
+          // should be applied because using a weight
           .css(
             {
               color: 'red',