cssnext features

.cssnextrc

{
  "features": {
    "customProperties": {
      "preserve": true
    },
    "calc": true,
    "customMedia": true,
    "mediaQueriesRange": true,
    "customSelectors": true,
    "colorRebeccapurple": true,
    "colorHwb": true,
    "colorGray": true,
    "colorHexAlpha": true,
    "fontVariant": true,
    "filter": true,
    "rem": true,
    "pseudoElements": true,
    "pseudoClassMatches": true,
    "pseudoClassNot": true,
    "colorRgba": true,
    "autoprefixer": true
  },
  "import": true,
  "url": true,
  "compress": false,
  "sourcemap": false
}

calc.dest.css

h1 {
  font-size: 20px;
  font-size: 2rem;
  height: calc(100px - 2em);
  margin: calc(100% - 3px);
}

calc.src.css

/* calc */
/* http://www.w3.org/TR/css3-values/#calc-notation */
h1 {
  font-size: calc(var(--base-fontsize) * 2);
  height: calc(100px - 2em);
  margin: calc(100% - 3px);
}

color.dest.css

.colors {
  background-color: #EA9A0F;
  background-color: rgba(234, 154, 15, 0.15);
  background-color: #EA000F;
  background-color: rgba(234, 0, 15, 0.65); 
  color: rgb(82, 18, 8);
  color: rgb(82, 18, 8); 
  border-top-color: rgb(245, 222, 222);
  border-right-color: rgb(219, 77, 77);
  border-bottom-color: rgb(245, 204, 204);
  border-left-color: rgb(51, 0, 0);
}

color.src.css

