Possibility to create two sets of clamps

[yagee]

Hi!

Thanks for amazing plugin, concept of fluid font-sizes are the best, very useful. In my recent project, I found that I need to create two different sets of clamps, e.g. one for sizes from 320 to 768, and another for sizes 768 to 1440, but it is impossible, because plugin creates only one set (using last clamp)

It is possible to update plugin code to process all rules, instead of last one?

:root {
  @utopia clamps({
    minWidth: 320,
    maxWidth: 768,
    pairs: [
      [16, 24],
    ],
    prefix: "fluid-sm",
    usePx: true,
  });

  @utopia clamps({
    minWidth: 768,
    maxWidth: 1440,
    pairs: [
      [24, 96],
    ],
    prefix: "fluid-md",
    usePx: true,
  });
}

[trys]

Hey @yagee - thanks for the message. Strange, it appears to be working for me:

Input

.test{
  @utopia clamps({
    minWidth: 320,
    maxWidth: 768,
    pairs: [
      [16, 24],
    ],
    prefix: "fluid-sm",
    usePx: true,
  });

  @utopia clamps({
    minWidth: 768,
    maxWidth: 1440,
    pairs: [
      [24, 96],
    ],
    prefix: "fluid-md",
    usePx: true,
  });
}

Output

.test {
  --fluid-sm-16-24: clamp(16px, 10.2857px + 1.7857vi, 24px);
  --fluid-md-24-96: clamp(24px, -58.2857px + 10.7143vi, 96px);
}

This was tested with PostCSS 8.4.33.

Are you getting a different result, or am I misunderstanding the problem?! Let me know 😄

[yagee]

It seems problem appears only using Astro. Sorry for bothering you! Have a nice day :)

[trys]

@yagee interesting! I'll try and do some digging to see what differs in that environment

[yagee]

I did check again and found actual problem with plugin postcss-combine-duplicated-selectors This plugin with option removeDuplicatedProperties: true removes CSS custom properties