[BD-46] feat: added CSS custom media query transformer #2068

PKulkoRaccoonGang · 2023-02-21T18:06:11Z

Description

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: #2015

Relative link: Frontend build

Merge Checklist

If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
Does your change adhere to the documented style conventions?
Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
Were your changes tested in the example app?
Is there adequate test coverage for your changes?
Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

Verify your changes were released to NPM at the expected version.
If you'd like, share your contribution in #show-and-tell.
🎉 🙌 Celebrate! Thanks for your contribution.

openedx-webhooks · 2023-02-21T18:06:17Z

Thanks for the pull request, @PKulkoRaccoonGang!

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

codecov · 2023-02-21T18:20:19Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.77%. Comparing base (4bbb0df) to head (f86cf86).
Report is 1088 commits behind head on alpha.

Additional details and impacted files

@@           Coverage Diff           @@
##            alpha    #2068   +/-   ##
=======================================
  Coverage   90.77%   90.77%           
=======================================
  Files         213      213           
  Lines        3501     3501           
  Branches      843      843           
=======================================
  Hits         3178     3178           
  Misses        315      315           
  Partials        8        8

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

tokens/style-dictionary.js

brian-smith-tcril

It's great seeing how straightforward it is to implement stuff using tokens! Left a comment with a question on here but overall this is just really exciting stuff!

brian-smith-tcril · 2023-02-22T19:40:53Z

scss/core/core.scss

@@ -1,4 +1,5 @@
 @import "css/variables";
+@import "css/custom-media";


is the plan to add more than just breakpoints to this file? it seems we have a couple options going forward:

add all media query related stuff to custom-media (media queries cover a range of things, not sure if following that is how we want to group our files or not)

add all breakpoints (max-width queries) to custom-breakpoints (or a similarly named file with the same limited scope), add other media queries (orientation etc.) to other .css files

These are good ideas! I think we have opportunities for flexible usage thanks to Post CSS and plugins "custom-media".

I'd lean a bit more towards creating separate formats for the different types of media queries, starting with the custom-breakpoints in this PR (though, maybe custom-media-breakpoints?).

In the future, we could expanding the set of custom media queries around things like device width, etc. (i.e., media queries that depend on CSS variable(s) generated from a design token).

Yes, I think custom-media-breakpoints is a more obvious naming variant 👍

adamstankiewicz · 2023-02-24T04:27:51Z

.github/workflows/analyze-dependents.yml

@@ -280,9 +280,9 @@ jobs:
      uses: hmarr/auto-approve-action@v2
      with:
        pull-request-number: ${{ steps.cpr.outputs.pull-request-number }}
-        github-token: ${{ secrets.requirements_bot_github_token }}
+        github-token: ${{ secrets.EDX_NETLIFY_PAT }}


[curious] Are these changes remnants of dealing with issues in the Git history? Let's keep this using secrets.requirements_bot_github_token moving forward as that's what's on master. The EDX_NETLIFY_PAT secret is my hack before I knew requirements_bot_github_token existed :)

Roll-backed this commit in this pull request

adamstankiewicz · 2023-02-24T04:28:43Z

.github/workflows/commitlint.yml

@@ -2,7 +2,8 @@

 name: Lint Commit Messages

-on: pull_request
+on:


Similar comment as above for this change.

Roll-backed this commit in this pull request

adamstankiewicz · 2023-02-24T04:31:35Z

tokens/style-dictionary.js

@@ -154,4 +154,24 @@ StyleDictionary.registerFormat({
  },
 });

