Package Exports

postcss-at-rules-variables-2
postcss-at-rules-variables-2/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-at-rules-variables-2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

postcss-at-rules-variables-2

PostCSS plugin to transform W3C CSS Custom Properties for at-rule’s parameters.

A maintained fork of postcss-at-rules-variables

Why?

Adds the ability to use a custom property in the options, at-rules.
Used in conjunction with the plugin postcss-each, postcss-conditionals, postcss-for and more at-rules plugins.

Install

$ npm install --save-dev postcss postcss-at-rules-variables-2

$ pnpm install --save-dev postcss postcss-at-rules-variables-2

Note: This project is compatible with node v20+

Usage

// Dependencies
var fs = require('fs');
var postcss = require('postcss');
var colorFunction = require('postcss-color-function');
var atImport = require('postcss-import');
var atEach = require('postcss-each');
var atVariables = require('postcss-at-rules-variables');
var atIf = require('postcss-conditionals');
var atFor = require('postcss-for');
var cssVariables = require('postcss-css-variables');
var nested = require('postcss-nested');

// CSS to be processed
var css = fs.readFileSync('css/input.css', 'utf8');

// Process CSS
var output = postcss()
  .use(atVariables({ /* atRules: ['media'] */ }))
  .use(colorFunction())
  .use(atEach())
  .use(atImport({
    plugins: [
      require('postcss-at-rules-variables')({ /* options */ }),
      require('postcss-import')
    ]
  }))
  .use(atFor())
  .use(atIf())
  .use(cssVariables())
  .use(nested())
  .process(css, {
    from: 'css/input.css'
  })
  .css;

console.log(output);

Use postcss-at-rules-variables before you at-rules plugins

Example

/* input.css */
:root {
    --array: foo, bar, baz;
    --from: 1;
    --to: 3;
    --icon-exclude: 2;
    --color-danger: red;
    --nested-variable: color(var(--color-danger) a(90%)) ;
}

@each $val in var(--array) {
    @import "$val.css";
}

/* foo.css */
html {
    background-color: var(--color-danger);
    color: var(--nested-variable);
}

/* bar.css */
.some-class {
    color: #fff;

    @for $val from var(--from) to var(--to) {
        @if $val != var(--icon-exclude) {
            .icon-$val {
                background-position: 0 $(val)px;
            }
        }
    }
}

/* baz.css */
h1 {
    font-size: 24px;
}

@import "biz.css";

/* biz.css */
h2 {
    color: olive;
}

/* Output example */
html {
    background-color: red;
    color: rgba(255, 0, 0, 0.9);
}

.some-class {
    color: #fff;
}

.some-class .icon-1 {
    background-position: 0 1px;
}

.some-class .icon-3 {
    background-position: 0 3px;
}

h1 {
    font-size: 24px;
}

h2 {
    color: olive;
}

Options

`atRules`

Type: Array
Default: ['for', 'if', 'else', 'each', 'mixin', 'custom-media']
Description: The array used in all at-rules in your project

`variables`

Type: Object
Default: {}
Description: Allows you to pass an object of variables for :root. These definitions will override any that exist in the CSS

`declarationByWalk`

Type: boolean
Default: false
Description: Searches for root declarations by traversing all declarations before interpolating them.

⚠️ Attention, this approach is slower and carries the risk of overriding existing variables