fullstacked 0.12.2-1382 → 0.12.2-1407

package/fullstacked_modules/style/build.ts

@@ -0,0 +1,150 @@
+import { propertiesDefaultingToPx, CSSProperties } from "../style";
+
+const propertiesDefaultingToPxArr = Object.keys(propertiesDefaultingToPx);
+const allCSSProperties = [];
+for (const property in document.body.style) {
+    allCSSProperties.push(property);
+}
+
+type StyleItem = {
+    element: HTMLElement;
+    order: number;
+    children: StyleTree;
+};
+
+type StyleTree = {
+    [name: string]: StyleItem;
+};
+
+const styles: StyleTree = {};
+let order = 0;
+
+function getOrCreateParentFromPath(path: string[], parent = styles): StyleTree {
+    if (path.length === 0) {
+        return parent;
+    }
+
+    const child = path.shift();
+    if (!parent[child]) {
+        parent[child] = {
+            element: document.createElement("div"),
+            order: order++,
+            children: {}
+        };
+    }
+
+    return getOrCreateParentFromPath(path, parent[child].children);
+}
+
+function createStyle(
+    cssProperties: CSSProperties,
+    path: string[],
+    existing: StyleItem
+): StyleItem {
+    const styleItem = existing || {
+        element: document.createElement("div"),
+        order: order++,
+        children: {}
+    };
+
+    Object.entries(cssProperties).forEach(([property, value]) => {
+        if (!allCSSProperties.includes(property)) {
+            if (property.startsWith("@media")) {
+                const parentPath = [property, ...path];
+                _createClass(
+                    parentPath,
+                    value,
+                    getOrCreateParentFromPath(parentPath.slice(0, -1))
+                );
+            } else {
+                _createClass([...path, property], value, styleItem.children);
+            }
+        } else {
+            if (
+                propertiesDefaultingToPxArr.includes(property) &&
+                value &&
+                typeof value === "number"
+            ) {
+                value = value + "px";
+            }
+
+            styleItem.element.style[property] = value;
+        }
+    });
+
+    return styleItem;
+}
+
+function _createClass(
+    path: string[],
+    cssProperties: CSSProperties,
+    parent = styles
+) {
+    parent[path.at(-1)] = createStyle(cssProperties, path, parent[path.at(-1)]);
+}
+
+export function createClass(name: string, cssProperties: CSSProperties) {
+    _createClass(["." + name], cssProperties);
+    return name;
+}
+
+export function createGlobalStyle(globalCssProperties: CSSProperties) {
+    Object.entries(globalCssProperties).forEach(([name, cssProperties]) => {
+        styles[name] = createStyle(cssProperties, [name], styles[name]);
+    });
+}
+
+function constructClassName(path: string[]) {
+    return path.reduce(
+        (str, item) =>
+            str + (item.startsWith("&") ? item.slice(1) : ` ${item}`),
+        ""
+    );
+}
+
+function generateStyleRecusively(path: string[] = [], parent = styles) {
+    return Object.entries(parent)
+        .sort(([_, itemA], [__, itemB]) => itemA.order - itemB.order)
+        .map(([tag, styleItem]) => {
+            let css = "";
+
+            const currentPath = [...path, tag];
+
+            const cssString = styleItem.element.style.cssText;
+
+            if (cssString) {
+                css += `${constructClassName(currentPath)} { ${cssString} } `;
+            }
+
+            if (styleItem.children) {
+                if (tag.startsWith("@media")) {
+                    css += `${tag} { ${generateStyleRecusively(
+                        currentPath.slice(1),
+                        styleItem.children
+                    )} }`;
+                } else {
+                    css += generateStyleRecusively(
+                        currentPath,
+                        styleItem.children
+                    );
+                }
+            }
+
+            styleItem.element.remove();
+
+            return css;
+        })
+        .flat()
+        .join("");
+}
+
+export function exportStyles() {
+    return generateStyleRecusively();
+}
+
+const style = {
+    createClass,
+    createGlobalStyle
+};
+
+export default style;

package/fullstacked_modules/style.ts

@@ -0,0 +1,60 @@
+import CSS from "csstype";
+
+export const propertiesDefaultingToPx = {
+    padding: true,
+    paddingTop: true,
+    paddingRight: true,
+    paddingBottom: true,
+    paddingLeft: true,
+
+    margin: true,
+    marginTop: true,
+    marginRight: true,
+    marginBottom: true,
+    marginLeft: true,
+
+    width: true,
+    minWidth: true,
+    maxWidth: true,
+
+    height: true,
+    minHeight: true,
+    maxHeight: true,
+
+    top: true,
+    right: true,
+    bottom: true,
+    left: true,
+
+    gap: true,
+
+    fontSize: true,
+    borderRadius: true,
+    borderTopLeftRadius: true,
+    borderTopRightRadius: true,
+    borderBottomLeftRadius: true,
+    borderBottomRightRadius: true,
+
+    outlineOffset: true
+} as const;
+
+export type CSSProperties =
+    | {
+          [property in keyof CSS.Properties]: property extends keyof typeof propertiesDefaultingToPx
+              ? number | CSS.Properties[property]
+              : CSS.Properties[property];
+      }
+    | {
+          [child: string]: CSSProperties;
+      };
+
+export const createClass = (name: string, cssProperties: CSSProperties) => name;
+
+export const createGlobalStyle = (cssProperties: CSSProperties) => {};
+
+const style = {
+    createClass,
+    createGlobalStyle
+};
+
+export default style;

package/index.js

