Refactor some screen compatibility code

[thecrypticace]

This adds support for the screen(…) CSS function which can be used to build the media queries for a given breakpoint:

Input:

@theme {
  --breakpoint-sm: 640px;
}

@media screen(sm) {
  .foo {
    color: red;
  }
}

output:

@media (width >= 640px) {
  .foo {
    color: red;
  }
}

We also support more advanced screens configurations from configuration files (mainly for backwards) compat:

export default {
  theme: {
    screens: {
      sm: '640px',
      md: { min: '768px' },
      lg: { min: '1024px', max: '1280px' },
      sidebar: [
        { min: '640px', max: '768px' },
        { min: '1024px' },
      ],
    }
  }
}

@media screen(sm) {
  .foo {
    color: red;
  }
}

@media screen(md) {
  .foo {
    color: blue;
  }
}

@media screen(lg) {
  .foo {
    color: green;
  }
}

@media screen(sidebar) {
  .foo {
    color: yellow;
  }
}

Output:

@media (width >= 640px) {
  .foo {
    color: red;
  }
}

@media (width >= 768px) {
  .foo {
    color: blue;
  }
}

@media (1280px >= width >= 1024px) {
  .foo {
    color: green;
  }
}

@media (768px >= width >= 640px), (width >= 1024px) {
  .foo {
    color: yellow;
  }
}

[thecrypticace]

@philipp-spiess [@media(screen(sm))]:flex doesn't work however [@media_screen(sm)]:flex does work — presumably because of the space. We should take a look at the value parser.

[philipp-spiess]

@philipp-spiess [@media(screen(sm))]:flex doesn't work however [@media_screen(sm)]:flex does work — presumably because of the space. We should take a look at the value parser.

@thecrypticace Pushed a commit that fixes that :) The value parser is actually not the issue here, it's that we were only looking into @screen if it starts with @screen

[philipp-spiess]

It's still not great that we now have the screen function checks in core but this way the legacy implementation is at least contained.

Just brainstorming here, but one way to clean this up even further is by adding another walk for function replacement in the compat layer and we'd need a way for the compat layer to hook into the build calls (since we do a function substitution there first).

Other idea is that we do the function replacement after the core layer and have a dictionary of functions that we can register (just like our Utilities and Variants maps). Then, the compat layer could push custom functions into it.

[philipp-spiess]

This is great!

[thecrypticace]

We've decided to do this as a code mod instead — I'll be landing some of the refactoring tweaks in a separate PR.