移植cssnext到sublime text

[zhouwenbin]

简介

sublime text的插件使用python开发的，但是不懂python怎么办？没关系，站在巨人的肩膀上，我们可以很容易移植node插件到sublime text。这篇文章来说说移植cssnext的过程。

项目地址：https://github.com/zhouwenbin/sublime-cssnext

�可以直接用install package搜索cssnext安装，mac测试通过。

修改代码

我们可以基于sublime-autoprefixer来开发，因为都是基于postcss的，复制一份代码到本地。

然后把文件名有autoprefixer的都替换成cssnext。

代码里有autoprefixer的也替换成cssnext。

修改package.json文件，这里用的是postcss-cssnext

{
  "dependencies": {
    "postcss-cssnext": "^2.2.0",
    "get-stdin": "^4.0.1",
    "postcss": "^5.0.4",
    "postcss-safe-parser": "^1.0.1"
  },
  "private": true
}

cssnext.js文件要把postcss-cssnext引进来

'use strict';
var stdin = require('get-stdin');
var postcss = require('postcss');
var cssnext = require('postcss-cssnext');
var postcssSafeParser = require('postcss-safe-parser');

stdin(function (data) {
    var opts = JSON.parse(process.argv[2]);

    postcss(cssnext(opts)).process(data, {
        parser: postcssSafeParser
    })
    .then(function (result) {
        process.stdout.write(result.css);
    }).catch(function (err) {
        if (err.name === 'CssSyntaxError') {
            err.message += '\n' + err.showSourceCode();
        }

        console.error(err.message.replace('<css input>:', ''));
    });
});

Main.sublime-menu文件用来定义主菜单，可以从Preferences-Package Settings-Cssnext进入配置。

Cssnext.sublime-commands用来指定调用的命令，可以用cmd+shift+p然后输入cssnext。

.no-sublime-package用来说明这不是一个纯sublime插件，因为不是python开发的。仅仅使用pythone来调用node，这个在提交审核的时候被喷了，详细的看这里。

修改完先在sublime下的package目录建个cssnext目录，把代码放进去看能不能生效。

提交插件

没问题就可以提交到github了，记得删掉package-metadata.json和.pyc的文件。

github上要建个release，这个到时候install package的时候要用。

提交到install package要先fork package_control_channel，然后修改repository目录下对应的json文件，添加几行代码

{
    "name": "Cssnext",
    "details": "https://github.com/zhouwenbin/sublime-cssnext",
    "releases": [
        {
            "sublime_text": "*",
            "tags": true
        }
    ]
},

然后提交pull request就可以了，审核通过就可以直接用install package安装了。

使用

用install package搜cssnext，安装完后，新建一个文件，代码如下，用了最新的css语法。

/* custom properties */
:root {
--fontSize: 1rem;
--mainColor: #12345678;
--highlightColor: hwb(190, 35%, 20%);
}

/* custom media queries */
@custom-media --viewport-medium (width <= 50rem);

/* some var() & calc() */
body {
color: var(--mainColor);

font-size: var(--fontSize);
line-height: calc(var(--fontSize) * 1.5);
padding: calc((var(--fontSize) / 2) + 1px);
}

/* custom media query usage */
@media (--viewport-medium) {
body { font-size: calc(var(--fontSize) * 1.2); }
}

/* custom selectors */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading { margin-top: 0 }

/* colors stuff */
a {
color: var(--highlightColor);
transition: color 1s; /* autoprefixed ! */
}
a:hover { color: gray(255, 50%) }
a:active { color: rebeccapurple }
a:any-link { color: color(var(--highlightColor) blackness(+20%)) }

/* font stuff */
h2 {
font-variant-caps: small-caps;
}

table {
font-variant-numeric: lining-nums;
}

/* filters */
.blur {
filter: blur(4px);
}
.sepia {
filter: sepia(.8);
}

然后按cmd+shift+p输入cssnext，代码就会编译成浏览器兼容的版本。

/* custom properties */

/* custom media queries */

/* some var() & calc() */
body {
color: #123456;
color: rgba(18, 52, 86, 0.47059);

font-size: 16px;
font-size: 1rem;
line-height: 24px;
line-height: 1.5rem;
padding: -webkit-calc(0.5rem + 1px);
padding: calc(0.5rem + 1px);
}

/* custom media query usage */
@media (max-width: 50rem) {
body { font-size: 1.2rem; }
}

/* custom selectors */
h1,
h2,
h3,
h4,
h5,
h6 { margin-top: 0 }

/* colors stuff */
a {
color: rgb(89, 185, 204);
-webkit-transition: color 1s;
        transition: color 1s; /* autoprefixed ! */
}
a:hover { color: #FFFFFF; color: rgba(255, 255, 255, 0.5) }
a:active { color: rgb(102, 51, 153) }
a:link,a:visited { color: rgb(89, 142, 153) }

/* font stuff */
h2 {
-webkit-font-feature-settings: "c2sc";
   -moz-font-feature-settings: "c2sc";
        font-feature-settings: "c2sc";
font-variant-caps: small-caps;
}

table {
-webkit-font-feature-settings: "lnum";
   -moz-font-feature-settings: "lnum";
        font-feature-settings: "lnum";
font-variant-numeric: lining-nums;
}

/* filters */
.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);
}
.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.5144 0.6152000000000001 0.1512 0 0 0.2792 0.7488 0.13440000000000002 0 0 0.21760000000000002 0.4272 0.30479999999999996 0 0 0 0 0 1 0" /></filter></svg>#filter');
-webkit-filter: sepia(.8);
        filter: sepia(.8);
}

这个插件适用于不想搭建环境，或者直接转换cssnext代码。如果是想保留源文件，建议搭建自动化的环境。