[css-nesting-1] initial idea for nested conditionals

[argyleink]

[css-nesting-1]
This PR adds a section on nesting conditionals and provides a small set of examples to get the conversation started.

Example

.foo {
  display: grid;

  @media (orientation: landscape) {
    & { 
      grid-auto-flow: column; 
    }
  }
}

/* equivalent to */
.foo { display: grid; }

@media (orientation: landscape) {
  .foo { 
    grid-auto-flow: column; 
  }
}

fixes tabatkins/specs#56

[fromaline]

@argyleink very useful idea at first glance!

Currently this is not in spec, as i see from tabatkins/specs#56

.foo {
  color: red;
  @media (min-width: 20rem) {
    color: blue;
    @media (max-width: 30rem) {
      color: green;
    }
  }
}
/* equivalent to */
.foo {
  color: red;
}
@media (min-width: 20rem) {
  .foo {
    color: blue;
  }
}
@media (min-width: 20rem) and (max-width: 30rem) {
  .foo {
    color: green;
  }
}

You've add this example.

.foo {
  display: grid;

  @media (orientation: landscape) {
    & { 
      grid-auto-flow: column; 
    }
  }
}
/* equivalent to */
.foo { display: grid; }

@media (orientation: landscape) {
  .foo { 
    grid-auto-flow: column; 
  }
}

So could we nest @media inside &?
For me it seems fully valid, because & refers to parent selector and from your example we could nest media inside a selector

.foo {
  display: grid;

  & {
    @media (orientation: landscape) {
      grid-auto-flow: column;
    }
  }
}
/* equvialent to */
.foo {
  display: grid;
}

@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}

So if we combine upper syntax we could achieve @media nesting. Should it work?

.foo {
  display: grid;
  
  @media (max-width: 500px) {
    & {
      @media (orientation: landscape) {
        grid-auto-flow: column;
      }
    }
  }
}
/* is equvialent to? */
.foo {
  display: grid;
}

@media (max-width: 500px) and (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}

[argyleink]

Thanks for requesting clarification on nesting conditionals inside conditionals and posting some pseudo code 🙂

I'd like to make a spec addition that demonstrates the syntax, here's my current version:

.foo {
  display: grid;

  @media (orientation: landscape) {
    & { 
      grid-auto-flow: column; 
    }

    @media (min-inline-size > 1024px) {
      & {
        max-inline-size: 1024px;
      }
    }
  }
}
/* equivalent to
   .foo { display: grid; }

   @media (orientation: landscape) {
     .foo { 
       grid-auto-flow: column; 
     }
   }

   @media (orientation: landscape) and (min-inline-size > 1024px) {
     .foo { 
       max-inline-size: 1024px;
     }
   }
 */

nested conditionals were already triggering nesting, so by putting one a conditional inside a conditional, the & sigil resolves to the nearest resolvable selector, in this case .foo

less to write, and still consistent with the syntax?

[fromaline]

Yeah, I see why your syntax is more consistent. It requires a selector (&) inside @media querie, as opposed to my syntax, which does not follow this rule.
But I have been sure there aren't any specs out there, that allow to nest @media like here, because it's something, that your syntax allows to do.

.foo {
 ...

  @media (orientation: landscape) {
    ...

    @media (min-inline-size > 1024px) {
      ...
    }
  }
}