fix(styletron): apply displayName

scripts/styletron-display-name.js

@@ -0,0 +1,82 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+/* eslint-env node */
+
+const {
+  t,
+  withJsFiles,
+  findFiles,
+  parseJs,
+  readFile,
+  writeFile,
+  generateJs,
+} = require('@dubstep/core');
+
+const moduleNames = ['styled', 'withStyle', 'withStyleDeep'];
+
+async function styletronDisplayName(wd) {
+  const files = await findFiles(`${wd}/**/table-grid/styled-components.tsx`);
+
+  for (const file of files) {
+    console.log(`visiting file: ${file}`);
+    const code = await readFile(file);
+    const program = parseJs(code, { mode: 'typescript' });
+
+    program.traverse({
+      ImportDeclaration(path) {
+        const sourceName = path.get('source').node.value;
+        if (!sourceName.endsWith('styles')) {
+          return;
+        }
+
+        path.get('specifiers').forEach((specifier) => {
+          const localPath = specifier.get('local');
+          const localName = localPath.node.name;
+
+          if (!localPath.scope.bindings[localName]) {
+            return;
+          }
+
+          const refPaths = localPath.scope.bindings[localName].referencePaths;
+          if (t.isImportSpecifier(specifier)) {
+            // import {moduleName} from 'packageName';
+            const specifierName = specifier.get('imported').node.name;
+            if (moduleNames.includes(specifierName)) {
+              // refsHandler(t, state, refPaths, specifierName);
+
+              refPaths.forEach((path) => {
+                if (path.parentPath.type === 'CallExpression') {
+                  if (path.parentPath.parentPath.type === 'VariableDeclarator') {
+                    const name = path.parentPath.parentPath.node.id;
+                    path.parentPath.parentPath.parentPath.insertAfter(
+                      t.expressionStatement(
+                        t.assignmentExpression(
+                          '=',
+                          t.memberExpression(name, t.identifier('displayName')),
+                          t.stringLiteral(name.name)
+                        )
+                      )
+                    );
+                  }
+                }
+              });
+            } else if (t.isImportNamespaceSpecifier(specifier)) {
+              // import * as pkg from 'packageName';
+              // TODO(#5): Handle this case, or issue a warning because this may not be 100% robust
+            }
+          }
+        });
+      },
+    });
+
+    const generated = generateJs(program);
+    await writeFile(file, generated);
+  }
+}
+
+styletronDisplayName(process.cwd());

src/accordion/styled-components.ts

@@ -19,6 +19,7 @@ export const Root = styled('ul', {
   paddingRight: 0,
   width: '100%',
 });
+Root.displayName = 'Root';
 
 export const PanelContainer = styled<'li', SharedStylePropsArg>('li', (props) => {
   const {
@@ -33,6 +34,7 @@ export const PanelContainer = styled<'li', SharedStylePropsArg>('li', (props) =>
     borderBottomColor: $expanded ? colors.mono500 : colors.mono400,
   };
 });
+PanelContainer.displayName = 'PanelContainer';
 
 export const Header = styled<'div', SharedStylePropsArg>('div', (props) => {
   const {
@@ -63,6 +65,7 @@ export const Header = styled<'div', SharedStylePropsArg>('div', (props) => {
     },
   };
 });
+Header.displayName = 'Header';
 
 export const ToggleIcon = styled<'svg', SharedStylePropsArg>('svg', (props) => {
   const { $theme, $disabled, $color } = props;
@@ -73,6 +76,7 @@ export const ToggleIcon = styled<'svg', SharedStylePropsArg>('svg', (props) => {
     cursor: $disabled ? 'not-allowed' : 'pointer',
   };
 });
+ToggleIcon.displayName = 'ToggleIcon';
 
 export const ToggleIconGroup = styled<'g', SharedStylePropsArg>('g', (props) => {
   const { $theme, $expanded } = props;
@@ -84,6 +88,7 @@ export const ToggleIconGroup = styled<'g', SharedStylePropsArg>('g', (props) =>
     transitionTimingFunction: $theme.animation.easeOutQuinticCurve,
   };
 });
+ToggleIconGroup.displayName = 'ToggleIconGroup';
 
 export const Content = styled<'div', SharedStylePropsArg>('div', (props) => {
   const {
@@ -112,6 +117,7 @@ export const Content = styled<'div', SharedStylePropsArg>('div', (props) => {
     transitionTimingFunction: animation.easeOutQuinticCurve,
   };
 });
+Content.displayName = 'Content';
 
 export const ContentAnimationContainer = styled<
   'div',
@@ -131,3 +137,4 @@ export const ContentAnimationContainer = styled<
     transitionTimingFunction: animation.easeOutQuinticCurve,
   };
 });
+ContentAnimationContainer.displayName = 'ContentAnimationContainer';

src/app-nav-bar/styled-components.ts

@@ -41,6 +41,7 @@ const StyledButton = styled<
   WebkitAppearance: 'none',
   cursor: 'pointer',
 }));
