init

.gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+.AppleDouble
+.LSOverride
+.vscode
+
+# Thumbnails
+._*
+
+# Files that might appear on external disk
+.Spotlight-V100
+.Trashes
+
+node_modules
+*.vsix

.vscodeignore

@@ -0,0 +1,3 @@
+.vscode/**
+.gitignore
+

CHANGELOG.md

@@ -0,0 +1,7 @@
+# Change Log
+All notable changes to the "scss-to-css" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+- Initial release

README.md

@@ -0,0 +1,35 @@
+# scss-compiler
+> 可用于对scss文件进行简单的编译/压缩, 而不用安装各种前端工程化工具(webpack等)。
+
+## 出现的契机
+> 对于小项目来说, webpack等各种工程化工具, 实在过于重, 配置又繁琐。 而且还要安装一大堆模块。
+> 有时候,我们只想简单的使用scss带来的便捷而已。所以本着这个目的, 我自己写了一个Sublime的插件, 可以在scss文件保存的时候, 自动编译成css文件(存于当前目录)。
+
+
+## 兼容性
+> 理论上, 兼容Linux/MacOS/Windows, 不过我只在Linux下测试过, 其他的系统, 请自行测试,有什么问题, 可以提issue。
+
+## 依赖
+> 既然是scss编译的, 当然就依赖于scss模块。
+> scss模块, 可以使用js版的, 也可以使用ruby版的。
+
+```bash
+# 这是ruby版的, 可以使用 gem来安装
+sudo gem install sass
+
+sudo npm i -g postcss-cli
+# 安装完psotcss-cli后, 再去到postcss-cli的目录, 再安装 autoprefixer
+sudo npm i autoprefixer --save
+```
+
+
+## 插件安装
+> 目前只能通过下载方式, 复制到vscode的插件目录,进行安装使用。
+> 复制完之后,目录结构应该如下所示
+
+```
+ - ~/.vscode/
+   - extensions/
+     - scss-compiler/
+     - 其他插件等/
+```

index.js

@@ -0,0 +1,157 @@
+/**
+ *
+ * @author yutent<yutent@doui.cc>
+ * @date 2018/11/01 09:37:55
+ */
+
+'use strict'
+
+const vsc = require('vscode')
+const path = require('path')
+const cp = require('child_process')
+
+const scss = require('node-sass')
+const postcss = require('postcss')
+const autoprefixer = require('autoprefixer')
+
+const std = vsc.window.createOutputChannel('scss-to-css')
+std.out = function() {
+  std.appendLine(msg)
+}
+const log = function(...args) {
+  console.log.apply(console, args)
+}
+
+let compileOpts = {
+  compileOnSave: true,
+  autoPrefixer: true,
+  output: 'compressed',
+  sourcemap: false,
+  exclude: ''
+}
+
+const exec = function(arr, cb) {
+  let cmd = arr.join(' ')
+  return new Promise((yes, no) => {
+    cp.exec(cmd, (err, out) => {
+      if (err) {
+        no('err: ' + err)
+      } else {
+        yes(arr)
+      }
+    })
+  })
+}
+
+const Compiler = {
+  compile(doc) {
+    let origin = doc.fileName || ''
+    let target = origin.replace(/\.scss$/, '.')
+    let task = []
+    let postArgs = ['postcss', '--no-map', '-r', '-u', 'autoprefixer']
+
+    // 说明不是scss文件
+    if (origin === target) {
+      return
+    }
+
+    task = compileOpts.output.map(type => {
+      let cmd = ['scss', '-C', '-t', type]
+      let ext = 'css'
+
+      if (compileOpts.sourcemap) {
+        cmd.push('--sourcemap=auto')
+      } else {
+        cmd.push('--sourcemap=none')
+      }
+      switch (type) {
+        case 'compressed':
+          ext = 'min.' + ext
+          break
+        default:
+          ext = type.slice(0, 1) + '.' + ext
+      }
+
+      cmd.push(origin, target + ext)
+      return cmd
+    })
+
+    // 编译单一类型, 则去掉文件名微调
+    if (task.length === 1) {
+      task[0].pop()
+      task[0].push(target + 'css')
+    }
+
+    task = task.map(item => {
+      return exec(item)
+    })
+
+    Promise.all(task)
+      .then(list => {
+        if (compileOpts.autoPrefixer) {
+          let task2 = list.map(cmd => {
+            let arr = postArgs.concat()
+            arr.splice(1, 0, cmd.pop())
+            return exec(arr)
+          })
+
+          return Promise.all(task2)
+        } else {
+          return true
+        }
+      })
+      .catch(err => {
+        log(err)
+      })
+  },
+
+  /**
+   * 条件过滤
+   * 用于保存时编译的动作, 右键编译时, 不过滤这2项
+   */
+  filter(doc) {
+    log(doc)
+    // 未开启保存时编译
+    if (!compileOpts.compileOnSave) {
+      return
+    }
+
+    let origin = doc.fileName || ''
+
+    // var.scss文件默认不编译
+    if (/\/var\.scss$/.test(origin)) {
+      return
+    }
+
+    // 过滤不编译的文件
+    if (compileOpts.exclude) {
+      let exp = new RegExp(compileOpts.exclude, 'i')
+      if (exp.test(origin)) {
+        return
+      }
+    }
+
+    this.compile(doc)
+  }
+}
+
+function activate(ctx) {
+  // log('hello, the extend scss-compiler is running....')
+  let options = vsc.workspace.getConfiguration('ScssCompiler')
+  Object.assign(compileOpts, options)
+
+  compileOpts.output = compileOpts.output.split('|')
+
+  vsc.workspace.onDidSaveTextDocument(doc => {
+    Compiler.filter(doc)
+  })
+  // let cmd = vsc.commands.registerCommand('ScssCompiler.compile', function(r) {
+  //   log('----------------------------====================-----------------')
+  // })
+  // ctx.subscriptions.push(cmd)
+}
+
+function deactivate() {}
+
+exports.activate = activate
+exports.deactivate = deactivate

