ThisIsManta / stylus-supremacy

A Node.js script that helps formatting Stylus files.
https://thisismanta.github.io/stylus-supremacy
MIT License
88 stars 9 forks source link

Dynamic keyframe name gets commas added #59

Closed Nikodermus closed 4 years ago

Nikodermus commented 4 years ago

I'm using a loop to create a series of animations, but the names gets added commas where I want to interpolate the name:

Original

number_slides = 5
time = 8s

for number in 0..number_slides - 1
  @keyframes fade-in-{number+1} // Original interpolation
    {number * 20% - 1}
      opacity: 0
    {number * 20%}
      opacity: 1
    {number * 20% + 19}
      opacity: 1
    {number * 20% + 20}
      opacity: 0

Formatted

number_slides = 5
time = 8s

for number in 0 .. number_slides - 1
    @keyframes fade-in-, {number + 1} // Won't use the name I need
        {number * 20% - 1}
            opacity: 0

        {number * 20%}
            opacity: 1

        {number * 20% + 19}
            opacity: 1

        {number * 20% + 20}
            opacity: 0

Walkaround

This should be while the behavior is fixed if someone founds the same situation. I create a function to return the name and having that inside the interpolation


number_slides = 5
time = 8s

keyName(number)
    return "fade-in-" + number

for number in (0 .. number_slides - 1)
    @keyframes {keyName(number)} // Use generator
        {number * 20% - 1}
            opacity: 0

        {number * 20%}
            opacity: 1

        {number * 20% + 19}
            opacity: 1

        {number * 20% + 20}
            opacity: 0
ThisIsManta commented 4 years ago

This will be fixed in v2.14.2 or newer.