vunguyentuan / vscode-css-variables Goto Github PK
View Code? Open in Web Editor NEWCSS variables autocomplete for vscode
Home Page: https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables
License: MIT License
CSS variables autocomplete for vscode
Home Page: https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables
License: MIT License
It'd be great if it would show the variable color preview for variables inside node_modules
Correct me if I'm wrong. This extension doesn't seem to work with modern color function notation which is supported by most modern browsers without a postcss polyfill.
Example: hsl(35deg 86% 67% / .5)
I then tried the same custom property written in the older hsl format, hsla(35, 86%, 67%, .5)
, and it worked, displaying a color preview while showing as an autocomplete option.
This proves the extension works but doesn't recognize colors formatted in the functional notation as illustrated above.
When it comes to the configuration, its quite easy but it takes wasted time. I would suggest to use the: Command Palette, which the user can activate on the shortcut: "CTRL + SHIFT + P", and than search there for: "CSS V.A Config" or whatever you will name it. After clicking on it, it should create the folder ".vscode" if it's missing, and the file "settings.json" if it's missing, with a written template sample, which everybody can configure however they want later. + Additional idea, after clicking the command from the palette, it would be nice the setting.json file to be opened in the editor.
With all my respect :).
Hello author 😁 @vunguyentuan ,
I'm currently learning the source code of your vscode extension, it's really well.
Howerver, I don't know how to debug it in vscode. I found that it uses turbopack
as its build tool, but it seems that turbo
has no args for generating sourcemap, so I can't debug it.
If I directly debug in source files, breakpoints doesn't work, like this:
So I want to learn from you the full progress of debugging vscode-css-varaiables
and css-variables-language-server
these two projects so that I can watch the variables when program running.
Thank you very much~~ I really gratitude and admire you!
I run my dev environment from a USB drive and recently began noticing the error below. I am not sure how to fix this and would like some help with this issue.
My current setup: MacBook M1, VSCode version 1.76.2, current release version of VSCode CSS Variables extension.
[Info - 12:49:16] Connection to server got closed. Server will restart.
node:internal/process/promises:279
triggerUncaughtException(err, true /* fromPromise */);
^
[Error: EPERM: operation not permitted, scandir '/Volumes/Root/.DocumentRevisions-V100'] {
errno: -1,
code: 'EPERM',
syscall: 'scandir',
path: '/Volumes/Root/.DocumentRevisions-V100'
}
[Error - 12:49:17] The CSS Variables Language Server server crashed 5 times in the last 3 minutes. The server will not be restarted. See the output for more information.
Hi @vunguyentuan,
Thank you for this extension in addition to your other extension vscode-postcss
.
The default settings are currently (V2.6.1):
{
...
// Configure glob patterns for excluding files and folders. The extension will not scan variables in these files and folders. Read more about glob patterns [here](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options).
"cssVariables.blacklistFolders": [
"**/.git",
"**/.svn",
"**/.hg",
"**/CVS",
"**/.DS_Store",
"**/.git",
"**/node_modules",
"**/bower_components",
"**/tmp",
"**/dist",
"**/tests"
],
// Configure glob patterns for including files and folders. Read more about glob patterns [here](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options).
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less"
],
// Traces the communication between VS Code and the language server.
"cssVariables.trace.server": "off",
...
}
I think those default are good.
I want to use Open-Props and luckily I see in your FAQ that all I have to do is to modify my settings.json
and add this:
{
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less",
"node_modules/open-props/open-props.min.css"
],
}
But it doesn't work on my end.
I found out that to fix that I have to modify cssVariables.blacklistFolders
as well in order to not skip the node_modules
folder entirely.
So now my settings.json
looks like this:
{
"cssVariables.blacklistFolders": [
"**/.git",
"**/.svn",
"**/.hg",
"**/CVS",
"**/.DS_Store",
"**/.git",
"**/bower_components",
"**/tmp",
"**/dist",
"**/tests"
],
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less",
"node_modules/open-props/open-props.min.css"
],
}
And now it works on my end.
But now the whole node_modules
is scanned for any .css|.scss|.sass|.less
files
and then the addition of "node_modules/open-props/open-props.min.css"
in cssVariables.lookupFiles
is not necessary anymore and it still work without.
I don't think it's good to not exclude most of the "node_modules" folder.
While we could be more selective in the lookupFiles option, I think it's better to leave it more general.
I personnally set all my settings in the user settings instead of in the .vscode folder of the workspace.
So general is what I am looking for.
Is it posible to make lookupFiles
"overwrite" blacklistFolders
in such a manner that if we have:
{
"cssVariables.blacklistFolders": [
"**/node_modules",
],
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less",
"**/node_modules/open-props/open-props.min.css"
],
}
The "node_modules" folder will be entirely skipped except for the files that match "**/node_modules/open-props/open-props.min.css" ?
I understand the issue here of how to have glob patterns to lookup while excluding folders...
Even if we could add a regex to the glob pattern like
"**/Regex(/node_modules\/(?!open-props\b).*/)"
that would exclude all node_modules subfolders except the open-props folder,
because of the general lookupFiles rule "**/*.css", the extension captures all the css files in this folder and it hurts the user experience as we include variables that we are not supposed to.
Example with Open-props, if we had import open-props.min.css only, we would not see all the "hsl" var such as "--blue-0-hsl".
Add a settings called lookupFilesOverwrite
(name can be change of course) that behave exactly like the current lookupFiles
but without the excluding rule of blacklistFolders
.
The pseudo-logic would then be:
lookupFilesOverwrite
.blacklistFolders
.lookupFiles
.The default settings lookupFiles
and blacklistFolders
stays the same and are general enough for most users.
The additional settings lookupFilesOverwrite
would be by default an empty list.
The user would need to add the external css package located in node_modules only in the lookupFilesOverwrite
list.
Example with Open-props, the general end user would need to add in the settings.json
file this:
{
"cssVariables.lookupFilesOverwrite": [
"**/node_modules/open-props/open-props.min.css"
],
}
The addition of one settings, which go against the idea of zero config I see you like.
(I would arg that with the addition of this setting, there would be less settings to actually set for the end users as we can see from the examples.)
That's it. what do you think of it ?
Again, thank you for this amazing extension.
I'm submitting a ...
Description:
When using with emmet, this extension will take precedence over the emmet's suggestion.
If I type br
for background-repeat
(emmet suggestion), it will first list all css custom properties, meaning that if I press tab, I won't get background-repeat
but the first css custom property with the letters b and r (e.g. var(--breakpoint-2xl)).
It would be super nice to be able to define in the settings what will trigger the auto-complete.
You could define a string, let's say --
that would trigger the auto-complete and there would be no more conflict with emmet.
What do you think?
Looks like my variables.css
was recognized (autocomplete works), but I can't open it with Ctrl + Mouse Click combination.
I see this error:
'variables.css': Unable to resolve resource c:/project/src/styles/variables.css.
My OS is Windows, so maybe the issue caused by case sensitivity or slashes
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/pikeas/.vscode/extensions/vunguyentuan.vscode-css-variables-2.3.7/server/node_modules/culori/src/index.js from /Users/pikeas/.vscode/extensions/vunguyentuan.vscode-css-variables-2.3.7/server/out/server.js not supported.
Instead change the require of index.js in /Users/pikeas/.vscode/extensions/vunguyentuan.vscode-css-variables-2.3.7/server/out/server.js to a dynamic import() which is available in all CommonJS modules.
at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
at Object.<anonymous> (/Users/pikeas/.vscode/extensions/vunguyentuan.vscode-css-variables-2.3.7/server/out/server.js:31:29)
at Function.c._load (node:electron/js2c/asar_bundle:5:13343) {
code: 'ERR_REQUIRE_ESM'
}
[Error - 12:27:20 PM] Connection to server got closed. Server will not be restarted.
Basically there is a folder in my project dir on which the extension cannot have access to. Unfortunately the extension crashes because of that. IMO the extension should just ignore that folder and continue to work.
Hi,
I have an external npm package that provides collections of variables. How can I include them in the vscode extension?
Thank you.
Thanks for your awesome plugin. It really helpful when using css variables for color pattern.
In my project, I use nested css variable for using the defined base colors. It will be great if this plugin can support inline color for nested css variable.
:root {
--color1: red;
--color2: var(--color1);
--color3: var(--color2);
}
Would you mind considering cross-publishing vscode-css-variables to https://open-vsx.org/?
I do most of my development on https://www.gitpod.io/ and from within their VS Code I do not have access to the VS Code marketplace, only Open VSX.
You can find more information on how to publish your extension to Open VSX here: https://github.com/eclipse/openvsx/wiki/Publishing-Extensions.
Hi @vunguyentuan 👋 hope you are well :)
Would you consider adding a setting to disable the .js
/ .ts
autocomplete feature for projects that do not use CSS-in-JS?
Currently, in a project that does not use CSS-in-JS, the extension fills the autocomplete entries all over the place in JS, JSX, TS and TSX files with useless entries for CSS variables:
For example, adding a new setting called cssVariables.autocompleteInLanguages
, default values below:
{
"cssVariables.autocompleteInLanguages": [
"css",
"less",
"scss",
"postcss",
"javascript",
"javascriptreact",
"typescriptreact"
],
}
Or, if this is based on file extension instead of language in the file, a new setting called cssVariables.autocompleteInFiles
, default values:
{
"cssVariables.autocompleteInFiles": [
"*.css",
"*.scss",
"*.sass",
"*.less",
"*.js",
"*.jsx",
"*.ts",
"*.tsx"
]
}
Take a look on the video what I am struggling on a daily basis with this extension:
Two main problems here to observe:
var(
wrongly produces var()()
Additionally (not on the video) if you started typing full color name with dashes (without var
) and then selected something from the list then you will end with something like this: -var(--colorAccent)
which is not correct as well.
I am using your plugin in JSX / TSX code only.
I'm using yarn berry 3.3.0 version with css color token packages.
In this environment, there is no "node_modules/packages/style.css".
yarn berry install packages at ".yarn/cache/package-hash.zip/...".
How can I add css to cssVariables.lookupFiles?
The color preview is not rendered and only values are shown when variable is hovered.
VSCode version details.
Version: 1.80.0 (Universal)
Commit: 660393deaaa6d1996740ff4880f1bad43768c814
Date: 2023-07-04T13:39:33.766Z
Electron: 22.3.14
ElectronBuildId: 21893604
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Darwin arm64 22.5.0
Hi! I’ve noticed that if you start to type a css var, like var(-
and the extension starts working, once you select a variable to auto-complete, it’ll add two more hyphens, resulting in invalid css: var(---myVariable)
. Is it possible to detect this and simply add as many needed to have valid css? Thanks!
For example, if I type:
margin-bottom: var(
then double dash --
VSCode offer me available variables. And if I select one I see these result:
margin-bottom: var(----common-margin
and in case I type part of a variable:
margin-bottom: var(--common
then select a prompt:
margin-bottom: var(--common--common-margin
It is not working in *.styl file,but in *.vue with lang="stylus" is working. how to fix this problem ?
Thanks for the plugin, works great for CSS and preprocessor CSS.
It would be great to have access to CSS vars via autocomplete within .js and .ts files.
How feasible is this?
Hey again @vunguyentuan.
Sorry for bothering again, but I see great potential in your extension.
I got an issue regarding when trying to destructure an property from a JS object in Typescript.
As you can see in the gifs below, there's for sure no need to get css variables suggestions when destructuring an object.
Is this something you can fix so it's only in markup places?
Or even just allow users to select which files the suggestion should work in so I could choce scss/css alone.
Thanks!
Hi, thanks for your extension!
With v2.4.2, I found the following issue. In an .scss
file with:
:root {
// comment here
--some-variable: #ffffff;
--another-variable: #000000;
}
The presence of the comment causes the extension to stop suggesting those variables. v2.3.12 doesn't seem to have this problem.
I'm the author of Pollen, which is a library of CSS variables that has things like a --size-
scale. By default VS Code sorts these incorrectly, eg:
--size-1
--size-10
--size-2
It would be great to have a config option to turn this sorting off and instead use the order the variables are found/defined in.
I installed a plugin and it doesn't work.
I would like to know how to use this plugin in detail.
For example :
I created a CSS file and @import
another CSS file (containing variables) from a CDN. Is it possible to get auto completion for those vars
also.
@import 'https://www.somewebsite.com/variables.css'
Hello, this plugin is really useful for populating css vars in intellisense, but how do I prevent it autocompleting when I hit the space bar?
I basically want the intellisense content, but not autocomplete unless I hit enter and tell it to.
Currently it autocompletes often when I do not want it to, and there is no way to avoid this.
Thank you.
It seems like it should be possible to provide a waring in the editor if you try to use a variable that is not defined. This should definitely be optional with a setting though as it would not work in all situations, especially with runtime css injection.
Thanks
I am using a NPM package that has a bunch of CSS variables defined in react js. The variables get defined at run time so the tool can't parse them out and give me intellisense. Is there a way to point the tool at a documentation page that has the variables defined in it or a supporting file of some sort?
Usually I add the cdn link in the html of the project instead of using @import to help with performance, I tried adding the link in cssVariables.lookupFiles config but it doesn't seem to generate any suggessions for those. Is it a bug or not part of the extension yet?
I played around with the include/exclude settings a bunch and they aren't doing anything. I've also restarted vscode to try to make it work to no effect.
With these settings I would expect no autocompletion to happen
"cssVariables.lookupFiles": [],
"cssVariables.blacklistFolders": ["**/*.css"]
Hello, your extension is exactly what I needed, thank you very much for creating it.
I noticed that when I position my cursor over the variable in the css, it selects all or a good part of the code. This is probably not the proper behavior.
Here is a printout showing the problem.
Is there anything I can do to fix this, any settings?
By ignoring "**/node_modules"
location, this plugin can't search custom props within frameworks like Open-Props.
Choosing to ignore node_modules is smart for obvious reasons, but please allow for certain overrides to access specific packages within node_modules.
Hi @vunguyentuan.
You will save our lives with this plugin. 😁
But I'm getting a console error in Windows:
console.ts:137 [Extension Host] trigger buty {triggerKind: 0}triggerKind: 0__proto__: Object log.ts:197 ERR ENOENT: no such file or directory, open '\c%3A\Projetos\test\variables.css': Error: ENOENT: no such file or directory, open '\c%3A\Projetos\test\variables.css'
The settings.json is like this:
{ "cssVariables.lookupFiles": [ "variables.css" ] }
Could you help us?
I found this extension would provide auto-complete options of CSS variables in any text files. It's reasonable to use these CSS variable names when we want to set them programmatically in JavaScript, but var()
is not expected to be inserted. Is there any setting to disable var()
in auto completion? Or is it a bug to provide options of detected CSS variables when users are not editing CSS-like code?
[data-theme='light'] {
--app-bg-color: #fff
}
[data-theme='light'] {
--app-bg-color: #000
}
当页面引用 --app-bg-color是,显示的颜色不准确
Hey!
Super excited about the extension. This is really a missing feature.
When I trigger the suggestion I get this error in the console.
Any ideas on what's wrong?
"cssVariables.lookupFiles": [
"src/styles/base/colors.scss"
]
ERR <css input>:2:7: Unknown word: CssSyntaxError: <css input>:2:7: Unknown word
at Input.error (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/node_modules/postcss/lib/input.js:113:16)
at Parser.unknownWord (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/node_modules/postcss/lib/parser.js:518:22)
at Parser.decl (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/node_modules/postcss/lib/parser.js:201:16)
at Parser.other (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/node_modules/postcss/lib/parser.js:115:18)
at Parser.parse (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/node_modules/postcss/lib/parser.js:59:16)
at Function.parse (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/node_modules/postcss/lib/parse.js:11:12)
at /home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/out/extension.js:46:43
at Array.forEach (<anonymous>)
at Object.provideCompletionItems (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/out/extension.js:42:27)
at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:788:65
at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:52:1010
at new Promise (<anonymous>)
at Object.t.asPromise (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:52:982)
at H.provideCompletionItems (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:788:36)
at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:805:242
at q._withAdapter (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:796:10)
at q.$provideCompletionItems (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:805:220)
at m._doInvokeHandler (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:916:926)
at m._invokeHandler (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:916:618)
at m._receiveRequest (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:915:201)
at m._receiveOneMessage (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:914:6)
at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:912:136
at l.fire (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:46:801)
at v.fire (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:233:787)
at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:1118:104
at l.fire (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:46:801)
at v.fire (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:233:787)
at t.PersistentProtocol._receiveMessage (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:238:1004)
at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:235:927
at l.fire (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:46:801)
at p.acceptChunk (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:231:195)
at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:230:547
at Socket.t (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:240:822)
at Socket.emit (events.js:223:5)
at addChunk (_stream_readable.js:309:12)
at readableAddChunk (_stream_readable.js:290:11)
at Socket.Readable.push (_stream_readable.js:224:10)
at TCP.onStreamRead (internal/stream_base_commons.js:181:23)
One of the important feature of css-vars is ability to re-define value of existed css variable. Lets assume I need to rewrite --base-bg: #fff;
So when I type --
I'm expecting to see list of vars
button {
--base-bg: #fff;
background: var(--base-bg); /* intellisense suggests css-var here - it worksF */
}
.customButton {
--base-bg: #efefefe; /* when I type --b intellisense-list is empty; but expected the same behavior as above */
}
After I delete the variable declaration, it still appears on the list of variables. Only after reloading the page it gets the correct list.
It is mainly noticeable when I rename a variable, and both the old name and new one are shown.
Useful plugin, but more powerful that I currently need. Is there a way to limit the parsing so it only works on the currently open css file, or only those linked in the currently open html file?
I'm working on a project that uses Tailwind for styling and it defines most of its css variables in a tailwind.css
file which uses special tailwind-specific directives such as @apply
and @layer
. Currently the only way to get this extension to recognize the css variable declarations in that file is to remove those special directives. It would be great if this extension could be updated to detect variables even when they're nested inside these directives.
Would be good to have variables intellisense on svelte components.
There should be a place where we can add css variables that will be generated at runtime so that we can get auto complete for that variable name even if it's not in any css files.
I work with multi projects and expect only scan current workspace folder when editing file. Here is my vscode configuration, but it doesn't work
settings.json
"cssVariables.lookupFiles": [
"${workspaceFolder}/**/*.css",
"${workspaceFolder}/**/*.scss",
"${workspaceFolder}/**/*.sass",
"${workspaceFolder}/**/*.less"
]
vscode workspace
workspace
-- project1
---- index.css // expect only scan css files under project1
-- project2
-- ...
Hello! Could you please publish this extension to open-vsx.org ?
It would be great to have it available for vscodium.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.