What is the location of your example repository?
demo-store
Which package or tool is having this issue?
Other / I don't know
What version of that package or tool are you using?
1.0.4
What version of Remix are you using?
No response
Steps to Reproduce
The demo store template uses the below code.
https://github.com/Shopify/hydrogen/blob/926a45d82c0cdde1940e945ab1243f7e4e5e3cd9/templates/demo-store/app/routes/(%24locale).products.%24productHandle.tsx#L114
This generates a section as below as can be seen at https://hydrogen.shop/products/snowboard
<section class="w-full gap-4 md:gap-8 grid p-6 md:p-8 lg:p-12 border-none px-0 md:px-8 lg:px-12">...</section>
Expected Behavior
Using the Section component with classes that include padding, you would expect it to not include any of the default padding (not sure if this is explicity said anywhere in the docs but based on the function definining the Section component in ./componenents/Text.tsx)
The syles const seems to have a typo where it checks whether the component has any specified padding using the missing class function.
https://github.com/Shopify/hydrogen/blob/926a45d82c0cdde1940e945ab1243f7e4e5e3cd9/templates/demo-store/app/components/Text.tsx#L142
Actual Behavior
Default padding is only excluded when you specifiy a class with "mp-", "mpx-", "mpy" instead of the expected tailwind padding format of "p-", "px-", "py-"
What is the location of your example repository?
demo-store
Which package or tool is having this issue?
Other / I don't know
What version of that package or tool are you using?
1.0.4
What version of Remix are you using?
No response
Steps to Reproduce
The demo store template uses the below code.
https://github.com/Shopify/hydrogen/blob/926a45d82c0cdde1940e945ab1243f7e4e5e3cd9/templates/demo-store/app/routes/(%24locale).products.%24productHandle.tsx#L114
This generates a section as below as can be seen at https://hydrogen.shop/products/snowboard
<section class="w-full gap-4 md:gap-8 grid p-6 md:p-8 lg:p-12 border-none px-0 md:px-8 lg:px-12">...</section>Expected Behavior
Using the Section component with classes that include padding, you would expect it to not include any of the default padding (not sure if this is explicity said anywhere in the docs but based on the function definining the Section component in ./componenents/Text.tsx)
The syles const seems to have a typo where it checks whether the component has any specified padding using the missing class function.
https://github.com/Shopify/hydrogen/blob/926a45d82c0cdde1940e945ab1243f7e4e5e3cd9/templates/demo-store/app/components/Text.tsx#L142
Actual Behavior
Default padding is only excluded when you specifiy a class with "mp-", "mpx-", "mpy" instead of the expected tailwind padding format of "p-", "px-", "py-"