Allow property values to be style objects

[simontaisne]

Problem Statement

Rainbow Sprinkles currently doesn't accept style objects as values when defining dynamicProperties.

This could be useful when using complex CSS properties like transform, which lets you rotate, scale, skew, or translate an element.

The only way at the moment to rotate or translate an element with Rainbow Sprinkles is to define the transform property with dynamic values as follows:

const properties = defineProperties({
  dynamicProperties: {
    transform: true,
  },
});

const rainbowSprinkles(properties);

Which forces you to dynamically construct the full transformation value, when only the length value could be provided

rainbowSprinkles({
  transform: `translateX(${length})` 
});

This also means you have to manually handle in JS things like rtl direction, while this could be automated 😞

rainbowSprinkles({
  transform: `translateX(calc(${length} * ${transformDirection}))` 
});

Proposed Solution

As with regular Sprinkles properties, it would be great if the values could be entire style objects. This would make for even more powerful classes.

const properties = defineProperties({
  dynamicProperties: {
    translateX: {
      transform: `translateX(${true})`, // true being the placeholder for the dynamic value
      selectors: {
        '[dir="rtl"] &': {
          transform: `translateX(${calc.negate(true)})`,
        }
      }
    },
  }
});

Which would automatically produce the following classes

.rainbowSprinkles_translateX__16s97g72c {
  transform: translateX(var(--translateX__16s97g728));
}

[dir="rtl"] .rainbowSprinkles_translateX__16s97g72c {
  transform: translateX(calc(var(--translateX__16s97g728)) * -1)),
}

[roginfarrer]

Hey, this is a super cool idea! Really into it. It gets me thinking about what can be done with this to optimize shorthands like marginX or marginY.

In terms of devising the API for configuration with defineProperties, do you have thoughts on the following?

• You use true for the placeholder of the dynamic value. Is there another way we could make this more clear? How would we handle properties that also have a scale associated with them?
• In your example, translateX would lockdown the transform property, which means you couldn't use translateX alongside rotate, scale or etc. How would one support multiple values within transform?

[simontaisne]

Hey @roginfarrer 👋 You're absolutely right, support for multiple values would actually be needed in this example to support multiple kinds of transformations. That's actually how tailwind works with transform.

transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

I guess in terms of API, I guess we could somehow get close to the vanilla-extract syntax 🤔

const properties = defineProperties({
  dynamicProperties: {
    transform: {
      vars: {
        translateX: true,
        translateY: true,
        rotate: true,
      },
      transform:`translate(${translateX}, ${translateY}) rotate(${rotate}) ...`,
    }
  }
});

Then to use it

rainbowSprinkles({
  transform: {translateX: '10px', ...}
});

[github-actions]

Automatically marking issue as stale due to lack of activity

[github-actions]

Automatically marking issue as stale due to lack of activity

[github-actions]

Automatically closing this issue as stale

[github-actions]

Automatically marking issue as stale due to lack of activity