From 1eb46fc2e14aba8db16ef43de82674bcd6f8e19b Mon Sep 17 00:00:00 2001
From: Fredrik Nicol <fredrik.nicol@gmail.com>
Date: Sat, 1 Apr 2023 23:44:58 +0200
Subject: [PATCH] Patch `overflow: overlay`

---
 index.d.ts          | 26 +++++++++++++-------------
 index.js.flow       |  6 +++---
 src/data/patches.ts | 26 ++++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 4f83c67..ab76bc4 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -3432,7 +3432,7 @@ export interface StandardLonghandProperties<TLength = (string & {}) | 0, TTime =
   /**
    * The **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
    *
-   * **Syntax**: `visible | hidden | clip | scroll | auto`
+   * **Syntax**: `visible | hidden | clip | scroll | overlay | auto`
    *
    * **Initial value**: `visible`
    *
@@ -3446,7 +3446,7 @@ export interface StandardLonghandProperties<TLength = (string & {}) | 0, TTime =
   /**
    * The **`overflow-y`** CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.
    *
-   * **Syntax**: `visible | hidden | clip | scroll | auto`
+   * **Syntax**: `visible | hidden | clip | scroll | overlay | auto`
    *
    * **Initial value**: `visible`
    *
@@ -5628,7 +5628,7 @@ export interface StandardShorthandProperties<TLength = (string & {}) | 0, TTime
   /**
    * The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.
    *
-   * **Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`
+   * **Syntax**: `[ visible | hidden | clip | scroll | overlay | auto ]{1,2}`
    *
    * **Initial value**: `visible`
    *
@@ -6503,7 +6503,7 @@ export interface VendorLonghandProperties<TLength = (string & {}) | 0, TTime = s
   /**
    * The **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
    *
-   * **Syntax**: `visible | hidden | clip | scroll | auto`
+   * **Syntax**: `visible | hidden | clip | scroll | overlay | auto`
    *
    * **Initial value**: `visible`
    */
@@ -6511,7 +6511,7 @@ export interface VendorLonghandProperties<TLength = (string & {}) | 0, TTime = s
   /**
    * The **`overflow-y`** CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.
    *
-   * **Syntax**: `visible | hidden | clip | scroll | auto`
+   * **Syntax**: `visible | hidden | clip | scroll | overlay | auto`
    *
    * **Initial value**: `visible`
    */
@@ -12325,7 +12325,7 @@ export interface StandardLonghandPropertiesHyphen<TLength = (string & {}) | 0, T
   /**
    * The **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
    *
-   * **Syntax**: `visible | hidden | clip | scroll | auto`
+   * **Syntax**: `visible | hidden | clip | scroll | overlay | auto`
    *
    * **Initial value**: `visible`
    *
@@ -12339,7 +12339,7 @@ export interface StandardLonghandPropertiesHyphen<TLength = (string & {}) | 0, T
   /**
    * The **`overflow-y`** CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.
    *
-   * **Syntax**: `visible | hidden | clip | scroll | auto`
+   * **Syntax**: `visible | hidden | clip | scroll | overlay | auto`
    *
    * **Initial value**: `visible`
    *
@@ -14521,7 +14521,7 @@ export interface StandardShorthandPropertiesHyphen<TLength = (string & {}) | 0,
   /**
    * The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.
    *
-   * **Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`
+   * **Syntax**: `[ visible | hidden | clip | scroll | overlay | auto ]{1,2}`
    *
    * **Initial value**: `visible`
    *
@@ -15396,7 +15396,7 @@ export interface VendorLonghandPropertiesHyphen<TLength = (string & {}) | 0, TTi
   /**
    * The **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
    *
-   * **Syntax**: `visible | hidden | clip | scroll | auto`
+   * **Syntax**: `visible | hidden | clip | scroll | overlay | auto`
    *
    * **Initial value**: `visible`
    */
