feat: Added support of fallback properties in makeStaticStyles (#558)

* added fallback values support in makeStaticStyles

* Change files

* added the section for docs

* Change files

* PR review

---------

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

apps/website/docs/react/api/make-static-styles.md

@@ -127,3 +127,35 @@ export default function App(props) {
   return <p className={props.primaryText}>Hello world</p>;
 }
 ```
+
+## CSS Fallback Properties
+
+Griffel supports CSS fallback properties in order to support older browsers.
+
+Any CSS property accepts an array of values which are all added to the styles.
+Every browser will use the latest valid value (which might be a different one in different browsers, based on supported CSS in that browser):
+
+```js
+import { makeStaticStyles } from '@griffel/react';
+
+const useClasses = makeStaticStyles({
+  body: {
+    overflowY: ['scroll', 'overlay'],
+  },
+});
+
+function App() {
+  useStaticStyles();
+
+  return <div />;
+}
+```
+
+<OutputTitle>Produces following CSS...</OutputTitle>
+
+```css
+body {
+  overflow-y: scroll; /* Fallback for browsers which do not support overflow: overlay */
+  overflow-y: overlay; /* Used by browsers which support overflow: overlay */
+}
+```

change/@griffel-core-ab50eb51-b848-4e58-9a18-83d8598558f3.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add fallback values support in makeStaticStyles",
+  "packageName": "@griffel/core",
+  "email": "chhabrashubhdeep@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@griffel-style-types-fdb1d662-dcbb-4ec1-8430-c491a3105f1c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add support for fallback values in GriffelStaticStyle",
+  "packageName": "@griffel/style-types",
+  "email": "chhabrashubhdeep@gmail.com",
+  "dependentChangeType": "patch"
+}

e2e/typescript/src/assets/fixture-static.ts

@@ -0,0 +1,31 @@
+import type { GriffelStaticStyles } from '@griffel/style-types';
+
+function assertType(styles: GriffelStaticStyles): GriffelStaticStyles {
+  return styles;
+}
+
+// Basic styles
+//
+
+assertType('html { line-height: 20px; }');
+
+assertType({
+  body: {
+    color: 'red',
+  },
+});
+assertType({
+  '@font-face': {
+    fontFamily: 'My Font',
+    src: `url(my_font.woff)`,
+  },
+});
+
+// Styles with fallbacks
+//
+
+assertType({
+  body: {
+    display: ['flex', '-webkit-flex'],
+  },
+});

packages/core/src/makeStaticStyles.test.ts

@@ -141,4 +141,23 @@ describe('makeStaticStyles', () => {
       }
     `);
   });
+
+  it('fallback values', () => {
+    const useStyles = makeStaticStyles({
+      body: {
+        background: 'blue',
+        overflowY: ['scroll', 'hidden'],
+      },
+    });
+
+    useStyles({ renderer });
+
+    expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "d" {"data-priority":"0"} **/
+      body {
+        background: blue;
+        overflow-y: hidden;
+      }
+    `);
+  });
 });

packages/core/src/runtime/resolveStaticStyleRules.test.ts

@@ -47,4 +47,20 @@ describe('resolveStaticStyleRules', () => {
       ]
     `);
   });
+
+  it('handles fallbacks', () => {
+    expect(
+      resolveStaticStyleRules([
+        {
+          body: {
+            display: ['flex', '-webkit-flex'],
+          },
+        },
+      ]),
+    ).toMatchInlineSnapshot(`
+      Array [
+        "body{display:flex;display:-webkit-flex;}",
+      ]
+    `);
+  });
 });

packages/core/src/runtime/utils/cssifyObject.ts

@@ -7,12 +7,15 @@ export function cssifyObject(style: GriffelStyle | GriffelStaticStyle) {
   // eslint-disable-next-line guard-for-in
   for (const property in style) {
     const value = style[property as keyof GriffelStyle];
-
-    if (typeof value !== 'string' && typeof value !== 'number') {
+    if (typeof value === 'string' || typeof value === 'number') {
+      css += hyphenateProperty(property) + ':' + value + ';';
       continue;
     }
-
-    css += hyphenateProperty(property) + ':' + value + ';';
+    if (Array.isArray(value)) {
+      for (const arrValue of value) {
+        css += hyphenateProperty(property) + ':' + arrValue + ';';
+      }
+    }
   }
 
   return css;

packages/style-types/src/legacy/makeStaticStyles.ts

@@ -1,12 +1,13 @@
 import type * as CSS from 'csstype';
+import type { Fallback, GriffelStylesCSSValue } from '../shared';
 
 //
 // Types for makeStaticStyles()
 // ---
 //
 
 export type GriffelStaticStyle = {
-  [key: string]: CSS.Properties &
+  [key: string]: (CSS.Properties | Fallback<CSS.Properties<GriffelStylesCSSValue>>) &
     // TODO Questionable: how else would users target their own children?
     Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
 } & {

packages/style-types/src/makeStaticStyles.ts

@@ -1,12 +1,13 @@
 import type * as CSS from 'csstype';
+import type { GriffelStylesCSSValue, Fallback } from './shared';
 
 //
 // Types for makeStaticStyles()
 // ---
 //
 
 export type GriffelStaticStyle = {
-  [key: string]: CSS.Properties &
+  [key: string]: (CSS.Properties | Fallback<CSS.Properties<GriffelStylesCSSValue>>) &
     // TODO Questionable: how else would users target their own children?
     Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
 } & {