When using tailwind scale transform, the output doesn't include the tailwind transform CSS properties.

ohkimur commented 1 year ago

The scale transforms outputs are incomplete. There should be also the --tw-translate-x, --tw-translate-y, --tw-rotate, --tw-skew-x, and --tw-skew-y CSS custom properties. The current output only considered the --tw-scale-x, and --tw-scale-y properties. I suspect that when using a transform, like scale or similar, twin.macro only takes in consideration the custom CSS properties that have the same name, which covers most of the cases, but not this one.

in.tsx

// Tw block
tw`hover:scale-105 active:scale-100`

Actual out.tsx

// Tw block
({
  ":hover": {
    "--tw-scale-x": "1.05",
    "--tw-scale-y": "1.05",
    "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))"
  },
  ":active": {
    "--tw-scale-x": "1",
    "--tw-scale-y": "1",
    "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))"
  }
});

Expected out.tsx

// Tw block
({
  ":hover": {
    "--tw-scale-x": "1.05",
    "--tw-scale-y": "1.05",
    "--tw-translate-x: "0",
    "--tw-translate-y: "0",
    "--tw-rotate": "0",
    "--tw-skew-x": "0",
    "--tw-skew-y": "0",
    "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))"
  },
  ":active": {
    "--tw-scale-x": "1",
    "--tw-scale-y": "1",
    "--tw-translate-x: "0",
    "--tw-translate-y: "0",
    "--tw-rotate": "0",
    "--tw-skew-x": "0",
    "--tw-skew-y": "0",
    "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))"
  }
});

Expected even better output out.tsx

// Tw block
({
  "--tw-translate-x: "0",
  "--tw-translate-y: "0",
  "--tw-rotate": "0",
  "--tw-skew-x": "0",
  "--tw-skew-y": "0",
  ":hover": {
    "--tw-scale-x": "1.05",
    "--tw-scale-y": "1.05",
    "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))"
  },
  ":active": {
    "--tw-scale-x": "1",
    "--tw-scale-y": "1",
    "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))"
  }
});

NOTE: I'm not sure if the values for the tw transform variables added by me are correct in any context, but the main idea is that they should be present.

ohkimur commented 1 year ago

@ben-rogerson Do you have any ideas why this might happen? I could make a PR with a fix if given some guidance.

ohkimur commented 1 year ago

This issue seems to be related with #723

ben-rogerson commented 1 year ago

The missing default values are added in the global styles - it looks like they haven't been setup in your case.

// in
tw`hover:scale-105 active:scale-100`

// out 👍
({
  ":hover": {
    "--tw-scale-x": "1.05",
    "--tw-scale-y": "1.05",
    "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))"
  },
  ":active": {
    "--tw-scale-x": "1",
    "--tw-scale-y": "1",
    "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))"
  }
});

// <GlobalStyles /> out
// This is how the default transforms are set
*, ::before, ::after {
  // ...
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
 // ...
}

The fix would be to add the global styles in your project - check the examples for the import setup.

Check this tailwindcss example for comparison.

ohkimur commented 1 year ago

@ben-rogerson Thanks for your answer. I'll take a look into that more in depth. I'm trying to integrate twin.macro with Mitosis and I'm curious how I could add those global styles at the component level, or maybe inject them in the root of the projects.

ben-rogerson commented 1 year ago

If you manage it please let me know - might be able to roll the findings back into an example for the community

ben-rogerson / twin.macro