perf(react-styles): remove emotion, fix types

jest.config.js

@@ -14,14 +14,16 @@ module.exports = {
     'enzyme-to-json/serializer',
   ],
   transform: {
-    '^.+\\.[jt]sx?$': 'babel-jest',
-    '\\.(css)$': '<rootDir>/packages/react-styles/jest-transform.js'
+    '^.+\\.[jt]sx?$': 'babel-jest'
   },
   transformIgnorePatterns: ['node_modules/(?!@patternfly|@novnc|tippy.js|lodash)'],
   testPathIgnorePatterns: [
     '<rootDir>/packages/react-integration/'
   ],
   coveragePathIgnorePatterns: [
     '/dist/'
-  ]
+  ],
+  moduleNameMapper: {
+    "\\.(css|less)$": "<rootDir>/packages/react-styles/__mocks__/styleMock.js"
+  }
 };

package.json

@@ -72,8 +72,9 @@
     "clean:pf3": "rimraf packages/patternfly-3 packages/patternfly-4",
     "commit": "git-cz",
     "generate": "yarn plop",
+    "lint": "node --max-old-space-size=4096 node_modules/.bin/eslint --ext js,jsx,ts,tsx --cache",
     "lint:md": "yarn eslint packages --ext md --no-eslintrc --config .eslintrc-md.json --cache",
-    "lint:ts": "node --max-old-space-size=4096 node_modules/.bin/eslint packages --ext js,jsx,ts,tsx --cache",
+    "lint:ts": "yarn lint packages",
     "lint:versions": "node ./scripts/verifyPatternflyVersions.js",
     "prettier": "node node_modules/.bin/prettier --write \"packages/**/*.{js,ts,tsx}\" \"scripts/**/*.{js,ts,tsx}\"",
     "serve:docs": "lerna run serve",

packages/react-core/src/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { css, getModifier } from '@patternfly/react-styles';
+import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
 import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 import { AlertIcon } from './AlertIcon';
@@ -60,7 +60,7 @@ const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
   const customClassName = css(
     styles.alert,
     isInline && styles.modifiers.inline,
-    variant !== AlertVariant.default && getModifier(styles, variant, styles.modifiers.info),
+    variant !== AlertVariant.default && styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'],
     className
   );
 

packages/react-core/src/components/BackgroundImage/BackgroundImage.tsx

@@ -1,98 +1,70 @@
 import * as React from 'react';
 import { Omit } from '../../helpers/typeUtils';
-
-import { css, StyleSheet } from '@patternfly/react-styles';
+import cssVar from '@patternfly/react-tokens/dist/js/c_background_image_BackgroundImage';
+import cssVarName2x from '@patternfly/react-tokens/dist/js/c_background_image_BackgroundImage_2x';
+import cssVarNameSm from '@patternfly/react-tokens/dist/js/c_background_image_BackgroundImage_sm';
+import cssVarNameSm2x from '@patternfly/react-tokens/dist/js/c_background_image_BackgroundImage_sm_2x';
+import cssVarNameLg from '@patternfly/react-tokens/dist/js/c_background_image_BackgroundImage_lg';
+import cssVarNameFilter from '@patternfly/react-tokens/dist/js/c_background_image_Filter';
+import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
 
