[PoC][CLOV-990]: add css-var shell and wrappers to mitigate css in runtime

.storybook/main.ts

@@ -20,7 +20,7 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
   stories: [
-    '../examples/**/stories.@(ts|tsx|js|jsx)',
+    '../examples/**/{stories,*.stories}.@(ts|tsx|js|jsx)',
   ],
   addons: [
     '@storybook/addon-a11y',

.storybook/webpack.config.js

@@ -28,6 +28,14 @@ const rootDir = path.resolve(__dirname, '../');
 const devMode = process.env.NODE_ENV !== "production";
 
 module.exports = ({ config }) => {
+  // Remove existing css/scss rules to avoid double-processing with Storybook defaults.
+  config.module.rules = config.module.rules.filter(
+    (rule) => {
+      const testStr = rule.test ? rule.test.toString() : '';
+      return !(testStr.includes('\\.css') || testStr.includes('\\.scss'));
+    },
+  );
+
   config.plugins.push(new MiniCssExtractPlugin());
   config.module.rules.push({
     test: /\.[jt]sx?$/,
@@ -61,7 +69,7 @@ module.exports = ({ config }) => {
     },
   });
   config.module.rules.push({
-    test: /\.css/,
+    test: /\.css$/,
     use: [
       {
         loader: devMode ? "style-loader" : MiniCssExtractPlugin.loader,
@@ -71,6 +79,7 @@ module.exports = ({ config }) => {
         options: {
           importLoaders: 1,
           modules: {
+            auto: /\.module\.css$/,
             localIdentName: '[local]-[hash:base64:5]',
             namedExport: false,
             exportLocalsConvention: 'as-is',
@@ -98,6 +107,7 @@ module.exports = ({ config }) => {
         options: {
           importLoaders: 1,
           modules: {
+            auto: /\.module\.(scss|sass)$/,
             localIdentName: '[local]-[hash:base64:5]',
             namedExport: false,
             exportLocalsConvention: 'as-is',

@types/scss.d.ts

@@ -20,3 +20,8 @@ declare module '*.scss' {
   declare const styles: { [className: string]: string };
   export default styles;
 }
+
+declare module '*.css' {
+  const content: string;
+  export default content;
+}

examples/bpk-component-layout/flex-examples.tsx

@@ -0,0 +1,170 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  BpkBox,
+  BpkFlex,
+  BpkSpacing,
+} from '../../packages/bpk-component-layout';
+
+import { Wrapper } from './examples';
+
+import STYLES from './examples.module.scss';
+
+export const BpkFlexExample = () => (
+  <Wrapper>
+    <BpkFlex
+      direction="row"
+      justify="space-between"
+      align="center"
+      padding={BpkSpacing.MD}
+    >
+      {[1, 2, 3].map((i) => (
+        <BpkBox key={i} padding={BpkSpacing.SM}>
+          <span className={STYLES['bpk-layout-examples__outline']}>
+            Flex item {i}
+          </span>
+        </BpkBox>
+      ))}
+    </BpkFlex>
+  </Wrapper>
+);
+
+export const BpkFlexDirectionExample = () => (
+  <Wrapper>
+    <BpkFlex direction="column" gap={BpkSpacing.MD} padding={BpkSpacing.MD}>
+      <BpkBox padding={BpkSpacing.SM}>
+        <span className={STYLES['bpk-layout-examples__outline']}>
+          Column item 1
+        </span>
+      </BpkBox>
+      <BpkBox padding={BpkSpacing.SM}>
+        <span className={STYLES['bpk-layout-examples__outline']}>
+          Column item 2
+        </span>
+      </BpkBox>
+    </BpkFlex>
+  </Wrapper>
+);
+
+export const BpkFlexWrapExample = () => (
+  <Wrapper>
+    <BpkFlex
+      wrap="wrap"
+      gap={BpkSpacing.MD}
+      padding={BpkSpacing.MD}
+      width="100%"
+    >
+      {[1, 2, 3, 4, 5, 6].map((i) => (
+        <BpkBox key={i} padding={BpkSpacing.MD} width="10rem">
+          <span className={STYLES['bpk-layout-examples__outline']}>
+            Wrap Item {i}
+          </span>
+        </BpkBox>
+      ))}
+    </BpkFlex>
+  </Wrapper>
+);
+
+export const BpkFlexResponsiveExample = () => (
+  <Wrapper>
+    <BpkFlex
+      direction={{ mobile: 'column', tablet: 'row' }}
+      justify={{ mobile: 'flex-start', desktop: 'space-between' }}
+      gap={BpkSpacing.MD}
+      padding={BpkSpacing.MD}
+    >
+      {[1, 2, 3].map((i) => (
+        <BpkBox key={i} padding={BpkSpacing.SM}>
+          <span className={STYLES['bpk-layout-examples__outline']}>
+            Responsive Item {i}
+          </span>
+        </BpkBox>
+      ))}
+    </BpkFlex>
+  </Wrapper>
+);
+
+export const BpkFlexItemExample = () => (
+  <Wrapper>
+    <BpkFlex gap={BpkSpacing.MD} padding={BpkSpacing.MD} width="100%">
+      <BpkFlex
+        grow={1}
+        padding={BpkSpacing.MD}
+        justify="center"
+        align="center"
+      >
+        <BpkBox padding={BpkSpacing.SM} width="100%">
+          <span className={STYLES['bpk-layout-examples__outline']}>
+            Grow: 1
+          </span>
+        </BpkBox>
+      </BpkFlex>
+      <BpkFlex
+        grow={2}
+        padding={BpkSpacing.MD}
+        justify="center"
+        align="center"
+      >
+        <BpkBox padding={BpkSpacing.SM} width="100%">
+          <span className={STYLES['bpk-layout-examples__outline']}>
+            Grow: 2
+          </span>
+        </BpkBox>
+      </BpkFlex>
+      <BpkFlex
+        basis="12.5rem"
+        shrink={0}
+        padding={BpkSpacing.MD}
+        justify="center"
+        align="center"
+      >
+        <BpkBox padding={BpkSpacing.SM} width="100%">
+          <span className={STYLES['bpk-layout-examples__outline']}>
+            Basis: 200px, Shrink: 0
+          </span>
+        </BpkBox>
+      </BpkFlex>
+    </BpkFlex>
+  </Wrapper>
+);
+
+export const BpkFlexInlineExample = () => (
+  <Wrapper>
+    <BpkBox padding={BpkSpacing.MD}>
+      <BpkFlex
+        inline
+        gap={BpkSpacing.SM}
+        padding={BpkSpacing.SM}
+      >
+        <BpkBox padding={BpkSpacing.SM}>
+          <span className={STYLES['bpk-layout-examples__outline']}>
+            Inline Flex 1
+          </span>
+        </BpkBox>
+        <BpkBox padding={BpkSpacing.SM}>
+          <span className={STYLES['bpk-layout-examples__outline']}>
+            Inline Flex 2
+          </span>
+        </BpkBox>
+      </BpkFlex>
+      {' '}
+      <span>Text adjacent to inline flex</span>
+    </BpkBox>
+  </Wrapper>
+);

examples/bpk-component-layout/flex.stories.tsx

@@ -0,0 +1,47 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BpkFlex, BpkProvider } from '../../packages/bpk-component-layout';
+
+import {
+  BpkFlexExample,
+  BpkFlexDirectionExample,
+  BpkFlexWrapExample,
+  BpkFlexResponsiveExample,
+  BpkFlexItemExample,
+  BpkFlexInlineExample,
+} from './flex-examples';
+
+export default {
+  title: 'bpk-component-layout/Flex',
+  component: BpkFlex,
+  decorators: [
+    (Story: any) => (
+      <BpkProvider>
+        <Story />
+      </BpkProvider>
+    ),
+  ],
+};
+
+export const Default = BpkFlexExample;
+export const Direction = BpkFlexDirectionExample;
+export const Wrap = BpkFlexWrapExample;
+export const Responsive = BpkFlexResponsiveExample;
+export const ItemProps = BpkFlexItemExample;
+export const Inline = BpkFlexInlineExample;