diff --git a/README.md b/README.md index 25c9020..eb5557b 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ A Visual Studio Code extension that provides CSS class name completion for the H ## Library Specific Support * @apply in CSS, SASS and SCSS Files for [Tailwind CSS](https://tailwindcss.com) - +* [styled-jsx](https://github.com/zeit/styled-jsx/blob/master/readme.md#keeping-css-in-separate-files) ## Contributions You can request new features and/or contribute to the extension development on its [repository on GitHub](https://github.com/Zignd/HTML-CSS-Class-Completion/issues). Look for an issue you're interested in working on, comment on it to let me know you're working on it and submit your pull request! :D @@ -36,7 +36,7 @@ You can request new features and/or contribute to the extension development on i Check out the [change log](https://github.com/zignd/HTML-CSS-Class-Completion/blob/master/CHANGELOG.md) for the current and previous updates. ## Usage -If there are HTML files on your workspace, the extension automatically starts and looks for CSS class definitions. In case new CSS classes are defined or new CSS files are added to the workspace and you also want auto completion for them, simply hit the lightning icon on the status bar and execute the command by pressing `Ctrl+Shift+P`(`cmd+Shift+P` for Mac) and then typing "Cache CSS class definitions". +If there are HTML or JS files on your workspace, the extension automatically starts and looks for CSS class definitions. In case new CSS classes are defined or new CSS files are added to the workspace and you also want auto completion for them, simply hit the lightning icon on the status bar and execute the command by pressing `Ctrl+Shift+P`(`cmd+Shift+P` for Mac) and then typing "Cache CSS class definitions". ![](https://i.imgur.com/O7NjEUW.gif) ![](https://i.imgur.com/uyiXqMb.gif) diff --git a/src/parse-engines/parse-engine-registry.ts b/src/parse-engines/parse-engine-registry.ts index 3b043d2..635baa9 100644 --- a/src/parse-engines/parse-engine-registry.ts +++ b/src/parse-engines/parse-engine-registry.ts @@ -1,12 +1,14 @@ import ParseEngine from './common/parse-engine'; import CssParseEngine from './types/css-parse-engine'; import HtmlParseEngine from './types/html-parse-engine'; +import JsParseEngine from './types/js-parse-engine'; class ParseEngineRegistry { private static _supportedLanguagesIds: string[]; private static _registry: ParseEngine[] = [ new CssParseEngine(), - new HtmlParseEngine() + new HtmlParseEngine(), + new JsParseEngine() ]; public static get supportedLanguagesIds(): string[] { diff --git a/src/parse-engines/types/js-parse-engine.ts b/src/parse-engines/types/js-parse-engine.ts new file mode 100644 index 0000000..e814830 --- /dev/null +++ b/src/parse-engines/types/js-parse-engine.ts @@ -0,0 +1,34 @@ +import * as css from 'css'; +import * as vscode from 'vscode'; +import CssClassDefinition from '../../common/css-class-definition'; +import ParseEngine from '../common/parse-engine'; +import SimpleTextDocument from '../common/simple-textdocument'; +import CssClassExtractor from '../common/css-class-extractor'; + +class JsParseEngine implements ParseEngine { + public languageId: string = 'js'; + public extension: string = 'js'; + + public async parse(textDocument: SimpleTextDocument): Promise { + let code: string = textDocument.getText(); + + const matchTemplateString: Array = code.match(/([^`]).([^`]+)/gmi); + let cssToParse: string = ''; + for (let i = 0; i < matchTemplateString.length; i++) { + if (matchTemplateString[i].endsWith('css')) { + cssToParse += matchTemplateString[i + 1] + ' '; + } + if (matchTemplateString[i].endsWith('