-/* eslint-disable camelcase */
-import c_background_image_BackgroundImage from '@patternfly/react-tokens/dist/js/c_background_image_BackgroundImage';
-import c_background_image_BackgroundImage_2x from '@patternfly/react-tokens/dist/js/c_background_image_BackgroundImage_2x';
-import c_background_image_BackgroundImage_sm from '@patternfly/react-tokens/dist/js/c_background_image_BackgroundImage_sm';
-import c_background_image_BackgroundImage_sm_2x from '@patternfly/react-tokens/dist/js/c_background_image_BackgroundImage_sm_2x';
-import c_background_image_BackgroundImage_lg from '@patternfly/react-tokens/dist/js/c_background_image_BackgroundImage_lg';
-
-export enum BackgroundImageSrc {
-  xs = 'xs',
-  xs2x = 'xs2x',
-  sm = 'sm',
-  sm2x = 'sm2x',
-  lg = 'lg',
-  filter = 'filter'
-}
-
-const cssVariables = {
-  [BackgroundImageSrc.xs]: c_background_image_BackgroundImage && c_background_image_BackgroundImage.name,
-  [BackgroundImageSrc.xs2x]: c_background_image_BackgroundImage_2x && c_background_image_BackgroundImage_2x.name,
-  [BackgroundImageSrc.sm]: c_background_image_BackgroundImage_sm && c_background_image_BackgroundImage_sm.name,
-  [BackgroundImageSrc.sm2x]: c_background_image_BackgroundImage_sm_2x && c_background_image_BackgroundImage_sm_2x.name,
-  [BackgroundImageSrc.lg]: c_background_image_BackgroundImage_lg && c_background_image_BackgroundImage_lg.name
-};
-
 export interface BackgroundImageSrcMap {
   xs: string;
   xs2x: string;
   sm: string;
   sm2x: string;
   lg: string;
-  filter?: string;
 }
 
+const defaultFilter = (
+  <filter>
+    <feColorMatrix type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
+    <feComponentTransfer colorInterpolationFilters="sRGB" result="duotone">
+      <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
+      <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
+      <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
+      <feFuncA type="table" tableValues="0 1"></feFuncA>
+    </feComponentTransfer>
+  </filter>
+);
+
 export interface BackgroundImageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'src'> {
   /** Additional classes added to the background. */
   className?: string;
+  /** Override svg filter to use */
+  filter?: React.ReactElement;
   /** Override image styles using a string or BackgroundImageSrc */
   src: string | BackgroundImageSrcMap;
 }
 
