product-ride/styled-wind

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

Opened this issue · 3 comments

Deleted user commented

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

Actual

Expected :

Expected

  • Version 0.0.0-beta.13
ameerthehacker commented

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 commented

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

  • ❤️1
Deleted user commented

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?