@@ -15404,7 +15404,7 @@ export interface VendorLonghandPropertiesHyphen<TLength = (string & {}) | 0, TTi
   /**
    * The **`overflow-y`** CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.
    *
-   * **Syntax**: `visible | hidden | clip | scroll | auto`
+   * **Syntax**: `visible | hidden | clip | scroll | overlay | auto`
    *
    * **Initial value**: `visible`
    */
@@ -19336,7 +19336,7 @@ export namespace Property {
 
   export type OutlineWidth<TLength = (string & {}) | 0> = Globals | DataType.LineWidth<TLength>;
 
-  export type Overflow = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible" | (string & {});
+  export type Overflow = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "overlay" | "scroll" | "visible" | (string & {});
 
   export type OverflowAnchor = Globals | "auto" | "none";
 
@@ -19350,9 +19350,9 @@ export namespace Property {
 
   export type OverflowWrap = Globals | "anywhere" | "break-word" | "normal";
 
-  export type OverflowX = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible";
+  export type OverflowX = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "overlay" | "scroll" | "visible";
 
-  export type OverflowY = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible";
+  export type OverflowY = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "overlay" | "scroll" | "visible";
 
   export type OverscrollBehavior = Globals | "auto" | "contain" | "none" | (string & {});
 
diff --git a/index.js.flow b/index.js.flow
index ec0d353..90ca46e 100644
--- a/index.js.flow
+++ b/index.js.flow
@@ -4973,7 +4973,7 @@ export type Property$OutlineStyle = Globals | DataType$LineStyle | "auto" | stri
 
 export type Property$OutlineWidth<TLength = string | 0> = Globals | DataType$LineWidth<TLength>;
 
-export type Property$Overflow = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible" | string;
+export type Property$Overflow = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "overlay" | "scroll" | "visible" | string;
 
 export type Property$OverflowAnchor = Globals | "auto" | "none";
 
@@ -4987,9 +4987,9 @@ export type Property$OverflowInline = Globals | "auto" | "clip" | "hidden" | "sc
 
 export type Property$OverflowWrap = Globals | "anywhere" | "break-word" | "normal";
 
-export type Property$OverflowX = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible";
+export type Property$OverflowX = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "overlay" | "scroll" | "visible";
 
-export type Property$OverflowY = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible";
+export type Property$OverflowY = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "overlay" | "scroll" | "visible";
 
 export type Property$OverscrollBehavior = Globals | "auto" | "contain" | "none" | string;
 
diff --git a/src/data/patches.ts b/src/data/patches.ts
index 368e355..4cd328c 100644
--- a/src/data/patches.ts
+++ b/src/data/patches.ts
@@ -1,7 +1,21 @@
+import * as rawProperties from 'mdn-data/css/properties.json';
+
 export interface IExtendedProperty extends Partial<MDN.Property> {
   shorthand?: boolean;
 }
 
+if (rawProperties.overflow.syntax !== '[ visible | hidden | clip | scroll | auto ]{1,2}') {
+  throw new Error('`overflow` syntax has changed');
+}
+
+if (rawProperties['overflow-x'].syntax !== 'visible | hidden | clip | scroll | auto') {
+  throw new Error('`overflow-x` syntax has changed');
+}
+
+if (rawProperties['overflow-y'].syntax !== 'visible | hidden | clip | scroll | auto') {
+  throw new Error('`overflow-y` syntax has changed');
+}
+
 export const properties: { [property: string]: IExtendedProperty } = {
   /**
    * https://drafts.csswg.org/css-overflow-3/#line-clamp
@@ -9,6 +23,18 @@ export const properties: { [property: string]: IExtendedProperty } = {
   'line-clamp': {
     shorthand: true,
   },
+  // Add `overlay`
+  overflow: {
+    syntax: '[ visible | hidden | clip | scroll | overlay | auto ]{1,2}',
+  },
+  // Add `overlay`
+  'overflow-x': {
+    syntax: 'visible | hidden | clip | scroll | overlay | auto',
+  },
+  // Add `overlay`
+  'overflow-y': {
+    syntax: 'visible | hidden | clip | scroll | overlay | auto',
+  },
 };
 
 export const syntaxes: { [property: string]: MDN.Syntax } = {