Contrib.social

Use PostCSS Custom Media's importFrom option to import breakpoints into core's CSS

Open on Drupal.org →
Created on 8 December 2021, almost 3 years ago
Updated 30 January 2023, almost 2 years ago

This is a followup from #3253148: Remove IE from core's browserlist, remove non-essential CSS importing and recompile assets → .

The Olivero theme uses PostCSS Custom Media to abstract media queries into variables.

To use those, we import these into each CSS file:

/**
 * @file
 * Styles for action links.
*/
@import "../base/media-queries.pcss.css";

.action-links {

However, this leaves the source comments from media-queries.pcss.css in the resulting compiled CSS file.

This increases the filesize of the CSS files when Drupal's CSS aggregation is disabled.

Potential Solution

We use PostCSS Custom Media's importFrom option instead of directly importing the CSS into each PCSS file.

The tricky part is that this setting would be global for all of Drupal core, so we'd likely want to namespace the custom CSS media variables (eg rename --nav to --olivero--nav.

📌 Task
Status

Needs work

Version

10.0 ✨

Component
CSS  →

Last updated about 10 hours ago

Created by

🇺🇸United States mherchel Gainesville, FL, US

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment almost 2 years ago →
    needs-review-queue-bot

    The Needs Review Queue Bot → tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

    Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

    Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

  • Comment about 2 months ago →
    sheetal.pathak

    Hi

    On basis of previous comments and issue summary, I have implemented this for
    11.x-dev.

    I have added importForm in complie.js for olivero and changed media-query names.

    As per understanding I have created patch, but it needs improvements.Added patch here for review for more opinions.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024