diff --git a/packages/builder-config/framework-svelte/index.ts b/packages/builder-config/framework-svelte/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/builder-config/framework-svelte/svelte-config-styling.ts b/packages/builder-config/framework-svelte/svelte-config-styling.ts
new file mode 100644
index 00000000..34cb301b
--- /dev/null
+++ b/packages/builder-config/framework-svelte/svelte-config-styling.ts
@@ -0,0 +1,62 @@
+///
+/// this configuration is work-in-progress.
+///
+
+export type SvelteStylingOption =
+ | SvelteStyleFragment
+ | SvelteInlineCssOption
+ | SvelteCssInJsOption;
+
+type SvelteInlineCssOption =
+ | SvelteInlineCssWithHtmlStandard
+ | SvelteInlineCssWithStyleDirective;
+
+type SvelteCssInJsOption = SvelteEmotionCSS;
+
+interface SvelteEmotionCSS {}
+
+/**
+ * inline css styling in svelte with html standard way.
+ *
+ * e.g. 👇
+ * ```html
+ *
+ * ```
+ */
+export interface SvelteInlineCssWithHtmlStandard {
+ type: "inline-css-standard";
+}
+
+/**
+ *
+ * e.g. 👇
+ * ```html
+ *
+ * ```
+ *
+ * Learn more - [svelte style directive RFC](https://github.com/sveltejs/rfcs/blob/master/text/0008-style-directives.md)
+ */
+export interface SvelteInlineCssWithStyleDirective {
+ type: "inline-css-with-style-directive";
+}
+
+/**
+ * styling using standard scoped css under
+ * ```
+ */
+// TODO: give a better clear name
+export interface SvelteStyleFragment {}
diff --git a/packages/builder-web-svelte/package.json b/packages/builder-web-svelte/package.json
new file mode 100644
index 00000000..721febaa
--- /dev/null
+++ b/packages/builder-web-svelte/package.json
@@ -0,0 +1,4 @@
+{
+ "name": "@web-builder/svelte",
+ "version": "0.0.0"
+}
\ No newline at end of file
diff --git a/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts b/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts
index 7d553f2e..736d708f 100644
--- a/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts
+++ b/packages/builder-web-vanilla/html-css-id-widget/html-css-id-module-builder.ts
@@ -2,7 +2,7 @@ import {
NoStyleJSXElementConfig,
StyledComponentJSXElementConfig,
} from "@web-builder/styled";
-import { JSXChildLike } from "coli";
+import { JSX, JSXChildLike, Snippet } from "coli";
import { StylesRepository } from "@web-builder/core/builders";
import { create_duplication_reduction_map } from "@web-builder/styled";
import { buildCSSStyleData, CSSProperties } from "@coli.codes/css";
@@ -181,7 +181,7 @@ export class HtmlIdCssModuleBuilder {
const final = html_render({
css: this.partStyles(),
- body: strfied_body,
+ body: this.partBody(),
});
return final;
@@ -223,20 +223,24 @@ function injectIdToJsx(jsx: JSXElementLike, id: string) {
}
}
-const html_render = ({ css, body }: { css: string; body: string }) => {
+const html_render = ({ css, body }: { css: string; body: JSXChildLike }) => {
const indenter = (s: string, tabs: number = 0) =>
s.replace(/\n/g, "\n" + "\t".repeat(tabs));
- return `
-
-
-
-
-
-${indenter(body, 2)}
-
-`;
+
+ const html = JSX.html({
+ children: [
+ JSX.head(
+ // style
+ JSX.style(Snippet.fromStatic(indenter(css, 3)) as any)
+ ),
+ // body
+ JSX.body(body),
+ ],
+ });
+
+ return stringfy(html.make(), {
+ language: "jsx", // use jsx for html also.
+ });
};
/**