-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
STRWEB-111 Refresh PostCSS stack. #142
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❤️
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM. Thank you!
strip out imports of variables to prevent variable reset via a custom postcss plugin.
This seems like a great idea. Also seems like maaaybe a change in behavior that we need to tell people about? Or is it more like, "Finally prevent people from doing things they shouldn't have been doing in the first place" so we don't need to worry about telling anybody?
@zburke yes - this is something worth telling folks - that they can just strip out their imports since now both variables and custom media queries are accounted for. I will roll a stripes-update message. |
Pre-empting a tighter build process with pre-transpilations, we want to ensure purity in our CSS so that we reduce the amount of discrepency between builds performed at separate locations in the code, in separate repos, etc.
This PR removes unnecessary postcss plugins that have already been implemented in native CSS. This includes:
&
's in our styles)Additionally, this PR respects standard CSS Variable treatment - render once, use throughout codebase. Imports of CSS variables from stripes-components have been filtered out, and the global set are injected via a additional entry point (alongside
global.css
in the base webpack configuration.)I've added on a single postcss-dependency:
postcss-global-data
for usage in conjunction withpostcss-custom-media
. Stripes' CSS variables and custom media variables existed within the same file. UI modules would need to import the file because of the custom media variables. However, if variables are injected viapostcss-global-data
ui-modules will no longer have to import the variables for them to be used.All modules and components can remove imports to
variables.css
fromstripes-components
.With this standard treatment of CSS variables, the gates are also open for a clean implementation of theming...