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

[adamstankiewicz]

Description

Currently, the Paragon SCSS (via Bootstrap) provides an SCSS mixin for writing responsive media queries to change styles based on viewport width. For example:

.my-component {
  width: 2rem;
  height: 2rem;

  @include media-breakpoint-up(md) {
     width: 10rem;
     height: 10rem; 
  }
}

However, as we're moving towards a world where @edx/paragon (and @edx/brand packages) compile their own CSS (see #2014), this SCSS mixin would no longer be available for use.

Likewise, it appears despite having newly generated CSS variables for breakpoints (i.e., --pgn-size-breakpoint-*), they aren't currently used in the underlying $grid-breakpoints SCSS map, which hardcodes its own breakpoint values.

When trying to replicate @include media-breakpoint-up(md) { } with a native CSS @media query and the --pgn-size-breakpoint-* CSS variables, it was realized that CSS variables are not compatible with @media queries (see https://bholmes.dev/blog/alternative-to-css-variable-media-queries for more details).

Initial solutioning

Upon some initial investigation, it appears defining @custom-media queries for re-use by consumers may be a viable solution here. Support for this functionality would be through the postcss-custom-media PostCSS plugin.

Example usage:

/* within Paragon and/or `@edx/brand` */

/**
 * would need to be generated from the design tokens and unfortunately, after testing, can't seem to use the existing `--pgn-size-breakpoint-*` CSS variables here.
 */
@custom-media --pgn-viewport-breakpoint-md (min-width: 768px);

/* within consuming MFE/application */
@media (--pgn-viewport-breakpoint-md) { }

We would need to ensure our Webpack configurations (e.g., in @edx/frontend-build) have that plugin enabled prior to releasing design tokens.

Acceptance Criteria

• Investigate any alternative solutions besides postcss-custom-media. If there are other viable options, document and propose them as comments in this issue.
• Otherwise, if using postcss-custom-media:
  • 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.

[PKulkoRaccoonGang]

Paragon
Frontend-build