Merge pull request #13 from productive-codebases/feat/accept-styles-directly

Accept styles directly on conditions.

Author: cr0cK

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v1.5.0 (2024-03-09)
+
+### Added
+
+- Accept styles directly as the second argument on conditions.
+
 ## v1.4.0 (2023-07-24)
 
 ### Added

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@productive-codebases/build-variants",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Declare and compose styles variants with ease.",
   "author": "Alexis MINEAUD",
   "license": "MIT",

package.json

@@ -235,7 +235,7 @@ export default class BuildVariantsBuilder<
    */
   if(
     apply: boolean | (() => boolean),
-    fn: BuildVariantsBuilderFn<TProps, TCSSObject>,
+    cssOrFn: TCSSObject | BuildVariantsBuilderFn<TProps, TCSSObject>,
     options?: BuildVariantsMergerCssPartsOptionsPublic
   ): this {
     const applyValue = typeof apply === 'function' ? apply() : apply
@@ -245,7 +245,9 @@ export default class BuildVariantsBuilder<
       variantsDefinitions: this._allVariantsDefinitions
     })
 
-    return this._addCssPart(null, fn(builder), options)
+    const cssPart = typeof cssOrFn === 'function' ? cssOrFn(builder) : cssOrFn
+
+    return this._addCssPart(null, cssPart, options)
   }
 
   /**

src/lib/BuildVariantsBuilder.ts

@@ -313,11 +313,15 @@ describe('BuildVariantsBuilder', () => {
               .end()
           }
         )
+        .if(true, {
+          border: '1px solid red'
+        })
         .end()
 
       expect(css).toEqual({
         color: 'silver',
-        background: 'lime'
+        background: 'lime',
+        border: '1px solid red'
       })
     })
   })