/* color */
/* http://dev.w3.org/csswg/css-color/#modifying-colors */
.colors {
  background-color: color(#cc0 red(+30) green(-50) blue(6%) alpha(.15));
  background-color: color(#c00 red(+30) green(-50) blue(6%) a(.65)); 
  color: color(#c00 hue(8%) saturation(-8%) whiteness(+50%) lightness(5%) blackness(-25%));
  color: color(#c00 h(8%) s(-8%) w(+50%) l(5%) b(-25%)); 
  border-top-color: color(#c00 contrast(12%));
  border-right-color: color(#c00 blend(#fff 30%));
  border-bottom-color: color(#c00 tint(80%));
  border-left-color: color(#c00 shade(75%));
}

custom_media_query.dest.css

@media (max-width: 38rem) {
  body { font-size: 1.2rem; }
}

@media (max-width: 48em) {
  body { font-size: 1.4rem; }
}

@media (max-width: 38rem) {
 .content { width: calc(100% - 20px); }
}

@media (max-width: 48em) {
 .content { width: calc(100% - 10px); }
}

custom_media_query.src.css

/* custom media query / media queries ranges */
/* http://dev.w3.org/csswg/mediaqueries-4/#custom-mq */
@custom-media --viewport-medium (width <= 38rem);
@custom-media --viewport-large (max-width: 48em);

@media (--viewport-medium) {
  body { font-size: calc(var(--base-fontsize) * 1.2); }
}

@media (--viewport-large) {
  body { font-size: calc(var(--base-fontsize) * 1.4); }
}

@media (--viewport-medium) {
 .content { width: calc(100% - 20px); }
}

@media (--viewport-large) {
 .content { width: calc(100% - 10px); }
}

custom_properties.dest.css

.h1 {
  color: #E86100;
}
.h1:hover {
  color: #2c3e50;
}
body {
  font-size: 10px;
  font-size: 1rem;
}

custom_properties.src.css

/* custom properties */
/* http://dev.w3.org/csswg/css-variables/ */
:root {
  --primary-color:   #E86100;
  --secondary-color: #2c3e50;
  --base-fontsize:     1rem;
}

.h1 {
  color: var(--primary-color);
}
.h1:hover {
  color: var(--secondary-color);
}
body {
  font-size: var(--base-fontsize);
}

custom_selectors.dest.css

header h1,
header h2,
header h3,
header h4,
header h5,
header h6 {
  margin-top: 0;
}

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
  font-size: 12px;
}

custom_selectors.src.css

/* custom selectors */
/* http://dev.w3.org/csswg/css-extensions/#custom-selectors */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

header :--heading {
  margin-top: 0;
}

:--heading + p {
  font-size: 12px;
}

filter.dest.css

.blur {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="4" /></filter></svg>#filter');
  -webkit-filter: blur(4px);
          filter: blur(4px);
}

.brightness {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.4" /><feFuncG type="linear" slope="0.4" /><feFuncB type="linear" slope="0.4" /></feComponentTransfer></filter></svg>#filter');
  -webkit-filter: brightness(0.4);
          filter: brightness(0.4);
}

.contrast {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" intercept="-0.5" /><feFuncG type="linear" slope="2" intercept="-0.5" /><feFuncB type="linear" slope="2" intercept="-0.5" /></feComponentTransfer></filter></svg>#filter');
  -webkit-filter: contrast(200%);
          filter: contrast(200%);
}

.drop-shadow {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="20" /><feOffset dx="17" dy="17" result="offsetblur" /><feFlood flood-color="rgba(0,0,255,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(16px 16px 20px blue);
          filter: drop-shadow(16px 16px 20px blue);
}

.grayscale {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.6063000000000001 0.3576 0.0361 0 0 0.1063 0.8575999999999999 0.0361 0 0 0.1063 0.3576 0.5361 0 0 0 0 0 1 0" /></filter></svg>#filter');
  -webkit-filter: grayscale(50%);
          filter: grayscale(50%);
}

.hue-rotate {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="hueRotate" color-interpolation-filters="sRGB" values="90" /></filter></svg>#filter');
  -webkit-filter: hue-rotate(90deg);
          filter: hue-rotate(90deg);
}

.invert {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0.75 0.25" /><feFuncG type="table" tableValues="0.75 0.25" /><feFuncB type="table" tableValues="0.75 0.25" /></feComponentTransfer></filter></svg>#filter');
  -webkit-filter: invert(75%);
          filter: invert(75%);
}

.opacity {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncA type="table" tableValues="0 0.25" /></feComponentTransfer></filter></svg>#filter');
  -webkit-filter: opacity(25%);
          filter: opacity(25%);
}

.saturate {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.4491 0.5005 0.0504 0 0 0.1491 0.8035 0.0504 0 0 0.1491 0.5005 0.3504 0 0 0 0 0 1 0" /></filter></svg>#filter');
  -webkit-filter: saturate(30%);
          filter: saturate(30%);
}

.sepia {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.6358 0.4614 0.1134 0 0 0.20939999999999998 0.8116000000000001 0.1008 0 0 0.1632 0.3204 0.4786 0 0 0 0 0 1 0" /></filter></svg>#filter');
  -webkit-filter: sepia(60%);
          filter: sepia(60%);
}

filter.src.css

/* filter */
/* http://www.w3.org/TR/filter-effects/ */
.blur {
  filter: blur(4px);
}

.brightness {
  filter: brightness(0.4);
}

.contrast {
  filter: contrast(200%);
}

.drop-shadow {
  filter: drop-shadow(16px 16px 20px blue);
}

.grayscale {
  filter: grayscale(50%);
}

.hue-rotate {
  filter: hue-rotate(90deg);
}

.invert {
  filter: invert(75%);
}

.opacity {
  filter: opacity(25%);
}

.saturate {
  filter: saturate(30%);
}

.sepia {
  filter: sepia(60%);
}

font_variant.dest.css

.smallcaps {
  -webkit-font-feature-settings: "c2sc";
     -moz-font-feature-settings: "c2sc";
          font-feature-settings: "c2sc";
  font-variant-caps: small-caps;
}

.all-small-caps {
  -webkit-font-feature-settings: "smcp", "c2sc";
     -moz-font-feature-settings: "smcp", "c2sc";
          font-feature-settings: "smcp", "c2sc";
  font-variant: all-small-caps;
}

font_variant.src.css

/* font-variant */
/* http://dev.w3.org/csswg/css-fonts/#propdef-font-variant */
.smallcaps {
  font-variant-caps: small-caps;
}

.all-small-caps {
  font-variant: all-small-caps;
}

gray.dest.css

.gray {
  color: rgb(0, 0, 0);
  background-color: #C8C8C8;
  background-color: rgba(200, 200, 200, 0.5);
  border-color: #333333;
  border-color: rgba(51, 51, 51, 0.32);
}

gray.src.css

/* gray() */
/* http://dev.w3.org/csswg/css-color/#grays */
.gray {
  color: gray(0);
  background-color: gray(200, 50%);
  border-color: gray(20%, .32);
}

gulpfile.js

'use strict';

var gulp = require('gulp');
var $ = require('gulp-load-plugins')({
  pattern: ['gulp-*', 'gulp.*'],
  replaceString: /\bgulp[\-.]/
});

gulp.task('cssnext', function() {
  gulp.src('src/stylesheets/base.css')
    .pipe($.cssnext({
        config: './.cssnextrc'
    }))
    .pipe(gulp.dest('./dist/stylesheets'))
});

gulp.task('postcss', function() {
  var PROCESSORS = [
    // config setting
  ];
  gulp.src('src/stylesheets/base.css')
    .pipe($.postcss(PROCESSORS))
    .pipe(gulp.dest('./dist/stylesheets'))
});

hwb.dest.css

.hwd {
  color: hwb(90, 0%, 0%, 0.5);
}

hwb.src.css

/* hwb(Hue-Whiteness-Blackness) */
/* http://dev.w3.org/csswg/css-color/#the-hwb-notation */
.hwd {
  color: #80FF00;
  color: rgba(128, 255, 0, 0.5);
}

import.src.css

/* @import */
/* import node_modules, web_modules or local modules */

// import node_modules/from-node_modules.css
@import "from-node_modules";

// relative path
@import "from/relative/file.css";

@import "use/import/file/within/media" (min-width: 25em);

/*
@media (min-width: 25em) {
  use/import/file/within/media のcontent
}
*/

matches.dest.css

section h1, article h1, aside h1, nav h1 {
  color: #F00;
}

divsection h1, divarticle h1, divaside h1, divnav h1 {
  color: #0ff;
}

div:first-child, div.inner {
  color: red;
}

matches.src.css

/* matches */
/* http://dev.w3.org/csswg/selectors-4/#matches */
:matches(section, article, aside, nav) h1 {
  color: #F00;
}

div:matches(section, article, aside, nav) h1 {
  color: #0ff;
}

div:matches(:first-child, .inner) {
  color: red;
}

not.dest.css

/* not */
/* http://dev.w3.org/csswg/selectors-4/#negation */
p:not(.warninig) {
  color: #bbb;
}

:not(p) {
  color: gray;
}

not.src.css

/* not */
/* http://dev.w3.org/csswg/selectors-4/#negation */
p:not(.warninig) {
  color: #bbb;
}

:not(p) {
  color: gray;
}

pseudo_elements.dest.css

p:first-line {
  color: #f00;
}

p:first-letter {
  color: #0f0;
}

::-moz-selection {
  color: red;
}

::selection {
  color: red;
}

.element:before {
  content: url(INSERT-CONTENT-BEFORE-ELEMENT.gif);
}

.element:after {
  content: url(INSERT-CONTENT-AFTER-ELEMENT.gif);
}

pseudo_elements.src.css

/* pseudo-elements */
/* http://www.w3.org/TR/css3-selectors/#pseudo-elements */
/* https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements#Notes */
p::first-line {
  color: #f00;
}

p::first-letter {
  color: #0f0;
}

::selection {
  color: red;
}

.element::before {
  content: url(INSERT-CONTENT-BEFORE-ELEMENT.gif);
}

.element::after {
  content: url(INSERT-CONTENT-AFTER-ELEMENT.gif);
}

rebeccapurple.dest.css

.rebeccapurple {
    color: rgb(102, 51, 153);
}

rebeccapurple.src.css

/* rebeccapurple */
/* http://lists.w3.org/Archives/Public/www-style/2014Jun/0312.html */
.rebeccapurple {
    color: rebeccapurple;
}

rem.dest.css

:root {
    font-size: 10px;
}

.section-title {
  font-size: 25px;
  font-size: 2.5rem;
  margin: 30px 3px 3em 30%;
  margin: 3rem 3px 3em 30%;
}

rem.src.css

/* rem units */
/* http://www.w3.org/TR/css3-values/#rem-unit */
:root {
    font-size: 10px;
}

.section-title {
  font-size: 2.5rem;
  margin: 3rem 3px 3em 30%;
}

rrggbbaa.dest.css

.rrggbbaa {
  /* 3 digits #RGBA */
  border-bottom-color: #fcc;
  /* 6 digits */
  border-top-color: #fcde42;
  /* 8 digits  #RRGGBBAA */
  border-right-color: #C73D5C59;
}

rrggbbaa.src.css

/* rrggbbaa */
/* http://dev.w3.org/csswg/css-color/#hex-notation */
.rrggbbaa {
  /* 3 digits #RGBA */
  border-bottom-color: #fcc;
  /* 6 digits */
  border-top-color: #fcde42;
  /* 8 digits  #RRGGBBAA */
  border-right-color: #C73D5C;
  border-right-color: rgba(199, 61, 92, 0.34902);
}

variables.dest.css

.h1 {
  color: #E86100;
}
.h1:hover {
  color: #2c3e50;
}
body {
  font-size: 10px;
  font-size: 1rem;
}

variables.src.css

/* custom properties */
/* http://dev.w3.org/csswg/css-variables/ */
:root {
  --primary-color:   #E86100;
  --secondary-color: #2c3e50;
  --base-fontsize:     1rem;
}

.h1 {
  color: var(--primary-color);
}
.h1:hover {
  color: var(--secondary-color);
}
body {
  font-size: var(--base-fontsize);
}