postcss-at-rules-variables

    0.3.0 • Public • Published

    postcss-at-rules-variables

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

    Travis Build StatusAppVeyor Build Statusnodenpm versionDependency StatusXO code styleCoveralls status

    npm downloadsnpmPackage Quality

    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

    Note: This project is compatible with node v10+

    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

    Install

    npm i postcss-at-rules-variables

    DownloadsWeekly Downloads

    2,939

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    52.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • scrum