From 024f9e9d9031ab86fac8473c463a8921c3636cb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= Date: Wed, 12 Apr 2023 23:08:11 +0200 Subject: [PATCH 01/24] Added PostCSS AST to SvelteStyleElement --- package.json | 3 ++- src/ast/html.ts | 2 ++ src/parser/converts/root.ts | 6 +++++- src/visitor-keys.ts | 2 +- 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index f521f9d8..b658d503 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,8 @@ "dependencies": { "eslint-scope": "^7.0.0", "eslint-visitor-keys": "^3.0.0", - "espree": "^9.0.0" + "espree": "^9.0.0", + "postcss": "^8.4.21" }, "devDependencies": { "@changesets/changelog-github": "^0.4.6", diff --git a/src/ast/html.ts b/src/ast/html.ts index 106a1e83..588ddc62 100644 --- a/src/ast/html.ts +++ b/src/ast/html.ts @@ -1,4 +1,5 @@ import type ESTree from "estree"; +import type { Root } from "postcss"; import type { BaseNode } from "./base"; import type { Token, Comment } from "./common"; @@ -66,6 +67,7 @@ export interface SvelteStyleElement extends BaseSvelteElement { type: "SvelteStyleElement"; name: SvelteName; startTag: SvelteStartTag; + body: Root; children: [SvelteText]; endTag: SvelteEndTag | null; parent: SvelteProgram; diff --git a/src/parser/converts/root.ts b/src/parser/converts/root.ts index 500abba6..6d2b1ad8 100644 --- a/src/parser/converts/root.ts +++ b/src/parser/converts/root.ts @@ -10,6 +10,7 @@ import type { Context } from "../../context"; import { convertChildren, extractElementTags } from "./element"; import { convertAttributeTokens } from "./attr"; import type { Scope } from "eslint-scope"; +import postcss from "postcss"; /** * Convert root @@ -89,6 +90,7 @@ export function convertSvelteRoot( type: "SvelteStyleElement", name: null as any, startTag: null as any, + body: null as any, children: [] as any, endTag: null, parent: ast, @@ -114,11 +116,13 @@ export function convertSvelteRoot( start: style.startTag.range[1], end: style.endTag.range[0], }; + const styleCode = ctx.code.slice(contentRange.start, contentRange.end); + style.body = postcss.parse(styleCode); ctx.addToken("HTMLText", contentRange); style.children = [ { type: "SvelteText", - value: ctx.code.slice(contentRange.start, contentRange.end), + value: styleCode, parent: style, ...ctx.getConvertLocation(contentRange), }, diff --git a/src/visitor-keys.ts b/src/visitor-keys.ts index c7da1c92..e9c74aaf 100644 --- a/src/visitor-keys.ts +++ b/src/visitor-keys.ts @@ -12,7 +12,7 @@ type KeyofObject = { [key in keyof T]: key }[keyof T]; const svelteKeys: SvelteKeysType = { Program: ["body"], SvelteScriptElement: ["name", "startTag", "body", "endTag"], - SvelteStyleElement: ["name", "startTag", "children", "endTag"], + SvelteStyleElement: ["name", "startTag", "body", "children", "endTag"], SvelteElement: ["name", "startTag", "children", "endTag"], SvelteStartTag: ["attributes"], SvelteEndTag: [], From 93ef53d53e12dfb25579a5b45f8140aa674cd828 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= Date: Sat, 15 Apr 2023 23:59:50 +0200 Subject: [PATCH 02/24] Passing file name to PostCSS parser --- src/parser/converts/root.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/parser/converts/root.ts b/src/parser/converts/root.ts index 6d2b1ad8..e597dbec 100644 --- a/src/parser/converts/root.ts +++ b/src/parser/converts/root.ts @@ -117,7 +117,9 @@ export function convertSvelteRoot( end: style.endTag.range[0], }; const styleCode = ctx.code.slice(contentRange.start, contentRange.end); - style.body = postcss.parse(styleCode); + style.body = postcss.parse(styleCode, { + from: ctx.parserOptions.filePath, + }); ctx.addToken("HTMLText", contentRange); style.children = [ { From 0e13130a2397068334b32a1c9c7b4789af42b609 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= Date: Sun, 16 Apr 2023 12:32:27 +0200 Subject: [PATCH 03/24] Added support for SCSS parsing --- package.json | 3 ++- src/parser/converts/root.ts | 27 ++++++++++++++++++++++++++- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b658d503..bb0c6fa6 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,8 @@ "eslint-scope": "^7.0.0", "eslint-visitor-keys": "^3.0.0", "espree": "^9.0.0", - "postcss": "^8.4.21" + "postcss": "^8.4.21", + "postcss-scss": "^4.0.6" }, "devDependencies": { "@changesets/changelog-github": "^0.4.6", diff --git a/src/parser/converts/root.ts b/src/parser/converts/root.ts index e597dbec..65bcd969 100644 --- a/src/parser/converts/root.ts +++ b/src/parser/converts/root.ts @@ -10,7 +10,9 @@ import type { Context } from "../../context"; import { convertChildren, extractElementTags } from "./element"; import { convertAttributeTokens } from "./attr"; import type { Scope } from "eslint-scope"; +import type { Parser, Root } from "postcss"; import postcss from "postcss"; +import { parse as SCSSparse } from "postcss-scss"; /** * Convert root @@ -112,12 +114,35 @@ export function convertSvelteRoot( }); if (style.endTag && style.startTag.range[1] < style.endTag.range[0]) { + let lang = "css"; + for (const attribute of style.startTag.attributes) { + if ( + attribute.type === "SvelteAttribute" && + attribute.key.name === "lang" && + attribute.value.length > 0 && + attribute.value[0].type === "SvelteLiteral" + ) { + lang = attribute.value[0].value; + } + } + let parseFn: Parser; + switch (lang) { + case "css": + parseFn = postcss.parse; + break; + case "sass": + case "scss": + parseFn = SCSSparse; + break; + default: + throw new Error(`Unknown