Responsive custom CSS added to a relative style containing pseudo selector added to a global class does not apply as expected

[StrangeTech]

Description:

We have a query and want to style a sub-block of the query template for even items within the query with a different background image and position.

Using a relative style, this works well for css styles added via the Cwicly inspector fields, but for some reason is not working when adding responsive custom code to the relative style referencing the breakpoint name (e.g. breakpoint-md).

Step-by-step reproduction instructions:

Prerequisites: Given a Cwicly site with Tailwind enabled and mobile-first breakpoints using a mix of Tailwind and non-Tailwind classes.

1. Add a Div block with a global class of journey-list
2. Add a Query/Query Template that contains a Div block with a nested Div block that has a global class of journey-details
3. Add a background image and position to the global class
4. Add a relative style to the journey-list global class (e.g. “even items details”) with the rules shown in the screenshot
5. Add any style properties to the md breakpoint for that relative style
6. Note that these style properties work correctly showing the relative style targets the even items
7. Add custom css to the relative style as shown in the code snippets below (using breakpoint-md)
8. Note that this is not applied as intended (see code comments)

Possibly related to:

Advanced CSS: Breakpoint quick code not correct on front-end

When using the mobile-first breakpoints and the “media” quick code for breakpoints in the Advanced CSS panel of a Block, the options show that min-width will be inserted. See screenshot below. [image] However - even though it appears that min-width is being honored within the Editor preview - the front-end does not and contains a max-width. See screenshot below of generated CSS. [image] If I explicitly enter the min-width declaration like below and use the breakpoint token, then the front-e…

Screenshots, screen recording, code snippet

Relative style rules:

Relative style custom code:

// This does not get applied at all
.relativestyle {
  @media (min-width: breakpoint-md) {
    background-image: url(https://some.site/wp-content/uploads/some-bg-image.png);
    background-position-x: right;
  }
}

// This gets applied but overrides the base style 
@media (min-width: breakpoint-md) {
  .relativestyle {
    background-image: url(https://some.site/wp-content/uploads/some-bg-image.png);
    background-position-x: right;
  }
}

// This works correctly
@media (min-width: 768px) {
  .relativestyle {
    background-image: url(https://some.site/wp-content/uploads/some-bg-image.png);
    background-position-x: right;
  }
}

// This works correctly
.relativestyle {
  @media (min-width: 768px) {
    background-image: url(https://some.site/wp-content/uploads/some-bg-image.png);
    background-position-x: right;
  }
}

Environment info

• WordPress version: 6.4.3
• Cwicly Plugin version: 1.4.1