package.json

@@ -0,0 +1,65 @@
+{
+  "name": "scss-to-css",
+  "displayName": "scss-to-css",
+  "description": "最简单易用的SCSS编译器, 可自动编译scss文件及补全前缀",
+  "version": "1.0.0",
+  "publisher": "yutent",
+  "author": "Yutent [@yutent]",
+  "icon": "logo.png",
+  "engines": {
+    "vscode": "^1.28.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [
+    "*"
+  ],
+  "main": "./index",
+  "contributes": {
+    "context": [
+      {
+        "command": "ScssCompiler.compile",
+        "title": "Compile this scss file"
+      }
+    ],
+    "configuration": {
+      "type": "object",
+      "title": "scss-compiler 配置",
+      "properties": {
+        "ScssCompiler.compileOnSave": {
+          "type": "boolean",
+          "default": true,
+          "description": "保存后自动编译"
+        },
+        "ScssCompiler.autoPrefixer": {
+          "type": "boolean",
+          "default": true,
+          "description": "是否自动补全浏览器前缀(可以手动在项目目录添加 .browserslistrc)"
+        },
+        "ScssCompiler.output": {
+          "type": "string",
+          "default": "compressed",
+          "description": "css 文件输出方式. 使用 \"nested\", \"expanded\", \"compact\" or \"compressed\" .\n PS. 如果需要同时编译多种, 可用'|' 分隔, 如 compact | compressed \n 注: 如果编译多种,会自动微调文件名, 编译单个则不微调。"
+        },
+        "ScssCompiler.sourcemap": {
+          "type": "boolean",
+          "default": false,
+          "description": "是否生成sourcemap,默认否"
+        },
+        "ScssCompiler.exclude": {
+          "type": "string",
+          "default": "",
+          "description": "要忽略的文件的正则表达式(默认不编译var.scss文件)。"
+        }
+      }
+    }
+  },
+  "scripts": {
+    "postinstall": "node ./node_modules/vscode/bin/install"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "vscode": "^1.1.21"
+  }
+}