castastrophe / postcss-remapvars

Remap variables with find and replace

postcss-remapvars

Remap variables to create variable-driven CSS components

Installation

yarn add postcss-remapvars

Usage

postcss -u postcss-remapvars -o dist/index.css src/index.css

Assuming you have some variables defined and a rule whose properties reference them:

:root {
  --component-background-color: blue;
  --component-s-width: 10px;
  --component-s-height: 10px;
  --component-l-width: 20px;
  --component-l-height: 20px;
}

.component {
  background-color: var(--component-background-color);

  width: var(--component-width);
  height: var(--component-height);
}

Define additional rules, calling @remapvars { find: STRING | REGEXP, replace: STRING, filter: [STRING | REGEXP] } to re-define the variables with their modified versions:

.component--small {
  @remapvars {
    find: --component-s-;
    replace: --component-;
  }
}

.component--large {
  @remapvars {
    find: --component-l-;
    replace: --component-;
  }
}

The result are classes that re-define variables to change the visual style of a component. That is, instead of modifying CSS properties to reference new variables, you override the variables that the CSS properties already reference:

:root {
  --component-background-color: blue;
  --component-s-width: 10px;
  --component-s-height: 10px;
  --component-l-width: 20px;
  --component-l-height: 20px;
}

.component {
  background-color: var(--component-background-color);

  width: var(--component-width);
  height: var(--component-height);
}

.component--small {
  --component-width: var(--component-s-width);
  --component-height: var(--component-s-height);
}

.component--large {
  --component-width: var(--component-l-width);
  --component-height: var(--component-l-height);
}

Advanced Usage

RegEx

Regular expressions can be used as well, and flags are supported ala /whatever/i:

:root {
  --component-background-color: black;
  --component-text-color: black;
  --component-border-style: solid;
  --component-border-color: orange;
  --component-border-width: 1px;

  --component-background-color-hover: blue;
  --component-text-color-hover: blue;
  --component-border-color-hover: green;
}

.component {
  background-color: var(--component-background-color);
  color: var(--component-text-color);
  border: var(--component-border-width) var(--component-border-color) var(--component-border-style);
}

.component--hover {
  @remapvars {
    find: /(--component-.+)-hover/;
    replace: $1;
  }
}

The result is the same, variable-driven classes:

:root {
  --component-background-color: black;
  --component-text-color: black;
  --component-border-style: solid;
  --component-border-color: orange;
  --component-border-width: 1px;

  --component-background-color-hover: blue;
  --component-text-color-hover: blue;
  --component-border-color-hover: green;
}

.component {
  background-color: var(--component-background-color);
  color: var(--component-text-color);
  border: var(--component-border-width) var(--component-border-color) var(--component-border-style);
}

.component--hover {
  --component-background-color: var(--component-background-color-hover);
  --component-text-color: var(--component-text-color-hover);
  --component-border-color: var(--component-border-color-hover);
}

Filters

A list of filter patterns can be provided . If any of them is matched, the variable is skipped.

:root {
  --prefix-component-background-color: blue;
  --prefix-component-shadow-size: 1px;
  --prefix-component-halo-size: 1px;
  --prefix-component-s-width: 10px;
  --prefix-component-s-height: 10px;
  --prefix-component-s-background-color: blue;
  --prefix-component-s-shadow-size: 1px;
  --prefix-component-s-halo-size: 1px;
  --prefix-component-l-width: 20px;
  --prefix-component-l-height: 20px;
  --prefix-component-l-background-color: blue;
  --prefix-component-l-shadow-size: 1px;
  --prefix-component-l-halo-size: 1px;
}

.component {
  background-color: var(--prefix-component-background-color);

  width: var(--prefix-component-width);
  height: var(--prefix-component-height);
}

.component--small {
  @remapvars {
    find: --prefix-component-s-;
    filter: color, /shadow|halo/;
    replace: --prefix-component-;
  }
}

.component--large {
  @remapvars {
    find: --prefix-component-l-;
    filter: color, /shadow|halo/;
    replace: --prefix-component-;
  }
}

Even though --prefix-component-s-background-color, --prefix-component-shadow-size, and --prefix-component-l-halo-size match the find pattern, they will be excluded as they match one of the filter patterns, and won't be included in the remap:

:root {
  --prefix-component-background-color: blue;
  --prefix-component-shadow-size: 1px;
  --prefix-component-halo-size: 1px;
  --prefix-component-s-width: 10px;
  --prefix-component-s-height: 10px;
  --prefix-component-s-background-color: blue;
  --prefix-component-s-shadow-size: 1px;
  --prefix-component-s-halo-size: 1px;
  --prefix-component-l-width: 20px;
  --prefix-component-l-height: 20px;
  --prefix-component-l-background-color: blue;
  --prefix-component-l-shadow-size: 1px;
  --prefix-component-s-halo-size: 1px;
}

.component {
  background-color: var(--prefix-component-background-color);

  width: var(--prefix-component-width);
  height: var(--prefix-component-height);
}

.component--small {
  --prefix-component-width: var(--prefix-component-s-width);
  --prefix-component-height: var(--prefix-component-s-height);
}

.component--large {
  --prefix-component-width: var(--prefix-component-l-width);
  --prefix-component-height: var(--prefix-component-l-height);
}

postcss-remapvars's Issues

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