[breakpoints] Add ultra-wide breakpoint

packages/pigment-css-react/src/Container.jsx

@@ -134,7 +134,7 @@ process.env.NODE_ENV !== 'production'
        * Set to `false` to disable `maxWidth`.
        * @default 'lg'
        */
-      maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]),
+      maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'uw', 'xl', 'xs', false]),
     })
   : void 0;
 

packages/pigment-css-react/src/Hidden.jsx

@@ -91,8 +91,8 @@ if (process.env.NODE_ENV !== 'production') {
      * Hide the given breakpoint(s).
      */
     only: PropTypes.oneOfType([
-      PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-      PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])),
+      PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'uw']),
+      PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'uw'])),
     ]),
     /**
      * If `true`, screens this size and down are hidden.
@@ -106,6 +106,14 @@ if (process.env.NODE_ENV !== 'production') {
      * @ignore
      */
     style: PropTypes.object,
+    /**
+     * If `true`, screens this size and down are hidden.
+     */
+    uwDown: PropTypes.bool,
+    /**
+     * If `true`, screens this size and up are hidden.
+     */
+    uwUp: PropTypes.bool,
     /**
      * If `true`, screens this size and down are hidden.
      */

packages/pigment-css-react/src/base.ts

@@ -70,6 +70,6 @@ export interface PolymorphicComponent<SxProp, BaseProps extends BaseDefaultProps
 export interface BreakpointOverrides {}
 
 export type Breakpoint = OverridableStringUnion<
-  'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'uw',
   BreakpointOverrides
 >;

packages/pigment-css-react/src/processors/generateAtomics.ts

@@ -79,7 +79,7 @@ export class GenerateAtomicsProcessor extends BaseProcessor {
         };
         const sourceMapReplacements: Replacements = [
           {
-            length: cssText.length,
+            length: cssText?.length ?? 0,
             original: {
               start: {
                 column: this.location?.start.column ?? 0,

packages/pigment-css-react/tests/Container/fixtures/Container.output.js

@@ -113,7 +113,7 @@ process.env.NODE_ENV !== 'production'
        * Set to `false` to disable `maxWidth`.
        * @default 'lg'
        */
-      maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]),
+      maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'uw', 'xl', 'xs', false]),
     })
   : void 0;
 export default Container;

packages/pigment-css-react/tests/Hidden/fixtures/Hidden.output.js

@@ -121,8 +121,8 @@ if (process.env.NODE_ENV !== 'production') {
      * Hide the given breakpoint(s).
      */
     only: PropTypes.oneOfType([
-      PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-      PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])),
+      PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'uw']),
+      PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'uw'])),
     ]),
     /**
      * If `true`, screens this size and down are hidden.
@@ -136,6 +136,14 @@ if (process.env.NODE_ENV !== 'production') {
      * @ignore
      */
     style: PropTypes.object,
+    /**
+     * If `true`, screens this size and down are hidden.
+     */
+    uwDown: PropTypes.bool,
+    /**
+     * If `true`, screens this size and up are hidden.
+     */
+    uwUp: PropTypes.bool,
     /**
      * If `true`, screens this size and down are hidden.
      */

packages/pigment-css-react/tests/generateAtomics.test.js

@@ -10,27 +10,31 @@ const atomic = atomics({
         md: 'flex-direction-column-md',
         lg: 'flex-direction-column-lg',
         xl: 'flex-direction-column-xl',
+        uw: 'flex-direction-column-uw',
       },
       'column-reverse': {
         xs: 'flex-direction-column-reverse-xs',
         sm: 'flex-direction-column-reverse-sm',
         md: 'flex-direction-column-reverse-md',
         lg: 'flex-direction-column-reverse-lg',
         xl: 'flex-direction-column-reverse-xl',
+        uw: 'flex-direction-column-reverse-uw',
       },
       row: {
         xs: 'flex-direction-row-xs',
         sm: 'flex-direction-row-sm',
         md: 'flex-direction-row-md',
         lg: 'flex-direction-row-lg',
         xl: 'flex-direction-row-xl',
+        uw: 'flex-direction-row-uw',
       },
       'row-reverse': {
         xs: 'flex-direction-row-reverse-xs',
         sm: 'flex-direction-row-reverse-sm',
         md: 'flex-direction-row-reverse-md',
         lg: 'flex-direction-row-reverse-lg',
         xl: 'flex-direction-row-reverse-xl',
+        uw: 'flex-direction-row-reverse-uw',
       },
     },
     gap: {
@@ -40,12 +44,13 @@ const atomic = atomics({
         md: 'gap--Stack-gap-md',
         lg: 'gap--Stack-gap-lg',
         xl: 'gap--Stack-gap-xl',
+        uw: 'gap--Stack-gap-uw',
       },
     },
   },
   shorthands: { direction: ['flexDirection'], spacing: ['gap'] },
   // @ts-ignore This is not expected while calling the pre-transpiled generateAtomics
-  conditions: ['xs', 'sm', 'md', 'lg', 'xl'],
+  conditions: ['xs', 'sm', 'md', 'lg', 'xl', 'uw'],
   defaultCondition: 'xs',
   unitless: [],
   multipliers: {
@@ -168,11 +173,14 @@ describe('generateAtomics', () => {
             lgDown: 'display-none-lgDown',
             xlUp: 'display-none-xlUp',
             xlDown: 'display-none-xlDown',
+            uwUp: 'display-none-uwUp',
+            uwDown: 'display-none-uwDown',
             xsOnly: 'display-none-onlyXs',
             smOnly: 'display-none-onlySm',
             mdOnly: 'display-none-onlyMd',
             lgOnly: 'display-none-onlyLg',
             xlOnly: 'display-none-onlyXl',
+            uwOnly: 'display-none-onlyUw',
           },
         },
       },
@@ -187,11 +195,14 @@ describe('generateAtomics', () => {
         'lgDown',
         'xlUp',
         'xlDown',
+        'uwUp',
+        'uwDown',
         'xsOnly',
         'smOnly',
         'mdOnly',
         'lgOnly',
         'xlOnly',
+        'uwOnly',
       ],
     });