@@ -415,6 +415,7 @@ async function buildSASS(entryPoint, opts) {
 // src/build.ts
 import fs2 from "node:fs";
 import path2 from "node:path";
+import jsdom from "jsdom";
 function quickInstallPackage(editorHeader, directory) {
   return new Promise((resolve) => {
     const cb2 = (_, messageType, message) => {
@@ -436,6 +437,13 @@ function quickInstallPackage(editorHeader, directory) {
     );
   });
 }
+async function buildStyle(entrypoint) {
+  globalThis.document = new jsdom.JSDOM().window.document;
+  return {
+    css: (await import(entrypoint)).exportStyles(),
+    errors: []
+  };
+}
 async function buildLocalProject(directory) {
   const editorHeader = createPayloadHeader({
     id: "",
@@ -446,7 +454,9 @@ async function buildLocalProject(directory) {
     const cb2 = async (_, messageType, message) => {
       if (messageType === "build-style") {
         const { id, entryPoint, projectId } = JSON.parse(message);
-        const result = await buildSASS(entryPoint, {
+        const result = entryPoint.endsWith(".js") ? await buildStyle(
+          path2.resolve(process.cwd(), projectId, entryPoint)
+        ) : await buildSASS(entryPoint, {
           canonicalize: (filePath) => filePath.startsWith("file://") ? new URL(filePath) : new URL(
             "file://" + path2.resolve(
               process.cwd(),
@@ -467,8 +477,14 @@ async function buildLocalProject(directory) {
         const { errors } = JSON.parse(message);
         if (errors.length) {
           errors.forEach((e) => {
-            console.log(`${e.Location.File}#${e.Location.Line}`);
-            console.log(e.Text + "\n");
+            try {
+              console.log(
+                `${e.Location.File}#${e.Location.Line}`
+              );
+              console.log(e.Text + "\n");
+            } catch (_2) {
+              console.log(e);
+            }
           });
           reject();
         } else {
@@ -563,11 +579,10 @@ import fs4 from "node:fs";
 // src/tsconfig.ts
 var compilerOptions = {
   esModuleInterop: true,
-  module: "es2022",
-  target: "es2022",
+  module: "esnext",
+  target: "esnext",
   moduleResolution: "bundler",
   allowJs: true,
-  lib: ["dom", "dom.iterable", "es2023"],
   jsx: "react",
   typeRoots: ["../.fullstacked_modules/@types", "./node_modules/@types"]
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fullstacked",
-    "version": "0.12.2-1382",
+    "version": "0.12.2-1407",
     "scripts": {
         "build": "node build.js",
         "postbuild": "node build.js --binding",
@@ -13,14 +13,16 @@
     "type": "module",
     "dependencies": {
         "cli-progress": "^3.12.0",
+        "jsdom": "^27.2.0",
         "open": "^10.2.0",
         "pretty-bytes": "^7.1.0",
-        "sass": "^1.93.2",
+        "sass": "^1.94.0",
         "tar-stream": "^3.1.7",
         "ws": "^8.18.3"
     },
     "devDependencies": {
         "@types/cli-progress": "^3.11.6",
+        "@types/jsdom": "^27.0.0",
         "@types/tar-stream": "^3.1.4",
         "@types/ws": "^8.18.1",
         "node-addon-api": "^8.5.0"

package/fullstacked_modules/components/snackbar.css

@@ -1,54 +0,0 @@
-/* 
-This file must follow the figma defined spacing components
-https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups?node-id=6-49
-*/
-/* 
-This file must follow the figma local color styles
-https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups
-*/
-/* 
-This file must follow the figma local text styles
-https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups
-*/
-.snack-bars-container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 100;
-  padding: 0 20px 20px;
-  align-items: flex-start;
-  width: 100%;
-  pointer-events: none;
-  text-align: left;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 16px;
-  max-width: 450px;
-}
-@media (max-width: 450px) {
-  .snack-bars-container {
-    align-items: center;
-  }
-}
-.snack-bars-container .snack-bar {
-  pointer-events: all;
-  background-color: #404958;
-  border-radius: 5px;
-  color: #ffffff;
-  min-height: 42px;
-  max-width: 100%;
-  width: max-content;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 5px 10px;
-  box-shadow: 0px 4px 10px rgba(21, 23, 27, 0.6);
-}
-.snack-bars-container .snack-bar > div:first-child {
-  padding: 5px 0;
-  width: 100%;
-  overflow-wrap: break-word;
-}

package/fullstacked_modules/components/snackbar.scss

@@ -1,52 +0,0 @@
-@use "../../node_modules/@fullstacked/ui/values/spacing.scss";
-@use "../../node_modules/@fullstacked/ui/values/colors.scss";
-@use "../../node_modules/@fullstacked/ui/values/typography.scss";
-
-.snack-bars-container {
-    display: flex;
-    flex-direction: column;
-    gap: spacing.$small;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    z-index: 100;
-    padding: 0 spacing.$medium spacing.$medium;
-    align-items: flex-start;
-    width: 100%;
-    pointer-events: none;
-    text-align: left;
-    font-family: typography.$fonts;
-    font-size: typography.$medium;
-
-    max-width: 450px;
-    @media (max-width: 450px) {
-        align-items: center;
-    }
-
-    .snack-bar {
-        pointer-events: all;
-
-        background-color: colors.$gray-dark;
-        border-radius: spacing.$x-small;
-        color: colors.$light;
-
-        min-height: 42px;
-        max-width: 100%;
-        width: max-content;
-
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: spacing.$small;
-
-        padding: spacing.$x-small spacing.$small;
-
-        box-shadow: 0px 4px 10px colors.opacity(colors.$dark, 60);
-
-        > div:first-child {
-            padding: spacing.$x-small 0;
-            width: 100%;
-            overflow-wrap: break-word;
-        }
-    }
-}