1

I have a file, typography.css, containing a cssnext Custom Property (--headingColor), a cssnext Custom Properties Set (--heading), a @value, a global element style (h1) and a CSS class (.heading):

:root {
  --headingColor: #f00;
  --heading {
    letter-spacing: 0.2em;
    color: --headingColor;
  }
}

@value headingColor: #f00;

h1 {
  @apply --heading;
}

.heading {
  @apply --heading;
}

Using postcss I can use the @value and compose the class in a CSS module without including the h1 and .heading class in the outputted CSS:

@value headingColor from "typography.css";
.moduleHeading {
  composes: heading from "typography.css";
}

However, using cssnext features, how can I do the same thing with the --heading and --headingColor, without outputting the h1 style and .heading class?

Alasdair McLeay
  • 2,572
  • 4
  • 27
  • 50

0 Answers0