postcss-rgb-mapping

Remaps rgb(a) values to an rgb postfixed variable. If an opacity is found, creates a separate opacity postfixed variable. Also remaps values that reference a transparent token (for example, transparent-black-300) to rgb and opacity postfixed variables.

Installation

yarn add -D @spectrum-tools/postcss-rgb-mapping
postcss -u postcss-rgb-mapping -o dist/index.css src/index.css

Usage

Example 1: RGB and opacity postfixed variables

This plugin turns this:

.spectrum--lightest {
    --spectrum-seafoam-100: rgba(206, 247, 243);
    --spectrum-seafoam-200: rgba(170, 241, 234, 0.5);
}

Into this:

.spectrum--lightest {
    /* Both --spectrum-seafoam-100 and --spectrum-seafoam-200 get split into separate
    "-rgb" and "-opacity" values when applicable. */
    --spectrum-seafoam-100-rgb: 206, 247, 243;
    --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
    --spectrum-seafoam-200-rgb: 170, 241, 234;
    --spectrum-seafoam-200-opacity: 0.5;
    /* The plugin then redefines the original custom variable to use the newly created
    "-rgb" and/or "-opacity" custom variables. */
    --spectrum-seafoam-200: rgba(
        var(--spectrum-seafoam-200-rgb),
        var(--spectrum-seafoam-200-opacity)
    );
}

Example 2: Remapping of transparent tokens

This plugin turns this:

.spectrum--lightest {
    --spectrum-transparent-white-100-rgb: 100, 100, 100;
    --spectrum-transparent-white-100-opacity: 0.5;
    --spectrum-transparent-white-100: rgba(
        var(--spectrum-transparent-white-100-rgb),
        var(--spectrum-transparent-white-100-opacity)
    );
    /* The custom properties below is defined as another, specifically "transparent," variable. */
    --disabled-static-white-background-color: var(
        --spectrum-transparent-white-100
    );
}

Into this:

.spectrum--lightest {
    --spectrum-transparent-white-100-rgb: 100, 100, 100;
    --spectrum-transparent-white-100-opacity: 0.5;
    --spectrum-transparent-white-100: rgba(
        var(--spectrum-transparent-white-100-rgb),
        var(--spectrum-transparent-white-100-opacity)
    );
    /* In a similar fashion, the plugin creates new "-rgb" and "-opacity" postfixed custom
    variables, that correspond to the definition's transparent "-rgb" and "-opacity"
    postfixed custom variables. */
    --disabled-static-white-background-color-rgb: var(
        --spectrum-transparent-white-100-rgb
    );
    --disabled-static-white-background-color-opacity: var(
        --spectrum-transparent-white-100-opacity
    );
    /* Then reassembles the original to use and reference these newly created variables. */
    --disabled-static-white-background-color: rgba(
        var(--disabled-static-white-background-color-rgb),
        var(--disabled-static-white-background-color-opacity)
    );
}

Change Log

1.1.0

Minor Changes

• #3452 287cff8 Thanks @marissahuysentruyt! - Adds new functionality to better handle tokens that reference other transparent tokens.

  When a custom properties below is defined as another, specifically "transparent," variable, such as:

  --disabled-static-white-background-color: var(
      --spectrum-transparent-white-100
  );

  ...the plugin can now convert this single custom property into its -rgb and -opacity postfixed variables, that each correspond to the -rgb and -opacity variables of the definition's transparent token. It then reassembles the original, using and referencing these newly created variables.

  --disabled-static-white-background-color-rgb: var(
      --spectrum-transparent-white-100-rgb
  );
  --disabled-static-white-background-color-opacity: var(
      --spectrum-transparent-white-100-opacity
  );
  --disabled-static-white-background-color: rgba(
      var(--disabled-static-white-background-color-rgb),
      var(--disabled-static-white-background-color-opacity)
  );

1.0.0

Major Changes

📝 #3502 562396e Thanks @castastrophe!

• Migrated the postcss-rgb-mapping package into the new @spectrum-tools namespace so updates may shipped and shared among other projects.