Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
xxadev
vscode
提交
76392ae9
V
vscode
项目概览
xxadev
/
vscode
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vscode
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
76392ae9
编写于
7月 24, 2017
作者:
R
Ramya Achutha Rao
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Emmet Reflect CSS Value in html files
上级
5db74cd3
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
58 addition
and
15 deletion
+58
-15
extensions/emmet/src/reflectCssValue.ts
extensions/emmet/src/reflectCssValue.ts
+4
-11
extensions/emmet/src/test/reflectCssValue.test.ts
extensions/emmet/src/test/reflectCssValue.test.ts
+28
-4
extensions/emmet/src/util.ts
extensions/emmet/src/util.ts
+26
-0
未找到文件。
extensions/emmet/src/reflectCssValue.ts
浏览文件 @
76392ae9
...
...
@@ -4,8 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import
{
Range
,
window
,
TextEditor
}
from
'
vscode
'
;
import
{
isStyleSheet
}
from
'
vscode-emmet-helper
'
;
import
{
parse
,
getNode
,
getCssProperty
}
from
'
./util
'
;
import
{
getCssProperty
,
getCssPropertyNode
}
from
'
./util
'
;
import
{
Property
,
Rule
}
from
'
EmmetNode
'
;
const
vendorPrefixes
=
[
'
-webkit-
'
,
'
-moz-
'
,
'
-ms-
'
,
'
-o-
'
,
''
];
...
...
@@ -17,18 +16,12 @@ export function reflectCssValue() {
return
;
}
if
(
!
isStyleSheet
(
editor
.
document
.
languageId
))
{
let
node
=
getCssPropertyNode
(
editor
,
editor
.
selection
.
active
);
if
(
!
node
)
{
return
;
}
const
rootNode
=
parse
(
editor
.
document
);
const
node
=
getNode
(
rootNode
,
editor
.
selection
.
active
,
true
);
if
(
!
node
||
node
.
type
!==
'
property
'
)
{
return
;
}
return
updateCSSNode
(
editor
,
<
Property
>
node
);
return
updateCSSNode
(
editor
,
node
);
}
function
updateCSSNode
(
editor
:
TextEditor
,
property
:
Property
)
{
...
...
extensions/emmet/src/test/reflectCssValue.test.ts
浏览文件 @
76392ae9
...
...
@@ -10,7 +10,7 @@ import { withRandomFileEditor, closeAllEditors } from './testUtils';
suite
(
'
Tests for Emmet: Reflect CSS Value command
'
,
()
=>
{
teardown
(
closeAllEditors
);
const
contents
=
`
const
c
ssC
ontents
=
`
.header {
margin: 10px;
padding: 10px;
...
...
@@ -22,16 +22,40 @@ suite('Tests for Emmet: Reflect CSS Value command', () => {
}
`
;
test
(
'
reflectCssValue
'
,
function
():
any
{
const
htmlContents
=
`
<html>
<style>
.header {
margin: 10px;
padding: 10px;
transform: rotate(50deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
}
</style>
</html>
`
;
return
withRandomFileEditor
(
contents
,
'
.css
'
,
(
editor
,
doc
)
=>
{
test
(
'
Reflect Css Value in css file
'
,
function
():
any
{
return
withRandomFileEditor
(
cssContents
,
'
.css
'
,
(
editor
,
doc
)
=>
{
editor
.
selections
=
[
new
Selection
(
5
,
10
,
5
,
10
)];
return
commands
.
executeCommand
(
'
emmet.reflectCssValue
'
).
then
(()
=>
{
assert
.
equal
(
doc
.
getText
(),
contents
.
replace
(
/
\(
50deg
\)
/g
,
'
(20deg)
'
));
assert
.
equal
(
doc
.
getText
(),
c
ssC
ontents
.
replace
(
/
\(
50deg
\)
/g
,
'
(20deg)
'
));
return
Promise
.
resolve
();
});
});
});
test
(
'
Reflect Css Value in html file
'
,
function
():
any
{
return
withRandomFileEditor
(
htmlContents
,
'
.html
'
,
(
editor
,
doc
)
=>
{
editor
.
selections
=
[
new
Selection
(
7
,
20
,
7
,
20
)];
return
commands
.
executeCommand
(
'
emmet.reflectCssValue
'
).
then
(()
=>
{
assert
.
equal
(
doc
.
getText
(),
htmlContents
.
replace
(
/
\(
50deg
\)
/g
,
'
(20deg)
'
));
return
Promise
.
resolve
();
});
});
});
});
\ No newline at end of file
extensions/emmet/src/util.ts
浏览文件 @
76392ae9
...
...
@@ -286,3 +286,29 @@ export function iterateCSSToken(token: CssToken, fn) {
export
function
getCssProperty
(
rule
,
name
):
Property
{
return
rule
.
children
.
find
(
node
=>
node
.
type
===
'
property
'
&&
node
.
name
===
name
);
}
/**
* Returns css property under caret in given editor or `null` if such node cannot
* be found
* @param {TextEditor} editor
* @return {Property}
*/
export
function
getCssPropertyNode
(
editor
:
vscode
.
TextEditor
,
position
:
vscode
.
Position
):
Property
{
const
rootNode
=
this
.
parse
(
editor
.
document
);
const
node
=
getNode
(
rootNode
,
position
);
if
(
isStyleSheet
(
editor
.
document
.
languageId
))
{
return
node
&&
node
.
type
===
'
property
'
?
<
Property
>
node
:
null
;
}
let
htmlNode
=
<
HtmlNode
>
node
;
if
(
htmlNode
&&
htmlNode
.
name
===
'
style
'
&&
htmlNode
.
open
.
end
.
isBefore
(
position
)
&&
htmlNode
.
close
.
start
.
isAfter
(
position
))
{
let
buffer
=
new
DocumentStreamReader
(
editor
.
document
,
htmlNode
.
start
,
new
vscode
.
Range
(
htmlNode
.
start
,
htmlNode
.
end
));
let
rootNode
=
parseStylesheet
(
buffer
);
const
node
=
getNode
(
rootNode
,
position
);
return
(
node
&&
node
.
type
===
'
property
'
)
?
<
Property
>
node
:
null
;
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录