postcss-nth-list

A work in progress postcss module for picking items from a 'varible list'.

Installation

  npm install postcss-nth-list --save

Usage

Requires postcss-custom-properties, postcss-css-variables or similar to be required before this module.

postcss([
    require('postcss-custom-properties'),
    require('postcss-nth-list')
])

See PostCSS docs for examples for your environment.

Input example

:root{
    --aVar: lime;
    --myList: "a-string" var(--aVar) 100,234,190 red;
 
    --string: nth(var(--myList), 0);
    --var: nth(var(--myList), 1);
    --rgb: nth(var(--myList), 2);
    --color: nth(var(--myList), 3);
}
 
body{
    background: nth(var(--myList), 3);
    color: rgb( var(--rgb) );
    border-color: var(--var);
    content: var(--string);
}
 

Output example

body{
    background: red;
    color: rgb( 100,234,190 );
    border-color: lime;
    content: "a-string";
}