@property rules should be de-duplicated at the top-level

[thecrypticace]

Lightning CSS does not currently — but should — merge @property declarations for the same property when at the top level of a stylesheet. And could, potentially, do so when multiple are found at the "same" level. For example, if the same property registration existed more than once inside equivalent media queries. According to the spec, for a given property, the latest @property rule in stylesheet order wins.

Notes:

1. For top-level at least, moving all @property declarations to the beginning seems like a sensible thing to do. But this is obviously not a necessity.
2. Lightning CSS seems to treat @property inside of @media and @layer as a semi-raw token stream instead of validating and formatting it appropriately.

Playground Link

Input:

@property --tw-translate-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@layer utilities {
  .translate-x-1 {
    --tw-translate-x: 0.25rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
}

/* This is a duplicate of the above rule — but even if the values were different this one would win */
@property --tw-translate-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@layer utilities {
  .translate-x-4 {
    --tw-translate-x: 1rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
}

@property --tw-translate-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@layer utilities {
  .translate-y-2 {
    --tw-translate-y: 0.5rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
}

@property --tw-translate-z {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@media screen and (width >= 768px) {
  @property --tw-translate-z {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  @property --tw-translate-z {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }
}

Expected:

@property --tw-translate-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@media screen and (width >= 768px) {
  @property --tw-translate-z {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }
}

@layer utilities {
  .translate-x-1 {
    --tw-translate-x: .25rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-4 {
    --tw-translate-x: 1rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-2 {
    --tw-translate-y: .5rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
}

Actual:

@property --tw-translate-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@layer utilities {
  .translate-x-1 {
    --tw-translate-x: .25rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-4 {
    --tw-translate-x: 1rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-2 {
    --tw-translate-y: .5rem;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
}

@property --tw-translate-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@media screen and (width >= 768px) {
  @property --tw-translate-z {
    syntax: "<length>"; inherits: false; initial-value: 0px;
  }

  @property --tw-translate-z {
    syntax: "<length>"; inherits: false; initial-value: 0px;
  }
}