diff --git a/next.config.js b/next.config.js index a27f23d..eb1c324 100644 --- a/next.config.js +++ b/next.config.js @@ -1,12 +1,22 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, - compiler: { - // styledComponentsの有効化 - styledComponents: true, - // React Testing Libraryで使用するdata-testid属性を削除 - reactRemoveProperties: { properties: ['^data-testid$'] }, - }, + compiler: (() => { + let compilerConfig = { + // styledComponentsの有効化 + styledComponents: true, + } + + if (process.env.NODE_ENV === 'production') { + compilerConfig = { + ...compilerConfig, + // 本番環境ではReact Testing Libraryで使用するdata-testid属性を削除 + reactRemoveProperties: { properties: ['^data-testid$'] }, + } + } + + return compilerConfig + })(), async rewrites() { return [ { diff --git a/src/utils/styles.ts b/src/utils/styles.ts index f972976..966f5b7 100644 --- a/src/utils/styles.ts +++ b/src/utils/styles.ts @@ -95,28 +95,37 @@ function toThemeValueIfNeeded(propKey: string, value: T, theme?: AppTheme) { const lineSpacingKeys = new Set(['letter-spacing']) const lineHeightKeys = new Set(['line-height']) - if (theme && spaceKeys.has(propKey) && isSpaceThemeKeys(value, theme)) { + if ( + theme && + theme.space && + spaceKeys.has(propKey) && + isSpaceThemeKeys(value, theme) + ) { return theme.space[value] } else if ( theme && + theme.colors && colorKeys.has(propKey) && isColorThemeKeys(value, theme) ) { return theme.colors[value] } else if ( theme && + theme.fontSizes && fontSizeKeys.has(propKey) && isFontSizeThemeKeys(value, theme) ) { return theme.fontSizes[value] } else if ( theme && + theme.letterSpacings && lineSpacingKeys.has(propKey) && isLetterSpacingThemeKeys(value, theme) ) { return theme.letterSpacings[value] } else if ( theme && + theme.lineHeights && lineHeightKeys.has(propKey) && isLineHeightThemeKeys(value, theme) ) {