Skip to content

Commit

Permalink
feat: init
Browse files Browse the repository at this point in the history
  • Loading branch information
fyangstudio committed Oct 12, 2021
1 parent b23bcd7 commit 0daa708
Show file tree
Hide file tree
Showing 10 changed files with 131 additions and 27 deletions.
4 changes: 4 additions & 0 deletions extensions/style-helper/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Change Log

## 1.1.0
- feat: add `className={}` completion item
- feat: add `styles` completion item and auto import module style file

## 1.0.1
- feat: support *.less style.
- feat: upgrade [css](https://www.npmjs.com/package/css) fix `@media` parse failed.
Expand Down
5 changes: 5 additions & 0 deletions extensions/style-helper/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ Which supports:
* Go to definition
* Create JSX/TSX inline CSS styles
* Preview style and variable values
* Auto import CSS Modules file

## Demo

Expand All @@ -26,6 +27,10 @@ Automatic completion for inline style. You can also preview SASS variable value

![demo](https://img.alicdn.com/imgextra/i1/O1CN01eK13T81wvy0wwt2v5_!!6000000006371-1-tps-750-546.gif)

Automatic import for CSS Modules file.

![demo](https://img.alicdn.com/imgextra/i1/O1CN01vdcFLc1Uw8xTHUfLx_!!6000000002581-1-tps-1712-666.gif)

## Usage

Hover over the 'className' value, and the hover board displays the style declaration corresponding to the value.
Expand Down
5 changes: 5 additions & 0 deletions extensions/style-helper/README.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
* 跳转至样式和变量定义位置
* 创建 JSX/TSX 的行内样式
* 预览样式及变量内容
* 自动 import CSS Modules 文件

## 示例

Expand All @@ -26,6 +27,10 @@

![demo](https://img.alicdn.com/imgextra/i1/O1CN01eK13T81wvy0wwt2v5_!!6000000006371-1-tps-750-546.gif)

自动 import CSS Modules 文件。

![demo](https://img.alicdn.com/imgextra/i1/O1CN01vdcFLc1Uw8xTHUfLx_!!6000000002581-1-tps-1712-666.gif)

## 使用

预览:鼠标停留在 `className` 或 SASS 变量上,出现悬浮部件显示该值对应的样式声明
Expand Down
7 changes: 4 additions & 3 deletions extensions/style-helper/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"displayName": "React Style Helper",
"description": "Easily write styles(CSS/LESS/SASS).",
"publisher": "iceworks-team",
"version": "1.0.1",
"version": "1.1.0",
"engines": {
"vscode": "^1.41.0"
},
Expand All @@ -22,6 +22,7 @@
"Less",
"CSS",
"ClassName",
"CSS Modules",
"appworks"
],
"icon": "assets/logo.png",
Expand Down Expand Up @@ -71,10 +72,10 @@
"webpack-cli": "^3.3.12"
},
"dependencies": {
"@appworks/common-service": "^0.1.0",
"@appworks/recorder": "^1.0.1",
"@babel/parser": "^7.10.3",
"@babel/traverse": "^7.10.3",
"@appworks/common-service": "^0.1.0",
"@appworks/recorder": "^0.1.0",
"css": "^3.0.0",
"css-flatten": "^1.0.1",
"datauri": "^2.0.0",
Expand Down
2 changes: 2 additions & 0 deletions extensions/style-helper/src/extension.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Recorder, recordCompletionItemSelect } from '@appworks/recorder';
import { registerCommand, initExtension } from '@appworks/common-service';
import cssClassAutoCompete from './cssClassAutoCompete';
import inlineStyleAutoComplete from './inlineStyleAutoComplete';
import jsxVarStylesComplete from './jsxVarStylesComplete';
import styleInfoViewer from './styleInfoViewer';
import sassVariablesViewer from './sassVariablesViewer';

Expand All @@ -19,6 +20,7 @@ export function activate(context: vscode.ExtensionContext) {

cssClassAutoCompete(context);
inlineStyleAutoComplete(context);
jsxVarStylesComplete(context);
styleInfoViewer(context);
sassVariablesViewer(context);

Expand Down
23 changes: 23 additions & 0 deletions extensions/style-helper/src/getCompletionItem.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { CompletionItem, CompletionItemKind, MarkdownString, SnippetString, TextEdit } from 'vscode';

export default function getCompletionItem(
showText: string,
itemKind: string,
insertText?: string | SnippetString,
documentation?: string | MarkdownString,
additionalTextEdits?: TextEdit[],
): CompletionItem {
const completionItem = new CompletionItem(showText, CompletionItemKind[itemKind]);
if (insertText) {
completionItem.insertText = insertText;
}
if (documentation) {
completionItem.documentation = documentation;
}
if (additionalTextEdits) {
completionItem.additionalTextEdits = additionalTextEdits;
}
completionItem.detail = 'AppWorks';
completionItem.command = { command: 'style-helper.recordCompletionItemSelect', title: '' };
return completionItem;
}

This file was deleted.

11 changes: 5 additions & 6 deletions extensions/style-helper/src/inlineStyleAutoComplete/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as vscode from 'vscode';
import { recordCompletionItemProvider } from '@appworks/recorder';
import CSSData, { IProperty, IPropertyValue } from 'vscode-web-custom-data/data/browsers.css-data.json';
import { getFocusCodeInfo } from '../getFocusCodeInfo';
import getCompletionItem from './getCompletionItem';
import getCompletionItem from '../getCompletionItem';
import isEditStyleKey from './isEditStyleKey';

const CSS_PROPERTIES = {};
Expand Down Expand Up @@ -74,9 +74,9 @@ function provideCompletionItems(document: vscode.TextDocument, position: vscode.
completions.push(
getCompletionItem(
propertyName,
property.description,
`${CSS_DOCS_URL}/${property.name}`, // Docs
'Property',
`${propertyName}: `, // EXP position:
new vscode.MarkdownString(`**${property.description}** \n ${CSS_DOCS_URL}/${property.name}`), // Docs
),
);
}
Expand All @@ -94,10 +94,9 @@ function provideCompletionItems(document: vscode.TextDocument, position: vscode.
completions.push(
getCompletionItem(
value.name,
value.description || '',
`${CSS_DOCS_URL}/${property.name}#Values`, // Docs
`'${value.name}'${!isEndsWithComma(currentText) ? ',' : ''}`, // EXP 'relative',
'Value',
`'${value.name}'${!isEndsWithComma(currentText) ? ',' : ''}`, // EXP 'relative',
new vscode.MarkdownString(`**${value.description || ''}** \n ${CSS_DOCS_URL}/${property.name}#Values`), // Docs
),
);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import * as path from 'path';

export default (fileName: string): string => {
if (['.js', '.ts', '.jsx', '.tsx'].includes(path.extname(fileName))) {
return path.basename(fileName, path.extname(fileName));
} else {
return fileName;
}
};
74 changes: 74 additions & 0 deletions extensions/style-helper/src/jsxVarStylesComplete/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import * as fs from 'fs';
import * as vscode from 'vscode';
import * as babelParser from '@babel/parser';
import getCompletionItem from '../getCompletionItem';
import { getFocusCodeInfo } from '../getFocusCodeInfo';
import getFilenameWithoutExtname from './getFilenameWithoutExtname';

function getImportDeclarations(tree) {
const { body } = tree.program;
return body.filter((node) => node.type === 'ImportDeclaration');
}

function provideCompletionItems(document: vscode.TextDocument, position: vscode.Position): vscode.CompletionItem[] {
const editorText = document.getText();
const { Position, TextEdit } = vscode;
const { directory, fileName } = getFocusCodeInfo(document, position);

const completions: vscode.CompletionItem[] = [];

// className={}
completions.push(getCompletionItem('className={}', 'Text'));

// if already use style or has import css file, ignore
if (
editorText.indexOf('style') !== -1 ||
/\.(less|css|scss)$/.test(editorText)
) {
return completions;
}

// add styles completion item and auto import
let newImport = '';
fs.readdirSync(directory).forEach((file) => {
if (new RegExp(`${getFilenameWithoutExtname(fileName)}.module.(less|css|scss)$`).test(file)) {
newImport = `import styles from './${file}';`;
}
});

if (newImport) {
const ast = babelParser.parse(editorText, {
// Support JSX and TS
plugins: ['typescript', 'jsx'],
sourceType: 'module',
});

let positionForNewImport = new Position(0, 0);
const importASTNodes = getImportDeclarations(ast);
const lastImportNode = importASTNodes[importASTNodes.length - 1];
if (lastImportNode) {
positionForNewImport = new Position(lastImportNode.loc.end.line, 0);
}

completions.push(
getCompletionItem(
'styles', 'Property', 'styles',
new vscode.MarkdownString(`**Auto import** \n ${newImport}`), // Docs
[TextEdit.insert(positionForNewImport, `${newImport}\n`)],
),
);
}
return completions;
}

export default function jsxVarStylesComplete(context: vscode.ExtensionContext): void {
context.subscriptions.push(
vscode.languages.registerCompletionItemProvider(
[
{ scheme: 'file', language: 'javascriptreact' },
{ scheme: 'file', language: 'typescriptreact' },
],
{ provideCompletionItems },
),
);
}

0 comments on commit 0daa708

Please sign in to comment.