宇天
parent
ca6afc5cc8
commit
aea38548c7
|
|
@ -1,7 +1,7 @@
|
|||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
.vscode
|
||||
|
||||
|
||||
# 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)
|
||||
|
||||
## [3.0.0] 2019-08-05
|
||||
- 删除libsass, 改用`node-sass`(需要手动全局安装)
|
||||
|
||||
|
||||
## [2.1.0] 2019-06-10
|
||||
- 更新libsass到最新版
|
||||
- 增加异常信息输出
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
18
README_ZH.md
18
README_ZH.md
|
|
@ -14,19 +14,27 @@
|
|||
|
||||
## 出现的契机
|
||||
> 对于小项目来说, webpack等各种工程化工具, 实在过于重, 配置又繁琐。 而且还要安装一大堆模块。
|
||||
> 有时候,我们只想简单的使用scss带来的便捷而已。所以本着这个目的, 我自己写了一个vsc的插件, 可以在scss文件保存的时候, 自动编译成css文件(存于当前目录),并且自动补全浏览器前缀。
|
||||
> 有时候,我们只想简单的使用scss带来的便捷而已。所以本着这个目的, 我自己写了一个vsc的插件, 可以在scss文件保存的时候, 自动编译成css文件(默认存于当前目录),并且自动补全浏览器前缀。
|
||||
|
||||
## 易用性
|
||||
> 本插件只有4个配置选项,而且都是可选的。真正的开箱即用。
|
||||
>> - 是否保存后自动编译; 默认 `是`
|
||||
>> - 是否补全浏览器的前缀; 默认 `是`。 非常实用的一个选项, 在不需要的情况下可以关闭, 以加快编译速度。
|
||||
>> - 编译输出类型, 默认`压缩输出`。 可以自定义, 可以同时编译输出多种格式的文件。
|
||||
>> - 忽略正则。 这个也是非常实用的功能, 毕竟现在的公司前端项目, 都使用webpack等打包工具, 这时候就可以临时停用本插件; 现在呢还有个更加方便的方式, 就是把使用了webpack的项目的目录名配置到这里, 这样插件就会自动忽略这个目录下的scss文件编译了。
|
||||
>> - `compileOnSave`: 是否保存后自动编译; 默认 `是`
|
||||
>> - `autoPrefixer`: 是否补全浏览器的前缀; 默认 `是`。 非常实用的一个选项, 在不需要的情况下可以关闭, 以加快编译速度。
|
||||
>> - `output`: 编译输出类型, 默认`压缩输出`。 可以自定义, 可以同时编译输出多种格式的文件。
|
||||
>> - `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权限才可以安装。
|
||||
|
||||
|
||||
|
||||
## 安装
|
||||
> 直接在商店搜索安装即可。
|
||||
|
||||
|
|
|
|||
23
index.js
23
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) {
|
||||
return new Promise((resolve, reject) => {
|
||||
ScssLib(file, { style: ScssLib.Sass.style[style] }, res => {
|
||||
if (res && res.text) {
|
||||
resolve(res.text)
|
||||
function run(cmd) {
|
||||
return new Promise((yes, no) => {
|
||||
exec(cmd, (err, res) => {
|
||||
if (err) {
|
||||
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)
|
||||
|
|
|
|||
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",
|
||||
"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": {
|
||||
"test": "node ./node_modules/vscode/bin/test"
|
||||
},
|
||||
"scripts": {},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"vscode": "^1.1.21"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"dependencies": {
|
||||
"autoprefixer": "^9.3.1",
|
||||
"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