diff --git a/src/ast.ts b/src/ast.ts index 731de341..8726c387 100644 --- a/src/ast.ts +++ b/src/ast.ts @@ -73,6 +73,7 @@ export type SvelteNode = | SvelteShorthandAttribute | SvelteSpreadAttribute | SvelteDirective + | SvelteStyleDirective | SvelteSpecialDirective | SvelteDirectiveKey | SvelteSpecialDirectiveKey @@ -179,6 +180,7 @@ export interface SvelteStartTag extends BaseNode { | SvelteShorthandAttribute | SvelteSpreadAttribute | SvelteDirective + | SvelteStyleDirective | SvelteSpecialDirective )[] selfClosing: boolean @@ -263,6 +265,7 @@ interface BaseSvelteMustacheTag extends BaseNode { | SvelteAwaitCatchBlock | SvelteKeyBlock | SvelteAttribute + | SvelteStyleDirective } /** Node of mustache tag. e.g. `{...}``. Like JSXExpressionContainer */ export interface SvelteMustacheTagText extends BaseSvelteMustacheTag { @@ -506,7 +509,7 @@ export interface SvelteAttribute extends BaseNode { type: "SvelteAttribute" key: SvelteName boolean: boolean - value: (SvelteLiteral | (SvelteMustacheTag & { kind: "text" }))[] + value: (SvelteLiteral | SvelteMustacheTagText)[] parent: SvelteStartTag } /** Node of shorthand attribute. e.g. `` */ @@ -529,7 +532,6 @@ export type SvelteDirective = | SvelteAnimationDirective | SvelteBindingDirective | SvelteClassDirective - | SvelteStyleDirective | SvelteEventHandlerDirective | SvelteLetDirective | SvelteRefDirective @@ -538,7 +540,7 @@ export interface SvelteDirectiveKey extends BaseNode { type: "SvelteDirectiveKey" name: ESTree.Identifier | SvelteName modifiers: string[] - parent: SvelteDirective + parent: SvelteDirective | SvelteStyleDirective } interface BaseSvelteDirective extends BaseNode { @@ -563,10 +565,6 @@ export interface SvelteClassDirective extends BaseSvelteDirective { kind: "Class" expression: null | ESTree.Expression } -export interface SvelteStyleDirective extends BaseSvelteDirective { - kind: "Style" - expression: null | ESTree.Expression | SvelteLiteral -} export interface SvelteEventHandlerDirective extends BaseSvelteDirective { kind: "EventHandler" expression: null | ESTree.Expression @@ -585,6 +583,26 @@ export interface SvelteTransitionDirective extends BaseSvelteDirective { outro: boolean expression: null | ESTree.Expression } + +/** Node of style directive. e.g. `` */ +export type SvelteStyleDirective = + | SvelteStyleDirectiveShorthand + | SvelteStyleDirectiveLongform +interface BaseSvelteStyleDirective extends BaseNode { + type: "SvelteStyleDirective" + key: SvelteDirectiveKey + value: (SvelteLiteral | SvelteMustacheTagText)[] + parent: SvelteStartTag +} +export interface SvelteStyleDirectiveShorthand + extends BaseSvelteStyleDirective { + shorthand: true + value: [] +} +export interface SvelteStyleDirectiveLongform extends BaseSvelteStyleDirective { + shorthand: false + value: (SvelteLiteral | SvelteMustacheTagText)[] +} export interface SvelteSpecialDirectiveKey extends BaseNode { type: "SvelteSpecialDirectiveKey" parent: SvelteSpecialDirective diff --git a/src/parser/converts/attr.ts b/src/parser/converts/attr.ts index 68fb5516..99a185eb 100644 --- a/src/parser/converts/attr.ts +++ b/src/parser/converts/attr.ts @@ -13,6 +13,9 @@ import type { SvelteStartTag, SvelteName, SvelteStyleDirective, + SvelteMustacheTagText, + SvelteStyleDirectiveLongform, + SvelteStyleDirectiveShorthand, } from "../../ast" import type ESTree from "estree" import type { Context } from "../../context" @@ -33,6 +36,7 @@ export function* convertAttributes( | SvelteShorthandAttribute | SvelteSpreadAttribute | SvelteDirective + | SvelteStyleDirective > { for (const attr of attributes) { if (attr.type === "Attribute") { @@ -55,7 +59,7 @@ export function* convertAttributes( yield convertClassDirective(attr, parent, ctx) continue } - if (attr.type === "Style") { + if (attr.type === "StyleDirective") { yield convertStyleDirective(attr, parent, ctx) continue } @@ -75,6 +79,10 @@ export function* convertAttributes( yield convertLetDirective(attr, parent, ctx) continue } + if (attr.type === "Style") { + yield convertOldStyleDirective(attr, parent, ctx) + continue + } if (attr.type === "Ref") { throw new ParseError("Ref are not supported.", attr.start, ctx) } @@ -108,40 +116,60 @@ function convertAttribute( parent: attribute, ...ctx.getConvertLocation(keyRange), } + if (node.value === true) { // Boolean attribute attribute.boolean = true ctx.addToken("HTMLIdentifier", keyRange) return attribute } - for (let index = 0; index < node.value.length; index++) { - const v = node.value[index] - if (v.type === "AttributeShorthand") { - const key: ESTree.Identifier = { - ...attribute.key, - type: "Identifier", - } - const sAttr: SvelteShorthandAttribute = { - type: "SvelteShorthandAttribute", - key, - value: key, - parent, - loc: attribute.loc, - range: attribute.range, - } - ;(key as any).parent = sAttr - ctx.scriptLet.addExpression(key, sAttr, null, (es) => { - sAttr.value = es - }) - return sAttr + const shorthand = node.value.find((v) => v.type === "AttributeShorthand") + if (shorthand) { + const key: ESTree.Identifier = { + ...attribute.key, + type: "Identifier", + } + const sAttr: SvelteShorthandAttribute = { + type: "SvelteShorthandAttribute", + key, + value: key, + parent, + loc: attribute.loc, + range: attribute.range, } + ;(key as any).parent = sAttr + ctx.scriptLet.addExpression(key, sAttr, null, (es) => { + sAttr.value = es + }) + return sAttr + } + processAttributeValue( + node.value as (SvAST.Text | SvAST.MustacheTag)[], + attribute, + ctx, + ) + + // Not required for shorthands. Therefore, register the token here. + ctx.addToken("HTMLIdentifier", keyRange) + + return attribute +} + +/** Common process attribute value */ +function processAttributeValue( + nodeValue: (SvAST.Text | SvAST.MustacheTag)[], + attribute: SvelteAttribute | SvelteStyleDirectiveLongform, + ctx: Context, +) { + for (let index = 0; index < nodeValue.length; index++) { + const v = nodeValue[index] if (v.type === "Text") { if (v.start === v.end) { // Empty // https://github.com/sveltejs/svelte/pull/6539 continue } - const next = node.value[index + 1] + const next = nodeValue[index + 1] if (next && next.start < v.end) { // Maybe bug in Svelte can cause the completion index to shift. // console.log(ctx.getText(v), v.data) @@ -162,11 +190,6 @@ function convertAttribute( ctx, ) } - - // Not required for shorthands. Therefore, register the token here. - ctx.addToken("HTMLIdentifier", keyRange) - - return attribute } /** Convert for Spread */ @@ -291,31 +314,93 @@ function convertClassDirective( /** Convert for Style Directive */ function convertStyleDirective( + node: SvAST.StyleDirective, + parent: SvelteStyleDirective["parent"], + ctx: Context, +): SvelteStyleDirective { + const directive: SvelteStyleDirective = { + type: "SvelteStyleDirective", + key: null as any, + shorthand: false, + value: [], + parent, + ...ctx.getConvertLocation(node), + } + processDirectiveKey(node, directive, ctx) + + const keyName = directive.key.name as SvelteName + if (node.value === true) { + ;(directive as unknown as SvelteStyleDirectiveShorthand).shorthand = + true + ctx.scriptLet.addExpression( + keyName, + directive.key, + null, + (expression) => { + directive.key.name = expression as ESTree.Identifier + }, + ) + return directive + } + ctx.addToken("HTMLIdentifier", { + start: keyName.range[0], + end: keyName.range[1], + }) + + processAttributeValue(node.value, directive, ctx) + + return directive +} + +/** Convert for Style Directive for svelte v3.46.0 */ +function convertOldStyleDirective( node: SvAST.DirectiveForExpression, - parent: SvelteDirective["parent"], + parent: SvelteStyleDirective["parent"], ctx: Context, ): SvelteStyleDirective { const directive: SvelteStyleDirective = { - type: "SvelteDirective", - kind: "Style", + type: "SvelteStyleDirective", key: null as any, - expression: null, + shorthand: false, + value: [], parent, ...ctx.getConvertLocation(node), } + processDirectiveKey(node, directive, ctx) if (processStyleDirectiveValue(node, ctx)) { - processDirective(node, directive, ctx, (expression) => { - directive.expression = convertTemplateLiteralToLiteral( - expression, - directive, - ctx, + processDirectiveExpression(node, directive, ctx, (expression) => { + directive.value.push( + convertTemplateLiteralToLiteral(expression, directive, ctx), ) return [] }) } else { - processDirective(node, directive, ctx, (expression) => { - return ctx.scriptLet.addExpression(expression, directive) - }) + processDirectiveExpression( + node, + directive, + ctx, + (expression, shorthand) => { + ;(directive as any).shorthand = shorthand + return ctx.scriptLet.addExpression( + expression, + directive, + null, + (e) => { + const mustache: SvelteMustacheTagText = { + type: "SvelteMustacheTag", + kind: "text", + expression: e, + parent: directive, + ...ctx.getConvertLocation({ + start: ctx.code.lastIndexOf("{", e.range![0]), + end: ctx.code.indexOf("}", e.range![0]) + 1, + }), + } + directive.value.push(mustache) + }, + ) + }, + ) } return directive @@ -491,6 +576,21 @@ function processDirective< expression: SvelteName, ) => ScriptLetCallback[], ) { + processDirectiveKey(node, directive, ctx) + processDirectiveExpression( + node, + directive, + ctx, + processExpression, + processName, + ) +} + +/** Common process for directive key */ +function processDirectiveKey< + D extends SvAST.Directive | SvAST.StyleDirective, + S extends SvelteDirective | SvelteStyleDirective, +>(node: D, directive: S, ctx: Context) { const colonIndex = ctx.code.indexOf(":", directive.range[0]) ctx.addToken("HTMLIdentifier", { start: directive.range[0], @@ -531,26 +631,6 @@ function processDirective< keyEndIndex = nextEnd } - let isShorthandExpression = false - - if (node.expression) { - isShorthandExpression = - node.expression.type === "Identifier" && - node.expression.name === node.name && - getWithLoc(node.expression).start === nameRange.start - if ( - isShorthandExpression && - getWithLoc(node.expression).end !== nameRange.end - ) { - // The identifier location may be incorrect in some edge cases. - // e.g. bind:value="" - getWithLoc(node.expression).end = nameRange.end - } - processExpression(node.expression, isShorthandExpression).push((es) => { - directive.expression = es - }) - } - const key = (directive.key = { type: "SvelteDirectiveKey", name: null as any, @@ -566,13 +646,55 @@ function processDirective< parent: key, ...ctx.getConvertLocation(nameRange), } - if (!isShorthandExpression) { +} + +/** Common process for directive expression */ +function processDirectiveExpression< + D extends SvAST.Directive, + S extends SvelteDirective | SvelteStyleDirective, + E extends D["expression"], +>( + node: D & { expression: null | E }, + directive: S, + ctx: Context, + processExpression: ( + expression: E, + shorthand: boolean, + ) => ScriptLetCallback>[], + processName?: ( + expression: SvelteName, + ) => ScriptLetCallback[], +) { + const key = directive.key + const keyName = key.name as SvelteName + let shorthand = false + + if (node.expression) { + shorthand = + node.expression.type === "Identifier" && + node.expression.name === node.name && + getWithLoc(node.expression).start === keyName.range[0] + if (shorthand && getWithLoc(node.expression).end !== keyName.range[1]) { + // The identifier location may be incorrect in some edge cases. + // e.g. bind:value="" + getWithLoc(node.expression).end = keyName.range[1] + } + processExpression(node.expression, shorthand).push((es) => { + if (directive.type === "SvelteDirective") { + directive.expression = es + } + }) + } + if (!shorthand) { if (processName) { - processName(key.name).push((es) => { + processName(keyName).push((es) => { key.name = es }) } else { - ctx.addToken("HTMLIdentifier", nameRange) + ctx.addToken("HTMLIdentifier", { + start: keyName.range[0], + end: keyName.range[1], + }) } } } diff --git a/src/parser/converts/text.ts b/src/parser/converts/text.ts index fbeb372c..82674660 100644 --- a/src/parser/converts/text.ts +++ b/src/parser/converts/text.ts @@ -34,7 +34,7 @@ export function convertTextToLiteral( extractTextTokens(node, ctx) return text } -/** Convert for StyleDir's TemplateLiteral to Literal */ +/** Convert for Old StyleDir's TemplateLiteral to Literal for svelte v3.46.0 */ export function convertTemplateLiteralToLiteral( node: ESTree.TemplateLiteral, parent: SvelteLiteral["parent"], diff --git a/src/parser/svelte-ast-types.ts b/src/parser/svelte-ast-types.ts index 2946d925..06db0ad7 100644 --- a/src/parser/svelte-ast-types.ts +++ b/src/parser/svelte-ast-types.ts @@ -16,6 +16,7 @@ export declare type TemplateNode = | DebugTag | ConstTag | Directive + | StyleDirective | Element | InlineComponent | Window @@ -186,7 +187,11 @@ export interface AttributeShorthand extends BaseNode { type: "AttributeShorthand" expression: ESTree.Identifier } -export type AttributeOrDirective = Attribute | Spread | Directive +export type AttributeOrDirective = + | Attribute + | Spread + | Directive + | StyleDirective interface BaseDirective extends BaseNode { name: string @@ -198,7 +203,7 @@ export interface DirectiveForExpression extends BaseDirective { | "Animation" | "Binding" | "Class" - | "Style" + | "Style" // For Svelte 3.46.0 | "EventHandler" | "Ref" expression: null | ESTree.Expression @@ -213,6 +218,10 @@ export interface TransitionDirective extends BaseDirective { outro: boolean expression: null | ESTree.Expression } +export interface StyleDirective extends BaseDirective { + type: "StyleDirective" + value: (Text | MustacheTag)[] | true +} export type Directive = | DirectiveForExpression | TransitionDirective diff --git a/src/visitor-keys.ts b/src/visitor-keys.ts index c9664ad7..68dd951a 100644 --- a/src/visitor-keys.ts +++ b/src/visitor-keys.ts @@ -41,6 +41,7 @@ const svelteKeys: SvelteKeysType = { SvelteShorthandAttribute: ["key", "value"], SvelteSpreadAttribute: ["argument"], SvelteDirective: ["key", "expression"], + SvelteStyleDirective: ["key", "value"], SvelteSpecialDirective: ["key", "expression"], SvelteDirectiveKey: ["name"], SvelteSpecialDirectiveKey: [], diff --git a/tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/05.1-style-property/01-output.json b/tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/05.1-style-property/01-output.json index 854ae54f..e4ddacf2 100644 --- a/tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/05.1-style-property/01-output.json +++ b/tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/05.1-style-property/01-output.json @@ -26,8 +26,7 @@ "type": "SvelteStartTag", "attributes": [ { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { @@ -48,7 +47,6 @@ } } }, - "modifiers": [], "range": [ 5, 19 @@ -64,24 +62,45 @@ } } }, - "expression": { - "type": "Identifier", - "name": "value", - "range": [ - 21, - 26 - ], - "loc": { - "start": { - "line": 1, - "column": 21 + "shorthand": false, + "value": [ + { + "type": "SvelteMustacheTag", + "kind": "text", + "expression": { + "type": "Identifier", + "name": "value", + "range": [ + 21, + 26 + ], + "loc": { + "start": { + "line": 1, + "column": 21 + }, + "end": { + "line": 1, + "column": 26 + } + } }, - "end": { - "line": 1, - "column": 26 + "range": [ + 20, + 27 + ], + "loc": { + "start": { + "line": 1, + "column": 20 + }, + "end": { + "line": 1, + "column": 27 + } } } - }, + ], "range": [ 5, 27 @@ -174,8 +193,7 @@ "type": "SvelteStartTag", "attributes": [ { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { @@ -196,7 +214,6 @@ } } }, - "modifiers": [], "range": [ 36, 50 @@ -212,24 +229,27 @@ } } }, - "expression": { - "type": "SvelteLiteral", - "value": "value", - "range": [ - 52, - 57 - ], - "loc": { - "start": { - "line": 2, - "column": 21 - }, - "end": { - "line": 2, - "column": 26 + "shorthand": false, + "value": [ + { + "type": "SvelteLiteral", + "value": "value", + "range": [ + 52, + 57 + ], + "loc": { + "start": { + "line": 2, + "column": 21 + }, + "end": { + "line": 2, + "column": 26 + } } } - }, + ], "range": [ 36, 58 @@ -322,12 +342,11 @@ "type": "SvelteStartTag", "attributes": [ { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { - "type": "SvelteName", + "type": "Identifier", "name": "property", "range": [ 73, @@ -344,7 +363,6 @@ } } }, - "modifiers": [], "range": [ 67, 81 @@ -360,24 +378,8 @@ } } }, - "expression": { - "type": "Identifier", - "name": "property", - "range": [ - 73, - 81 - ], - "loc": { - "start": { - "line": 3, - "column": 11 - }, - "end": { - "line": 3, - "column": 19 - } - } - }, + "shorthand": true, + "value": [], "range": [ 67, 81 diff --git a/tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/05.1-style-property/02-output.json b/tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/05.1-style-property/02-output.json index 845d2bce..46dfe517 100644 --- a/tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/05.1-style-property/02-output.json +++ b/tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/05.1-style-property/02-output.json @@ -62,8 +62,7 @@ "type": "SvelteStartTag", "attributes": [ { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { @@ -84,7 +83,6 @@ } } }, - "modifiers": [], "range": [ 35, 46 @@ -100,24 +98,27 @@ } } }, - "expression": { - "type": "SvelteLiteral", - "value": "red", - "range": [ - 48, - 51 - ], - "loc": { - "start": { - "line": 2, - "column": 18 - }, - "end": { - "line": 2, - "column": 21 + "shorthand": false, + "value": [ + { + "type": "SvelteLiteral", + "value": "red", + "range": [ + 48, + 51 + ], + "loc": { + "start": { + "line": 2, + "column": 18 + }, + "end": { + "line": 2, + "column": 21 + } } } - }, + ], "range": [ 35, 52 @@ -448,8 +449,7 @@ "type": "SvelteStartTag", "attributes": [ { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { @@ -470,7 +470,6 @@ } } }, - "modifiers": [], "range": [ 135, 146 @@ -486,24 +485,45 @@ } } }, - "expression": { - "type": "Identifier", - "name": "myColor", - "range": [ - 148, - 155 - ], - "loc": { - "start": { - "line": 6, - "column": 18 + "shorthand": false, + "value": [ + { + "type": "SvelteMustacheTag", + "kind": "text", + "expression": { + "type": "Identifier", + "name": "myColor", + "range": [ + 148, + 155 + ], + "loc": { + "start": { + "line": 6, + "column": 18 + }, + "end": { + "line": 6, + "column": 25 + } + } }, - "end": { - "line": 6, - "column": 25 + "range": [ + 147, + 156 + ], + "loc": { + "start": { + "line": 6, + "column": 17 + }, + "end": { + "line": 6, + "column": 26 + } } } - }, + ], "range": [ 135, 156 @@ -667,12 +687,11 @@ "type": "SvelteStartTag", "attributes": [ { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { - "type": "SvelteName", + "type": "Identifier", "name": "color", "range": [ 241, @@ -689,7 +708,6 @@ } } }, - "modifiers": [], "range": [ 235, 246 @@ -705,24 +723,8 @@ } } }, - "expression": { - "type": "Identifier", - "name": "color", - "range": [ - 241, - 246 - ], - "loc": { - "start": { - "line": 9, - "column": 11 - }, - "end": { - "line": 9, - "column": 16 - } - } - }, + "shorthand": true, + "value": [], "range": [ 235, 246 @@ -886,12 +888,11 @@ "type": "SvelteStartTag", "attributes": [ { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { - "type": "SvelteName", + "type": "Identifier", "name": "color", "range": [ 310, @@ -908,7 +909,6 @@ } } }, - "modifiers": [], "range": [ 304, 315 @@ -924,24 +924,8 @@ } } }, - "expression": { - "type": "Identifier", - "name": "color", - "range": [ - 310, - 315 - ], - "loc": { - "start": { - "line": 12, - "column": 11 - }, - "end": { - "line": 12, - "column": 16 - } - } - }, + "shorthand": true, + "value": [], "range": [ 304, 315 @@ -958,8 +942,7 @@ } }, { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { @@ -980,7 +963,6 @@ } } }, - "modifiers": [], "range": [ 316, 327 @@ -996,24 +978,27 @@ } } }, - "expression": { - "type": "SvelteLiteral", - "value": "12rem", - "range": [ - 329, - 334 - ], - "loc": { - "start": { - "line": 12, - "column": 30 - }, - "end": { - "line": 12, - "column": 35 + "shorthand": false, + "value": [ + { + "type": "SvelteLiteral", + "value": "12rem", + "range": [ + 329, + 334 + ], + "loc": { + "start": { + "line": 12, + "column": 30 + }, + "end": { + "line": 12, + "column": 35 + } } } - }, + ], "range": [ 316, 335 @@ -1030,8 +1015,7 @@ } }, { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { @@ -1052,7 +1036,6 @@ } } }, - "modifiers": [], "range": [ 336, 358 @@ -1068,79 +1051,100 @@ } } }, - "expression": { - "type": "ConditionalExpression", - "alternate": { - "type": "Literal", - "raw": "\"white\"", - "value": "white", - "range": [ - 381, - 388 - ], - "loc": { - "start": { - "line": 12, - "column": 82 + "shorthand": false, + "value": [ + { + "type": "SvelteMustacheTag", + "kind": "text", + "expression": { + "type": "ConditionalExpression", + "alternate": { + "type": "Literal", + "raw": "\"white\"", + "value": "white", + "range": [ + 381, + 388 + ], + "loc": { + "start": { + "line": 12, + "column": 82 + }, + "end": { + "line": 12, + "column": 89 + } + } }, - "end": { - "line": 12, - "column": 89 - } - } - }, - "consequent": { - "type": "Literal", - "raw": "\"black\"", - "value": "black", - "range": [ - 371, - 378 - ], - "loc": { - "start": { - "line": 12, - "column": 72 + "consequent": { + "type": "Literal", + "raw": "\"black\"", + "value": "black", + "range": [ + 371, + 378 + ], + "loc": { + "start": { + "line": 12, + "column": 72 + }, + "end": { + "line": 12, + "column": 79 + } + } }, - "end": { - "line": 12, - "column": 79 + "test": { + "type": "Identifier", + "name": "darkMode", + "range": [ + 360, + 368 + ], + "loc": { + "start": { + "line": 12, + "column": 61 + }, + "end": { + "line": 12, + "column": 69 + } + } + }, + "range": [ + 360, + 388 + ], + "loc": { + "start": { + "line": 12, + "column": 61 + }, + "end": { + "line": 12, + "column": 89 + } } - } - }, - "test": { - "type": "Identifier", - "name": "darkMode", + }, "range": [ - 360, - 368 + 359, + 389 ], "loc": { "start": { "line": 12, - "column": 61 + "column": 60 }, "end": { "line": 12, - "column": 69 + "column": 90 } } - }, - "range": [ - 360, - 388 - ], - "loc": { - "start": { - "line": 12, - "column": 61 - }, - "end": { - "line": 12, - "column": 89 - } } - }, + ], "range": [ 336, 389 diff --git a/tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/05.1-style-property/03-output.json b/tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/05.1-style-property/03-output.json index 33a043c2..336eb384 100644 --- a/tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/05.1-style-property/03-output.json +++ b/tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/05.1-style-property/03-output.json @@ -82,8 +82,7 @@ } }, { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { @@ -104,7 +103,6 @@ } } }, - "modifiers": [], "range": [ 26, 37 @@ -120,24 +118,27 @@ } } }, - "expression": { - "type": "SvelteLiteral", - "value": "red", - "range": [ - 39, - 42 - ], - "loc": { - "start": { - "line": 1, - "column": 39 - }, - "end": { - "line": 1, - "column": 42 + "shorthand": false, + "value": [ + { + "type": "SvelteLiteral", + "value": "red", + "range": [ + 39, + 42 + ], + "loc": { + "start": { + "line": 1, + "column": 39 + }, + "end": { + "line": 1, + "column": 42 + } } } - }, + ], "range": [ 26, 43 diff --git a/tests/fixtures/parser/ast/style-directive01-output.json b/tests/fixtures/parser/ast/style-directive01-output.json index 37042437..6ce30f30 100644 --- a/tests/fixtures/parser/ast/style-directive01-output.json +++ b/tests/fixtures/parser/ast/style-directive01-output.json @@ -26,8 +26,7 @@ "type": "SvelteStartTag", "attributes": [ { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { @@ -48,7 +47,6 @@ } } }, - "modifiers": [], "range": [ 5, 19 @@ -64,24 +62,27 @@ } } }, - "expression": { - "type": "SvelteLiteral", - "value": "value", - "range": [ - 21, - 26 - ], - "loc": { - "start": { - "line": 1, - "column": 21 - }, - "end": { - "line": 1, - "column": 26 + "shorthand": false, + "value": [ + { + "type": "SvelteLiteral", + "value": "value", + "range": [ + 21, + 26 + ], + "loc": { + "start": { + "line": 1, + "column": 21 + }, + "end": { + "line": 1, + "column": 26 + } } } - }, + ], "range": [ 5, 27 @@ -174,8 +175,7 @@ "type": "SvelteStartTag", "attributes": [ { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { @@ -196,7 +196,6 @@ } } }, - "modifiers": [], "range": [ 36, 50 @@ -212,24 +211,27 @@ } } }, - "expression": { - "type": "SvelteLiteral", - "value": "value", - "range": [ - 52, - 57 - ], - "loc": { - "start": { - "line": 2, - "column": 21 - }, - "end": { - "line": 2, - "column": 26 + "shorthand": false, + "value": [ + { + "type": "SvelteLiteral", + "value": "value", + "range": [ + 52, + 57 + ], + "loc": { + "start": { + "line": 2, + "column": 21 + }, + "end": { + "line": 2, + "column": 26 + } } } - }, + ], "range": [ 36, 58 @@ -322,8 +324,7 @@ "type": "SvelteStartTag", "attributes": [ { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { @@ -344,7 +345,6 @@ } } }, - "modifiers": [], "range": [ 67, 81 @@ -360,24 +360,27 @@ } } }, - "expression": { - "type": "SvelteLiteral", - "value": "value", - "range": [ - 82, - 87 - ], - "loc": { - "start": { - "line": 3, - "column": 20 - }, - "end": { - "line": 3, - "column": 25 + "shorthand": false, + "value": [ + { + "type": "SvelteLiteral", + "value": "value", + "range": [ + 82, + 87 + ], + "loc": { + "start": { + "line": 3, + "column": 20 + }, + "end": { + "line": 3, + "column": 25 + } } } - }, + ], "range": [ 67, 87 @@ -470,8 +473,7 @@ "type": "SvelteStartTag", "attributes": [ { - "type": "SvelteDirective", - "kind": "Style", + "type": "SvelteStyleDirective", "key": { "type": "SvelteDirectiveKey", "name": { @@ -492,7 +494,6 @@ } } }, - "modifiers": [], "range": [ 96, 107 @@ -508,24 +509,27 @@ } } }, - "expression": { - "type": "SvelteLiteral", - "value": "red", - "range": [ - 109, - 127 - ], - "loc": { - "start": { - "line": 4, - "column": 18 - }, - "end": { - "line": 4, - "column": 36 + "shorthand": false, + "value": [ + { + "type": "SvelteLiteral", + "value": "red", + "range": [ + 109, + 127 + ], + "loc": { + "start": { + "line": 4, + "column": 18 + }, + "end": { + "line": 4, + "column": 36 + } } } - }, + ], "range": [ 96, 128 diff --git a/tests/fixtures/parser/ast/style-directive02-input.svelte b/tests/fixtures/parser/ast/style-directive02-input.svelte new file mode 100644 index 00000000..5ef6cdd0 --- /dev/null +++ b/tests/fixtures/parser/ast/style-directive02-input.svelte @@ -0,0 +1,4 @@ +
+
+
+
diff --git a/tests/fixtures/parser/ast/style-directive02-no-undef-result.json b/tests/fixtures/parser/ast/style-directive02-no-undef-result.json new file mode 100644 index 00000000..5b532fba --- /dev/null +++ b/tests/fixtures/parser/ast/style-directive02-no-undef-result.json @@ -0,0 +1,26 @@ +[ + { + "ruleId": "no-undef", + "code": "variable", + "line": 1, + "column": 23 + }, + { + "ruleId": "no-undef", + "code": "variable", + "line": 2, + "column": 23 + }, + { + "ruleId": "no-undef", + "code": "variable", + "line": 3, + "column": 22 + }, + { + "ruleId": "no-undef", + "code": "literal", + "line": 4, + "column": 30 + } +] \ No newline at end of file diff --git a/tests/fixtures/parser/ast/style-directive02-output.json b/tests/fixtures/parser/ast/style-directive02-output.json new file mode 100644 index 00000000..219529ea --- /dev/null +++ b/tests/fixtures/parser/ast/style-directive02-output.json @@ -0,0 +1,2080 @@ +{ + "type": "Program", + "body": [ + { + "type": "SvelteElement", + "kind": "html", + "name": { + "type": "SvelteName", + "name": "div", + "range": [ + 1, + 4 + ], + "loc": { + "start": { + "line": 1, + "column": 1 + }, + "end": { + "line": 1, + "column": 4 + } + } + }, + "startTag": { + "type": "SvelteStartTag", + "attributes": [ + { + "type": "SvelteStyleDirective", + "key": { + "type": "SvelteDirectiveKey", + "name": { + "type": "SvelteName", + "name": "color", + "range": [ + 11, + 16 + ], + "loc": { + "start": { + "line": 1, + "column": 11 + }, + "end": { + "line": 1, + "column": 16 + } + } + }, + "range": [ + 5, + 16 + ], + "loc": { + "start": { + "line": 1, + "column": 5 + }, + "end": { + "line": 1, + "column": 16 + } + } + }, + "shorthand": false, + "value": [ + { + "type": "SvelteLiteral", + "value": "red", + "range": [ + 18, + 21 + ], + "loc": { + "start": { + "line": 1, + "column": 18 + }, + "end": { + "line": 1, + "column": 21 + } + } + }, + { + "type": "SvelteMustacheTag", + "kind": "text", + "expression": { + "type": "Identifier", + "name": "variable", + "range": [ + 22, + 30 + ], + "loc": { + "start": { + "line": 1, + "column": 22 + }, + "end": { + "line": 1, + "column": 30 + } + } + }, + "range": [ + 21, + 31 + ], + "loc": { + "start": { + "line": 1, + "column": 21 + }, + "end": { + "line": 1, + "column": 31 + } + } + } + ], + "range": [ + 5, + 32 + ], + "loc": { + "start": { + "line": 1, + "column": 5 + }, + "end": { + "line": 1, + "column": 32 + } + } + } + ], + "selfClosing": false, + "range": [ + 0, + 33 + ], + "loc": { + "start": { + "line": 1, + "column": 0 + }, + "end": { + "line": 1, + "column": 33 + } + } + }, + "children": [], + "endTag": { + "type": "SvelteEndTag", + "range": [ + 33, + 39 + ], + "loc": { + "start": { + "line": 1, + "column": 33 + }, + "end": { + "line": 1, + "column": 39 + } + } + }, + "range": [ + 0, + 39 + ], + "loc": { + "start": { + "line": 1, + "column": 0 + }, + "end": { + "line": 1, + "column": 39 + } + } + }, + { + "type": "SvelteText", + "value": "\n", + "range": [ + 39, + 40 + ], + "loc": { + "start": { + "line": 1, + "column": 39 + }, + "end": { + "line": 2, + "column": 0 + } + } + }, + { + "type": "SvelteElement", + "kind": "html", + "name": { + "type": "SvelteName", + "name": "div", + "range": [ + 41, + 44 + ], + "loc": { + "start": { + "line": 2, + "column": 1 + }, + "end": { + "line": 2, + "column": 4 + } + } + }, + "startTag": { + "type": "SvelteStartTag", + "attributes": [ + { + "type": "SvelteStyleDirective", + "key": { + "type": "SvelteDirectiveKey", + "name": { + "type": "SvelteName", + "name": "color", + "range": [ + 51, + 56 + ], + "loc": { + "start": { + "line": 2, + "column": 11 + }, + "end": { + "line": 2, + "column": 16 + } + } + }, + "range": [ + 45, + 56 + ], + "loc": { + "start": { + "line": 2, + "column": 5 + }, + "end": { + "line": 2, + "column": 16 + } + } + }, + "shorthand": false, + "value": [ + { + "type": "SvelteLiteral", + "value": "red", + "range": [ + 58, + 61 + ], + "loc": { + "start": { + "line": 2, + "column": 18 + }, + "end": { + "line": 2, + "column": 21 + } + } + }, + { + "type": "SvelteMustacheTag", + "kind": "text", + "expression": { + "type": "Identifier", + "name": "variable", + "range": [ + 62, + 70 + ], + "loc": { + "start": { + "line": 2, + "column": 22 + }, + "end": { + "line": 2, + "column": 30 + } + } + }, + "range": [ + 61, + 71 + ], + "loc": { + "start": { + "line": 2, + "column": 21 + }, + "end": { + "line": 2, + "column": 31 + } + } + } + ], + "range": [ + 45, + 72 + ], + "loc": { + "start": { + "line": 2, + "column": 5 + }, + "end": { + "line": 2, + "column": 32 + } + } + } + ], + "selfClosing": false, + "range": [ + 40, + 73 + ], + "loc": { + "start": { + "line": 2, + "column": 0 + }, + "end": { + "line": 2, + "column": 33 + } + } + }, + "children": [], + "endTag": { + "type": "SvelteEndTag", + "range": [ + 73, + 79 + ], + "loc": { + "start": { + "line": 2, + "column": 33 + }, + "end": { + "line": 2, + "column": 39 + } + } + }, + "range": [ + 40, + 79 + ], + "loc": { + "start": { + "line": 2, + "column": 0 + }, + "end": { + "line": 2, + "column": 39 + } + } + }, + { + "type": "SvelteText", + "value": "\n", + "range": [ + 79, + 80 + ], + "loc": { + "start": { + "line": 2, + "column": 39 + }, + "end": { + "line": 3, + "column": 0 + } + } + }, + { + "type": "SvelteElement", + "kind": "html", + "name": { + "type": "SvelteName", + "name": "div", + "range": [ + 81, + 84 + ], + "loc": { + "start": { + "line": 3, + "column": 1 + }, + "end": { + "line": 3, + "column": 4 + } + } + }, + "startTag": { + "type": "SvelteStartTag", + "attributes": [ + { + "type": "SvelteStyleDirective", + "key": { + "type": "SvelteDirectiveKey", + "name": { + "type": "SvelteName", + "name": "color", + "range": [ + 91, + 96 + ], + "loc": { + "start": { + "line": 3, + "column": 11 + }, + "end": { + "line": 3, + "column": 16 + } + } + }, + "range": [ + 85, + 96 + ], + "loc": { + "start": { + "line": 3, + "column": 5 + }, + "end": { + "line": 3, + "column": 16 + } + } + }, + "shorthand": false, + "value": [ + { + "type": "SvelteLiteral", + "value": "red", + "range": [ + 97, + 100 + ], + "loc": { + "start": { + "line": 3, + "column": 17 + }, + "end": { + "line": 3, + "column": 20 + } + } + }, + { + "type": "SvelteMustacheTag", + "kind": "text", + "expression": { + "type": "Identifier", + "name": "variable", + "range": [ + 101, + 109 + ], + "loc": { + "start": { + "line": 3, + "column": 21 + }, + "end": { + "line": 3, + "column": 29 + } + } + }, + "range": [ + 100, + 110 + ], + "loc": { + "start": { + "line": 3, + "column": 20 + }, + "end": { + "line": 3, + "column": 30 + } + } + } + ], + "range": [ + 85, + 110 + ], + "loc": { + "start": { + "line": 3, + "column": 5 + }, + "end": { + "line": 3, + "column": 30 + } + } + } + ], + "selfClosing": false, + "range": [ + 80, + 111 + ], + "loc": { + "start": { + "line": 3, + "column": 0 + }, + "end": { + "line": 3, + "column": 31 + } + } + }, + "children": [], + "endTag": { + "type": "SvelteEndTag", + "range": [ + 111, + 117 + ], + "loc": { + "start": { + "line": 3, + "column": 31 + }, + "end": { + "line": 3, + "column": 37 + } + } + }, + "range": [ + 80, + 117 + ], + "loc": { + "start": { + "line": 3, + "column": 0 + }, + "end": { + "line": 3, + "column": 37 + } + } + }, + { + "type": "SvelteText", + "value": "\n", + "range": [ + 117, + 118 + ], + "loc": { + "start": { + "line": 3, + "column": 37 + }, + "end": { + "line": 4, + "column": 0 + } + } + }, + { + "type": "SvelteElement", + "kind": "html", + "name": { + "type": "SvelteName", + "name": "div", + "range": [ + 119, + 122 + ], + "loc": { + "start": { + "line": 4, + "column": 1 + }, + "end": { + "line": 4, + "column": 4 + } + } + }, + "startTag": { + "type": "SvelteStartTag", + "attributes": [ + { + "type": "SvelteStyleDirective", + "key": { + "type": "SvelteDirectiveKey", + "name": { + "type": "SvelteName", + "name": "color", + "range": [ + 129, + 134 + ], + "loc": { + "start": { + "line": 4, + "column": 11 + }, + "end": { + "line": 4, + "column": 16 + } + } + }, + "range": [ + 123, + 134 + ], + "loc": { + "start": { + "line": 4, + "column": 5 + }, + "end": { + "line": 4, + "column": 16 + } + } + }, + "shorthand": false, + "value": [ + { + "type": "SvelteMustacheTag", + "kind": "text", + "expression": { + "type": "TemplateLiteral", + "expressions": [ + { + "type": "Identifier", + "name": "literal", + "range": [ + 147, + 154 + ], + "loc": { + "start": { + "line": 4, + "column": 29 + }, + "end": { + "line": 4, + "column": 36 + } + } + } + ], + "quasis": [ + { + "type": "TemplateElement", + "tail": false, + "value": { + "cooked": "template", + "raw": "template" + }, + "range": [ + 136, + 147 + ], + "loc": { + "start": { + "line": 4, + "column": 18 + }, + "end": { + "line": 4, + "column": 29 + } + } + }, + { + "type": "TemplateElement", + "tail": true, + "value": { + "cooked": "", + "raw": "" + }, + "range": [ + 154, + 156 + ], + "loc": { + "start": { + "line": 4, + "column": 36 + }, + "end": { + "line": 4, + "column": 38 + } + } + } + ], + "range": [ + 136, + 156 + ], + "loc": { + "start": { + "line": 4, + "column": 18 + }, + "end": { + "line": 4, + "column": 38 + } + } + }, + "range": [ + 135, + 157 + ], + "loc": { + "start": { + "line": 4, + "column": 17 + }, + "end": { + "line": 4, + "column": 39 + } + } + } + ], + "range": [ + 123, + 157 + ], + "loc": { + "start": { + "line": 4, + "column": 5 + }, + "end": { + "line": 4, + "column": 39 + } + } + } + ], + "selfClosing": false, + "range": [ + 118, + 158 + ], + "loc": { + "start": { + "line": 4, + "column": 0 + }, + "end": { + "line": 4, + "column": 40 + } + } + }, + "children": [], + "endTag": { + "type": "SvelteEndTag", + "range": [ + 158, + 164 + ], + "loc": { + "start": { + "line": 4, + "column": 40 + }, + "end": { + "line": 4, + "column": 46 + } + } + }, + "range": [ + 118, + 164 + ], + "loc": { + "start": { + "line": 4, + "column": 0 + }, + "end": { + "line": 4, + "column": 46 + } + } + } + ], + "sourceType": "module", + "comments": [], + "tokens": [ + { + "type": "Punctuator", + "value": "<", + "range": [ + 0, + 1 + ], + "loc": { + "start": { + "line": 1, + "column": 0 + }, + "end": { + "line": 1, + "column": 1 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "div", + "range": [ + 1, + 4 + ], + "loc": { + "start": { + "line": 1, + "column": 1 + }, + "end": { + "line": 1, + "column": 4 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "style", + "range": [ + 5, + 10 + ], + "loc": { + "start": { + "line": 1, + "column": 5 + }, + "end": { + "line": 1, + "column": 10 + } + } + }, + { + "type": "Punctuator", + "value": ":", + "range": [ + 10, + 11 + ], + "loc": { + "start": { + "line": 1, + "column": 10 + }, + "end": { + "line": 1, + "column": 11 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "color", + "range": [ + 11, + 16 + ], + "loc": { + "start": { + "line": 1, + "column": 11 + }, + "end": { + "line": 1, + "column": 16 + } + } + }, + { + "type": "Punctuator", + "value": "=", + "range": [ + 16, + 17 + ], + "loc": { + "start": { + "line": 1, + "column": 16 + }, + "end": { + "line": 1, + "column": 17 + } + } + }, + { + "type": "Punctuator", + "value": "\"", + "range": [ + 17, + 18 + ], + "loc": { + "start": { + "line": 1, + "column": 17 + }, + "end": { + "line": 1, + "column": 18 + } + } + }, + { + "type": "HTMLText", + "value": "red", + "range": [ + 18, + 21 + ], + "loc": { + "start": { + "line": 1, + "column": 18 + }, + "end": { + "line": 1, + "column": 21 + } + } + }, + { + "type": "Punctuator", + "value": "{", + "range": [ + 21, + 22 + ], + "loc": { + "start": { + "line": 1, + "column": 21 + }, + "end": { + "line": 1, + "column": 22 + } + } + }, + { + "type": "Identifier", + "value": "variable", + "range": [ + 22, + 30 + ], + "loc": { + "start": { + "line": 1, + "column": 22 + }, + "end": { + "line": 1, + "column": 30 + } + } + }, + { + "type": "Punctuator", + "value": "}", + "range": [ + 30, + 31 + ], + "loc": { + "start": { + "line": 1, + "column": 30 + }, + "end": { + "line": 1, + "column": 31 + } + } + }, + { + "type": "Punctuator", + "value": "\"", + "range": [ + 31, + 32 + ], + "loc": { + "start": { + "line": 1, + "column": 31 + }, + "end": { + "line": 1, + "column": 32 + } + } + }, + { + "type": "Punctuator", + "value": ">", + "range": [ + 32, + 33 + ], + "loc": { + "start": { + "line": 1, + "column": 32 + }, + "end": { + "line": 1, + "column": 33 + } + } + }, + { + "type": "Punctuator", + "value": "<", + "range": [ + 33, + 34 + ], + "loc": { + "start": { + "line": 1, + "column": 33 + }, + "end": { + "line": 1, + "column": 34 + } + } + }, + { + "type": "Punctuator", + "value": "/", + "range": [ + 34, + 35 + ], + "loc": { + "start": { + "line": 1, + "column": 34 + }, + "end": { + "line": 1, + "column": 35 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "div", + "range": [ + 35, + 38 + ], + "loc": { + "start": { + "line": 1, + "column": 35 + }, + "end": { + "line": 1, + "column": 38 + } + } + }, + { + "type": "Punctuator", + "value": ">", + "range": [ + 38, + 39 + ], + "loc": { + "start": { + "line": 1, + "column": 38 + }, + "end": { + "line": 1, + "column": 39 + } + } + }, + { + "type": "HTMLText", + "value": "\n", + "range": [ + 39, + 40 + ], + "loc": { + "start": { + "line": 1, + "column": 39 + }, + "end": { + "line": 2, + "column": 0 + } + } + }, + { + "type": "Punctuator", + "value": "<", + "range": [ + 40, + 41 + ], + "loc": { + "start": { + "line": 2, + "column": 0 + }, + "end": { + "line": 2, + "column": 1 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "div", + "range": [ + 41, + 44 + ], + "loc": { + "start": { + "line": 2, + "column": 1 + }, + "end": { + "line": 2, + "column": 4 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "style", + "range": [ + 45, + 50 + ], + "loc": { + "start": { + "line": 2, + "column": 5 + }, + "end": { + "line": 2, + "column": 10 + } + } + }, + { + "type": "Punctuator", + "value": ":", + "range": [ + 50, + 51 + ], + "loc": { + "start": { + "line": 2, + "column": 10 + }, + "end": { + "line": 2, + "column": 11 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "color", + "range": [ + 51, + 56 + ], + "loc": { + "start": { + "line": 2, + "column": 11 + }, + "end": { + "line": 2, + "column": 16 + } + } + }, + { + "type": "Punctuator", + "value": "=", + "range": [ + 56, + 57 + ], + "loc": { + "start": { + "line": 2, + "column": 16 + }, + "end": { + "line": 2, + "column": 17 + } + } + }, + { + "type": "Punctuator", + "value": "'", + "range": [ + 57, + 58 + ], + "loc": { + "start": { + "line": 2, + "column": 17 + }, + "end": { + "line": 2, + "column": 18 + } + } + }, + { + "type": "HTMLText", + "value": "red", + "range": [ + 58, + 61 + ], + "loc": { + "start": { + "line": 2, + "column": 18 + }, + "end": { + "line": 2, + "column": 21 + } + } + }, + { + "type": "Punctuator", + "value": "{", + "range": [ + 61, + 62 + ], + "loc": { + "start": { + "line": 2, + "column": 21 + }, + "end": { + "line": 2, + "column": 22 + } + } + }, + { + "type": "Identifier", + "value": "variable", + "range": [ + 62, + 70 + ], + "loc": { + "start": { + "line": 2, + "column": 22 + }, + "end": { + "line": 2, + "column": 30 + } + } + }, + { + "type": "Punctuator", + "value": "}", + "range": [ + 70, + 71 + ], + "loc": { + "start": { + "line": 2, + "column": 30 + }, + "end": { + "line": 2, + "column": 31 + } + } + }, + { + "type": "Punctuator", + "value": "'", + "range": [ + 71, + 72 + ], + "loc": { + "start": { + "line": 2, + "column": 31 + }, + "end": { + "line": 2, + "column": 32 + } + } + }, + { + "type": "Punctuator", + "value": ">", + "range": [ + 72, + 73 + ], + "loc": { + "start": { + "line": 2, + "column": 32 + }, + "end": { + "line": 2, + "column": 33 + } + } + }, + { + "type": "Punctuator", + "value": "<", + "range": [ + 73, + 74 + ], + "loc": { + "start": { + "line": 2, + "column": 33 + }, + "end": { + "line": 2, + "column": 34 + } + } + }, + { + "type": "Punctuator", + "value": "/", + "range": [ + 74, + 75 + ], + "loc": { + "start": { + "line": 2, + "column": 34 + }, + "end": { + "line": 2, + "column": 35 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "div", + "range": [ + 75, + 78 + ], + "loc": { + "start": { + "line": 2, + "column": 35 + }, + "end": { + "line": 2, + "column": 38 + } + } + }, + { + "type": "Punctuator", + "value": ">", + "range": [ + 78, + 79 + ], + "loc": { + "start": { + "line": 2, + "column": 38 + }, + "end": { + "line": 2, + "column": 39 + } + } + }, + { + "type": "HTMLText", + "value": "\n", + "range": [ + 79, + 80 + ], + "loc": { + "start": { + "line": 2, + "column": 39 + }, + "end": { + "line": 3, + "column": 0 + } + } + }, + { + "type": "Punctuator", + "value": "<", + "range": [ + 80, + 81 + ], + "loc": { + "start": { + "line": 3, + "column": 0 + }, + "end": { + "line": 3, + "column": 1 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "div", + "range": [ + 81, + 84 + ], + "loc": { + "start": { + "line": 3, + "column": 1 + }, + "end": { + "line": 3, + "column": 4 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "style", + "range": [ + 85, + 90 + ], + "loc": { + "start": { + "line": 3, + "column": 5 + }, + "end": { + "line": 3, + "column": 10 + } + } + }, + { + "type": "Punctuator", + "value": ":", + "range": [ + 90, + 91 + ], + "loc": { + "start": { + "line": 3, + "column": 10 + }, + "end": { + "line": 3, + "column": 11 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "color", + "range": [ + 91, + 96 + ], + "loc": { + "start": { + "line": 3, + "column": 11 + }, + "end": { + "line": 3, + "column": 16 + } + } + }, + { + "type": "Punctuator", + "value": "=", + "range": [ + 96, + 97 + ], + "loc": { + "start": { + "line": 3, + "column": 16 + }, + "end": { + "line": 3, + "column": 17 + } + } + }, + { + "type": "HTMLText", + "value": "red", + "range": [ + 97, + 100 + ], + "loc": { + "start": { + "line": 3, + "column": 17 + }, + "end": { + "line": 3, + "column": 20 + } + } + }, + { + "type": "Punctuator", + "value": "{", + "range": [ + 100, + 101 + ], + "loc": { + "start": { + "line": 3, + "column": 20 + }, + "end": { + "line": 3, + "column": 21 + } + } + }, + { + "type": "Identifier", + "value": "variable", + "range": [ + 101, + 109 + ], + "loc": { + "start": { + "line": 3, + "column": 21 + }, + "end": { + "line": 3, + "column": 29 + } + } + }, + { + "type": "Punctuator", + "value": "}", + "range": [ + 109, + 110 + ], + "loc": { + "start": { + "line": 3, + "column": 29 + }, + "end": { + "line": 3, + "column": 30 + } + } + }, + { + "type": "Punctuator", + "value": ">", + "range": [ + 110, + 111 + ], + "loc": { + "start": { + "line": 3, + "column": 30 + }, + "end": { + "line": 3, + "column": 31 + } + } + }, + { + "type": "Punctuator", + "value": "<", + "range": [ + 111, + 112 + ], + "loc": { + "start": { + "line": 3, + "column": 31 + }, + "end": { + "line": 3, + "column": 32 + } + } + }, + { + "type": "Punctuator", + "value": "/", + "range": [ + 112, + 113 + ], + "loc": { + "start": { + "line": 3, + "column": 32 + }, + "end": { + "line": 3, + "column": 33 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "div", + "range": [ + 113, + 116 + ], + "loc": { + "start": { + "line": 3, + "column": 33 + }, + "end": { + "line": 3, + "column": 36 + } + } + }, + { + "type": "Punctuator", + "value": ">", + "range": [ + 116, + 117 + ], + "loc": { + "start": { + "line": 3, + "column": 36 + }, + "end": { + "line": 3, + "column": 37 + } + } + }, + { + "type": "HTMLText", + "value": "\n", + "range": [ + 117, + 118 + ], + "loc": { + "start": { + "line": 3, + "column": 37 + }, + "end": { + "line": 4, + "column": 0 + } + } + }, + { + "type": "Punctuator", + "value": "<", + "range": [ + 118, + 119 + ], + "loc": { + "start": { + "line": 4, + "column": 0 + }, + "end": { + "line": 4, + "column": 1 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "div", + "range": [ + 119, + 122 + ], + "loc": { + "start": { + "line": 4, + "column": 1 + }, + "end": { + "line": 4, + "column": 4 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "style", + "range": [ + 123, + 128 + ], + "loc": { + "start": { + "line": 4, + "column": 5 + }, + "end": { + "line": 4, + "column": 10 + } + } + }, + { + "type": "Punctuator", + "value": ":", + "range": [ + 128, + 129 + ], + "loc": { + "start": { + "line": 4, + "column": 10 + }, + "end": { + "line": 4, + "column": 11 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "color", + "range": [ + 129, + 134 + ], + "loc": { + "start": { + "line": 4, + "column": 11 + }, + "end": { + "line": 4, + "column": 16 + } + } + }, + { + "type": "Punctuator", + "value": "=", + "range": [ + 134, + 135 + ], + "loc": { + "start": { + "line": 4, + "column": 16 + }, + "end": { + "line": 4, + "column": 17 + } + } + }, + { + "type": "Punctuator", + "value": "{", + "range": [ + 135, + 136 + ], + "loc": { + "start": { + "line": 4, + "column": 17 + }, + "end": { + "line": 4, + "column": 18 + } + } + }, + { + "type": "Template", + "value": "`template${", + "range": [ + 136, + 147 + ], + "loc": { + "start": { + "line": 4, + "column": 18 + }, + "end": { + "line": 4, + "column": 29 + } + } + }, + { + "type": "Identifier", + "value": "literal", + "range": [ + 147, + 154 + ], + "loc": { + "start": { + "line": 4, + "column": 29 + }, + "end": { + "line": 4, + "column": 36 + } + } + }, + { + "type": "Template", + "value": "}`", + "range": [ + 154, + 156 + ], + "loc": { + "start": { + "line": 4, + "column": 36 + }, + "end": { + "line": 4, + "column": 38 + } + } + }, + { + "type": "Punctuator", + "value": "}", + "range": [ + 156, + 157 + ], + "loc": { + "start": { + "line": 4, + "column": 38 + }, + "end": { + "line": 4, + "column": 39 + } + } + }, + { + "type": "Punctuator", + "value": ">", + "range": [ + 157, + 158 + ], + "loc": { + "start": { + "line": 4, + "column": 39 + }, + "end": { + "line": 4, + "column": 40 + } + } + }, + { + "type": "Punctuator", + "value": "<", + "range": [ + 158, + 159 + ], + "loc": { + "start": { + "line": 4, + "column": 40 + }, + "end": { + "line": 4, + "column": 41 + } + } + }, + { + "type": "Punctuator", + "value": "/", + "range": [ + 159, + 160 + ], + "loc": { + "start": { + "line": 4, + "column": 41 + }, + "end": { + "line": 4, + "column": 42 + } + } + }, + { + "type": "HTMLIdentifier", + "value": "div", + "range": [ + 160, + 163 + ], + "loc": { + "start": { + "line": 4, + "column": 42 + }, + "end": { + "line": 4, + "column": 45 + } + } + }, + { + "type": "Punctuator", + "value": ">", + "range": [ + 163, + 164 + ], + "loc": { + "start": { + "line": 4, + "column": 45 + }, + "end": { + "line": 4, + "column": 46 + } + } + } + ], + "range": [ + 0, + 166 + ], + "loc": { + "start": { + "line": 1, + "column": 0 + }, + "end": { + "line": 5, + "column": 0 + } + } +} \ No newline at end of file diff --git a/tests/fixtures/parser/ast/style-directive02-scope-output.json b/tests/fixtures/parser/ast/style-directive02-scope-output.json new file mode 100644 index 00000000..e4c88be2 --- /dev/null +++ b/tests/fixtures/parser/ast/style-directive02-scope-output.json @@ -0,0 +1,313 @@ +{ + "type": "global", + "variables": [ + { + "name": "$$slots", + "identifiers": [], + "defs": [], + "references": [] + }, + { + "name": "$$props", + "identifiers": [], + "defs": [], + "references": [] + }, + { + "name": "$$restProps", + "identifiers": [], + "defs": [], + "references": [] + } + ], + "references": [], + "childScopes": [ + { + "type": "module", + "variables": [], + "references": [ + { + "identifier": { + "type": "Identifier", + "name": "variable", + "range": [ + 22, + 30 + ], + "loc": { + "start": { + "line": 1, + "column": 22 + }, + "end": { + "line": 1, + "column": 30 + } + } + }, + "from": "module", + "init": null, + "resolved": null + }, + { + "identifier": { + "type": "Identifier", + "name": "variable", + "range": [ + 62, + 70 + ], + "loc": { + "start": { + "line": 2, + "column": 22 + }, + "end": { + "line": 2, + "column": 30 + } + } + }, + "from": "module", + "init": null, + "resolved": null + }, + { + "identifier": { + "type": "Identifier", + "name": "variable", + "range": [ + 101, + 109 + ], + "loc": { + "start": { + "line": 3, + "column": 21 + }, + "end": { + "line": 3, + "column": 29 + } + } + }, + "from": "module", + "init": null, + "resolved": null + }, + { + "identifier": { + "type": "Identifier", + "name": "literal", + "range": [ + 147, + 154 + ], + "loc": { + "start": { + "line": 4, + "column": 29 + }, + "end": { + "line": 4, + "column": 36 + } + } + }, + "from": "module", + "init": null, + "resolved": null + } + ], + "childScopes": [], + "through": [ + { + "identifier": { + "type": "Identifier", + "name": "variable", + "range": [ + 22, + 30 + ], + "loc": { + "start": { + "line": 1, + "column": 22 + }, + "end": { + "line": 1, + "column": 30 + } + } + }, + "from": "module", + "init": null, + "resolved": null + }, + { + "identifier": { + "type": "Identifier", + "name": "variable", + "range": [ + 62, + 70 + ], + "loc": { + "start": { + "line": 2, + "column": 22 + }, + "end": { + "line": 2, + "column": 30 + } + } + }, + "from": "module", + "init": null, + "resolved": null + }, + { + "identifier": { + "type": "Identifier", + "name": "variable", + "range": [ + 101, + 109 + ], + "loc": { + "start": { + "line": 3, + "column": 21 + }, + "end": { + "line": 3, + "column": 29 + } + } + }, + "from": "module", + "init": null, + "resolved": null + }, + { + "identifier": { + "type": "Identifier", + "name": "literal", + "range": [ + 147, + 154 + ], + "loc": { + "start": { + "line": 4, + "column": 29 + }, + "end": { + "line": 4, + "column": 36 + } + } + }, + "from": "module", + "init": null, + "resolved": null + } + ] + } + ], + "through": [ + { + "identifier": { + "type": "Identifier", + "name": "variable", + "range": [ + 22, + 30 + ], + "loc": { + "start": { + "line": 1, + "column": 22 + }, + "end": { + "line": 1, + "column": 30 + } + } + }, + "from": "module", + "init": null, + "resolved": null + }, + { + "identifier": { + "type": "Identifier", + "name": "variable", + "range": [ + 62, + 70 + ], + "loc": { + "start": { + "line": 2, + "column": 22 + }, + "end": { + "line": 2, + "column": 30 + } + } + }, + "from": "module", + "init": null, + "resolved": null + }, + { + "identifier": { + "type": "Identifier", + "name": "variable", + "range": [ + 101, + 109 + ], + "loc": { + "start": { + "line": 3, + "column": 21 + }, + "end": { + "line": 3, + "column": 29 + } + } + }, + "from": "module", + "init": null, + "resolved": null + }, + { + "identifier": { + "type": "Identifier", + "name": "literal", + "range": [ + 147, + 154 + ], + "loc": { + "start": { + "line": 4, + "column": 29 + }, + "end": { + "line": 4, + "column": 36 + } + } + }, + "from": "module", + "init": null, + "resolved": null + } + ] +} \ No newline at end of file diff --git a/tests/src/parser/test-utils.ts b/tests/src/parser/test-utils.ts index 6348976a..cadcd854 100644 --- a/tests/src/parser/test-utils.ts +++ b/tests/src/parser/test-utils.ts @@ -206,6 +206,7 @@ const nodeToKeys: SvelteKeysType = { SvelteDebugTag: ["identifiers"], SvelteConstTag: ["declaration"], SvelteDirective: ["key", "intro", "outro", "expression"], + SvelteStyleDirective: ["key", "shorthand", "value"], SvelteDirectiveKey: ["name", "modifiers"], SvelteEachBlock: [ "expression",