x-axis and y-axis based padding, margins not working

[ghost]

Describe the bug
.px-{n}, .py-{n}, .mx-{n}, .my-{n} classes are not working as expected. Although .p-{n} .m-{n} classes work perfectly fine.

To Reproduce
Code SandBox Link

Actual

Expected :

• Version 0.0.0-beta.13

[ameerthehacker]

Thanks for raising this @ArjithN if you are interested please feel free to shoot a PR. This will help you get started https://github.com/product-ride/styled-wind/blob/master/src/services/css-gen/css-gen.ts#L339

[ghost]

Sure @ameerthehacker I'd love to take it up!

[ghost]

I tried to work on this, and it works when added an extra trailing semi-colon ";". Not sure why the existing one would get disregarded.

  if (Array.isArray(directionStringorArray)) {
          return directionStringorArray.reduce((prev, direction) => {
            return `${prev}
                padding${direction}: ${themeValue};;
                `;
          }, '');
        }

The above code generates correct CSS. Otherwise, the semi-colons are missing in-between two rules. Any idea why?