
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
postcss-at-rules-variables
Advanced tools
PostCss plugin to use CSS Custom Properties in at-rule @each, @for, @if, @else
PostCSS plugin to transform W3C CSS Custom Properties for at-rule’s parameters.
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.
$ npm install --save-dev postcss postcss-at-rules-variables
Note: This project is compatible with node v10+
// 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
/* 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;
}
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.
:warning: Attention, this approach is slower and carries the risk of overriding existing variables
FAQs
PostCss plugin to use CSS Custom Properties in at-rule @each, @for, @if, @else
We found that postcss-at-rules-variables demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.