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

Question

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

opened this issue 4 years ago · comments

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

Ameer Jhan · Answer 1 · Tue Dec 08 2020 14:24:44 GMT+0800 (China Standard Time)

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

Deleted user · Answer 2 · Tue Dec 08 2020 14:41:35 GMT+0800 (China Standard Time)

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

Deleted user · Answer 3 · Sun Dec 20 2020 03:34:12 GMT+0800 (China Standard Time)

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?