search

tailwindlabs / tailwindcss-aspect-ratio

MIT License
972 stars 34 forks source link

Place --tw-aspect-w custom property first #36

Closed joaquinvaldezzz closed 1 year ago

joaquinvaldezzz commented 1 year ago

This pull request puts the CSS custom variable --tw-aspect-w on top of any CSS declarations.

Before:

.aspect-w-1 {
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)
    --tw-aspect-w: 1;
}

After:

.aspect-w-1 {
    --tw-aspect-w: 1;
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)
}
RobinMalfait commented 1 year ago

Hey! Thank you for your PR! Much appreciated! 🙏

The outcome of the css behaves exactly the same, and it is a bit nicer to spread the baseStyles first so that you can always override specific properties from the baseStyles.

If we would add --tw-aspect-w to the baseStyles in a future version, then this would break because now you would generate the default value, instead of the expected overriden value.

I do appreciate the PR though, but going to close it for now.