add additional css declaration option to vanilla framework config

Author: softmarshmallow

packages/builder-config/platform-web/additional-css-declaration.ts

@@ -0,0 +1,11 @@
+export interface WebAdditionalCssDeclarationConfig {
+  declarations: CssDeclaration[];
+}
+
+interface CssDeclaration {
+  key: {
+    name: string;
+    selector: "tag" | "id" | "class";
+  };
+  style: object;
+}

packages/builder-web-vanilla/export-inline-css-html-file/index.ts

@@ -1,5 +1,5 @@
 import { handle } from "@coli.codes/builder";
-import { buildCssStandard } from "@coli.codes/css";
+import { buildCssStandard, CSSProperties } from "@coli.codes/css";
 import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved";
 import {
   k,
@@ -41,7 +41,20 @@ ${indenter(body, 2)}
 </html>`;
 };
 
-export function export_inlined_css_html_file(widget: JsxWidget) {
+interface CssDeclaration {
+  key: {
+    name: string;
+    selector: "tag" | "id" | "class";
+  };
+  style: CSSProperties;
+}
+
+export function export_inlined_css_html_file(
+  widget: JsxWidget,
+  config: {
+    additional_css_declarations?: CssDeclaration[];
+  }
+) {
   const componentName = widget.key.name;
   const styledComponentNamer = new ScopedVariableNamer(
     widget.key.id,
@@ -78,6 +91,8 @@ export function export_inlined_css_html_file(widget: JsxWidget) {
       };
     })
     .filter((s) => s);
+
+  // global vanilla default injected style
   css_declarations.push({
     key: {
       name: "*",
@@ -86,6 +101,11 @@ export function export_inlined_css_html_file(widget: JsxWidget) {
     style: k.user_agent_stylesheet_override_default,
   });
 
+  // declare additional styles requested by user
+  config.additional_css_declarations?.forEach((d) => {
+    css_declarations.push(d);
+  });
+
   const strfied_css = css_declarations
     .map((css) => {
       const selectors = {

packages/designto-code/universal/design-to-code.ts

@@ -255,7 +255,7 @@ export async function designToVanilla({
     input.widget,
     vanilla_config
   );
-  const res = tovanilla.buildVanillaFile(vanillawidget);
+  const res = tovanilla.buildVanillaFile(vanillawidget, vanilla_config);
 
   // ------------------------------------------------------------------------
   // finilize temporary assets

packages/designto-vanilla/index.ts

@@ -5,13 +5,18 @@ import { export_inlined_css_html_file } from "@web-builder/vanilla";
 import { JsxWidget } from "@web-builder/core";
 
 export function buildVanillaFile(
-  widget: JsxWidget
+  widget: JsxWidget,
+  config: config.VanillaFrameworkConfig
 ): config.VanillaComponentOutput {
   if (!widget) {
     throw "A valid reflect widget manifest should be passed as an input. none was passed.";
   }
 
-  const html = export_inlined_css_html_file(widget);
+  const html = export_inlined_css_html_file(widget, {
+    additional_css_declarations:
+      config.additional_css_declaration?.declarations,
+  });
+
   return {
     id: widget.key.id,
     name: widget.key.name,