Coder Social home page Coder Social logo

Comments (7)

NikolaRHristov avatar NikolaRHristov commented on August 24, 2024 2

So, astro-compress uses csso under the hood for CSS compression, so you might want to check that out. https://www.npmjs.com/package/csso. In particular the restructure option. See if you can disable that and try again. Also you might want to try forceMediaMerge off.

import compress from "astro-compress";
import { defineConfig } from "astro/config";

export default defineConfig({
	integrations: [
		compress({
			css: {
				restructure: false,
				forceMediaMerge: false
			},
		}),
	],
});

Hope this helps!

from compress.

LushawnDev avatar LushawnDev commented on August 24, 2024 2

Thank you for your input and quick response @nikolaxhristov - that worked from what I can see for the main issue I spotted!

However, I am seeing some other CSS compilation issues on build such as again the wrong CSS taking precedence, but also with my CSS being duplicated in some places, but I think the latter may just be related to Astro as even after removing the astro-compress integration it is still present. (I'd appreciate any signposting if you have heard of similar behaviour from Astro before, although I know this may be an issue for their Github!)

But after fully removing astro-compress, I do see certain style fixes related to the wrong styles taking precedence. Is it possible that HTML compression may also be causing these issues? If I disable both compression of HTML and CSS like so, the problem goes away.

export default defineConfig({
  integrations: [
    compress({
      html: false,
      css: false,
    }),
  ],
});

Thanks again for your input 🙏🏼

from compress.

xanode avatar xanode commented on August 24, 2024 1

Hello,

I've got the same problem in an Astro project.

I use the TailwindCSS integration and the typography plugin of this framework. When using media queries, for example like this:

<body>
  <h1 class="text-3xl font-bold text-red-500 md:text-green-500 lg:text-black">
    Hello world!
  </h1>
  <div class="prose lg:prose-lg">
    <h1>Title</h1>
    <p>Text</p>
  </div>
</body>

We get media queries written in this order:

@media (min-width: 1024px) {
  /* CSS related to lg:prose-lg */
}

@media (min-width: 768px) {
  .md\:text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity));
  }
}

@media (min-width: 1024px) {
  .lg\:text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
  }
}

The use of astro-compress (and more specifically csso) gathers the media queries but does not correct the order which causes a distortion of the style :

@media (min-width: 1024px) {
  /* CSS related to lg:prose-lg */
  .lg\:text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
  }
}

@media (min-width: 768px) {
  .md\:text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity));
  }
}

Then we have medium-screen style overriding large-screen style on large screens.

Although this avoids duplication of code, it seems that it would be better to keep a specific order so as not to break this kind of thing (decreasing order when using @media (max-width: ... and increasing order for @media (min-width: ... for example).

We would have preferred this:

@media (min-width: 768px) {
  .md\:text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity));
  }
}

@media (min-width: 1024px) {
  /* CSS related to lg:prose-lg */
  .lg\:text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
  }
}

I think it is related to this issue of csso.
In this particular case setting forceMediaMerge: false is indeed a (partial?) fix.

from compress.

anil-650 avatar anil-650 commented on August 24, 2024 1

Hello,

I had just ran into this problem yesterday.

I'm using tailwind integration. While using astro preview mode , I noticed that media qureies were being applied in reverse order than the astro dev mode. Making my div strech to the width limit.

<div
  class="container mb-6 mx-auto max-w-xs md:max-w-md lg:max-w-lg w-full rounded-lg bg-white p-6 shadow-lg">
...content
</div>

Luckily I was able to fix it with just

css: {restructure: false}

here is my config

import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import node from "@astrojs/node";

import compress from "astro-compress";

// https://astro.build/config
export default defineConfig({
  experimental: {
    assets: true
  },
  integrations: [tailwind(), compress({
      css: { restructure: false }
      })],
  output: "server",
  adapter: node({
    mode: "standalone"
  })
});

Thanks for your research guys. 🫂

from compress.

NikolaRHristov avatar NikolaRHristov commented on August 24, 2024

@xanode Yeah, disable forceMediaMerge

from compress.

NikolaRHristov avatar NikolaRHristov commented on August 24, 2024

Yes, html-minifier-terser also has some CSS minification built-in, so you might want to disable that. Try minifyCSS false.

import compress from "astro-compress";
import { defineConfig } from "astro/config";

export default defineConfig({
    integrations: [
        compress({
            css: {
                restructure: false,
                forceMediaMerge: false
            },
            html: {
                minifyCSS: false
            }
        }),
    ],
});

from compress.

NikolaRHristov avatar NikolaRHristov commented on August 24, 2024

Fixed in 1.1.43

from compress.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.