Fix: Prevent duplicate media query blocks when resolving multiple variables

[aroskar]

Overview of the Issue

When multiple CSS variables are used in a single property within a media query, the plugin was generating duplicate query blocks, causing significant CSS bloat.

Root Cause:

1. eachMapItemDependencyOfDecl was passing entire variable list to gatherVariableDependencies on every iteration instead of single variable, causing duplication
2. Missing check to skip duplicate at-rules when variable already in scope

Example (from issue #67):

Input:

:root {
  --space-small: 10px;
  --space-large: 20px;
}

h1 {
  padding: var(--space-small) var(--space-large);
}

@media (min-width: 768px) {
  :root {
    --space-small: 20px;
    --space-large: 30px;
  }
}

Before Fix (Buggy Output):

h1 {
  padding: 10px 20px;
}

@media (min-width: 768px) {
  h1 { padding: 20px 30px; }
}

@media (min-width: 768px) {
  h1 { padding: 20px 30px; }
}

@media (min-width: 768px) {
  h1 { padding: 20px 30px; }
}

@media (min-width: 768px) {
  h1 { padding: 20px 30px; }
}

After Fix (Correct Output):

h1 {
  padding: 10px 20px;
}

@media (min-width: 768px) {
  h1 { padding: 20px 30px; }
}

Solution:

1. Pass only current variable to gatherVariableDependencies
2. Skip creating duplicate at-rules when declaration and variable are in same at-rule context

Impact:

• Fixes issue Chaining variables in media queries results in duplicated blocks #67
• Eliminates unecessary/duplicate @media blocks

Testing:

• Added 2 new test cases covering multiple variables in single property
• All exiting tests are passing

Closes #67

[aroskar]

@MadLittleMods could you please help review this fix?