fix(lint): reverse stylelint media query notation rule & add comments…

… to config (#3790)
votingworks · Aug 4, 2023 · 855a4b1 · 855a4b1
1 parent e54cda7
commit 855a4b1
Show file tree

Hide file tree

Showing 15 changed files with 48 additions and 36 deletions.
diff --git a/apps/admin/frontend/src/__snapshots__/app.test.tsx.snap b/apps/admin/frontend/src/__snapshots__/app.test.tsx.snap
@@ -151,15 +151,15 @@ exports[`L&A (logic and accuracy) flow 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
 @media print {
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -1336,15 +1336,15 @@ exports[`L&A (logic and accuracy) flow 2`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
 @media print {
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -2670,15 +2670,15 @@ exports[`L&A (logic and accuracy) flow 3`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
 @media print {
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 

diff --git a/apps/central-scan/frontend/src/components/button_bar.tsx b/apps/central-scan/frontend/src/components/button_bar.tsx
@@ -24,7 +24,7 @@ export const ButtonBar = styled('nav')<Props>`
     flex: 1;
     margin: 0.25rem;
 
-    @media (width >= 480px) {
+    @media (min-width: 480px) {
       flex: ${({ separatePrimaryButton }) =>
         separatePrimaryButton ? '0' : undefined};
     }
@@ -33,7 +33,7 @@ export const ButtonBar = styled('nav')<Props>`
   & > *:first-child {
     order: ${({ naturalOrder = false }) => (naturalOrder ? undefined : '2')};
 
-    @media (width >= 480px) {
+    @media (min-width: 480px) {
       margin-right: ${({ naturalOrder = false, separatePrimaryButton }) =>
         separatePrimaryButton && naturalOrder ? 'auto' : undefined};
       margin-left: ${({ naturalOrder = false, separatePrimaryButton }) =>
@@ -42,7 +42,7 @@ export const ButtonBar = styled('nav')<Props>`
   }
 
   & > *:only-child {
-    @media (width >= 480px) {
+    @media (min-width: 480px) {
       flex: ${({ centerOnlyChild = true }) => (centerOnlyChild ? 0 : 1)};
       margin: ${({ centerOnlyChild = true }) =>
         centerOnlyChild ? 'auto' : undefined};

diff --git a/apps/central-scan/frontend/src/components/prose.tsx b/apps/central-scan/frontend/src/components/prose.tsx
@@ -12,7 +12,7 @@ export const Prose = styled('div')<Props>`
   text-align: ${({ textCenter }) => (textCenter ? 'center' : undefined)};
   line-height: 1.2;
 
-  @media (width >= 480px) {
+  @media (min-width: 480px) {
     line-height: 1.3;
   }
 

diff --git a/apps/mark-scan/frontend/src/__snapshots__/app_contest_multi_seat.test.tsx.snap b/apps/mark-scan/frontend/src/__snapshots__/app_contest_multi_seat.test.tsx.snap
@@ -585,7 +585,7 @@ exports[`Single Seat Contest 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -595,15 +595,15 @@ exports[`Single Seat Contest 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
 @media print {
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 

diff --git a/apps/mark-scan/frontend/src/__snapshots__/app_contest_single_seat.test.tsx.snap b/apps/mark-scan/frontend/src/__snapshots__/app_contest_single_seat.test.tsx.snap
@@ -585,7 +585,7 @@ exports[`Single Seat Contest 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -595,15 +595,15 @@ exports[`Single Seat Contest 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
 @media print {
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 

diff --git a/apps/mark-scan/frontend/src/__snapshots__/app_contest_write_in.test.tsx.snap b/apps/mark-scan/frontend/src/__snapshots__/app_contest_write_in.test.tsx.snap
@@ -473,15 +473,15 @@ exports[`Single Seat Contest with Write In 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
 @media print {
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 

diff --git a/apps/mark/frontend/src/__snapshots__/app_contest_multi_seat.test.tsx.snap b/apps/mark/frontend/src/__snapshots__/app_contest_multi_seat.test.tsx.snap
@@ -493,7 +493,7 @@ exports[`Single Seat Contest 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -507,15 +507,15 @@ exports[`Single Seat Contest 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
 @media print {
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 

diff --git a/apps/mark/frontend/src/__snapshots__/app_contest_single_seat.test.tsx.snap b/apps/mark/frontend/src/__snapshots__/app_contest_single_seat.test.tsx.snap
@@ -493,7 +493,7 @@ exports[`Single Seat Contest 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -507,15 +507,15 @@ exports[`Single Seat Contest 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
 @media print {
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 

diff --git a/apps/mark/frontend/src/__snapshots__/app_contest_write_in.test.tsx.snap b/apps/mark/frontend/src/__snapshots__/app_contest_write_in.test.tsx.snap
@@ -385,15 +385,15 @@ exports[`Single Seat Contest with Write In 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
 @media print {
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 

diff --git a/libs/ui/src/__snapshots__/button_bar.test.tsx.snap b/libs/ui/src/__snapshots__/button_bar.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`renders ButtonBar 1`] = `
 
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
   .c0 > *:only-child {
     -webkit-box-flex: initial;
     -webkit-flex-grow: initial;

diff --git a/libs/ui/src/__snapshots__/modal.test.tsx.snap b/libs/ui/src/__snapshots__/modal.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`Modal can configure a wider max width 1`] = `
   padding: 0.5rem 0.75rem;
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
   .c0 {
     position: static;
     border-radius: 0.5rem;
@@ -51,7 +51,7 @@ exports[`Modal can configure a wider max width 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 
@@ -122,7 +122,7 @@ exports[`Modal can configure fullscreen 1`] = `
   overflow: auto;
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
   .c0 {
     position: static;
     border-radius: 0;
@@ -137,7 +137,7 @@ exports[`Modal can configure fullscreen 1`] = `
   }
 }
 
-@media (width >= 480px) {
+@media (min-width:480px) {
 
 }
 

diff --git a/libs/ui/src/button_bar.tsx b/libs/ui/src/button_bar.tsx
@@ -20,7 +20,7 @@ export const ButtonBar = styled('div')`
   }
 
   & > *:only-child {
-    @media (width >= 480px) {
+    @media (min-width: 480px) {
       flex-grow: initial;
       margin: auto;
       min-width: 33.333%;

diff --git a/libs/ui/src/button_list.tsx b/libs/ui/src/button_list.tsx
@@ -3,11 +3,11 @@ import styled from 'styled-components';
 export const ButtonList = styled.p`
   column-gap: 1rem;
 
-  @media (width >= 1024px) {
+  @media (min-width: 1024px) {
     columns: 2;
   }
 
-  @media (width >= 1440px) {
+  @media (min-width: 1440px) {
     columns: 3;
   }
 

diff --git a/libs/ui/src/modal.tsx b/libs/ui/src/modal.tsx
@@ -39,7 +39,7 @@ const ReactModalContent = styled('div')<ReactModalContentInterface>`
   font-size: ${({ themeDeprecated }) => themeDeprecated?.fontSize};
   -webkit-overflow-scrolling: touch;
 
-  @media (width >= 480px) {
+  @media (min-width: 480px) {
     position: static;
     border-radius: ${({ fullscreen }) => (fullscreen ? '0' : '0.5rem')};
     max-width: ${({ fullscreen, modalWidth = ModalWidth.Standard }) =>
@@ -62,7 +62,7 @@ const ReactModalOverlay = styled('div')<ReactModalOverlayInterface>`
   z-index: 999; /* Should be above all default UI */
   background: ${(p) => rgba(p.theme.colors.foreground, 0.9)};
 
-  @media (width >= 480px) {
+  @media (min-width: 480px) {
     padding: ${({ fullscreen }) => (fullscreen ? '0' : '0.5rem')};
   }
 

diff --git a/stylelint.shared.js b/stylelint.shared.js
@@ -1,14 +1,26 @@
+// Configuration for our CSS linting with stylelint
 module.exports = {
   extends: ['stylelint-config-standard'],
   customSyntax: 'postcss-styled-syntax',
   rules: {
+    // We use color functions (e.g. rgb) in nested JS that, being JS, need comma-separated
+    // parameters. "Modern" notation in CSS is space-separated parameters. "Legacy"
+    // notation enforces comma-separated parameters.
     'color-function-notation': 'legacy',
+    // Usually this rule is smart enough to ignore nested JS variable names, but
+    // sometimes it de-capitalizes them, so it's unsafe for auto-fix.
     'value-keyword-case': [
       'lower',
       {
         disableFix: true,
         camelCaseSvgKeywords: true,
       },
     ],
+    // Modern "context" notation for media queries is:
+    //         @media (width >= 600px)
+    // Chromium supports this only after version 104, so we enforce the older
+    // "prefix" notation:
+    //         @media (min-width: 600px)
+    'media-feature-range-notation': 'prefix',
   },
 };