@blockle/blocks-core 0.21.8 → 0.21.10

package/dist/atoms/atoms.js

@@ -4,20 +4,26 @@ function atoms(properties) {
   for (const property in properties) {
     const value = properties[property];
     const target = atomicProperties[property];
-    if (typeof value === "string") {
-      if (target.values[value]) {
+    if (!target) {
+      continue;
+    }
+    if (typeof value === "string" || typeof value === "number") {
+      if (target.values[value] !== void 0) {
         classList.push(target.values[value].defaultClass);
       }
     } else if (Array.isArray(value)) {
       value.forEach((val, i) => {
-        var _a;
+        const atomicValue = target.values[val];
         if (i === 0) {
-          if (target.values[val]) {
-            classList.push(target.values[val].defaultClass);
+          if (atomicValue) {
+            classList.push(atomicValue.defaultClass);
           }
-        } else {
-          classList.push(((_a = target.values[val]) == null ? void 0 : _a.conditions[i]) ?? "");
+          return;
+        }
+        if (!(atomicValue == null ? void 0 : atomicValue.conditions[i])) {
+          return;
         }
+        classList.push(atomicValue == null ? void 0 : atomicValue.conditions[i]);
       });
     }
   }

package/dist/atoms/atoms.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/atoms/defineProperties.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const css = require("@vanilla-extract/css");
+const layers_css = require("../css/layers.css.cjs");
 function defineProperties({
   properties,
   conditions
@@ -14,21 +15,29 @@ function defineProperties({
     if (Array.isArray(values)) {
       for (const value of values) {
         const defaultClass = css.style({
-          [property]: value
+          "@layer": {
+            [layers_css.blocksLayer]: {
+              [property]: value
+            }
+          }
         });
         const propResult = {
           defaultClass
         };
-        if (conditions) {
+        if (isValidConditionList(conditions)) {
           propResult.conditions = conditions.map((condition, i) => {
             if (i === 0 && Object.keys(condition).length === 0) {
               return defaultClass;
             }
             if (typeof condition === "object" && condition["@media"]) {
               return css.style({
-                "@media": {
-                  [condition["@media"]]: {
-                    [property]: value
+                "@layer": {
+                  [layers_css.blocksLayer]: {
+                    "@media": {
+                      [condition["@media"]]: {
+                        [property]: value
+                      }
+                    }
                   }
                 }
               });
@@ -45,12 +54,16 @@ function defineProperties({
     }
     for (const value in values) {
       const defaultClass = css.style({
-        [property]: values[value]
+        "@layer": {
+          [layers_css.blocksLayer]: {
+            [property]: values[value]
+          }
+        }
       });
       const propResult = {
         defaultClass
       };
-      if (conditions) {
+      if (isValidConditionList(conditions)) {
         propResult.conditions = conditions.map((condition, i) => {
           if (i === 0 && Object.keys(condition).length === 0) {
             return defaultClass;
@@ -75,4 +88,7 @@ function defineProperties({
   }
   return result;
 }
+function isValidConditionList(condition) {
+  return Array.isArray(condition) && condition.length > 0;
+}
 exports.defineProperties = defineProperties;

package/dist/atoms/defineProperties.d.ts

@@ -1,5 +1,5 @@
 import { Properties as CSSProperties } from 'csstype';
-type MapArray<T extends any[], V> = {
+type MapArray<T extends unknown[], V> = {
     [Index in keyof T]: V;
 };
 type AtomicPrimitiveValue = string | number;
@@ -13,20 +13,20 @@ type PropertyDefinition<TProperties, TConditions> = {
     properties: TProperties;
     conditions?: TConditions;
 };
-type PropertyResultValue<TConditions> = TConditions extends any[] ? {
+type PropertyResultValue<TConditions> = TConditions extends unknown[] ? {
     defaultClass: string;
-    conditions: TConditions extends any[] ? MapArray<TConditions, string> : never;
+    conditions: TConditions extends unknown[] ? MapArray<TConditions, string> : never;
 } : {
     defaultClass: string;
 };
 type PropertyResult<TProperties extends Properties, TConditions> = {
     [K in keyof TProperties]: {
-        values: TProperties[K] extends any[] ? {
+        values: TProperties[K] extends AtomicPrimitiveValue[] ? {
             [V in TProperties[K][number]]: PropertyResultValue<TConditions>;
         } : {
             [V in keyof TProperties[K]]: PropertyResultValue<TConditions>;
         };
     };
 };
-export declare function defineProperties<const TProperties extends Properties, const TConditions extends PropertyConditions>({ properties, conditions, }: PropertyDefinition<TProperties, TConditions>): PropertyResult<TProperties, TConditions>;
+export declare function defineProperties<const TProperties extends Properties, TConditions extends PropertyConditions | undefined>({ properties, conditions, }: PropertyDefinition<TProperties, TConditions>): PropertyResult<TProperties, TConditions>;
 export {};

package/dist/atoms/defineProperties.js

@@ -1,4 +1,5 @@
 import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../css/layers.css.js";
 function defineProperties({
   properties,
   conditions
@@ -12,21 +13,29 @@ function defineProperties({
     if (Array.isArray(values)) {
       for (const value of values) {
         const defaultClass = style({
-          [property]: value
+          "@layer": {
+            [blocksLayer]: {
+              [property]: value
+            }
+          }
         });
         const propResult = {
           defaultClass
         };
-        if (conditions) {
+        if (isValidConditionList(conditions)) {
           propResult.conditions = conditions.map((condition, i) => {
             if (i === 0 && Object.keys(condition).length === 0) {
               return defaultClass;
             }
             if (typeof condition === "object" && condition["@media"]) {
               return style({
-                "@media": {
-                  [condition["@media"]]: {
-                    [property]: value
+                "@layer": {
+                  [blocksLayer]: {
+                    "@media": {
+                      [condition["@media"]]: {
+                        [property]: value
+                      }
+                    }
                   }
                 }
               });
@@ -43,12 +52,16 @@ function defineProperties({
     }
     for (const value in values) {
       const defaultClass = style({
-        [property]: values[value]
+        "@layer": {
+          [blocksLayer]: {
+            [property]: values[value]
+          }
+        }
       });
       const propResult = {
         defaultClass
       };
-      if (conditions) {
+      if (isValidConditionList(conditions)) {
         propResult.conditions = conditions.map((condition, i) => {
           if (i === 0 && Object.keys(condition).length === 0) {
             return defaultClass;
@@ -73,6 +86,9 @@ function defineProperties({
   }
   return result;
 }
+function isValidConditionList(condition) {
+  return Array.isArray(condition) && condition.length > 0;
+}
 export {
   defineProperties
 };

package/dist/css/cssMatrixUtils.cjs

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const CSSMatrixValuePattern = /matrix\((.*?)\)/;
 function parseCSSTransform(styleDeclaration) {
   const transform = styleDeclaration.getPropertyValue("transform");
-  if (!transform || transform === "none" || !transform.startsWith("matrix(")) {
+  if (!transform || !CSSMatrixValuePattern.test(transform)) {
     return {
       a: 1,
       b: 0,
@@ -12,7 +13,11 @@ function parseCSSTransform(styleDeclaration) {
       ty: 0
     };
   }
-  const matrixValues = transform.substring(7, transform.length - 1).split(",").map((value) => cssValueToNumber(value.trim()));
+  const matrixMatch = transform.match(CSSMatrixValuePattern);
+  if (!matrixMatch || !matrixMatch[1]) {
+    throw new Error(`Invalid matrix value: ${transform}`);
+  }
+  const matrixValues = matrixMatch[1].split(",").map((value) => cssValueToNumber(value.trim()));
   if (matrixValues.length !== 6) {
     throw new Error("Invalid matrix value");
   }

package/dist/css/cssMatrixUtils.js

@@ -1,6 +1,7 @@
+const CSSMatrixValuePattern = /matrix\((.*?)\)/;
 function parseCSSTransform(styleDeclaration) {
   const transform = styleDeclaration.getPropertyValue("transform");
-  if (!transform || transform === "none" || !transform.startsWith("matrix(")) {
+  if (!transform || !CSSMatrixValuePattern.test(transform)) {
     return {
       a: 1,
       b: 0,
@@ -10,7 +11,11 @@ function parseCSSTransform(styleDeclaration) {
       ty: 0
     };
   }
-  const matrixValues = transform.substring(7, transform.length - 1).split(",").map((value) => cssValueToNumber(value.trim()));
+  const matrixMatch = transform.match(CSSMatrixValuePattern);
+  if (!matrixMatch || !matrixMatch[1]) {
+    throw new Error(`Invalid matrix value: ${transform}`);
+  }
+  const matrixValues = matrixMatch[1].split(",").map((value) => cssValueToNumber(value.trim()));
   if (matrixValues.length !== 6) {
     throw new Error("Invalid matrix value");
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-core",
-  "version": "0.21.8",
+  "version": "0.21.10",
   "description": "Core for Blocks",
   "type": "module",
   "sideEffects": false,