Merge pull request #1234 from bbc/grid-support-realer

stricter grid support detection

packages/utilities/psammead-styles/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 1.2.0 | [PR#1234](https://github.com/bbc/psammead/pull/1234) Add custom CSS Grid feature detector |
 | 1.1.5 | [PR#1215](https://github.com/bbc/psammead/pull/1215) Fix `sans serif` typo |
 | 1.1.4 | [PR#1066](https://github.com/bbc/psammead/pull/1066) Fix Serif Medium font. |
 | 1.1.3 | [PR#1180](https://github.com/bbc/psammead/pull/1180) Update devDependencies |

packages/utilities/psammead-styles/README.md

@@ -5,6 +5,7 @@ This package provides a collection of string constants for use in CSS, containin
 ## Exports
 
 `/colours` - Project-defined colours that will be required by multiple Psammead components or themes. These colours are not defined by GEL.
+`/detection` - Project-defined CSS feature detection statements.
 `/fonts` - Project-defined browser behaviours for the Reith font. The primary reason these are not considered GEL-defined (and not part of [`@bbc/gel-foundations`](https://www.npmjs.com/package/@bbc/gel-foundations)) is due to the custom weighting and loading definitions. [More details on the font-faces defined in this package are available here.](./font-faces.md)
 
 `/font-styles` provides functions that can be used to get font-styles for different services. If a font-style is not available all the functions will fallback to regular sans font-style of the service.
@@ -51,7 +52,7 @@ const SomeStyledComponent = css`
 
 ### font-styles
 
-In case you are using embeded fonts, you need to make sure you have loaded your fonts first before using the functions. If the embeded font is not loaded, the fallback font will be applied
+In case you are using embedded fonts, you need to make sure you have loaded your fonts first before using the functions. If the embedded font is not loaded, the fallback font will be applied
 
 ```js
 import { getSansRegular } from '@bbc/psammead-styles/font-styles';
@@ -64,6 +65,25 @@ const SomeStyledComponent = css`
 `;
 ```
 
+### detection
+
+We have defined custom feature detection statements (using CSS `@supports` syntax) to provide workarounds for browser-specific bugs.
+
+- grid: We experienced issues using `@supports (display:grid)` from browsers with buggy CSS Grid implementations, and found that detecting on `@supports (grid-template-columns: fit-content(200px))` gave more consistent detection.
+
+```js
+import { grid } from '@bbc/psammead-styles/detection';
+
+const someGridUsingComponent = css`
+  @supports (${grid}) {
+    display: grid;
+    /* grid CSS */
+  }
+
+  /* fallback CSS */
+`;
+```
+
 ## Contributing
 
 When **adding** a new export to this utility package the [export tests](https://github.com/bbc/psammead/blob/5d7395fd60bd8d73796d5a23775b4b5b36db1445/packages/utilities/psammead-styles/index.test.jsx#L11-L35) also need to be updated. When **removing** an exisiting export from this utility package the [export tests](https://github.com/bbc/psammead/blob/5d7395fd60bd8d73796d5a23775b4b5b36db1445/packages/utilities/psammead-styles/index.test.jsx#L11-L35) need to be updated and the package version requires a major change (EG: 1.2.1 -> 2.0.0) as this would be considered a breaking change due to functionality being removed.

packages/utilities/psammead-styles/detection.js

@@ -0,0 +1 @@
+module.exports = require('./dist/detection'); // eslint-disable-line import/no-unresolved

packages/utilities/psammead-styles/index.test.jsx

@@ -1,6 +1,8 @@
 import { testUtilityPackages } from '@bbc/psammead-test-helpers';
 import * as colours from './colours';
 import * as coloursFromSrc from './src/colours';
+import * as detection from './detection';
+import * as detectionFromSrc from './src/detection';
 import * as fonts from './fonts';
 import * as fontsFromSrc from './src/fonts';
 
@@ -31,6 +33,10 @@ const fontsExpectedExports = {
   F_NASSIM_PERSIAN_BOLD: 'string',
 };
 
+const detectionExpectedExports = {
+  grid: 'string',
+};
+
 const coloursExpectedExports = {
   C_EBON: 'string',
   C_POSTBOX: 'string',
@@ -57,16 +63,19 @@ const coloursExpectedExports = {
 
 const expectedExports = {
   colours: coloursExpectedExports,
+  detection: detectionExpectedExports,
   fonts: fontsExpectedExports,
 };
 
 const actualExports = {
   colours,
+  detection,
   fonts,
 };
 
 const actualExportsFromSrc = {
   colours: coloursFromSrc,
+  detection: detectionFromSrc,
   fonts: fontsFromSrc,
 };
 

packages/utilities/psammead-styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-styles",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "A collection of string constants for use in CSS, containing non-GEL styling details that are bespoke to specific BBC services and products.",
   "repository": {
     "type": "git",

packages/utilities/psammead-styles/src/detection.js

@@ -0,0 +1,10 @@
+/* eslint-disable import/prefer-default-export */
+
+/* In an ideal world; this would just be `@supports (display: grid)`.
+ * This is not an ideal world. This is a world where some mobile vendor forked
+ * Firefox 48 which had WIP grid support disabled behind a feature flag, and
+ * enabled the WIP grid support, which breaks our pages.
+ * The `fit-content` CSS function did not land in Firefox until 51 (regardless
+ * of feature flag settings) which enables us to better detect our fallback.
+ */
+export const grid = 'grid-template-columns: fit-content(200px)';

packages/utilities/psammead-styles/src/index.stories.jsx

@@ -9,6 +9,7 @@ import {
 import { latin } from '@bbc/gel-foundations/scripts';
 import notes from '../README.md';
 import * as colours from './colours';
+import { grid } from './detection';
 
 const ColourContainer = styled.div`
   padding: ${GEL_SPACING_DBL};
@@ -36,19 +37,47 @@ const ColourValue = styled.div`
   ${getBodyCopy(latin)};
 `;
 
-storiesOf('Utilities|Psammead Styles', module).add(
-  'colours',
-  () => (
-    <ColourContainer>
-      {Object.keys(colours).map(colour => (
-        <ColourRow key={colours[colour]}>
-          <ColourBox colour={colours[colour]}>{colours[colour]}</ColourBox>
-          <ColourValue>{colour}</ColourValue>
-        </ColourRow>
-      ))}
-    </ColourContainer>
-  ),
-  {
-    notes,
-  },
-);
+const Detects = styled.li`
+  color: red;
+  &::after {
+    content: ' = NO';
+  }
+
+  @supports (${props => props.detector}) {
+    color: green;
+    &::after {
+      content: ' = YES';
+    }
+  }
+`;
+
+const detectionExamples = ['display: grid', grid];
+
+storiesOf('Utilities|Psammead Styles', module)
+  .add(
+    'colours',
+    () => (
+      <ColourContainer>
+        {Object.keys(colours).map(colour => (
+          <ColourRow key={colours[colour]}>
+            <ColourBox colour={colours[colour]}>{colours[colour]}</ColourBox>
+            <ColourValue>{colour}</ColourValue>
+          </ColourRow>
+        ))}
+      </ColourContainer>
+    ),
+    { notes },
+  )
+  .add(
+    'CSS feature detection',
+    () => (
+      <ul>
+        {detectionExamples.map(ex => (
+          <Detects key={ex} detector={ex}>
+            <pre>@supports ({ex})</pre>
+          </Detects>
+        ))}
+      </ul>
+    ),
+    { notes },
+  );