cssnext下一代的css

前端技術更新迭代的速度使人咂舌，互聯網+的風頭剛起那幾年，前端技術大多還停留在jquery階段，按需加載還停留在seajs和requirejs的階段，css3和H5也不過才嶄露頭角，但通過幾年的飛速發展，Angular、Vue和React儼然已造成前端框架的三足鼎立之勢，且風頭正勁，各領風騷！

看慣了css、sass、less的容顏，驚豔於css3的神奇，嚮往着下一代css的傳奇。今天就簡單玩玩下一代的css傳奇cssnext(聽說阿里早幾年前就開始玩cssnext了)。

先上幾個cssnext的語法：

:root{
  --mainColor: blue;
  --fontSize12:12px;
  --toolbar:{
    margin:10px 0 20px 10px;
    padding:0
  };
  --heading-color: #ff0000;
}

a{
  color: var(--mainColor);
  font-size: calc(var(--fontSize12) * 3);

  &:hover {
    color: rebeccapurple;
  }
}
.bianJu{@apply --toolbar;}

@custom-media --viewport-medium (width <= 1200px);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:--heading {
  margin-block: 0;
  color: var(--heading-color);
}

@media (--viewport-medium) {
  body {
    color: var(--mainColor);
    font-size: var(--fontSize12);
    line-height: calc(var(--fontSize12) * 1.5);
    overflow-wrap: break-word;
    padding-inline: calc(var(--fontSize12) / 2 + 1px);
  }
  a{color: var(--heading-color);}
  a, :--heading, .bianJu{font-size: calc(var(--fontSize12) * 2);}
}

.hero:matches(main, .main) {
  background-image: image-set("../assets/images/pic.jpg" 1x, "../assets/images/pic.jpg" 2x);
}

驚不驚喜？意不意外？是否是有點像less？是否是有點像js？確實很好玩的！
這些只是cssnext的冰山一角，目前國內使用這個的還很少，我也只是好奇，就本身玩了一把，茲當是作個筆記。
目前各瀏覽器對cssnext的支持度還不夠，版本較新的谷歌瀏覽器也只是支持了一丟丟的cssnext語法，像

:root{
  --mainColor: blue;
  --fontSize12:12px;
  --bianJu:{
    margin:10px 0 20px 10px;
    padding:0
  };
  --heading-color: #ff0000;
}

a{
  color: var(--mainColor);
  font-size: calc(var(--fontSize12) * 3);

  &:hover {
    color: rebeccapurple;
  }
}

等等這種的語法，較新的谷歌瀏覽器仍是支持的，但好比@apply自定義屬性集、@custom-media自定義媒體查詢、@custom-selector自定義選擇器仍是不支持的，因此就要藉助一些webpack的postcss插件來實現了。

接下來就配置幾個webpack的插件來實現諸如@apply、@custom-media、@custom-selector的css解析轉換：

const postcssPresetEnv = require('postcss-preset-env');
const postcssCustomProperties = require('postcss-custom-properties');    //轉換自定義屬性 如：@custom-media @custom-selector
const postcssApply = require('postcss-apply');  //轉換自定義屬性集  @apply

module.exports = {
    module: {
            {
                test    : /\.(sa|sc|c)ss$/,
                use     : [
                    'style-loader',
                    'css-loader',
                    { loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [
                                postcssApply(),
                                postcssCustomProperties({
                                    preserve: false,
                                }),
                                postcssPresetEnv({
                                    stage: 0,
                                    browsers: 'last 5 versions',
                                }),                      
                            ]
                        }
                    },
                    'sass-loader',
                ],             
            },
        ],
    },
}

須要說明的是：
一、cssnext也可使用postcss-cssnext這個包來解析，postcss-cssnext這個包能夠解析諸如--mainColor這種的語法，也能夠解析諸如@apply這種自定義的屬性集，但不能解析諸如@custom-media這種自定義的媒體查詢，並且目前postcss-cssnext已經再也不維護，安裝時會提示使用postcss-preset-env來代替。

二、若是使用postcss-preset-env這個包來解析cssnext，但遇到諸如@custom-media和@apply這種語法，就要使用到額外的安裝包postcss-custom-properties和postcss-apply。
三、若是使用了@apply這種自定義屬性，那麼它不支持讀取從外部引入的事先定義好的屬性集，這個有點不太好理解，仍是上代碼吧。
好比你使用了以下自定義的屬性集代碼：

:root{
  --toolbar:{
    margin:10px 0 20px 10px;
    padding:0
  };
}
.toolbar{@apply --toolbar;}

那麼這麼寫是沒有問題的，可是有時咱們爲了能複用公共的css就會把公共的css放在一個單獨的css文件中，每一個css樣式表用到這個公共的css文件時，會經過@import將其引入進來，這原本也是沒有問題的，是通用的作法，只是用在這裏，若是將--toolbar:{margin:10px 0 20px 10px; padding:0};放在一個公共的css文件中再@import進來，@apply就不識別--toolbar這個變量了。

本篇博客也只是觸及到了cssnext的冰山一角，就須要用到三個包來編譯解析，且配置webpack時也出現了各類問題，查閱英文的文檔和官方給出的答疑解惑（本人英語不好勁，配合着某詞典才勉強看下來，目前國內這方面的中文文檔極少），至關費時費力，且瀏覽器的支持度並不友好。其中的postcss-apply的官方給出的提示就很明顯：

The @apply rule and custom property sets most likely won't get any more support from browser vendors as the spec is yet considered deprecated and alternative solutions are being discussed.
大意就是@apply規則和自定義屬性集極可能不會再得到瀏覽器供應商的支持，由於該規範已棄用且正在討論替代解決方案。

目前還在繼續學習cssnext中！

本文參考：
postcss-preset-env
postcss-custom-properties
postcss-apply