在webpack中使用postcss之插件cssnext

学习了precss插件包在webpack中的用法后，下面介绍postcss的另一个重要插件cssnext，步骤没有precss用法详细，主要介绍css4的语法，cssnext目前支持了部分新特性，你可以在css4-selectors.com网站上测试你的浏览器是否支持这些css4选择器。
cssnext能让未来的css语法在今天的浏览器中工作，fallbacks能让今天的css语法在以前的浏览器上工作。

一、安装postcss插件cssnext

cnpm i -D cssnext

二、cssnext支持的css4新特性

:root {
  --lh: 30px;
  --we: #fff;
  --ora: #FFA500;
  --bg-font: {
    background: #00BBFE;
    color: var(--we);
  }
}

1、变量

/* before */
.vars-1 {
  line-height: var(--lh);
  color: var(--we);
  background-color: #CA1F2D;
}

/* after */
.vars-1 {
  line-height: 30px;
  color: #fff;
  background-color: #CA1F2D;
}

2、嵌套

/* before */
.nested {
  background: #00BD00;
  & p {
    display: inline-block;
    color: white;
  }
  
  /* @nest rule (for complex nesting) */
  @nest span & {
    color: blue;
  } 

  /* media query automatic nesting */
  @media (min-width: 500px) {
    color: yellow;
  }
}

/* after */
.nested {
  background: #00BD00;
}
.nested p {
  display: inline-block;
  color: white;
}
.nested {
  /* @nest rule (for complex nesting) */
}
span .nested {
  color: blue;
}
.nested {
  /* media query automatic nesting */
}
@media (min-width: 500px) {
  .nested {
    color: yellow;
  }
}

3、继承

/* before */
.extended {
  @apply --bg-font;
}

/* after */
.extended {
  background: #00BBFE;
  color: #fff;
}

4、calc()函数

.tcalc{
    background-image: url(dog.png);
    background-position: calc(100% - 50px) calc(100% - 20px);
}

5、color()函数

/* before */
a {
  color: color(red alpha(-10%));
}

a:hover {
  color: color(red blackness(80%));
}

/* after */
a {
  color: rgba(255, 0, 0, 0.9);
}

a:hover {
  color: rgb(51, 0, 0);
}

6、image-set()函数

Webkit内核"safari6"和"chrome21"支持css4的background-image新规范草案image-set。通过Webkit内核的浏览器私有属性"-webkit"，image-set为Web前端人员提供了一种解决高分辨率图像的显示，用来解决苹果公司提出的Retian屏幕显示图片的技术问题。

在cssnext出来之前，可以这样做，来解决兼容性问题。

.logo-icon {
  background-image: url(dog.png);
  background: image-set(url(dog.png) 1x,url(dog.png) 2x) center;
}

不像Media Queries，image-set不需要告诉浏览器使用什么图像，而是直接提供了图像让浏览器选择。

• 如果浏览器不支持image-set，则启用background-image；
• 如果浏览器支持image-set，浏览器会选择image-set中的@1x背景图像；
• 如果浏览器支持image-set，而且是在retina屏幕下，浏览器会选择image-set中的@2x背景图像。

postcss插件cssnext出来后，可以放心用image-set，cssnext会自动处理未来的新语法。

/* before */
.imgset {
    background-image: image-set(url(img/dog.png) 1x,
                url(img/tiger.png) 2x,
                url(img/lien.png) 600dpi);
}

/* after */
.imgset{
    background-image: url(img/dog.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
    .imgset{
        background-image: url(img/tiger.png);
    }
}
@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi){
    .imgset{
        background-image: url(img/lien.png);
    }
}

7、一些伪类

/* before */
div:not(.not-1, .not-2) { 
  text-align: center;
} 

/* after */
div:not(.not-1):not(.not-2) { 
  text-align: center;
}

/* before */
.mymixin{
  background-color:blue;
}
.mymixin:matches(:hover, .helper) {
  background-color:#00BBFE;
  & a {
    color: #fff;
  }
}

/* after */
.mymixin{
  background-color:blue;
}
.mymixin:hover, .mymixin.helper {
  background-color:#00BBFE;
}
.mymixin:hover a, .mymixin.helper a {
  color: #fff;
}

8、一些选择器

/* before */
.shape {  
  float: left;  
  width: 300px;  
  shape-outside: circle(50%);  
} 

/* after */
.shape {  
  float: left;  
  width: 300px;  
  -webkit-shape-outside: circle(50%);  
          shape-outside: circle(50%);  
}

shape选择器可将文字排列在非矩形对象周围，比如曲线。
三、cssnext还未支持的css4新特性
1、一些伪类

a:has( > span ) { 
    border: 1px solid #000;
}  
li:not(:has(p)) { 
    padding-bottom: 1em; 
}

2、混合

background-blend-mode: hue | multiply;
mix-blend-mode: screen;

目前浏览器还不支持，可以先在photoshop中混合图片。
3、一些选择器

.main {  
  position:relative;  
}  
.exclusion {  
  position: absolute;  
  top: 14em;   
  left: 14em;  
  width: 320px;  
  wrap-flow: both;  
}

exclusion选择器使文字环绕在定位矩形对象的四周。