postcss-preset-env v9.x.x

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.

https://open-props.style

MIT License

4.78k stars 193 forks source link

postcss-preset-env v9.x.x #347

Open romainmenke opened 1 year ago

romainmenke commented 1 year ago

supersedes : https://github.com/argyleink/open-props/pull/234

unminified diff can be viewed here : https://github.com/romainmenke/open-props/pull/1/commits/ed93c5ed490fc8b494ae86800f1a61d6d11983b3

stackblitz[bot] commented 1 year ago

Run & review this pull request in StackBlitz Codeflow.

argyleink commented 1 year ago

thanks for this kick start! i just spent 5m reviewing the diff and running some stuff locally. will need to set aside a chunk of time for this task.

argyleink commented 1 year ago

is postcss-combine-duplicated-selectors still misbehaving? i agree it's normally not advised, but for the bundling of props it's great.

romainmenke commented 1 year ago

is postcss-combine-duplicated-selectors still misbehaving? i agree it's normally not advised, but for the bundling of props it's great.

yup, maybe better to create a dedicated plugin that does exactly what you need it to do for open-props?

argyleink commented 1 year ago

is postcss-combine-duplicated-selectors still misbehaving? i agree it's normally not advised, but for the bundling of props it's great.

yup, maybe better to create a dedicated plugin that does exactly what you need it to do for open-props?

merged!

romainmenke commented 1 year ago

nice!

A lot has happened since originally opening this pull request and I noticed that we removed a feature somewhere along the way that you depend on here. Transpiling of media range syntax in @custom-media is no longer supported. But I think we should bring this back.

I will modernise this pull request after patching that issue.

romainmenke commented 1 year ago

@argyleink This is ready for another look. I've updated the diff preview in the original post at the top, but another link here : https://github.com/romainmenke/open-props/pull/1/commits/ed93c5ed490fc8b494ae86800f1a61d6d11983b3

Summary :

some white space is different (should largely go away when minifying which I disabled for the preview)
; are now added by the nesting plugin, this fixed some issues for some users
nesting plugins works slightly differently which seems to result in fewer useless/empty rules
media range syntax plugin now emits px fractions
order of selector bits in a single compound selector can be different but this will never have a different outcome
:has() polyfill is now disabled

argyleink commented 1 year ago

I added this back in to postcss.config.cjs to remove the .focus-visible or .focus-within conveniences, and then disabled :has() so it just passes through.

'has-pseudo-class': false,
'focus-visible-pseudo-class': false,
'focus-within-pseudo-class': false,

pending I do a deeper comparison, this PR is lookin good.

I also need to update the docsite in /docsite. Will test out these updates there too and get back to this PR with findings.

Thanks Romain!

romainmenke commented 1 year ago

Definitely fine to disable those explicitly but this isn't needed anymore as of version 8. Any plugin that also requires some client-side JS script is now disabled by default.

We found that too many users had these plugins enabled without knowing this and without loading the client-side JS scripts :)