removed the check on css props validity

wpmudev · Nov 6, 2024 · 632a5f5 · 632a5f5
1 parent 9b26214
commit 632a5f5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 45 deletions.
diff --git a/packages/assets/css/src/scss/_utils/_tokens.scss b/packages/assets/css/src/scss/_utils/_tokens.scss
@@ -1,13 +1,9 @@
+
 // Do not edit directly
-// Generated on Wed, 23 Oct 2024 10:41:22 GMT
+// Generated on Wed, 06 Nov 2024 13:34:01 GMT
 
 $accordion-border-radius-sm: 10px;
-$advanced-banner-background: linear-gradient(
-	90deg,
-	#222 0%,
-	#383323 48.96%,
-	#514524 100%
-);
+$advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);
 $advanced-banner-size-width: 260px;
 $avatar-container-size-sm: 24px;
 $avatar-container-size-md: 32px;
@@ -348,10 +344,10 @@ $border-width-md: 2px;
 $border-width-xl: 4px;
 $border-radius-xs: 3px;
 $border-radius-sm: 4px;
-$border-radius-md: 4px * 2;
-$border-radius-lg: 4px * 3;
-$border-radius-xl: 4px * 4;
-$border-radius-2xl: 4px * 5;
+$border-radius-md: 4px*2;
+$border-radius-lg: 4px*3;
+$border-radius-xl: 4px*4;
+$border-radius-2xl: 4px*5;
 $border-radius-default: 6px;
 $font-weight-sm: 400;
 $font-weight-md: 500;
@@ -377,8 +373,7 @@ $font-spacing-md: 0.2px;
 $font-spacing-lg: 0.5px;
 $font-spacing-2xl: 1px;
 $font-spacing-default: 0px;
-$font-family-default: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
-	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+$font-family-default: "Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
 $font-family-code: "Roboto Mono", monospace;
 $dashboard-size-width-lg: 440px;
 $datepicker-font-size: 14px-1px;
@@ -435,7 +430,7 @@ $input-font-height-sm: 16px;
 $input-font-height-md: 24px;
 $input-spacing-padding-vertical-sm: 8px;
 $input-spacing-padding-vertical-md: 8px;
-$input-spacing-padding-horizontal-sm: 4px * 3;
+$input-spacing-padding-horizontal-sm: 4px*3;
 $input-spacing-padding-horizontal-md: 16px;
 $input-spacing-lg: 44px;
 $input-border-width-sm: 1px;
@@ -454,9 +449,9 @@ $integration-disabled-opacity: 0.5;
 $layout-content-width: 1600px;
 $layout-spacing-main-sm: -20px;
 $layout-spacing-main-md: -10px;
-$layout-spacing-content-sm: 8px * 2;
-$layout-spacing-content-md: 8px * 3;
-$layout-spacing-content-lg: 8px * 4;
+$layout-spacing-content-sm: 8px*2;
+$layout-spacing-content-md: 8px*3;
+$layout-spacing-content-lg: 8px*4;
 $menu-spacing-horizontal: 24px;
 $modal-spacing-lg: 40px;
 $modal-border-radius: 24px;
@@ -556,11 +551,7 @@ $selector-size-width-md: 130px;
 $selector-size-width-lg: 208px;
 $sidebar-spacing-md: 12px;
 $sidebar-size-width-md: 260px;
-$skeleton-background: linear-gradient(
-	93.77deg,
-	$color-grey-10 -10.31%,
-	#f5f5f5 -4.92%
-);
+$skeleton-background: linear-gradient(93.77deg, $color-grey-10 -10.31%, #f5f5f5 -4.92%);
 $skeleton-height: 18px;
 $skeleton-animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 $spinner-size-height-lg: 36px;
@@ -599,7 +590,7 @@ $tabs-navitem-spacing-vertical: 26px;
 $tabs-navitem-spacing-horizontal: 16px;
 $tabs-navitem-gap: 4px;
 $tabs-navitem-border-width: 4px;
-$tabs-panel-spacing: 16px * 2;
+$tabs-panel-spacing: 16px*2;
 $tabs-color-active: #0059ff;
 $tabs-color-hover: #0059ff;
 $tabs-color-focus-border-color: #0059ff;
@@ -611,18 +602,8 @@ $tabs-arrow-size-height: 100%;
 $tabs-arrow-color: #b3b3b3;
 $tabs-arrow-hover-color: #1a1a1a;
 $tabs-arrow-hover-background: #ffffff;
-$tabs-arrow-left-background: linear-gradient(
-	90deg,
-	#fff 0%,
-	#fff 71.63%,
-	rgba(248, 248, 248, 0) 100%
-);
-$tabs-arrow-right-background: linear-gradient(
-	270deg,
-	#fff 0%,
-	#fff 71.63%,
-	rgba(248, 248, 248, 0) 100%
-);
+$tabs-arrow-left-background: linear-gradient(90deg, #FFF 0%, #FFF 71.63%, rgba(248, 248, 248, 0.00) 100%);
+$tabs-arrow-right-background: linear-gradient(270deg, #FFF 0%, #FFF 71.63%, rgba(248, 248, 248, 0.00) 100%);
 $tag-font-size-sm: 10px;
 $tag-font-size-md: 12px;
 $tag-font-spacing-sm: -0.1px;

diff --git a/packages/hooks/src/use-styles.ts b/packages/hooks/src/use-styles.ts
@@ -4,7 +4,6 @@ import createEmotion from "@emotion/css/create-instance"
 import {
 	_isTestingMode,
 	generateCN,
-	isValidCSSRule,
 	isObjectEmpty,
 	isNestedStyleProperty,
 } from "@wpmudev/sui-utils"
@@ -197,13 +196,13 @@ const { css } = createEmotion({
 const createStyles = (styleObject: Record<string, any>) =>
 	!isObjectEmpty(styleObject) ? css(styleObject) : ""
 
-/**
- * Check if an object has valid CSSProperty
- *
- * @param {Object} props expected to be CSSProperties
- */
-const isValidCSSPropExists = (props: Record<string, any>): boolean =>
-	Object.keys(props).filter((p) => !!isValidCSSRule(p, props[p])).length > 0
+// /**
+//  * Check if an object has valid CSSProperty, this one check for native css properties
+//  *
+//  * @param {Object} props expected to be CSSProperties
+//  */
+// const isValidCSSPropExists = (props: Record<string, any>): boolean =>
+// 	Object.keys(props).filter((p) => !!isValidCSSRule(p, props[p])).length > 0
 
 /**
  * SUI custom hook for generating className based on passed CSS properties
@@ -227,8 +226,10 @@ export const useStyles = (
 		const styleObject = JSON.parse(stringifiedStyles)
 		let generatedCSS: Record<string, any> = {}
 
-		// process if styleProps has valid CSS properties
-		if (!isObjectEmpty(styleObject) && isValidCSSPropExists(styleObject)) {
+		/* Process if styleProps has valid CSS propertie 
+		We don't have to check for css properties validity since we are making type checking 
+		and the reason is there's no one way that works with all browsers  */
+		if (!isObjectEmpty(styleObject)) {
 			// go through all props
 			for (const name of Object.keys(styleObject)) {
 				const val = styleObject[name as keyof CSSProperties]