+/**
+ * Formatter to generate CSS custom media queries.


nit: maybe add "custom media queries for responsive breakpoints"?

Exactly, thanks

adamstankiewicz · 2023-02-24T04:35:42Z

scss/core/core.scss

@@ -1,4 +1,5 @@
 @import "css/variables";
+@import "css/custom-media";


I'd lean a bit more towards creating separate formats for the different types of media queries, starting with the custom-breakpoints in this PR (though, maybe custom-media-breakpoints?).

In the future, we could expanding the set of custom media queries around things like device width, etc. (i.e., media queries that depend on CSS variable(s) generated from a design token).

adamstankiewicz · 2023-02-24T04:37:15Z

tokens/style-dictionary.js

+ * 'breakpoints' subcategory, and generates a CSS custom media queries.
+ */
+StyleDictionary.registerFormat({
+  name: 'css/custom-media',


As suggested in the previous comment, let's plan on having distinct transforms for different types of media queries. In this case, we're working with responsive breakpoints, so per the suggestion above, perhaps css/custom-media-breakpoints here?

Done, thanks

adamstankiewicz · 2023-02-24T04:37:50Z

tokens/style-dictionary.js

+StyleDictionary.registerFormat({
+  name: 'css/custom-media',
+  formatter({ dictionary, file }) {
+    const { size: { breakpoint } } = dictionary.properties;


This is neat to see that this wasn't that large of a lift given what we already had! 🚀

Yes, it's very simple thanks to the Style Dictionary setups 💯

openedx-webhooks · 2023-02-24T12:42:38Z

@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.

adamstankiewicz · 2023-02-24T12:42:53Z

Also merged/released the associated @edx/frontend-build PR here at v12.6.0: https://github.com/openedx/frontend-build/releases/tag/v12.6.0

edx-semantic-release · 2023-02-24T12:53:59Z

🎉 This PR is included in version 21.0.0-alpha.14 🎉

The release is available on:

Your semantic-release bot 📦🚀

* feat: added CSS custom media query transformer * refactor: refactoring after review * refactor: refactoring after review

edx-semantic-release · 2023-09-01T12:58:08Z

🎉 This PR is included in version 22.0.0-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

openedx-semantic-release-bot · 2024-05-14T15:54:28Z

🎉 This PR is included in version 23.0.0-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

* feat: added CSS custom media query transformer * refactor: refactoring after review * refactor: refactoring after review

openedx-semantic-release-bot · 2024-12-12T02:40:35Z

🎉 This PR is included in version 23.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

PKulkoRaccoonGang changed the title ~~[BD-46] DRAFT: added CSS custom media query transformer~~ [BD-46] feat: added CSS custom media query transformer Feb 21, 2023

PKulkoRaccoonGang requested a review from viktorrusakov February 21, 2023 18:18

adamstankiewicz force-pushed the alpha branch from 6254fba to 9184d80 Compare February 21, 2023 21:08

viktorrusakov reviewed Feb 22, 2023

View reviewed changes

tokens/style-dictionary.js Outdated Show resolved Hide resolved

brian-smith-tcril reviewed Feb 22, 2023

View reviewed changes

PKulkoRaccoonGang mentioned this pull request Feb 22, 2023

[discovery] CSS @media query definitions can't be used with CSS variables #2015

Closed

4 tasks

PKulkoRaccoonGang force-pushed the Peter_Kulko/css-custom-media-query-transformer branch 2 times, most recently from fadbe74 to b0eb33e Compare February 23, 2023 21:32

adamstankiewicz reviewed Feb 24, 2023

View reviewed changes

adamstankiewicz linked an issue Feb 24, 2023 that may be closed by this pull request

[discovery] CSS @media query definitions can't be used with CSS variables #2015

Closed

4 tasks

PKulkoRaccoonGang added 2 commits February 24, 2023 13:18

feat: added CSS custom media query transformer

e7931b6

refactor: refactoring after review

af5afdc

PKulkoRaccoonGang force-pushed the Peter_Kulko/css-custom-media-query-transformer branch from b0eb33e to af5afdc Compare February 24, 2023 11:19

refactor: refactoring after review

f86cf86

PKulkoRaccoonGang requested review from adamstankiewicz and viktorrusakov February 24, 2023 12:03

adamstankiewicz approved these changes Feb 24, 2023

View reviewed changes

adamstankiewicz merged commit 577ac74 into openedx:alpha Feb 24, 2023

edx-semantic-release added the released on @alpha label Feb 24, 2023

monteri pushed a commit to raccoongang/paragon that referenced this pull request Aug 17, 2023

feat: added CSS custom media query transformer (openedx#2068)

a467d09

* feat: added CSS custom media query transformer * refactor: refactoring after review * refactor: refactoring after review

PKulkoRaccoonGang added a commit that referenced this pull request Aug 1, 2024

feat: added CSS custom media query transformer (#2068)

9789c85

* feat: added CSS custom media query transformer * refactor: refactoring after review * refactor: refactoring after review

PKulkoRaccoonGang added a commit that referenced this pull request Aug 4, 2024

feat: added CSS custom media query transformer (#2068)

507165b

* feat: added CSS custom media query transformer * refactor: refactoring after review * refactor: refactoring after review

PKulkoRaccoonGang added a commit that referenced this pull request Aug 4, 2024

feat: added CSS custom media query transformer (#2068)

0194699

* feat: added CSS custom media query transformer * refactor: refactoring after review * refactor: refactoring after review

PKulkoRaccoonGang added a commit that referenced this pull request Aug 5, 2024

feat: added CSS custom media query transformer (#2068)

2bd215a

* feat: added CSS custom media query transformer * refactor: refactoring after review * refactor: refactoring after review

openedx-semantic-release-bot added the released label Dec 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BD-46] feat: added CSS custom media query transformer #2068

[BD-46] feat: added CSS custom media query transformer #2068

PKulkoRaccoonGang commented Feb 21, 2023 •

edited

Loading

openedx-webhooks commented Feb 21, 2023

codecov bot commented Feb 21, 2023 •

edited

Loading

brian-smith-tcril left a comment •

edited

Loading

brian-smith-tcril Feb 22, 2023

PKulkoRaccoonGang Feb 22, 2023 •

edited

Loading

adamstankiewicz Feb 24, 2023 •

edited

Loading

PKulkoRaccoonGang Feb 24, 2023

adamstankiewicz Feb 24, 2023

PKulkoRaccoonGang Feb 24, 2023

adamstankiewicz Feb 24, 2023

PKulkoRaccoonGang Feb 24, 2023

adamstankiewicz Feb 24, 2023

PKulkoRaccoonGang Feb 24, 2023 •

edited

Loading

adamstankiewicz Feb 24, 2023 •

edited

Loading

adamstankiewicz Feb 24, 2023

PKulkoRaccoonGang Feb 24, 2023

adamstankiewicz Feb 24, 2023

PKulkoRaccoonGang Feb 24, 2023

openedx-webhooks commented Feb 24, 2023

adamstankiewicz commented Feb 24, 2023

edx-semantic-release commented Feb 24, 2023

edx-semantic-release commented Sep 1, 2023

openedx-semantic-release-bot commented May 14, 2024

openedx-semantic-release-bot commented Dec 12, 2024

		@@ -1,4 +1,5 @@
		@import "css/variables";
		@import "css/custom-media";

[BD-46] feat: added CSS custom media query transformer #2068

[BD-46] feat: added CSS custom media query transformer #2068

Conversation

PKulkoRaccoonGang commented Feb 21, 2023 • edited Loading

Description

Merge Checklist

Post-merge Checklist

openedx-webhooks commented Feb 21, 2023

codecov bot commented Feb 21, 2023 • edited Loading

Codecov Report

brian-smith-tcril left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PKulkoRaccoonGang Feb 22, 2023 • edited Loading

Choose a reason for hiding this comment

adamstankiewicz Feb 24, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PKulkoRaccoonGang Feb 24, 2023 • edited Loading

Choose a reason for hiding this comment

adamstankiewicz Feb 24, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

openedx-webhooks commented Feb 24, 2023

adamstankiewicz commented Feb 24, 2023

edx-semantic-release commented Feb 24, 2023

edx-semantic-release commented Sep 1, 2023

openedx-semantic-release-bot commented May 14, 2024

openedx-semantic-release-bot commented Dec 12, 2024

PKulkoRaccoonGang commented Feb 21, 2023 •

edited

Loading

codecov bot commented Feb 21, 2023 •

edited

Loading

brian-smith-tcril left a comment •

edited

Loading

PKulkoRaccoonGang Feb 22, 2023 •

edited

Loading

adamstankiewicz Feb 24, 2023 •

edited

Loading

PKulkoRaccoonGang Feb 24, 2023 •

edited

Loading

adamstankiewicz Feb 24, 2023 •

edited

Loading