core: add support for CSS shorthands about griffel HOT 6 CLOSED

@ivi-hamiti thanks for heads up, I made a typo in description. Updated it to contain a proper package name 👍

Direct link on NPM: https://www.npmjs.com/package/griffel-codemod-shorthands

from griffel.

@ivi-hamiti thanks, fixed in [email protected] 👍

from griffel.

I noticed the codemod is not published in npm, is there any support for automatic migration or has this to be done manually?

from griffel.

Noticed there is an issue with the following shorthands codemod migration, if the last parameter is 0 it is omitted

{
  ...shorthands.gap('4px', 0),
  ...shorthands.margin('4px', 0),
  ...shorthands.padding('4px', 0)
}

is migrated to

{
  gap: '4px',  // wrong should had been '4px 0'
  margin: '4px', // wrong should had been '4px 0'
  padding: '4px' // wrong should had been '4px 0'
}

Second problem is that shorthands.gap parameter order is wrongly migrated

{
  ...shorthands.gap('4px', '8px')
}

is migrated to

{
  gap: '4px 8px' // wrong should had been '8px 4px'
}

based on mdn gap docs the syntax of gap is

gap: <row-gap> <column-gap>

while the gap function definition has it reverse

from griffel.

Noticed there is an issue with the following shorthands codemod migration, if the last parameter is 0 it is omitted

I cannot reproduce this using [email protected]. Can you please check using that version?

Second problem is that shorthands.gap parameter order is wrongly migrated

Ouch, indeed. Pushed a fix and released [email protected] 👍

from griffel.

was able to reproduce with [email protected] but instead of string values i had tokens values

import { makeStyles, shorthands, tokens } from '@fluentui/react-components';

export const useStyles = makeStyles({
    root: {
        ...shorthands.margin(tokens.spacingVerticalM, 0),
    },
});

this is wrongly migrated to

import { makeStyles, tokens } from '@fluentui/react-components';

export const useStyles = makeStyles({
    root: {
        margin: tokens.spacingVerticalM,
    },
});

from griffel.