https://github.com/castastrophe/postcss-rgb-mapping

A PostCSS plugin to parse out rgb values into distinct custom properties
https://github.com/castastrophe/postcss-rgb-mapping

css postcss postcss-plugin

Last synced: 3 months ago
JSON representation

A PostCSS plugin to parse out rgb values into distinct custom properties

• Host: GitHub
• URL: https://github.com/castastrophe/postcss-rgb-mapping
• Owner: castastrophe
• License: apache-2.0
• Created: 2023-03-25T03:31:05.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-10T17:25:39.000Z (8 months ago)
• Last Synced: 2024-05-10T18:35:16.110Z (8 months ago)
• Topics: css, postcss, postcss-plugin
• Language: JavaScript
• Homepage:
• Size: 1.34 MB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-rgb-mapping

>

> Remaps rgb(a) values to an `rgb` postfixed variable. If an opacity is found, creates a separate `opacity` postfixed variable.

## Installation

```sh

yarn add -D postcss-rgb-mapping

postcss -u postcss-rgb-mapping -o dist/index.css src/index.css

```

## Usage

This plugin turns this:

```css

.spectrum--lightest {

  --spectrum-seafoam-100: rgba(206, 247, 243);

  --spectrum-seafoam-200: rgba(170, 241, 234, 0.5);

}

```

Into this:

```css

.spectrum--lightest {

  --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;

  --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb), var(--spectrum-seafoam-200-opacity));

}

```