fix: Incorrect duration and animate utilities (close #404)

[ElMassimo]

Description 📖

This pull request fixes the problems described in #404.

Added a test that ensures these invalid usages do not generate CSS rules.

Background 📜

It seems that processing < tokens opened up the door for a new category of bugs in utilities that were created prior to the change supporting <sm and similar variants. A similar bug is #403.

Perhaps instead of only fixing it at the utility level on a case-by-case basis, these tokens should not be interpreted as utilities in the first place:

// extract.ts line 61
const matches = !className.startsWith('<') && className.match(/\w+/);

However, the duration.value case suggests that the regex in the plugin utils should be more strict, as . should only occur if there's also a - in the token, as in ml-1.5. Am I missing a case here?

Test Case

Before

  .\<transition {
    -webkit-transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, filter, backdrop-filter;
    -o-transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, -webkit-box-shadow, transform, -webkit-transform, filter, backdrop-filter;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-duration: 150ms;
    -o-transition-duration: 150ms;
    transition-duration: 150ms;
  }
  .\.duration {
    -webkit-transition-duration: 150ms;
    -o-transition-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration {
    -webkit-transition-duration: 150ms;
    -o-transition-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration\.value {
    -webkit-transition-duration: 150ms;
    -o-transition-duration: 150ms;
    transition-duration: 150ms;
  }
  .\<animate {
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
  }

After

No CSS rules

[codecov-commenter]

Codecov Report

Merging #405 (a2c85d2) into main (4368925) will increase coverage by 0.01%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main     #405      +/-   ##
==========================================
+ Coverage   88.20%   88.22%   +0.01%     
==========================================
  Files          56       56              
  Lines        4782     4788       +6     
  Branches     1029     1032       +3     
==========================================
+ Hits         4218     4224       +6     
  Misses        301      301              
  Partials      263      263              

Impacted Files	Coverage Δ
src/lib/utilities/dynamic.ts	94.32% <100.00%> (+0.03%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4368925...a2c85d2. Read the comment docs.

[antfu]

I think we might need a better solutions to this. Ideally, . and < is only used in .dark and <sm, for other utilities, we should not have them detected.

[ElMassimo]

Agreed. The only change that would be desirable anyway is the one for duration (similar to the change in 6e94892).

Feel free to modify this PR, the added test should be useful to prevent regressions.

Ideally, the plugin does not even send these invalid tokens to the compiler, but the compiler could also filter them out in a first pass in extract.ts.

[3lang3]

Is there any new progress in this pr?