update to 3.0.0

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 .AppleDouble
 .LSOverride
-.vscode
+
 
 # Thumbnails
 ._*

.vscode/launch.json

@@ -0,0 +1,28 @@
+// A launch configuration that launches the extension inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"runtimeExecutable": "${execPath}",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			]
+		},
+		{
+			"name": "Extension Tests",
+			"type": "extensionHost",
+			"request": "launch",
+			"runtimeExecutable": "${execPath}",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}",
+				"--extensionTestsPath=${workspaceFolder}/test/suite/index"
+			]
+		}
+	]
+}

CHANGELOG.md

@@ -1,5 +1,9 @@
 # 更新日志(Changed Logs)
 
+## [3.0.0] 2019-08-05
+- 删除libsass, 改用`node-sass`(需要手动全局安装)
+
+
 ## [2.1.0] 2019-06-10
 - 更新libsass到最新版
 - 增加异常信息输出

README.md

@@ -29,6 +29,12 @@ Live demo:
 ## Issues
 > This extension work well on all os. If any problem please let me known [issue](https://github.com/yutent/scss-to-css/issues)
 
+
+## Dependencies
+> We use `node-sass` instead of `libsass`
+ - `node-sass`, You need to install this module manually. Maybe `root` is required on linux.
+
+
 ## Installation
 > Search `scss-to-css` and install in the marketplace.
 

README_ZH.md

@@ -14,19 +14,27 @@
 
 ## 出现的契机
 > 对于小项目来说, webpack等各种工程化工具, 实在过于重, 配置又繁琐。 而且还要安装一大堆模块。
-> 有时候,我们只想简单的使用scss带来的便捷而已。所以本着这个目的, 我自己写了一个vsc的插件, 可以在scss文件保存的时候, 自动编译成css文件(存于当前目录),并且自动补全浏览器前缀。
+> 有时候,我们只想简单的使用scss带来的便捷而已。所以本着这个目的, 我自己写了一个vsc的插件, 可以在scss文件保存的时候, 自动编译成css文件(默认存于当前目录),并且自动补全浏览器前缀。
 
 ## 易用性
 > 本插件只有4个配置选项,而且都是可选的。真正的开箱即用。
->> - 是否保存后自动编译; 默认 `是`
+>> - `compileOnSave`: 是否保存后自动编译; 默认 `是`
->> - 是否补全浏览器的前缀; 默认 `是`。 非常实用的一个选项, 在不需要的情况下可以关闭, 以加快编译速度。
+>> - `autoPrefixer`: 是否补全浏览器的前缀; 默认 `是`。 非常实用的一个选项, 在不需要的情况下可以关闭, 以加快编译速度。
->> - 编译输出类型, 默认`压缩输出`。 可以自定义, 可以同时编译输出多种格式的文件。
+>> - `output`: 编译输出类型, 默认`压缩输出`。 可以自定义, 可以同时编译输出多种格式的文件。
->> - 忽略正则。 这个也是非常实用的功能, 毕竟现在的公司前端项目, 都使用webpack等打包工具, 这时候就可以临时停用本插件; 现在呢还有个更加方便的方式, 就是把使用了webpack的项目的目录名配置到这里, 这样插件就会自动忽略这个目录下的scss文件编译了。
+>> - `exclude`: 忽略正则表达式。 这个也是非常实用的功能, 毕竟现在的公司前端项目, 都使用webpack等打包工具, 这时候就可以临时停用本插件; 现在呢还有个更加方便的方式, 就是把使用了webpack的项目的目录名配置到这里, 这样插件就会自动忽略这个目录下的scss文件编译了。
 
 
 ## 兼容性
 > 理论上, 兼容Linux/MacOS/Windows, 不过我只在Linux/MacOS下测试过, 用Windows的童鞋请自行测试,有什么问题, 可以提issue。
 
+
+## 依赖
+> 3.x之后, 弃用libsass,改为node-sass, 但由于vscode的限制, node-sass在拓展里使用全有问题, 所以需要手动全局安装。
+
+- `node-sass`, 需要手动安装这个模块, 执行`npm i -g node-sass`, 在linux下, 可能需要root权限才可以安装。
+
+
+
 ## 安装
 > 直接在商店搜索安装即可。
 

index.js

@@ -9,8 +9,8 @@
 const vsc = require('vscode')
 const path = require('path')
 
+const exec = require('child_process').exec
 const fs = require('iofs')
-const ScssLib = require('./lib/index.js')
 const postcss = require('postcss')
 const autoprefixer = require('autoprefixer')
 let prefixer
@@ -21,18 +21,23 @@ std.out = function(msg) {
   std.appendLine(msg)
 }
 
-const render = function(style, file) {
+function run(cmd) {
-  return new Promise((resolve, reject) => {
+  return new Promise((yes, no) => {
-    ScssLib(file, { style: ScssLib.Sass.style[style] }, res => {
+    exec(cmd, (err, res) => {
-      if (res && res.text) {
+      if (err) {
-        resolve(res.text)
+        std.out(err)
+        no(err)
       } else {
-        reject(res && res.message)
+        yes(res)
       }
     })
   })
 }
 
+const render = function(style, file) {
+  return run(`node-sass --output-style ${style} ${file}`)
+}
+
 let options = {
   compileOnSave: true,
   autoPrefixer: true,
@@ -40,7 +45,7 @@ let options = {
   exclude: ''
 }
 
-const compileCss = (style, entry, output) => {
+const compileScss = (style, entry, output) => {
   if (options.outdir) {
     let tmp = output.replace(options.workspace, '.')
     output = path.join(options.outdir, tmp)
@@ -91,7 +96,7 @@ const Compiler = {
     }
 
     task = task.map(item => {
-      return compileCss(item.style, origin, item.output)
+      return compileScss(item.style, origin, item.output)
     })
 
     Promise.all(task)

lib/index.js

@@ -1,85 +0,0 @@
-/*! sass.js - v0.10.13 (7209593) - built 2018-11-19
-  providing libsass 3.5.5 (39e30874)
-  via emscripten 1.38.18 (7a0e274)
- */
-var Sass = require('./sass.lib.js')
-var fs = require('fs')
-var path = require('path')
-
-function fileExists(path) {
-  var stat = fs.statSync(path)
-  return stat && stat.isFile()
-}
-
-function removeFileExtension(path) {
-  return path.slice(0, path.lastIndexOf('.'))
-}
-
-function importFileToSass(path, done) {
-  // any path must be relative to CWD to work in both environments (real FS, and emscripten FS)
-  var requestedPath = './' + path
-  // figure out the *actual* path of the file
-  var filesystemPath = Sass.findPathVariation(fileExists, requestedPath)
-  if (!filesystemPath) {
-    done({
-      error: 'File "' + requestedPath + '" not found'
-    })
-
-    return
-  }
-
-  // Make sure to omit the ".css" file extension when it was omitted in requestedPath.
-  // This allow raw css imports.
-  // see https://github.com/sass/libsass/pull/754
-  var isRawCss =
-    !requestedPath.endsWith('.css') && filesystemPath.endsWith('.css')
-  var targetPath = isRawCss
-    ? removeFileExtension(filesystemPath)
-    : filesystemPath
-
-  // write the file to emscripten FS so libsass internal FS handling
-  // can engage the scss/sass switch, which apparently does not happen
-  // for content provided through the importer callback directly
-  var content = fs.readFileSync(filesystemPath, { encoding: 'utf8' })
-  Sass.writeFile(filesystemPath, content, function() {
-    done({
-      path: targetPath
-    })
-  })
-}
-
-function importerCallback(request, done) {
-  importFileToSass(resolve(request), done)
-}
-
-function compileFile(path, options, callback) {
-  if (!callback) {
-    callback = options
-    options = {}
-  }
-
-  Sass.importer(importerCallback)
-  importFileToSass(path, function() {
-    Sass.compileFile(path, options, callback)
-  })
-}
-
-function resolve(request) {
-  // the request will not have the correct "resolved" path on Windows
-  // see https://github.com/medialize/sass.js/issues/69
-  // see https://github.com/medialize/sass.js/issues/86
-  return path
-    .normalize(
-      path.join(
-        // sass.js works in the "/sass/" directory, make that relative to CWD
-        path.dirname(request.previous.replace(/^\/sass\//, '')),
-        request.current
-      )
-    )
-    .replace(/\\/g, '/')
-}
-
-compileFile.importFileToSass = importFileToSass
-compileFile.Sass = Sass
-
-module.exports = compileFile

package.json

@@ -2,7 +2,7 @@
   "name": "scss-to-css",
   "displayName": "scss-to-css",
   "description": "🔥 The easiest way to compile scss file to css. And autoprefixer at the same time.",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "publisher": "yutent",
   "author": "Yutent [@yutent]",
   "icon": "logo.png",
@@ -77,13 +77,9 @@
     "autoprefixer",
     "yutent"
   ],
-  "scripts": {
+  "scripts": {},
-    "test": "node ./node_modules/vscode/bin/test"
-  },
   "license": "MIT",
-  "devDependencies": {
+  "devDependencies": {},
-    "vscode": "^1.1.21"
-  },
   "dependencies": {
     "autoprefixer": "^9.3.1",
     "iofs": "^1.1.0",

test/demo.css

@@ -1 +0,0 @@
-ul{display:flex}ul li{flex:2;color:#fff}

test/index.js

@@ -1,9 +0,0 @@
-const testRunner = require('vscode/lib/testrunner')
-
-testRunner.configure({
-  ui: 'tdd', // the TDD UI is being used in extension.test.ts (suite, test, etc.)
-  useColors: true, // colored output from test results
-  timeout: 10000
-})
-
-module.exports = testRunner