+StyledButton.displayName = 'StyledButton';
 
 export const StyledRoot = styled('div', (props) => {
   const { $theme } = props;
@@ -86,8 +87,10 @@ export const StyledRoot = styled('div', (props) => {
 
   return style;
 });
+StyledRoot.displayName = 'StyledRoot';
 
 export const StyledSubnavContainer = styled('div', {});
+StyledSubnavContainer.displayName = 'StyledSubnavContainer';
 
 export const StyledSpacing = styled('div', (props) => {
   const { $theme } = props;
@@ -104,6 +107,7 @@ export const StyledSpacing = styled('div', (props) => {
     },
   };
 });
+StyledSpacing.displayName = 'StyledSpacing';
 
 export const StyledAppName = styled('div', ({ $theme }) => ({
   ...$theme.typography.font550,
@@ -113,6 +117,7 @@ export const StyledAppName = styled('div', ({ $theme }) => ({
     ...$theme.typography.font650,
   },
 }));
+StyledAppName.displayName = 'StyledAppName';
 
 export const StyledSideMenuButton = withStyle<typeof StyledButton, {}>(
   StyledButton,
@@ -126,6 +131,7 @@ export const StyledSideMenuButton = withStyle<typeof StyledButton, {}>(
     paddingRight: $theme.sizing.scale100,
   })
 );
+StyledSideMenuButton.displayName = 'StyledSideMenuButton';
 
 export const StyledPrimaryMenuContainer = styled('div', ({ $theme }) => {
   return {
@@ -140,6 +146,7 @@ export const StyledPrimaryMenuContainer = styled('div', ({ $theme }) => {
     paddingInlineEnd: $theme.sizing.scale1000,
   };
 });
+StyledPrimaryMenuContainer.displayName = 'StyledPrimaryMenuContainer';
 
 export const StyledMainMenuItem = styled<
   'div',
@@ -182,6 +189,7 @@ export const StyledMainMenuItem = styled<
     },
   };
 });
+StyledMainMenuItem.displayName = 'StyledMainMenuItem';
 
 export const StyledSecondaryMenuContainer = styled('div', ({ $theme }) => {
   return {
@@ -197,8 +205,10 @@ export const StyledSecondaryMenuContainer = styled('div', ({ $theme }) => {
     overflow: 'auto',
   };
 });
+StyledSecondaryMenuContainer.displayName = 'StyledSecondaryMenuContainer';
 
 export const StyledUserMenuButton = StyledButton;
+StyledUserMenuButton.displayName = 'StyledUserMenuButton';
 
 export const StyledUserMenuProfileListItem = withStyle<typeof StyledListItem, {}>(
   StyledListItem,
@@ -208,6 +218,7 @@ export const StyledUserMenuProfileListItem = withStyle<typeof StyledListItem, {}
     ...($theme.direction === 'rtl' ? { paddingLeft: '0' } : { paddingRight: '0' }),
   })
 );
+StyledUserMenuProfileListItem.displayName = 'StyledUserMenuProfileListItem';
 
 export const StyledUserProfileTileContainer = styled('div', ({ $theme }) => {
   return {
@@ -221,6 +232,7 @@ export const StyledUserProfileTileContainer = styled('div', ({ $theme }) => {
     paddingBottom: $theme.sizing.scale650,
   };
 });
+StyledUserProfileTileContainer.displayName = 'StyledUserProfileTileContainer';
 
 export const StyledUserProfilePictureContainer = styled('div', ({ $theme }) => {
   return {
@@ -229,6 +241,7 @@ export const StyledUserProfilePictureContainer = styled('div', ({ $theme }) => {
       : { marginRight: $theme.sizing.scale600 }),
   };
 });
+StyledUserProfilePictureContainer.displayName = 'StyledUserProfilePictureContainer';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const StyledUserProfileInfoContainer = styled('div', ({ $theme }) => {
@@ -237,11 +250,13 @@ export const StyledUserProfileInfoContainer = styled('div', ({ $theme }) => {
     alignSelf: 'center',
   };
 });
+StyledUserProfileInfoContainer.displayName = 'StyledUserProfileInfoContainer';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const StyledDesktopMenuContainer = styled('div', ({ $theme }) => {
   return {};
 });
+StyledDesktopMenuContainer.displayName = 'StyledDesktopMenuContainer';
 
 export const StyledDesktopMenu = styled('div', ({ $theme }) => {
   return {
@@ -254,3 +269,4 @@ export const StyledDesktopMenu = styled('div', ({ $theme }) => {
     paddingBlockEnd: '18px',
   };
 });
+StyledDesktopMenu.displayName = 'StyledDesktopMenu';

src/avatar/styled-components.ts

@@ -31,6 +31,8 @@ export const Avatar = styled<'img', AvatarStyleProps>('img', (props) => {
   };
 });
 
+Avatar.displayName = 'Avatar';
+
 export const Initials = styled<'div', InitialsStyleProps>('div', (props) => ({
   ...props.$theme.typography.font300,
   color: props.$theme.colors.mono100,
@@ -40,6 +42,8 @@ export const Initials = styled<'div', InitialsStyleProps>('div', (props) => ({
   height: '100%',
 }));
 
+Initials.displayName = 'Initials';
+
 export const Root = styled<'div', RootStyleProps>('div', (props) => {
   const { $didImageFailToLoad } = props;
   const themedSize = getSize(props);
@@ -59,3 +63,4 @@ export const Root = styled<'div', RootStyleProps>('div', (props) => {
     width: $didImageFailToLoad ? themedSize : null,
   };
 });
+Root.displayName = 'Root';

src/badge/styled-components.ts

@@ -4,7 +4,7 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import { styled } from '../styles/index';
+import { styled } from '../styles';
 import type { Placement, Color, Shape, Role, Hierarchy } from './types';
 import { COLOR, SHAPE, ROLE, PLACEMENT, HIERARCHY } from './constants';
 
@@ -184,6 +184,8 @@ export const StyledRoot = styled<'div', {}>('div', () => {
   };
 });
 
+StyledRoot.displayName = 'StyledRoot';
+
 const TOP_PLACEMENTS = [
   PLACEMENT.topLeft,
   PLACEMENT.topRight,
@@ -258,6 +260,8 @@ export const StyledPositioner = styled<
   };
 });
 
+StyledPositioner.displayName = 'StyledPositioner';
+
 export const StyledBadge = styled<
   'div',
   {
@@ -293,6 +297,8 @@ export const StyledBadge = styled<
   }
 );
 
+StyledBadge.displayName = 'StyledBadge';
+
 export const StyledNotificationCircle = styled<
   'div',
   {
@@ -313,6 +319,8 @@ export const StyledNotificationCircle = styled<
   };
 });
 
+StyledNotificationCircle.displayName = 'StyledNotificationCircle';
+
 export const StyledHintDot = styled<
   'div',
   {
@@ -331,3 +339,4 @@ export const StyledHintDot = styled<
     ...getColorStyles({ $theme, $hierarchy: HIERARCHY.primary, $color }),
   };
 });
+StyledHintDot.displayName = 'StyledHintDot';