-export const BackgroundImage: React.FunctionComponent<BackgroundImageProps> = ({
-  className = '',
-  src,
-  ...props
-}: BackgroundImageProps) => {
-  let srcMap = src;
-  // Default string value to handle all sizes
-  if (typeof src === 'string') {
-    srcMap = {
-      [BackgroundImageSrc.xs]: src,
-      [BackgroundImageSrc.xs2x]: src,
-      [BackgroundImageSrc.sm]: src,
-      [BackgroundImageSrc.sm2x]: src,
-      [BackgroundImageSrc.lg]: src,
-      [BackgroundImageSrc.filter]: '' // unused
-    };
-  }
+let filterCounter = 0;
+
+export const BackgroundImage = ({ className, src, filter = defaultFilter, ...props }: BackgroundImageProps) => {
+  const getUrlValue = (size: keyof BackgroundImageSrcMap) => {
+    if (typeof src === 'string') {
+      return `url(${src})`;
+    } else if (typeof src === 'object') {
+      return `url(${src[size]})`;
+    }
 
-  // Build stylesheet string based on cssVariables
-  let cssSheet = '';
-  (Object.keys(cssVariables) as [keyof typeof srcMap]).forEach(size => {
-    cssSheet += `${cssVariables[size as keyof typeof cssVariables]}: url('${srcMap[size]}');`;
-  });
+    return '';
+  };
 
-  // Create emotion stylesheet to inject new css
-  const bgStyles = StyleSheet.create({
-    bgOverrides: `&.pf-c-background-image {
-      ${cssSheet}
-    }`
-  });
+  const filterId = `patternfly-background-image-filter-overlay${filterCounter++}`;
+  const style = {
+    [cssVar.name]: getUrlValue('xs'),
+    [cssVarName2x.name]: getUrlValue('xs2x'),
+    [cssVarNameSm.name]: getUrlValue('sm'),
+    [cssVarNameSm2x.name]: getUrlValue('sm2x'),
+    [cssVarNameLg.name]: getUrlValue('lg'),
+    [cssVarNameFilter.name]: `url(#${filterId})`
+  } as React.CSSProperties;
 
   return (
-    <div className={css(styles.backgroundImage, bgStyles.bgOverrides, className)} {...props}>
+    <div className={css(styles.backgroundImage, className)} style={style} {...props}>
       <svg xmlns="http://www.w3.org/2000/svg" className="pf-c-background-image__filter" width="0" height="0">
-        <filter id="image_overlay">
-          <feColorMatrix
-            type="matrix"
-            values="1 0 0 0 0
-            1 0 0 0 0
-            1 0 0 0 0
-            0 0 0 1 0"
-          />
-          <feComponentTransfer colorInterpolationFilters="sRGB" result="duotone">
-            <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451" />
-            <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451" />
-            <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451" />
-            <feFuncA type="table" tableValues="0 1" />
-          </feComponentTransfer>
-        </filter>
+        {React.cloneElement(filter, { id: filterId })}
       </svg>
     </div>
   );

packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx

@@ -1,22 +1,18 @@
-import { BackgroundImage, BackgroundImageSrc } from '../BackgroundImage';
+import { BackgroundImage } from '../BackgroundImage';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
 const images = {
-  [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
-  [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
-  [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
-  [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
-  [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
-  [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
+  'lg': '/assets/images/pfbg_1200.jpg',
+  'sm': '/assets/images/pfbg_768.jpg',
+  'sm2x': '/assets/images/pfbg_768@2x.jpg',
+  'xs': '/assets/images/pfbg_576.jpg',
+  'xs2x': '/assets/images/pfbg_576@2x.jpg'
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-Object.values([true, false]).forEach(isRead => {
-  test('BackgroundImage', () => {
-    const view = shallow(<BackgroundImage src={images} />);
-    expect(view).toMatchSnapshot();
-  });
+test('BackgroundImage', () => {
+  const view = shallow(<BackgroundImage src={images} />);
+  expect(view).toMatchSnapshot();
 });
 
 test('allows passing in a single string as the image src', () => {

packages/react-core/src/components/BackgroundImage/__tests__/Generated/__snapshots__/BackgroundImage.test.tsx.snap

@@ -2,7 +2,17 @@
 
 exports[`BackgroundImage should match snapshot (auto-generated) 1`] = `
 <div
-  className="pf-c-background-image css-1gixqsx ''"
+  className="pf-c-background-image ''"
+  style={
+    Object {
+      "--pf-c-background-image--BackgroundImage": "url(string)",
+      "--pf-c-background-image--BackgroundImage--lg": "url(string)",
+      "--pf-c-background-image--BackgroundImage--sm": "url(string)",
+      "--pf-c-background-image--BackgroundImage--sm-2x": "url(string)",
+      "--pf-c-background-image--BackgroundImage-2x": "url(string)",
+      "--pf-c-background-image--Filter": "url(#patternfly-background-image-filter-overlay0)",
+    }
+  }
 >
   <svg
     className="pf-c-background-image__filter"
@@ -11,7 +21,7 @@ exports[`BackgroundImage should match snapshot (auto-generated) 1`] = `
     xmlns="http://www.w3.org/2000/svg"
   >
     <filter
-      id="image_overlay"
+      id="patternfly-background-image-filter-overlay0"
     >
       <feColorMatrix
         type="matrix"

packages/react-core/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap

@@ -2,7 +2,17 @@
 
 exports[`BackgroundImage 1`] = `
 <div
-  className="pf-c-background-image css-f86rs0"
+  className="pf-c-background-image"
+  style={
+    Object {
+      "--pf-c-background-image--BackgroundImage": "url(/assets/images/pfbg_576.jpg)",
+      "--pf-c-background-image--BackgroundImage--lg": "url(/assets/images/pfbg_1200.jpg)",
+      "--pf-c-background-image--BackgroundImage--sm": "url(/assets/images/pfbg_768.jpg)",
+      "--pf-c-background-image--BackgroundImage--sm-2x": "url(/assets/images/pfbg_768@2x.jpg)",
+      "--pf-c-background-image--BackgroundImage-2x": "url(/assets/images/pfbg_576@2x.jpg)",
+      "--pf-c-background-image--Filter": "url(#patternfly-background-image-filter-overlay0)",
+    }
+  }
 >
   <svg
     className="pf-c-background-image__filter"
@@ -11,50 +21,7 @@ exports[`BackgroundImage 1`] = `
     xmlns="http://www.w3.org/2000/svg"
   >
     <filter
-      id="image_overlay"
-    >
-      <feColorMatrix
-        type="matrix"
-        values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"
-      />
-      <feComponentTransfer
-        colorInterpolationFilters="sRGB"
-        result="duotone"
-      >
-        <feFuncR
-          tableValues="0.086274509803922 0.43921568627451"
-          type="table"
-        />
-        <feFuncG
-          tableValues="0.086274509803922 0.43921568627451"
-          type="table"
-        />
-        <feFuncB
-          tableValues="0.086274509803922 0.43921568627451"
-          type="table"
-        />
-        <feFuncA
-          tableValues="0 1"
-          type="table"
-        />
-      </feComponentTransfer>
-    </filter>
-  </svg>
-</div>
-`;
-
-exports[`BackgroundImage 2`] = `
-<div
-  className="pf-c-background-image css-f86rs0"
->
-  <svg
-    className="pf-c-background-image__filter"
-    height="0"
-    width="0"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <filter
-      id="image_overlay"
+      id="patternfly-background-image-filter-overlay0"
     >
       <feColorMatrix
         type="matrix"
@@ -88,7 +55,17 @@ exports[`BackgroundImage 2`] = `
 
 exports[`allows passing in a single string as the image src 1`] = `
 <div
-  className="pf-c-background-image css-14j9mpj"
+  className="pf-c-background-image"
+  style={
+    Object {
+      "--pf-c-background-image--BackgroundImage": "url(/assets/images/pfbg_1200.jpg)",
+      "--pf-c-background-image--BackgroundImage--lg": "url(/assets/images/pfbg_1200.jpg)",
+      "--pf-c-background-image--BackgroundImage--sm": "url(/assets/images/pfbg_1200.jpg)",
+      "--pf-c-background-image--BackgroundImage--sm-2x": "url(/assets/images/pfbg_1200.jpg)",
+      "--pf-c-background-image--BackgroundImage-2x": "url(/assets/images/pfbg_1200.jpg)",
+      "--pf-c-background-image--Filter": "url(#patternfly-background-image-filter-overlay1)",
+    }
+  }
 >
   <svg
     className="pf-c-background-image__filter"
@@ -97,7 +74,7 @@ exports[`allows passing in a single string as the image src 1`] = `
     xmlns="http://www.w3.org/2000/svg"
   >
     <filter
-      id="image_overlay"
+      id="patternfly-background-image-filter-overlay1"
     >
       <feColorMatrix
         type="matrix"

packages/react-core/src/components/BackgroundImage/examples/BackgroundImage.md

@@ -6,7 +6,7 @@ typescript: true
 propComponents: ['BackgroundImage']
 ---
 
-import { BackgroundImage, BackgroundImageSrc } from '@patternfly/react-core';
+import { BackgroundImage } from '@patternfly/react-core';
 
 ## Examples
 ```js title=Basic isFullscreen
@@ -19,11 +19,11 @@ class SimpleBackgroundImage extends React.Component {
      * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
      */
     this.images = {
-      [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
-      [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
-      [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
-      [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
-      [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg'
+      'xs': '/assets/images/pfbg_576.jpg',
+      'xs2x': '/assets/images/pfbg_576@2x.jpg',
+      'sm': '/assets/images/pfbg_768.jpg',
+      'sm2x': '/assets/images/pfbg_768@2x.jpg',
+      'lg': '/assets/images/pfbg_1200.jpg'
     };
   }
   render() {

packages/react-core/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import AngleRightIcon from '@patternfly/react-icons/dist/js/icons/angle-right-icon';
 import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
-import { css, getModifier } from '@patternfly/react-styles';
+import { css } from '@patternfly/react-styles';
 
 export interface BreadcrumbItemProps extends React.HTMLProps<HTMLLIElement> {
   /** Content rendered inside the breadcrumb item. */
@@ -34,7 +34,7 @@ export const BreadcrumbItem: React.FunctionComponent<BreadcrumbItemProps> = ({
         <Component
           href={to}
           target={target}
-          className={css(styles.breadcrumbLink, isActive ? getModifier(styles, 'current') : '')}
+          className={css(styles.breadcrumbLink, isActive && styles.modifiers.current)}
           aria-current={isActive ? 'page' : undefined}
         >
           {children}