CartoCSS migration targetting zoom levels

[oobayly]

As per the documentation - "Zoom must be used in a top-level step or interpolate", it isn't possible to use ["zoom"] anywhere other than top level statements.

I'm attempting to convert some CartoCSS styles to MapLibre and have hit a bit of an impasse. The following style is fairly readable as the more complex selectors are grouped and the line widths are switched based on the zoom.
However for it to work in MapLibre the more complex selectors have to be repeated for many zoom levels which makes for some very convoluted expressions.

Hopefully I'm missing something, but is there a "simpler" way of converting this, especially as MapBox (and therefore by extension MapLibre) was originally touted as a superior tool to bring about "the end of CartoCSS"

#railway_line_fill[zoom>=9]::fill,
#railway_line_low[zoom<=7]::fill,
#railway_line_med[zoom>7][zoom<9]::fill {
  ["railway"="rail"] {
    ["usage"="main"]["service"=null] {
      line-color: @railway_fill_color;
      line-width: 1.5;

      [zoom>=6][zoom<=8] {
        line-width: 2.5;
      }

      [zoom>=9] {
        line-width: 3.5;
      }
    }

    [zoom>=8]["usage"="branch"]["service"=null] {
      line-color: @railway_fill_color;
      line-width: 2.5;

      [zoom>=9] {
        line-width: 3.5;
      }
    }

    [zoom=10]["usage"="industrial"]["service"=null],
    [zoom>=11]["usage"="industrial"] {
      line-color: @railway_fill_color;
      line-width: 2;

      ["service"!=null] {
        line-width: 1.5;
      }
    }

    [zoom>=13]["usage"=null]["service"=null],
    [zoom>=11]["usage"=null]["service"="siding"],
    [zoom>=11]["usage"=null]["service"="crossover"] {
      line-color: @railway_fill_color;
      line-width: 2;
    }

    [zoom>=12]["usage"=null]["service"="yard"],
    [zoom>=11]["usage"=null]["service"="spur"] {
      line-color: @railway_fill_color;
      line-width: 1.5;
    }
  }

  ["railway"="narrow_gauge"] {
    [zoom>=10]["service"=null],
    [zoom>=11]["service"="spur"],
    [zoom>=11]["service"="siding"],
    [zoom>=11]["service"="crossover"],
    [zoom>=12]["service"="yard"] {
      line-width: 3;
      line-color: @railway_fill_color;

      ["usage"="industrial"],
      ["service"="spur"],
      ["service"!=null] {
        line-width: 2;
      }
    }
  }

  [zoom>=9] ["railway"="construction"]["construction_railway"="rail"]["usage"="main"]["service"=null],
  [zoom>=9] ["railway"="construction"]["construction_railway"="rail"]["usage"="branch"]["service"=null],
  [zoom>=10]["railway"="construction"]["construction_railway"="subway"]["service"=null],
  [zoom>=10]["railway"="construction"]["construction_railway"="light_rail"]["service"=null],
  [zoom>=11]["railway"="construction"]["construction_railway"="tram"]["service"=null],
  [zoom>=13]["railway"="construction"]["construction_railway"=null],
  [zoom>=10]["railway"="subway"]["service"=null],
  [zoom>=13]["railway"="subway"],
  [zoom>=10]["railway"="light_rail"]["service"=null],
  [zoom>=13]["railway"="light_rail"],
  [zoom>=11]["railway"="tram"]["service"=null],
  [zoom>=13]["railway"="tram"] {
    line-color: @railway_fill_color;
    line-width: 3;

    [service!=null] {
      line-width: 1.5;
    }
  }
}

[HarelM]

Can you clarify or simply the question? I'm not very familiar with cartoCSS so I don't have a good way of helping here, but I would suggest to define the behavior you would like to achieve and maybe post it in the slack channel or an AI assistant to help with the conversion...

[oobayly]

@HarelM Fair point. I assumed that people would automatically be familiar with CartoCSS (and we all know what they are the mother of all...)
Funnily enough I tried AI which did generate something that would work but I was concerned with how verbose the resulting style was. I'll post an example just in case somebody points out I'm being thick and there's a much easier way to do what I want*.

• Not really what I want, I'm trying to replicate existing behaviour, but personally I like the idea of adjusting the thickness based on a Rank and then interpolating it for different zooms.

[Stanisla]

@oobayly i'm interested in this also.Do you have a repository or somewhere to see you work?

[HarelM]

Also, we would be happy to host a migration guide alongside other migration guide and developer guides here:
https://maplibre.org/maplibre-gl-js/docs/guides/
There are generally static markdown files that can be added to here:
https://github.com/maplibre/maplibre-gl-js/tree/main/docs/guides