fullstacked 0.12.2-1421 → 0.12.2-1425

package/fullstacked_modules/@types/style/index.d.ts

@@ -39,6 +39,9 @@ declare module "style" {
         | {
               [child: string]: CSSProperties;
           };
+    export type CSSAnimationProperties = Partial<{
+        [key in `${number}%` | "from" | "to"]: CSSProperties;
+    }>;
     export declare const createClass: (
         name: string,
         cssProperties: CSSProperties,
@@ -46,9 +49,17 @@ declare module "style" {
     export declare const createGlobalStyle: (
         cssProperties: CSSProperties,
     ) => void;
+    export declare const createAnimation: (
+        name: string,
+        cssAnimationProperties: CSSAnimationProperties,
+    ) => string;
     declare const style: {
         createClass: (name: string, cssProperties: CSSProperties) => string;
         createGlobalStyle: (cssProperties: CSSProperties) => void;
+        createAnimation: (
+            name: string,
+            cssAnimationProperties: CSSAnimationProperties,
+        ) => string;
     };
     export default style;
 }

package/fullstacked_modules/style/build.ts

@@ -1,4 +1,8 @@
-import { propertiesDefaultingToPx, CSSProperties } from "../style";
+import {
+    CSSAnimationProperties,
+    propertiesDefaultingToPx,
+    CSSProperties
+} from "../style";
 
 const propertiesDefaultingToPxArr = Object.keys(propertiesDefaultingToPx);
 const allCSSProperties = [];
@@ -10,10 +14,18 @@ type StyleItem = {
     element: HTMLElement;
     order: number;
     children: StyleTree;
+    type: "style";
 };
 
 type StyleTree = {
-    [name: string]: StyleItem;
+    [name: string]: StyleItem | AnimationItem;
+};
+
+type AnimationItem = {
+    element: null;
+    order: number;
+    children: StyleTree;
+    type: "animation";
 };
 
 const styles: StyleTree = {};
@@ -29,7 +41,8 @@ function getOrCreateParentFromPath(path: string[], parent = styles): StyleTree {
         parent[child] = {
             element: document.createElement("div"),
             order: order++,
-            children: {}
+            children: {},
+            type: "style"
         };
     }
 
@@ -40,15 +53,20 @@ function createStyle(
     cssProperties: CSSProperties,
     path: string[],
     existing: StyleItem
-): StyleItem {
+) {
     const styleItem = existing || {
         element: document.createElement("div"),
         order: order++,
-        children: {}
+        children: {},
+        type: "style"
     };
 
     Object.entries(cssProperties).forEach(([property, value]) => {
-        if (!allCSSProperties.includes(property)) {
+        if (
+            !allCSSProperties.includes(property) &&
+            !property.startsWith("Webkit") &&
+            !property.startsWith("Moz")
+        ) {
             if (property.startsWith("@media")) {
                 const parentPath = [property, ...path];
                 _createClass(
@@ -80,7 +98,11 @@ function _createClass(
     cssProperties: CSSProperties,
     parent = styles
 ) {
-    parent[path.at(-1)] = createStyle(cssProperties, path, parent[path.at(-1)]);
+    parent[path.at(-1)] = createStyle(
+        cssProperties,
+        path,
+        parent[path.at(-1)] as StyleItem
+    );
 }
 
 export function createClass(name: string, cssProperties: CSSProperties) {
@@ -90,10 +112,30 @@ export function createClass(name: string, cssProperties: CSSProperties) {
 
 export function createGlobalStyle(globalCssProperties: CSSProperties) {
     Object.entries(globalCssProperties).forEach(([name, cssProperties]) => {
-        styles[name] = createStyle(cssProperties, [name], styles[name]);
+        styles[name] = createStyle(
+            cssProperties,
+            [name],
+            styles[name] as StyleItem
+        );
     });
 }
 
+export function createAnimation(
+    name: string,
+    cssAnimationProperties: CSSAnimationProperties
+) {
+    styles[name] = {
+        ...(createStyle(
+            cssAnimationProperties,
+            [name],
+            styles[name] as StyleItem
+        ) as any),
+        order: -1,
+        type: "animation"
+    };
+    return name;
+}
+
 function constructClassName(path: string[]) {
     return path.reduce(
         (str, item) =>
@@ -106,6 +148,10 @@ function generateStyleRecusively(path: string[] = [], parent = styles) {
     return Object.entries(parent)
         .sort(([_, itemA], [__, itemB]) => itemA.order - itemB.order)
         .map(([tag, styleItem]) => {
+            if (styleItem.type === "animation") {
+                return `@keyframes ${tag} { ${generateStyleRecusively([], styleItem.children)} }`;
+            }
+
             let css = "";
 
             const currentPath = [...path, tag];
@@ -144,7 +190,8 @@ export function exportStyles() {
 
 const style = {
     createClass,
-    createGlobalStyle
+    createGlobalStyle,
+    createAnimation
 };
 
 export default style;

package/fullstacked_modules/style.ts

@@ -48,13 +48,23 @@ export type CSSProperties =
           [child: string]: CSSProperties;
       };
 
+export type CSSAnimationProperties = Partial<{
+    [key in `${number}%` | "from" | "to"]: CSSProperties;
+}>;
+
 export const createClass = (name: string, cssProperties: CSSProperties) => name;
 
 export const createGlobalStyle = (cssProperties: CSSProperties) => {};
 
+export const createAnimation = (
+    name: string,
+    cssAnimationProperties: CSSAnimationProperties
+) => name;
+
 const style = {
     createClass,
-    createGlobalStyle
+    createGlobalStyle,
+    createAnimation
 };
 
 export default style;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fullstacked",
-    "version": "0.12.2-1421",
+    "version": "0.12.2-1425",
     "scripts": {
         "build": "node build.js",
         "postbuild": "node build.js --binding",