Skip to content
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

[BD-46] feat: added CSS custom media query support #306

Conversation

PKulkoRaccoonGang
Copy link
Contributor

@PKulkoRaccoonGang PKulkoRaccoonGang commented Feb 19, 2023

  • Ensure we can generate @custom-media from design tokens with style-dictionary.
  • Ensure we add support for postcss-custom-media to @edx/frontend-build's default Webpack configs for all MFEs.

Issue: openedx/paragon#2015

@openedx-webhooks openedx-webhooks added the blended PR is managed through 2U's blended developmnt program label Feb 19, 2023
@openedx-webhooks
Copy link

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

@@ -9,6 +9,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const PostCssAutoprefixerPlugin = require('autoprefixer');
const PostCssRTLCSS = require('postcss-rtlcss');
const CustomMediaCSS = require('postcss-custom-media');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: might recommend including PostCss as a prefix to be consistent with these other PostCSS plugin imports above.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@@ -85,6 +86,7 @@ module.exports = merge(commonConfig, {
plugins: [
PostCssAutoprefixerPlugin(),
PostCssRTLCSS(),
CustomMediaCSS(),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll need to also make similar changes to the other Webpack configs as well, i.e.:

  • webpack.dev-stage.config.js
  • webpack.prod.config.js

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, thanks

Copy link
Member

@adamstankiewicz adamstankiewicz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! This addition is a great feature to have in frontend-build :)

@adamstankiewicz adamstankiewicz merged commit 155ed56 into openedx:master Feb 24, 2023
@openedx-webhooks
Copy link

@PKulkoRaccoonGang 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

@edx-semantic-release
Copy link

🎉 This PR is included in version 12.6.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blended PR is managed through 2U's blended developmnt program released
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

[discovery] CSS @media query definitions can't be used with CSS variables
4 participants