parent
ca6afc5cc8
commit
aea38548c7
|
@ -1,7 +1,7 @@
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.AppleDouble
|
.AppleDouble
|
||||||
.LSOverride
|
.LSOverride
|
||||||
.vscode
|
|
||||||
|
|
||||||
# Thumbnails
|
# Thumbnails
|
||||||
._*
|
._*
|
||||||
|
|
|
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -1,5 +1,9 @@
|
||||||
# 更新日志(Changed Logs)
|
# 更新日志(Changed Logs)
|
||||||
|
|
||||||
|
## [3.0.0] 2019-08-05
|
||||||
|
- 删除libsass, 改用`node-sass`(需要手动全局安装)
|
||||||
|
|
||||||
|
|
||||||
## [2.1.0] 2019-06-10
|
## [2.1.0] 2019-06-10
|
||||||
- 更新libsass到最新版
|
- 更新libsass到最新版
|
||||||
- 增加异常信息输出
|
- 增加异常信息输出
|
||||||
|
|
|
@ -29,6 +29,12 @@ Live demo:
|
||||||
## Issues
|
## Issues
|
||||||
> This extension work well on all os. If any problem please let me known [issue](https://github.com/yutent/scss-to-css/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
|
## Installation
|
||||||
> Search `scss-to-css` and install in the marketplace.
|
> Search `scss-to-css` and install in the marketplace.
|
||||||
|
|
||||||
|
|
18
README_ZH.md
18
README_ZH.md
|
@ -14,19 +14,27 @@
|
||||||
|
|
||||||
## 出现的契机
|
## 出现的契机
|
||||||
> 对于小项目来说, webpack等各种工程化工具, 实在过于重, 配置又繁琐。 而且还要安装一大堆模块。
|
> 对于小项目来说, webpack等各种工程化工具, 实在过于重, 配置又繁琐。 而且还要安装一大堆模块。
|
||||||
> 有时候,我们只想简单的使用scss带来的便捷而已。所以本着这个目的, 我自己写了一个vsc的插件, 可以在scss文件保存的时候, 自动编译成css文件(存于当前目录),并且自动补全浏览器前缀。
|
> 有时候,我们只想简单的使用scss带来的便捷而已。所以本着这个目的, 我自己写了一个vsc的插件, 可以在scss文件保存的时候, 自动编译成css文件(默认存于当前目录),并且自动补全浏览器前缀。
|
||||||
|
|
||||||
## 易用性
|
## 易用性
|
||||||
> 本插件只有4个配置选项,而且都是可选的。真正的开箱即用。
|
> 本插件只有4个配置选项,而且都是可选的。真正的开箱即用。
|
||||||
>> - 是否保存后自动编译; 默认 `是`
|
>> - `compileOnSave`: 是否保存后自动编译; 默认 `是`
|
||||||
>> - 是否补全浏览器的前缀; 默认 `是`。 非常实用的一个选项, 在不需要的情况下可以关闭, 以加快编译速度。
|
>> - `autoPrefixer`: 是否补全浏览器的前缀; 默认 `是`。 非常实用的一个选项, 在不需要的情况下可以关闭, 以加快编译速度。
|
||||||
>> - 编译输出类型, 默认`压缩输出`。 可以自定义, 可以同时编译输出多种格式的文件。
|
>> - `output`: 编译输出类型, 默认`压缩输出`。 可以自定义, 可以同时编译输出多种格式的文件。
|
||||||
>> - 忽略正则。 这个也是非常实用的功能, 毕竟现在的公司前端项目, 都使用webpack等打包工具, 这时候就可以临时停用本插件; 现在呢还有个更加方便的方式, 就是把使用了webpack的项目的目录名配置到这里, 这样插件就会自动忽略这个目录下的scss文件编译了。
|
>> - `exclude`: 忽略正则表达式。 这个也是非常实用的功能, 毕竟现在的公司前端项目, 都使用webpack等打包工具, 这时候就可以临时停用本插件; 现在呢还有个更加方便的方式, 就是把使用了webpack的项目的目录名配置到这里, 这样插件就会自动忽略这个目录下的scss文件编译了。
|
||||||
|
|
||||||
|
|
||||||
## 兼容性
|
## 兼容性
|
||||||
> 理论上, 兼容Linux/MacOS/Windows, 不过我只在Linux/MacOS下测试过, 用Windows的童鞋请自行测试,有什么问题, 可以提issue。
|
> 理论上, 兼容Linux/MacOS/Windows, 不过我只在Linux/MacOS下测试过, 用Windows的童鞋请自行测试,有什么问题, 可以提issue。
|
||||||
|
|
||||||
|
|
||||||
|
## 依赖
|
||||||
|
> 3.x之后, 弃用libsass,改为node-sass, 但由于vscode的限制, node-sass在拓展里使用全有问题, 所以需要手动全局安装。
|
||||||
|
|
||||||
|
- `node-sass`, 需要手动安装这个模块, 执行`npm i -g node-sass`, 在linux下, 可能需要root权限才可以安装。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 安装
|
## 安装
|
||||||
> 直接在商店搜索安装即可。
|
> 直接在商店搜索安装即可。
|
||||||
|
|
||||||
|
|
23
index.js
23
index.js
|
@ -9,8 +9,8 @@
|
||||||
const vsc = require('vscode')
|
const vsc = require('vscode')
|
||||||
const path = require('path')
|
const path = require('path')
|
||||||
|
|
||||||
|
const exec = require('child_process').exec
|
||||||
const fs = require('iofs')
|
const fs = require('iofs')
|
||||||
const ScssLib = require('./lib/index.js')
|
|
||||||
const postcss = require('postcss')
|
const postcss = require('postcss')
|
||||||
const autoprefixer = require('autoprefixer')
|
const autoprefixer = require('autoprefixer')
|
||||||
let prefixer
|
let prefixer
|
||||||
|
@ -21,18 +21,23 @@ std.out = function(msg) {
|
||||||
std.appendLine(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 {
|
} else {
|
||||||
reject(res && res.message)
|
yes(res)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const render = function(style, file) {
|
||||||
|
return run(`node-sass --output-style ${style} ${file}`)
|
||||||
|
}
|
||||||
|
|
||||||
let options = {
|
let options = {
|
||||||
compileOnSave: true,
|
compileOnSave: true,
|
||||||
autoPrefixer: true,
|
autoPrefixer: true,
|
||||||
|
@ -40,7 +45,7 @@ let options = {
|
||||||
exclude: ''
|
exclude: ''
|
||||||
}
|
}
|
||||||
|
|
||||||
const compileCss = (style, entry, output) => {
|
const compileScss = (style, entry, output) => {
|
||||||
if (options.outdir) {
|
if (options.outdir) {
|
||||||
let tmp = output.replace(options.workspace, '.')
|
let tmp = output.replace(options.workspace, '.')
|
||||||
output = path.join(options.outdir, tmp)
|
output = path.join(options.outdir, tmp)
|
||||||
|
@ -91,7 +96,7 @@ const Compiler = {
|
||||||
}
|
}
|
||||||
|
|
||||||
task = task.map(item => {
|
task = task.map(item => {
|
||||||
return compileCss(item.style, origin, item.output)
|
return compileScss(item.style, origin, item.output)
|
||||||
})
|
})
|
||||||
|
|
||||||
Promise.all(task)
|
Promise.all(task)
|
||||||
|
|
85
lib/index.js
85
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
|
|
825
lib/sass.lib.js
825
lib/sass.lib.js
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
|
@ -2,7 +2,7 @@
|
||||||
"name": "scss-to-css",
|
"name": "scss-to-css",
|
||||||
"displayName": "scss-to-css",
|
"displayName": "scss-to-css",
|
||||||
"description": "🔥 The easiest way to compile scss file to css. And autoprefixer at the same time.",
|
"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",
|
"publisher": "yutent",
|
||||||
"author": "Yutent [@yutent]",
|
"author": "Yutent [@yutent]",
|
||||||
"icon": "logo.png",
|
"icon": "logo.png",
|
||||||
|
@ -77,13 +77,9 @@
|
||||||
"autoprefixer",
|
"autoprefixer",
|
||||||
"yutent"
|
"yutent"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {},
|
||||||
"test": "node ./node_modules/vscode/bin/test"
|
|
||||||
},
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {},
|
||||||
"vscode": "^1.1.21"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"autoprefixer": "^9.3.1",
|
"autoprefixer": "^9.3.1",
|
||||||
"iofs": "^1.1.0",
|
"iofs": "^1.1.0",
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
ul{display:flex}ul li{flex:2;color:#fff}
|
|
|
@ -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
|
|
Loading…
Reference in New Issue