Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS Rules for @media and :hover are stripped out in v4

See original GitHub issue

Maizzle Version: 4.0.2
Node.js Version: 18.5.0

While upgrading from @maizzle/framework@3.7.3 and @maizzle/cli@1.4.0 I noticed the build output was different in v4. It seems like any @media {} or :hover rules were being stripped out.

Example

I’ve tested in a minimal new project to confirm. This is the project:

package.json

{
  "private": true,
  "scripts": {
    "build": "maizzle build production"
  },
  "devDependencies": {
    "@maizzle/framework": "^4.0.2"
  }
}

config.production.js

module.exports = {
  build: {
    templates: {
      destination: {
        path: 'build_production',
      },
    },
  },
  inlineCSS: true,
  removeUnusedCSS: true,
}

src/layouts/main.html

<!DOCTYPE {{{ page.doctype || 'html' }}}>
<html lang="{{ page.language || 'en' }}" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta charset="{{ page.charset || 'utf-8' }}">
</head>
<body class="{{ page.class }}">
  <div role="article" aria-roledescription="email" aria-label="{{{ page.title || '' }}}" lang="{{ page.language || 'en' }}">
    <block name="template"></block>
  </div>
</body>
</html>

src/templates/helloworld.html

---
title: "Hello World"
---

<extends src="src/layouts/main.html">
  <block name="template">
    <style>
      .content {
        width: 640px;
      }
      @media (max-width: 600px) {
        .content {
          width: 100%;
          min-width: 100%;
        }
      }
      .action {
        color: red;
      }
      .action:hover {
        color: blue;
      }
    </style>
    <div class="content">
      <button class="action">Hello World</button>
    </div>
  </block>
</extends>

Results

build_production/helloworld.html (v4 -- missing styles)

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta charset="utf-8">
</head>
<body>
  <div role="article" aria-roledescription="email" aria-label="Hello World" lang="en">
    <div style="width: 640px">
      <button style="color: red">Hello World</button>
    </div>  </div>
</body>
</html>

build_production/helloworld.html (v3)

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta charset="utf-8">
</head>
<body>
  <div role="article" aria-roledescription="email" aria-label="Hello World" lang="en">    <style>
@media (max-width: 600px) {
  .content {
    width: 100%;
    min-width: 100%;
  }
}
.action:hover {
  color: blue;
}
</style>
    <div class="content" style="width: 640px;">
      <button class="action" style="color: red;">Hello World</button>
    </div>  </div>
</body>
</html>

It’s possible I’m missing some new option/configuration, but after trying a bunch I am still unsuccessful in producing a valid (v3 like) output.

Issue Analytics

State:
Created a year ago
Comments:10 (5 by maintainers)

Top GitHub Comments

1reaction

cossssmincommented, Aug 16, 2022

Hey sorry this took some time, the issue is with removeInlinedClasses, which is needed to be able to write selectors that don’t exist in the HTML, like those targeting certain email clients.

If you don’t need that, the solution for now is to disable it:

// config.production.js

module.exports = {
  // ...,
  inlineCSS: {
    removeStyleTags: true,
  },
  removeUnusedCSS: true,
  removeInlinedClasses: false,
}

What happens is that removeInlinedClasses naively removes classes from the HTML that it shouldn’t, like content in your case. This is because although it knows to not touch @media queries, the .content class exists in the CSS outside of a query so it still takes effect. We need to improve that transformer so that if it finds a selector inside a query or a pseudo, it doesn’t remove it at all.

0reactions

cossssmincommented, Sep 22, 2022

OK, this should be fixed in 4.1.1, give it a try 👍

https://github.com/maizzle/framework/releases/tag/v4.1.1

Top Results From Across the Web

Valid media query gets stripped from CSS, making it ... - GitHub

Valid media query gets stripped from CSS, making it impossible to write styling for devices that support hover #152.

The complete guide to CSS media queries - Polypane

Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen ......

Is it possible to put CSS @media rules inline? - Stack Overflow

@media at-rules and media queries cannot exist in inline style attributes as they can only contain property: value declarations.

How To Specify Typical Device Breakpoints With Media Queries

Learn how to use media queries for common device breakpoints. Typical Device Breakpoints. There are tons of screens and devices with different heights...

attr() - CSS: Cascading Style Sheets - MDN Web Docs

If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value...