postcss-keywords

[![NPM Version][npm-img]][npm-url] [![Build Status][cli-img]][cli-url] [![Support Chat][git-img]][git-url]

Usage no npm install needed!

<script type="module">
  import postcssKeywords from 'https://cdn.skypack.dev/postcss-keywords';
</script>

README

PostCSS Keywords PostCSS

NPM Version Build Status Support Chat

PostCSS Keywords lets you create custom keywords which can be used in declarations.

@keyword small {
  value: 24px;
  property: padding, margin;
}

@keyword small {
  value: 16px;
  property: font-size;
}

@keyword medium {
  value: 40px;
  property: padding, margin;
}

.example {
  font-size: small;
  padding: small medium;
  margin: small;
}

Outputs:

.example {
  font-size: 16px;
  padding: 24px 40px;
  margin: 24px;
}

Setup

Add it to your project:

npm install postcss-keywords --save-dev