PostCSS plugins #11
Open
PostCSS plugins #11
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
renderStyling was mostly concerned with transforming a JS object into a CSS string. Because it used a simple approach, it wasn't able to handle special cases. By using PostCSS we can completely ignore the aspect of how to parse a JS object into a valid CSS string plus have the option to use a number of PostCSS plugins later on. So yes, this introduces an additional dependency, but it should be worth it, as it further standardizes CSS in JS.
This example shows how additional Postcss plugins can be used by using the Postcss loader and specifying plugins it should use. This is likely an unnecessary step, because Postcss will run twice with this setup. Instead, it should be possible to specify Postcss plugins that Styling should use directly when it does the transformation.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR shows two things:
hoverstates usingpostcss-nested. The ability to do so was removed in PR Postcss renderer #10, as the syntax to do so was somewhat custom to Styling. The PostCSS Nested syntax is, of course, also non-standard, but widely used in other pre-processors.This works well for our usecase, but I'd be interested in your vision for Styling with regards to how many things it should do. For example:
postcss: {}key in the Webpack config without having to specify PostCSS as an additional loader? This would be more efficient, but maybe not as discoverable and a bit surprising.I'd be happy to adjust this PR with your feedback. Thanks!