Add postcss-color-function and postcss-apply (#47)

Fixes #45
Fixes #44

Author: simonsmith

CHANGELOG.md

@@ -1,5 +1,7 @@
 ### HEAD
 
+* Add `postcss-apply`
+* Add `postcss-color-function`
 * Add `debug` option to pass an `postcss-debug` instance
 * Allow usage of `transform` and `onImport` in `postcss-easy-import`
 * Remove `beforeLint` feature

README.md

@@ -12,6 +12,8 @@ Compiles CSS packages with:
 * [postcss-easy-import](https://github.com/TrySound/postcss-easy-import)
 * [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties)
 * [postcss-calc](https://github.com/postcss/postcss-calc)
+* [postcss-color-function](https://github.com/postcss/postcss-color-function)
+* [postcss-apply](https://github.com/pascalduez/postcss-apply)
 * [postcss-custom-media](https://github.com/postcss/postcss-custom-media)
 * [autoprefixer](https://github.com/postcss/autoprefixer)
 
@@ -262,7 +264,9 @@ var defaults = [
   'postcss-easy-import',
   'postcss-custom-properties',
   'postcss-calc',
+  'postcss-color-function',
   'postcss-custom-media',
+  'postcss-apply',
   'autoprefixer',
   'postcss-reporter'
 ];
@@ -280,7 +284,9 @@ module.exports = {
 var result = [
   'postcss-easy-import',
   'postcss-custom-properties',
+  'postcss-color-function',
   'postcss-custom-media',
+  'postcss-apply',
   'postcss-at2x',
   'postcss-calc',
   'autoprefixer',

lib/index.js

@@ -23,7 +23,9 @@ var defaults = {
     'postcss-easy-import',
     'postcss-custom-properties',
     'postcss-calc',
+    'postcss-color-function',
     'postcss-custom-media',
+    'postcss-apply',
     'autoprefixer',
     'postcss-reporter'
   ],

package.json

@@ -22,8 +22,10 @@
     "object-assign-deep": "0.0.4",
     "pad-component": "0.0.1",
     "postcss": "^5.0.12",
+    "postcss-apply": "^0.4.0",
     "postcss-bem-linter": "^2.3.0",
     "postcss-calc": "^5.0.0",
+    "postcss-color-function": "^2.0.1",
     "postcss-custom-media": "^5.0.0",
     "postcss-custom-properties": "^5.0.0",
     "postcss-easy-import": "^1.0.1",

test/fixtures/component.css

@@ -6,15 +6,20 @@
 
 :root {
   --Component-size: 16px;
+  --Component-color: {
+    color: green;
+  };
 }
 
 .Component {
   font-size: var(--Component-size);
   width: calc(100% * 1 / 6);
+  background: color(red a(90%));
 }
 
 .Component-item {
   display: flex;
+  @apply --Component-color;
 }
 
 @media (--media-query) {

test/fixtures/component.out.css

@@ -7,10 +7,12 @@
 .Component {
   font-size: 16px;
   width: 16.66667%;
+  background: rgba(255, 0, 0, 0.9);
 }
 
 .Component-item {
   display: flex;
+  color: green;
 }
 
 @media (min-width: 200px) {

test/fixtures/config.out.css

@@ -7,10 +7,12 @@
 .Component {
   font-size: 16px;
   width: 16.66667%;
+  background: rgba(255, 0, 0, 0.9);
 }
 
 .Component-item {
   display: flex;
+  color: green;
 }
 
 @media (min-width: 200px) {

test/fixtures/minify.out.css

@@ -1 +1 @@
-.u-img{border-radius:50%}.Component{font-size:16px;width:16.66667%}.Component-item{display:flex}@media (min-width:200px){.Component-item{color:red}}
+.u-img{border-radius:50%}.Component{font-size:16px;width:16.66667%;background:rgba(255,0,0,.9)}.Component-item{display:flex;color:green}@media (min-width:200px){.Component-item{color:red}}

test/test.js

@@ -87,7 +87,9 @@ describe('suitcss', function() {
         'postcss-easy-import',
         'postcss-custom-properties',
         'postcss-calc',
+        'postcss-color-function',
         'postcss-custom-media',
+        'postcss-apply',
         'autoprefixer',
         'postcss-reporter'
       ]);
@@ -223,7 +225,9 @@ describe('suitcss', function() {
         expect(opts.use).to.eql([
           'postcss-easy-import',
           'postcss-custom-properties',
+          'postcss-color-function',
           'postcss-custom-media',
+          'postcss-apply',
           'autoprefixer',
           'postcss-at2x',
           'postcss-calc',
@@ -240,7 +244,9 @@ describe('suitcss', function() {
           'postcss-easy-import',
           'postcss-custom-properties',
           'postcss-calc',
+          'postcss-color-function',
           'postcss-custom-media',
+          'postcss-apply',
           'autoprefixer',
           'postcss-reporter',
           'postcss-at2x',