Variation At Rule

A custom at-rule that can wrap one or more CSS rules to conditionally include those rules in the CSS output based on whether the testwrap build varaition matches the supplied value

Syntax

@--variation <value> { <list of css rules> }

• <value> is any value CSS knows about: e.g. 5, or "demo"
• <list of css rules> is a list of CSS rules to be added to the CSS output

Usage

If you were building a test with --data '{"variation": 1}' you could conditionally include rules in CSS for this build only that wouldn't appear when built with --data '{"variation": 2}' with the following:

Input

html {
  color: hotpink;
}
@--variation 1 {
  html {
    background: lime;
  }
}

Output when built with --data '{"variation": 1}'

html {
  color: hotpink;
}
html {
  background: lime;
}

Output when built with --data '{"variation": "something else"}'

html {
  color: hotpink;
}