postcss-js-mixins

PostCSS JS Mixins

PostCSS plugin for custom mixin syntax

/* before */
.block {
	column(spaced, 1, 2);
}

/* after */
.block {
	float: left;
	width: 50%;
	margin-left: 5%;
}

/* before */
.block {
	spacedBlock(width: 10px);
}

/* after */
.block {
	margin-bottom: 2rem;
	width: 10px;
	display: block;
}

Usage

const syntax = require('postcss-wee-syntax');
const mixins = require('postcss-js-mixins');

postcss([ mixins({ /* options */ }) ]).process(input, {
			syntax: syntax
		})
		.then(result => {
			// Do something with result
		});

See PostCSS docs for examples for your environment.

Options

mixins

Type: Object
Default: {}

Register mixins that you want to reference in your style sheets.

const decl = require('postcss-js-mixins/lib/declaration');
const { isEmpty } = require('postcss-js-mixins/lib/helpers');

require('postcss-js-mixins')({
	mixins: {
		/**
		* Example of creating a shorthand with default value
		*/
		spaced(value = '20px') {
			return decl('margin-bottom', value);
		}
	}
});

units

Type: Object
Default: { default: 'rem', lineHeight: 'em' }

These units will be appended intelligently when number values are passed without a unit. For example, the font-size property will have the unit appended, but opacity will not.

Writing Mixins

Mixins are written solely in JavaScript. They can return a declaration, a rule, or an array of declarations/rules.

Declaration

Declarations take a CSS property and it's value as arguments.

const decl = require('postcss-js-mixins/lib/declaration');

// Create single declaration
decl(prop, value);

Rule

Rules take a selector and an array of Declaration objects.

const rule = require('postcss-js-mixins/lib/rule');

// Create single declaration
rule('.block:after', [
	decl(prop, value),
	decl(prop, value)
]);

Methods

createMany

Matches indexes from two arrays to produce declarations for each. This is used when order matters for your mixin arguments.

// Create multiple declarations
function position(...args) {
	return decl.createMany(['top', 'right', 'left', 'bottom'], args);
}

position(10%, 0, false, 0);

createManyFromObj

Takes an object with property: value pairs and an optional prefix to prepend to each property value.

// Create multiple declarations from an object
function padding(top = 0, right = 0, bottom = 0, left = 0) {
	return decl.createManyFromObj({
		top: top,
		right: right,
		bottom: bottom,
		left: left
	}, 'padding');
}

padding(top: '10px', left: '12px');

/* Output */
padding-top: 10px;
padding-right: 0;
padding-bottom: 0;
padding-left: 12px;

Helper Methods

Helper methods have been provided in order to make writing mixins easier.

const helpers = require('postcss-js-mixins/lib/helpers');
const { darken, lighten } = require('postcss-js-mixins/lib/colorHelpers');

List of Helper Methods

• darken
• lighten
• calcOpacity
• hexToRgba
• isColor
• isEmpty
• isNumber
• isObject
• isPercentage
• isProvided
• isString
• isUnit
• prefix
• setDefaultUnits
• toDashCase
• toDegrees
• type
• unit

Note: This plugin uses TinyColor which has a large number of other color helper methods that can easily be exposed if requested.