No result when trying different screen sizes

Steps to reproduce

New Drupal install (9.3.11) with nothing but Glisseo, a new sub theme and Twig Tweak enabled.
Trying a simple example by changing text color. For all screen sizes color remains green.

typography.pcss

p {
  color: green;
  @media (--md) {
    color: red;
  }
}

Compiled version in typography.css
p{color:green;@media (min-width:768px){color:red}}

Thanks

Comments

hstrindb created an issue. See original summary.

niklan’s picture

niklan
Primary language Russian
Location Russia, Perm
commented
Status: Active » Closed (works as designed)

The postcss-nesting plugin was removed because theme not used it (just a few places), but others in my experience heavily abuse that feature and make styles hard to support. So, it is more harmful than helpful.

You have two options here:

Option #1

Use native "nesting", so you need to "unnest" your styles:

p {
  color: green;
}

@media (--md) {
  p {
    color: red;
  }
}

Option 2

Get back postcss-nesting plugin.

1. Require that dependency for theme npm install postcss-nesting.
2. Edit THEME/scripts/css/postCssPlugins.js.
3. Add import postcssNesting from 'postcss-nesting'; at the top of the file. Example.
4. Add postcssNesting(), in postCssPlugins array. Example.

The result file will be (you can copy-paste it):

import postcssCustomMedia from "postcss-custom-media";
import {paths} from "../config";
import autoprefixer from "autoprefixer";
import cssnano from "cssnano";
import postcssNesting from 'postcss-nesting';

/**
 * Provides the plugins to use with PostCSS.
 */
let postCssPlugins = [
  postcssNesting(),
  postcssCustomMedia({
    importFrom: paths.projectRoot + '/assets/css/01-generic/media-breakpoints.pcss',
  }),
  autoprefixer(),
  cssnano({preset: 'default'}),
];

export default postCssPlugins;

Then just re-run watch / compile script if it's running at this point. That's it. It will work as you expected, you can nest everything, including media queries.

hs@henrikstrindberg.se’s picture

hs@henrikstrindberg.se commented

Many thanks for this explanation!

hs@henrikstrindberg.se’s picture

hs@henrikstrindberg.se commented

Hi!
The grid.pcss has a nested declaration of css-variables. It did not work for me. I changed it to the style of native nesting that you recommended and then it works:

:root {
  --grid-gap: var(--spacing-sm);
  --grid-container-max-width: 100%;
  --grid-template-columns-12: repeat(12, [col] 1fr);

  @media (--lg) {
    --grid-container-max-width: 940px;
  }

  @media (--xl) {
    --grid-container-max-width: 1120px;
  }
}

I changed it to:

:root {
  --grid-gap: var(--spacing-sm);
  --grid-container-max-width: 100%;
  --grid-template-columns-12: repeat(12, [col] 1fr);
}

@media (--lg) {
  :root {
    --grid-container-max-width: 940px;
  }
}

@media (--xl) {
  :root {
    --grid-container-max-width: 1120px;
  }
}

Maybe another issue but I make it as a comment and question here. Thanks.

niklan’s picture

niklan
Primary language Russian
Location Russia, Perm
commented
Status: Closed (works as designed) » Needs work

Yeah, I'm aware of it, faced it by myself. Will fix it :) Thank you. Let's use that issue to track this problem then.

  • Niklan committed abb2658 on 2.0.x authored by hstrindb 
    Issue #3275268 by hstrindb, Niklan: Media queries not working?
niklan’s picture

niklan
Primary language Russian
Location Russia, Perm
commented
Status: Needs work » Fixed

Fix released with 2.0.0-alpha4

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.