forked from Raathigesh/fabulous
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added support for HTML and other variants
Added support for HTML files if the style tag is withing a head tag Added support for vue and svelt files if the style tag is in the root directory refactored some typescript code added check so that only angular components activate the plugin instead of all typescript files updated readme to include the changes, as well as the TS changes Note: parse5 was an added dependency for parsing HTML and providing source location information resolves Raathigesh#14 resolves Raathigesh#10 work towards Raathigesh#20
- Loading branch information
Showing
10 changed files
with
252 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import * as parse5 from "parse5"; | ||
| import { EditableBlock, FileHandler, StyleExpressions } from "./types"; | ||
| import { | ||
| getDeclarations, | ||
| getNodeSourceWithLocationOffset, | ||
| getRules, | ||
| removeProperty, | ||
| updateProperty | ||
| } from "./utils"; | ||
| import console = require("console"); | ||
|
|
||
| /** | ||
| * Parse a document for style tags | ||
| * | ||
| * The only two locations that tags are parsed: | ||
| * - At the root of the document, such as Vue SFC | ||
| * - A style tag within the <head> of a document | ||
| * Any other location will be ignored to ensure that the entire tree does not need to be walked | ||
| * @param document | ||
| */ | ||
| export function getStyleTags( | ||
| document: parse5.DocumentFragment | ||
| ): StyleExpressions[] { | ||
| let results: StyleExpressions[] = []; | ||
| try { | ||
| // Get any root level style tags | ||
| let styleNodes: parse5.DefaultTreeTextNode[] = (document as any).childNodes | ||
| .filter((node: parse5.DefaultTreeNode) => node.nodeName === "style") | ||
| .map((styleNode: any) => styleNode.childNodes[0]); | ||
|
|
||
| try { | ||
| // Get any <style> tags that are within a <head> tag | ||
| if ( | ||
| (document as any).childNodes[0].nodeName === "html" && | ||
| (document as any).childNodes[0].childNodes[0].nodeName === "head" | ||
| ) { | ||
| styleNodes = styleNodes.concat( | ||
| (document as any).childNodes[0].childNodes[0].childNodes | ||
| .filter((node: parse5.DefaultTreeNode) => node.nodeName === "style") | ||
| .map((styleNode: any) => styleNode.childNodes[0]) | ||
| ); | ||
| } | ||
| } catch (ex) { | ||
| // TODO: handle errors in some way (maybe just log to output so the user knows we had an error) | ||
| console.log("Error parsing file", ex); | ||
| } | ||
|
|
||
| // Convert format to StyleExpression | ||
| results = styleNodes.map(node => { | ||
| const loc = node.sourceCodeLocation as parse5.Location; | ||
| return { | ||
| name: node.nodeName, | ||
| cssString: node.value, | ||
| location: { | ||
| input: null as any, | ||
| start: { | ||
| column: loc.startCol, | ||
| line: loc.startLine - 1 | ||
| }, | ||
| end: { | ||
| column: loc.endCol, | ||
| line: loc.endLine - 1 | ||
| } | ||
| } | ||
| } as StyleExpressions; | ||
| }); | ||
| } catch (ex) { | ||
| // TODO: handle errors in some way (maybe just log to output so the user knows we had an error) | ||
| console.log("Error parsing file", ex); | ||
| } | ||
| return results; | ||
| } | ||
|
|
||
| export function getEditableBlocks(content: string) { | ||
| // Parse HTML document as a fragment to ensure extra tags are not added by parse5 | ||
| const document: parse5.DocumentFragment = parse5.parseFragment(content, { | ||
| sourceCodeLocationInfo: true | ||
| }) as parse5.DefaultTreeDocument; | ||
| // Search document for style tags | ||
| const styledBlocks = getStyleTags(document); | ||
|
|
||
| const results: EditableBlock[] = []; | ||
|
|
||
| // parse the CSS from each style tag and add to EditableBlock[] | ||
| styledBlocks.forEach(({ cssString, location }) => { | ||
| getRules(cssString).forEach(rule => { | ||
| const declarations = getDeclarations(rule); | ||
| results.push({ | ||
| selector: rule.selector, | ||
| declarations, | ||
| source: getNodeSourceWithLocationOffset(location, rule), | ||
| rule | ||
| }); | ||
| }); | ||
| }); | ||
| return results; | ||
| } | ||
|
|
||
| const HtmlInspector: FileHandler = { | ||
| getEditableBlocks(fileContent: string, languageId?: string) { | ||
| return getEditableBlocks(fileContent); | ||
| }, | ||
| updateProperty(activeBlock: EditableBlock, prop: string, value: string) { | ||
| return updateProperty(activeBlock.rule, prop, value); | ||
| }, | ||
| removeProperty(activeBlock: EditableBlock, prop: string) { | ||
| return removeProperty(activeBlock.rule, prop); | ||
| } | ||
| }; | ||
| export default HtmlInspector; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.