Move to Lightning CSS and upgrade to PostCSS 8 #5093
Conversation
…n custom properties No idea why support for that was removed in postcss-custom-properties v8
Should not be relying on [dir] selector being added for logic properties
# Conflicts: # package.json # packages/@adobe/spectrum-css-temp/components/popover/index.css # packages/@adobe/spectrum-css-temp/components/table/skin.css # packages/@react-spectrum/toast/package.json # yarn.lock
|
Build successful! 🎉 |
| } | ||
|
|
||
| .spectrum-Button { | ||
| @inherit: %spectrum-BaseButton; | ||
| @inherit: %spectrum-FocusRing; | ||
| composes: spectrum-BaseButton spectrum-FocusRing; |
There was a problem hiding this comment.
so how does this actually work? it looks like the spectrum-FocusRing being applied has the same hash prefix as spectrum-Button but I was expecting it to have a different hash that matched the focus ring stylesheet's hash if it was just applying that classname to the element. Instead it seems as though it was copied into the button CSS and then applied? even though your comment in the description would suggest otherwise.
Am I just misunderstanding how the hash is determined and it's no longer specific to the file it came from?
There was a problem hiding this comment.
At the moment it will be duplicated due to postcss-import. That runs before CSS modules get processed, so it'll look like a single file and thus get the same hash. Whereas before it would have been merged into the .spectrum-Button selector now it is a separate selector, but there will be a separate instance of it per package right now.
# Conflicts: # packages/@react-spectrum/toast/src/Toaster.tsx
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
## API Changes
unknown top level export { type: 'identifier', name: 'Column' } |
This is a reduced/updated version of #3018 and #4645. It swaps most of our CSS processing to Lightning CSS, which allows us to more easily upgrade to PostCSS 8 (unblocking things like Tailwind examples in the repo).
@inherits,@extend, and@mixinpostcss plugins have been replaced with the CSS modulescomposesproperty. Rather than duplicating the declarations from the extended rule, this causes both classes to be applied on the element that uses the composed class. Beware that this can cause differences in specificity.:focus-ringpseudo class has been changed to the now-standard:focus-visible, which is processed by Lightning CSS to be replaced with our.focus-ringclass as before.:hoverpseudo class is now always replaced with.is-hovered, whereas before it was only done in release/storybook and not in the docs. Now the docs have a bit of JavaScript that applies the hover class in places that are server rendered. That is done by setting thedata-hoverattribute to the hover class. This means the docs now works as the rest of RSP in regards to touch devices and hover states.dirnesting is now possible, and in many cases, we don't even need to compile them since most individual properties are already supported natively except a few (e.g. border radius).The remaining PostCSS plugins are:
postcss-import, due to some differences with how Parcel bundles. Eventually we can swap over tocomposes: className from "..."syntax.postcss-custom-propertiesto inline custom properties defined in:rootselectorspostcss-custom-properties-mappingandpostcss-custom-properties-passthrough(iexvar) plugins, which inline spectrum variables with fallback.Potentially we can get rid of the rest of these later but it will require more refactoring to our source CSS. For now, getting rid of most of the other plugins made upgrading to PostCSS 8 much easier.