styled-componentsの更新は通常、npm update styled-componentsと簡単に行えます。メジャーバージョンのみ、破壊的な変更（以下のリリースノートに記載）を導入する可能性があります。
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.1.12...v6.1.13
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.1.11...v6.1.12
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.1.10...v6.1.11
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.1.9...v6.1.10
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.1.8...v6.1.9
v6.1.7からのpeerDependenciesの追加を元に戻します。一部のパッケージマネージャーでは、peerDependenciesMeta[package].optionalに関する動作が異なり、問題を引き起こしているようです。可能であれば後日再検討します。
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.1.7...v6.1.8
chore: すべての欠落しているピア依存関係ステートメントを追加 @quantizor が https://github.com/styled-components/styled-components/pull/4243 で行いました
注意：この変更は、このNPMのバグが解決されるまで、インストールされた依存関係の重複を引き起こす可能性がありますが、yarnとpnpmは正しい動作をします。Bunにも同様のバグがあります。
全体として、これらの変更により、styled-componentsが利用されるすべてのライブラリの既知の動作バージョンを指定することが保証され、クライアントパッケージマネージャーに、関連するライブラリが実際に準拠していると仮定して、より高いセムバーに準拠したバージョンが許可され、動作するはずであることを指示します。
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.1.6...v6.1.7
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.1.5...v6.1.6
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.1.4...v6.1.5
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.1.2...v6.1.3
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.1.1...v6.1.2
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.1.0...v6.1.1
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.9...v6.1.0
バンドルを修正してwindowをハードコードしないようにしました（JSDOMなどが使用されている場合、サーバー環境を誤って想定していた一部のテストケースを修正する必要があります）。
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.8...v6.0.9
toStyleSheet関数を追加しました (@krudos による https://github.com/styled-components/styled-components/pull/4124)。StyleSheetManagerがレンダリングごとにコンテキストを更新するのを防ぎました (@keeganstreet による https://github.com/styled-components/styled-components/pull/4159)。JSX.IntrinsicElementsから離れることで、型の複雑さを軽減しました (@RJWadley による https://github.com/styled-components/styled-components/pull/4149)。StyleFunction、Interpolation の型エクスポートを追加しました (@bcole808 による https://github.com/styled-components/styled-components/pull/4140)。CSSProperties、CSSObject、CSSPseudos、CSSKeyframes を追加しました (@takurinton による https://github.com/styled-components/styled-components/pull/4117)。完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.7...v6.0.8
exactOptionalPropertyTypesチェックを有効にしました (@aspirisen による https://github.com/styled-components/styled-components/pull/3993)。完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.6...v6.0.7
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.5...v6.0.6
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.4...v6.0.5
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.3...v6.0.4
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.2...v6.0.3
displayNameを削除してバイト数を削減。babelプラグインまたは同等のものを使用している場合は、静的なclassNameに既に存在します。flatMapとatの使用をES5準拠のバリアントにリファクタリング完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.1...v6.0.2
開発時の警告が過度に早くトリガーされていた問題を修正しました。
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0...v6.0.1
yarn add styled-components移行ガイド → https://styled-components.dokyumento.jp/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6
stylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用StyleSheetManager
disableVendorPrefixesをenableVendorPrefixes propに置き換えtsx <StyleSheetManager enableVendorPrefixes> {/* ここにReactツリーとThemeProviderが入ります */} </StyleSheetManager>withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v5.3.7...v6.0.0
yarn add styled-components移行ガイド → https://styled-components.dokyumento.jp/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6
stylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用StyleSheetManager
disableVendorPrefixesをenableVendorPrefixes propに置き換えtsx <StyleSheetManager enableVendorPrefixes> {/* ここにReactツリーとThemeProviderが入ります */} </StyleSheetManager>withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-rc.5..v6.0.0-rc.6
yarn add styled-componentsenableVendorPrefixesを有効にする必要がある場合に、開発時の警告を追加移行ガイド → https://styled-components.dokyumento.jp/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6
stylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用StyleSheetManager
disableVendorPrefixesをenableVendorPrefixes propに置き換えtsx <StyleSheetManager enableVendorPrefixes> {/* ここにReactツリーとThemeProviderが入ります */} </StyleSheetManager>withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-rc.3..v6.0.0-rc.5
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-rc.2...v6.0.0-rc.3
古いReactのサポートを修正するために、useDebugValueフックの使用を削除しました。
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v5.3.10...v5.3.11
yarn add styled-componentsstylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用StyleSheetManager
disableVendorPrefixesをenableVendorPrefixes propに置き換えtsx <StyleSheetManager enableVendorPrefixes> {/* ここにReactツリーとThemeProviderが入ります */} </StyleSheetManager>withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-rc.1...v6.0.0-rc.2
yarn add styled-components@layerルールサポートを有効にするために、stylisを4.2.0に更新stylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用StyleSheetManager
disableVendorPrefixesをenableVendorPrefixes propに置き換えtsx <StyleSheetManager enableVendorPrefixes> {/* ここにReactツリーとThemeProviderが入ります */} </StyleSheetManager>withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-rc.0...v6.0.0-rc.1
yarn add styled-components@beta@layer ルールのサポート (https://github.com/thysultan/stylis/pull/313)stylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用StyleSheetManager
disableVendorPrefixesをenableVendorPrefixes propに置き換えtsx <StyleSheetManager enableVendorPrefixes> {/* ここにReactツリーとThemeProviderが入ります */} </StyleSheetManager>withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.15...v6.0.0-rc.0
yarn add styled-components@betacss プロパティの型定義を修正 (@ahutchings による https://github.com/styled-components/styled-components/pull/3982)stylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用StyleSheetManager
disableVendorPrefixesをenableVendorPrefixes propに置き換えtsx <StyleSheetManager enableVendorPrefixes> {/* ここにReactツリーとThemeProviderが入ります */} </StyleSheetManager>withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.14...v6.0.0-beta.15
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v5.3.9...v5.3.10
yarn add styled-components@betastylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用StyleSheetManager
disableVendorPrefixesをenableVendorPrefixes propに置き換えtsx <StyleSheetManager enableVendorPrefixes> {/* ここにReactツリーとThemeProviderが入ります */} </StyleSheetManager>withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.13...v6.0.0-beta.14
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v5.3.8...v5.3.9
yarn add styled-components@betastylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.11...v6.0.0-beta.12
yarn add styled-components@betaReact.ComponentProps<typeof MyStyledComponent> のサポートが復元されますstylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.11...v6.0.0-beta.12
修正(constants): process.env ガードをリワーク
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v5.3.7-fixed...v5.3.8
修正: (React Native) testID を attrs プロパティとして渡す (@ku8ar による #3857 を参照)
修正: process.env が定義されていない場合のクラッシュを防止 (Suhas R による #3957 を参照)
translate 属性を有効なプロパティとしてサポートを追加 (@ay4toh5i による #3619 を参照)
ウクライナのメッセージを削除。現在では期限切れであり、メッセージは受信済みです
yarn add styled-components@betaattrs を使用した場合の interpolation における props.theme を修正)stylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.10...v6.0.0-beta.11
yarn add styled-components@betastylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.9...v6.0.0-beta.10
yarn add styled-components@beta<use>をdomElementsに追加 by @shanpriyan in https://github.com/styled-components/styled-components/pull/3901stylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.8...v6.0.0-beta.9
yarn add styled-components@betastylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.7...v6.0.0-beta.8
yarn add styled-components@betawithComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456); 代わりに "as" プロパティを使用してください。stylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.6...v6.0.0-beta.7
yarn add styled-components@beta@container CSSサポートを追加)stylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.5...v6.0.0-beta.6
yarn add styled-components@betastylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.4...v6.0.0-beta.5
yarn add styled-components@betastylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.3...v6.0.0-beta.4
yarn add styled-components@betastylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.2...v6.0.0-beta.3
$asと$forwardedAsは次のメジャーバージョンで削除されます。代わりにプレフィックスなしのプロパティを使用してください。完全な変更履歴: https://github.com/styled-components/styled-components/compare/v5.3.5...v5.3.6
yarn add styled-components@betashouldForwardPropを使用してください。web | native）を持つ統合された設定を使用するようにリファクタリングしました。stylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.1...v6.0.0-beta.2
yarn add styled-components@betastylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-beta.0...v6.0.0-beta.1
yarn add styled-components@betagit.io を置き換えました。@SukkaW さんによる変更です。 https://github.com/styled-components/styled-components/pull/3733stylis v4 を使用するようになりました (stylis-plugin-rtl を使用している場合は、新しいバージョンにアップグレードする必要があります)@types/styled-componentsをインストールした場合は、削除する必要があります$as と $forwardedAs propsを削除 (as または forwardedAs を使用)$ プレフィックス) を使用withComponent APIを削除 (87f511a228e5b13b1ff70a416409e0705e5bf456)。代わりに "as" propを使用完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-alpha.5...v6.0.0-beta.0
styled-components/macros に関連付けられた型を修正しましたbabel-plugin-styled-components (macros に必要) のオプションのピア依存関係を追加しましたアルファ版のサンドボックスを更新しました: https://codesandbox.io/s/styled-components-v6-alpha-sandbox-05bod1?file=/src/App.tsx
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-alpha.4...v6.0.0-alpha.5
CSSProp の型を追加しました (これは Definitely Typed にはありますが、公開されていませんでした)プロジェクトに推奨される styled-components.d.ts の設定
// create styled-components.d.ts in your project source
// if it isn't being picked up, check tsconfig compilerOptions.types
import type { CSSProp } from 'styled-components';
import Theme from './theme';
type ThemeType = typeof Theme;
declare module 'styled-components' {
export interface DefaultTheme extends ThemeType {}
}
declare module 'react' {
interface DOMAttributes<T> {
css?: CSSProp;
}
}完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-alpha.2...v6.0.0-alpha.4
TS型の取得のための "types" package.json フィールドを追加しました。
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v6.0.0-alpha.1...v6.0.0-alpha.2
rollup によって TS 宣言が正しく出力されない問題を修正しました。
完全な変更履歴: https://github.com/styled-components/styled-components/compare/.v6.0.0-alpha.0...v6.0.0-alpha.1
大規模なリファクタリングを経て、styled-components v6 の最初のアルファ版を発表できることを嬉しく思います！
ハイライト
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v5.2.0...v6.0.0-alpha.0
完全な変更履歴: https://github.com/styled-components/styled-components/compare/v5.3.1...v5.3.3
強制的なサーバーサイドモードがグローバルスタイルをトリガーしない問題を修正しました（#3566 を参照）
v5.2.0 で発生したリグレッションである、クライアント上でのグループの順序変更と不十分なハッシュ入力によって引き起こされる SSR の衝突を修正しました（#3563 を参照）
React v18 の動的作成に関する React の警告を修正し、@lynndylanhurley さんによって v5 にバックポートされました（#3564 を参照）
styled-components の重複インスタンスをチェックする際に欠落していた typeof window チェックを追加しました（#3553 を参照）
ServerStyleSheet が空のスタイルタグを出力しないようにしました。これは IE11 で問題を引き起こす可能性があります（#3555 を参照）
スタイルオブジェクト内の css タグ付きテンプレートをサポートします。@roginfarrer および @dvingo さんによる変更です（#3469 を参照）
StyleSheetManager が iframe / 子ウィンドウ内のすべてのスタイルをレンダリングするようにしました（#3159 を参照）@eramdam さんに感謝！
拡張シナリオでコンポーネントが自己参照する方法を再構築しました（#3236 を参照）; & + & のようなパターンに関する多くの微妙なバグを修正する必要があります
stylis-plugin-rtl のようなものを使用している場合に、keyframes が変更された stylis インスタンスを受け取らない問題を修正しました（#3239 を参照）
スタイルオブジェクト を使用するコンポーネントのパフォーマンスを大幅に向上させました（#3239 を参照）
空のルールセットに対して動的な classNames を出力しなくなったため、スナップショットで一部の className の変更が発生する可能性があります
グローバルスタイルの配置を事前に行うことで、cGS がスタイルシートの先頭に常に挿入されるようにします。これは実行時の順序で行われることに注意してください。そのため、複数の cGS が重複するスタイルを持つ場合は、注入したい順序でコード内で定義されていることを確認してください（#3239を参照）。
package.json に "engines" を追加します（現在、Node 10（サポートされている最も古い LTS ディストリビューション）に設定されています）（#3201を参照）。@MichaelDeBoey さん、ありがとうございます！
最後に、このリリースのテストと最後の微調整をしてくれた @willheslam に特別な感謝を申し上げます！
5.2 を 9 月 2 日/3 日にリリースする予定です。テストにご協力ください！
yarn add styled-components@testグローバルスタイルの配置を事前に行うことで、cGS がスタイルシートの先頭に常に挿入されるようにします。これは実行時の順序で行われることに注意してください。そのため、複数の cGS が重複するスタイルを持つ場合は、注入したい順序でコード内で定義されていることを確認してください（#3239を参照）。
注意: これは動作の変更であり、createGlobalStyle コンポーネントを多数使用している場合は、コードベースの調整が必要になる場合があります。既存のバグを修正する以外は、ほとんどのプロジェクトに影響はないと考えています。
createGlobalStyle は React.StrictMode に準拠するようになりました。
StyleSheetManager が iframe / 子ウィンドウ内のすべてのスタイルをレンダリングするようにしました（#3159 を参照）@eramdam さんに感謝！
拡張シナリオでコンポーネントが自己参照する方法を再構築しました（#3236 を参照）; & + & のようなパターンに関する多くの微妙なバグを修正する必要があります
stylis-plugin-rtl のようなものを使用している場合に、keyframes が変更された stylis インスタンスを受け取らない問題を修正しました（#3239 を参照）
スタイルオブジェクト を使用するコンポーネントのパフォーマンスを大幅に向上させました（#3239 を参照）
空のルールセットに対して動的な classNames を出力しなくなったため、スナップショットで一部の className の変更が発生する可能性があります
package.json に "engines" を追加します（現在、Node 10（サポートされている最も古い LTS ディストリビューション）に設定されています）（#3201を参照）。@MichaelDeBoey さん、ありがとうございます！
shouldForwardProp API を実装しました（#3093を参照）。これは、ネイティブサポートでのみ欠落していたため、マイナーではなくパッチバンプでリリースされています。shouldForwardProp API を追加します（emotion のものとほぼ同じですが、若干異なる使用パターンです）。https://github.com/styled-components/styled-components/pull/3006
複数の高階コンポーネントを一緒に構成する場合、複数のレイヤーが同じ名前で props を消費するシナリオが発生する可能性があります。過去には、"as" のような一般的な props に対してさまざまな回避策を導入してきましたが、このパワーユーザー API では、styled() HOC ラッパーを使用する際に、子孫コンポーネントに渡される props をより細かくカスタマイズできます。
.attrs() のような他の API と組み合わせると、これは非常に強力な機能の組み合わせになります。
使い方は次のとおりです。
const Comp = styled('div').withConfig({
shouldForwardProp: (prop, defaultValidatorFn) => !['filterThis'].includes(prop),
})`
color: red;
`;
render(<Comp filterThis="abc" passThru="def" />);
# Renders: <div className="[generated]" passThru="def"></div>2 番目の引数 defaultValidatorFn は、既知の HTML 属性に基づいて props を検証するために内部で使用するものです。渡したくない props を正確にフィルタリングしてから、必要に応じてデフォルトのフィルタリングメカニズムにフォールバックできるように提供されています。
styled HOC の .attrs のような他のメソッドは、withConfig() の後、テンプレートリテラルを開く前にチェーンできます。
const Comp = styled('div').withConfig({
shouldForwardProp: (prop, defaultValidatorFn) => !['filterThis'].includes(prop),
}).attrs({ className: 'foo' })`
color: red;
`;
render(<Comp filterThis="abc" passThru="def" />);
# Renders: <div className="[generated] foo" passThru="def"></div>@stevesims および貢献してくれたすべての方々に感謝します！
"一時的な props" API を追加します。https://github.com/styled-components/styled-components/pull/3052
一時的な props は、shouldForwardProp を補完する軽量な API であると考えてください。styled-components では、あらゆる種類の props をスタイリングに使用できます（ほとんどの CSS-in-JS ライブラリで共有される特性ですが、サードパーティのライブラリエコシステムではそうではありません）。使用する可能性のあるすべての props に対してフィルターを追加すると、面倒になる可能性があります。
一時的な props は、styled コンポーネントによってのみ明示的に消費され、より深いコンポーネントレイヤーに渡すことを意図していない props を渡すための新しいパターンです。使い方は次のとおりです。
const Comp = styled.div`
color: ${props => props.$fg || 'black'};
`;
render(<Comp $fg="red">I'm red!</Comp>);props のドル記号 ($) 接頭辞に注意してください。これは 一時的 であることを示し、styled-components はそれをレンダリングされた DOM 要素に追加したり、コンポーネント階層をさらに下に渡したりしないように認識します。
useTheme フックを react native の名前付きエクスポートに追加しました（#2982）
パフォーマンスの向上
アンチパターンのための役立つ新しい開発時警告をいくつか追加しました
createGlobalStyle 内での css @import の使用とその代替案を推奨しません（#2997）ついに登場！！！🚀 簡単なアップグレード手順については、v5 への移行に関する FAQ ページを参照してください！
...そして、破壊的な変更なしで、さらに多くの機能が追加されました！
注意: 現時点では、createGlobalStyle 内で @import を使用しないことをお勧めします。この機能の動作を改善するために取り組んでいますが、現時点では実際には機能せず、これらのインポートを HTML インデックスファイルなどに埋め込む方が良いでしょう。
StyleSheetManager の拡張機能
<StyleSheetManager stylisPlugins={[]}>...</StyleSheetManager>disableVendorPrefixes は、レガシーブラウザーのサポートが必要ない場合に自動プレフィックスを削除します。<StyleSheetManager disableVendorPrefixes>...</StyleSheetManager>disableCSSOMInjection は、ランタイム環境の他の統合が CSSOM 注入スタイルを解析できない場合に、低速な注入モードの使用を強制します。<StyleSheetManager disableCSSOMInjection>...</StyleSheetManager>v4 で非推奨になった「サブ関数」attrs 構文を削除しました
styled.div.attrs({ role: p => p.onClick ? 'button' : '' })`
color: red;
`変更後
styled.div.attrs(p => ({ role: p.onClick ? 'button' : '' }))`
color: red;
`css-to-react-native を v3.0.0 に更新しました（#2811）。唯一の破壊的な変更は、フォントプロパティを設定するときに単位なしの行の高さが許可されなくなったことです。
生成されたクラス名で /ad/i を禁止します（#2837）。この変更は、主に「ad」というサブストリングを含む生成されたクラス名を改ざんする過度に積極的な広告ブロッカーの一部を回避するのに役立ちます。
CDN から styled-components を使用する場合、v5 では「react-is」依存関係が追加されました（これをプロジェクトに追加してください）。
これは、1、2 週間後の v5 一般リリース前の最後の RC になるはずです！
注意: この stylisPlugins 機能を stylis-rtl プラグインでテストしている場合は、stylis-rtl から stylis-plugin-rtl に切り替えてください。
注意: 新しいリリースのターゲットブランチとして、canary から v5 に切り替えました。基本的には同じですが、マスターにきれいにマージされるように修正されています。
rc.1 からの変更
rc.0 からの変更
mixin-deep をインライン化しますいよいよです！数か月にわたる作業（ベータテスターの皆様、ありがとうございます！）を経て、これが最初の v5 リリース候補ビルドです。
v5 全体の変更
v4 からのパフォーマンスとバンドルサイズの大きな改善については、発表ブログ を参照してください！
StyleSheetManager の拡張機能
<StyleSheetManager stylisPlugins={[]}>...</StyleSheetManager>disableVendorPrefixes は、レガシーブラウザーのサポートが必要ない場合に自動プレフィックスを削除します。<StyleSheetManager disableVendorPrefixes>...</StyleSheetManager>disableCSSOMInjection は、ランタイム環境の他の統合が CSSOM 注入スタイルを解析できない場合に、低速な注入モードの使用を強制します。<StyleSheetManager disableCSSOMInjection>...</StyleSheetManager>v4 で非推奨になった「サブ関数」attrs 構文を削除しました
styled.div.attrs({ role: p => p.onClick ? 'button' : '' })`
color: red;
`変更後
styled.div.attrs(p => ({ role: p.onClick ? 'button' : '' }))`
color: red;
`最後のベータ版からの変更点
生成されたクラス名で /ad/i を禁止します（#2837）。この変更は、主に「ad」というサブストリングを含む生成されたクラス名を改ざんする過度に積極的な広告ブロッカーの一部を回避するのに役立ちます。
css-to-react-native を v3.0.0 に更新しました（#2811）。唯一の破壊的な変更は、フォントプロパティを設定するときに単位なしの行の高さが許可されなくなったことです。
merge-anything を mixin-deep に置き換えます（#2838）。拡張された styled コンポーネントの defaultProps をマージするときに使用されるバイト数を節約します
ランタイムインスタンスごとに createGlobalStyle をシャードします（#2824）。cGS はシングルトンとして使用することを意図して実装されていますが、同じ cGS コンポーネントの複数のインスタンスをページに同時に持つことは珍しくありません。この変更により、インスタンスがマウントおよび削除されると、既存のグローバルスタイルも削除されないようにします。
テーマのメモ化 (#2820); ThemeProvider に参照等価な theme プロップが渡された場合の、軽微なパフォーマンス調整
ThemeProvider のエラーをわかりやすくする (#2787); ThemeProvider 使用時に theme プロップが必須であることをより明確にメッセージ表示
useTheme() フックを追加 (https://github.com/styled-components/styled-components/pull/2765)これがv5前の最後のマイナーリリースです。ベータ版を使い始めてフィードバックをお寄せください！
これは#2738の変更による、パッチリリースではなくマイナーリリースです。もしこれがプロジェクトのコードの変更を引き起こす場合は申し訳ありませんが、これは修正が必要な長年のバグでした。
グローバル document の代わりに ownerDocument を使用するように修正 ( @yamachig 著) (#2721 参照)
next.jsのような一部の環境での開発モードにおけるSSRクラス名の不一致に対する修正をバックポートしました ( #2701 参照)
attrs が props より適切に優先されない問題を修正
カスタムクラス名が渡された場合にクラス名が間違った順序で構成されるバグを修正 ( #2760 参照)
スタイルタグがデタッチされている場合のスタイルタグのチェックを追加 - この場合、スタイルタグ内のシートは null になります ( @newying61 著) (#2707 参照)
テーマが使用されているが提供されていない場合に、軽量な開発警告を追加 (#2655)
コンポーネントセレクター + css プロパティの使用法を修正 (#2656)
5.0.0-beta.7 はビルドエラーのため公開されませんでした
折り畳まれた componentIds の概念を削除 (#2652); 折り畳まれたコンポーネント自体が折り畳まれた結果よりもコンポーネントツリーの後で使用される場合、特異性の衝突につながる可能性があった問題を修正します。
クラスが多すぎる警告を 200 に引き上げ (7af8e12bc32e44ea977e3e9fa6d45b6fdfd3a4e2)
テーマの決定方法を見直し、簡略化。createGlobalStyle の HMR と defaultProps.theme 周りの挙動を修正 (#2647)
stylis から @emotion/stylis に切り替えました (#2640)。主にバンドルサイズの削減と、軽微なパフォーマンスの向上
StyleSheetManager から "stylisOptions" プロップを削除しましたが、ベンダープレフィックスを削除する機能を "disableVendorPrefixes" として再実装しました
非プロダクションモードで ComponentStyle の静的性を無効にする (#2634)。next.js 開発モードなどのランタイムでクラス名の不一致が発生する場合を修正するのに役立つはずです
「クラスが多すぎる」警告のしきい値を 50 に引き下げました (#2622)。以前の制限は 200 で、おそらく高すぎました
更新された babel-plugin-styled-components で Babel マクロを修正 (https://github.com/styled-components/styled-components/pull/2635)
v4でSSRを行う方法との下位互換性の問題を修正 (https://github.com/styled-components/styled-components/pull/2639)
v5 で再導入を検討しますが、安全第一です。
CRA アプリケーションとの統合を容易にするために、REACT_APP_* .env 変数を介して SC_ATTR および SC_DISABLE_SPEEDY を初期化できるようにしました ( #2501 参照)
中間 HOC が存在する場合にコンポーネントが不適切に折り畳まれるのを修正 ( #2586 参照)
styled ネイティブコンポーネントの theme プロップを修正。また、それらの defaultProps の theme も修正 ( #2576 参照)
styled() を高階コンポーネントとして使用する場合に、異なる "as" プロパティ値を深く下のコンポーネントに渡すことができる "forwardedAs" プロップを追加 ( #2580 参照)
defaultProps の折り畳みを実装 ( #2597 参照)
素晴らしい貢献者の方々に心から感謝いたします！
next.jsのような特定のランタイム環境での過剰な偽陽性ノイズと、関連する警告抑制プロップのため、classNameの使用状況チェッカーの開発ユーティリティを削除しました（#2563を参照）。
Reactドキュメントの説明に従い、displayNameをforwardRef関数に付与しました（#2508を参照）。
react-native-web 0.11との互換性を実現しました（#2453を参照）。
.attrs警告にスタックトレースを追加しました（#2486を参照）。
オブジェクトリテラルの値としての関数を修正しました。（2489を参照）
Babelマクロのバリデーションを削除しました。 by @mAAdhaTTah（#2427を参照）
この大きなマイナーリリースを先導してくれた素晴らしい貢献者の皆さんに感謝します！v5に向けて、素晴らしいパフォーマンス向上とQOLの変更が含まれています。
コンポーネントセレクタースタイルを使用する際のGC負荷を軽減しました（#2424を参照）。
svgタグのmarkerをdomElements.jsに追加しました（#2389を参照）。
createGlobalStyleで作成されたGlobalStyleComponentが、propsとともにベースコンストラクターを呼び出すようにしました（#2321を参照）。
lernaを使用したモノリポジトリ構造に移行しました @imbhargav5（#2326を参照）
StyleSheetContextとStyleSheetConsumerを公開しました。これは、ワイルドなことをするおしゃれな人向けです。
suppressClassNameWarningがラップされたコンポーネントに渡されないようにフィルタリングしました @taneba（#2365を参照）
<textarea>要素内でReactがストリーミングを中断してしまうエッジケースを修正しました。textarea要素は特別な子要素の動作を持ち、スタイルタグを挿入するのに適した場所ではありません（#2413を参照）。
Babelマクロの内部コードをクリーンアップしました。 by @lucleray (#2286を参照)
完全な実行コンテキスト（テーマを含む）を受け取るように、関数形式のattrsを修正しました（#2210を参照）。
カスタムコンポーネントをラップしている場合は、innerRefの非推奨警告が発火しないように調整しました。これは、基になるコンポーネントがまだforwardRef上になく、実際にpropを使用している可能性があるためです（#2211を参照）。
ネイティブおよびプリミティブエントリ用に、ThemeConsumerとThemeContextのエクスポートを公開しました（#2217を参照）。
createGlobalStyleの複数マウント警告を削除しました。コンカレントモードと厳密モードでは、同じコンポーネントが意図的に複数回レンダリングされるため、アプリケーションで正しい使用法であっても常にこの警告がトリガーされます（#2216を参照）。
古い.extend APIを使用した場合、折りたたまれたコンポーネントはv3と同様にコンポーネントセレクターでターゲットにできるようになりました（#2239を参照）。
大文字の文字列をタグのようなコンポーネントとして扱わず、それらからプロップをフィルタリングしないようにしました（#2225を参照）。
完全に静的な（関数補間なし）styled-componentsのパフォーマンス最適化を行いました。これは、不要なためThemeConsumerの使用を避けることで実現しました。by @mxstbr（#2166を参照）
グローバル変数SC_DISABLE_SPEEDYを使用して「speedy」モードを無効化できるようにしました。by @devrelm（#2185を参照）
これを利用するには、アプリのエントリーファイルでSC_DISABLE_SPEEDYを設定するか、ビルド時にwebpack.DefinePluginのようなものを使用します。
webpack.DefinePlugin({
SC_DISABLE_SPEEDY: true,
});Attrsに関数を渡せるようになりました（#2200を参照）。早期PoC PRを提供してくれた@oliverlazに感謝します！
例：
styled.div.attrs(props => ({ 'aria-title': props.title }))``;warnTooManyClasses開発ヘルパーが本番環境で完全にデッドコード削除されないバグを修正しました（#2200を参照）。
オブジェクト形式のattrsのオブジェクトキーとしての関数を非推奨にしました（#2200を参照）。
例：
styled.div.attrs({ 'aria-title': props => props.title })``; // bad
styled.div.attrs(props => ({ 'aria-title': props.title }))``; // goodこのサポートはstyled-components v5で削除されます。この変更の主な理由は、オブジェクト形式のattrsコンストラクターで値として提供される基本的な関数、styled-components、Reactコンポーネントをめぐる混乱を解消するためです。それぞれ異なる処理動作があります。propsを受け取り、propsオブジェクトを返す単一の外側の関数は、概念的に単純です。
スタンドアロンのCDNビルドがUMDに準拠するようになり、RequireJSなどで使用できるようになりました。
styledコンポーネントではないものをCSSに補間しようとすると、警告ではなくハードエラーになりました（#2173を参照）。
文字列にstyledコンポーネントを補間すると、静的なコンポーネントセレクターが返されるようになりました（emotionとのクロス互換性）。
import styled from 'styled-components';
const Comp = styled.div`
color: red;
`;
`${Comp}`; // .sc-hashReactコンポーネントをstyled()でラップし、classNameが使用されていない場合に警告を無効にするsuppressClassNameWarningプロップを追加しました。by @Fer0x（#2156を参照）
React 16.6の静的contextTypeサポートを有効にするためにThemeContextを公開しました。by @imbhargav5（#2152を参照）
attrsプロップが要素を返す関数である場合に警告を追加しました。by @timswalling（#2162を参照）
複数のcgsマウントに関する警告を無効にするsuppressMultiMountWarningプロップを追加しました。by @imbhargav5（#2107を参照）
自己参照の置換に関するエッジケースを修正しました。by @probablyup（#2109を参照）
これは、便宜上、ベータ版0〜11のハイライトをまとめたものです。簡単な更新手順については移行ガイドを参照し、v4の変更点、思考プロセスなどの概要についてはベータ版発表ブログを参照してください。
create react app v2+との完全な相互運用性のためのBabelマクロを追加しました。by @lucleray（#2032を参照）
ThemeConsumerコンポーネントを公開しました。これは、withTheme HOCに加えて、または代わりにReact.createContext APIを使用することに関心がある人向けに、コンテキストコンシューマーのレンダープロップコンポーネントです。by @probablyup
マウント時にグローバルスタイルを適用するコンポーネントを返すcreateGlobalStyleを追加しました。これはinjectGlobal APIの代替です。通常のコンポーネントと同様に更新、置換、削除などが可能で、グローバルスコープがそれに応じて更新されます。 by @JamieDixon @marionebl, @yjimk, and @imbhargav5（#1416を参照）
const GlobalStyles = createGlobalStyle`
html {
color: 'red';
}
`;
// then put it in your React tree somewhere:
// <GlobalStyles />"as"プロップを介したポリモーフィズムをレンダリングするためのファーストクラスAPIを追加しました。ほとんどの場合、この新しいプロップは.withComponent APIを使用する必要性を置き換えます。これにより、スタイルを損なうことなく、実行時にレンダリングされる基になる要素またはコンポーネントを制御できます。by @probablyup（#1962を参照）
import { Link } from 'react-router'
const Component = styled.div`
color: red;
`
// Examples
<Component>Hello world!</Component>
<Component as="span">Hello world!</Component>
<Component as={Link} to="home">Hello world!</Component>自己参照セレクターの組み合わせ（例：& + &）でのアンパサンドの処理方法を修正しました（#2071を参照）。
非推奨のconsolidateStreamedStyles APIを削除しました。by @probablyup（#1906を参照）
非推奨のjsnext:mainエントリポイントをpackage.jsonから削除しました。by @probablyup（#1907を参照）
非推奨の.extend APIを削除しました。by @probablyup（#1908を参照）
新しい Context API への移行、@alexandernanberg 氏 (詳細は#1894 を参照)
TS の型定義を削除。型定義は DefinitelyTyped で提供されるようになりました。詳細は、https://github.com/styled-components/styled-components/issues/1778 を参照してください (@probablyup 氏)
複数の styled-components のバージョンがページ上で同時に機能するように、生成された <style> タグに新しい data-styled-version 属性を追加。これにより、互いに上書きすることを防ぎます (@probablyup 氏)
styled-components や React のようなライブラリの重複排除には、バンドラーによるエイリアスの使用を強く推奨します。
[破壊的変更] keyframes ヘルパーのリファクタリング (@fer0x 氏) (詳細は#1930 を参照)。
Keyframes は「遅延」方式で実装されるようになりました。そのスタイルは、それらを使用するコンポーネントのレンダリングフェーズで挿入されます。
keyframes はアニメーション名を返さなくなり、代わりにアニメーション名を取得するための .getName() メソッドを持つオブジェクトを返します。
新しい React.forwardRef API を使用するように移行 (@probablyup 氏)。これにより、不要になったため innerRef API が削除されることに注意してください。
styled() ラッパーの折りたたみの実装。簡単に言うと、styled ラッパーをネストすると (例: styled(styled.div))、コンポーネントが折りたたまれ、先祖のスタイルをマージしたものが1つだけマウントされます。これは、削除された「extend」機能と概念的には同等ですが、多くの欠点がなく、自動で行われます (@probablyup 氏) (詳細は#1962 を参照)
コンポーネントが styled コンポーネントではなく、コンポーネントセレクターで参照できない場合に警告を追加 (@egdbear 氏) (詳細は#2070 を参照)
CRA v2 を使用する場合、babel プラグインのすべての利点を享受するために、styled コンポーネントを styled-components/macro からインポートしてください。
React コンポーネントを styled() でラップしていて、className が使用されていない場合 (つまり、スタイルが適用されていない場合) に警告を追加 (@Fer0x 氏) (詳細は#2073 を参照)
styled コンポーネントのベースコンポーネントの命名を調整し、DevTools で見やすくする (@probablyup 氏) (詳細は#2012 を参照)
複数の styled components のバージョンが一緒に使用され、StyleSheet インスタンスが見つからない場合に発生するエラーメッセージを強化 (@probablyup 氏) (詳細は#2012 を参照)
enzyme のマウントされたテストシナリオから styled-component のインスタンスを簡単に取得するための enzymeFind テストユーティリティを追加 (@probablyup 氏) (詳細は#2049 を参照)
import { mount } from 'enzyme';
import React from 'react';
import styled from 'styled-components';
import { enzymeFind } from 'styled-components/test-utils';
const Thing = styled.div`
color: red;
`;
const wrapper = mount(
<div>
<Thing isCool />
</div>
);
const thing = enzymeFind(wrapper, Thing);
// expect(thing.props()).toHaveProperty('isCool') etcバンドラーのバグを回避し、パッケージのサイズを少し削減するために、静的ホイスティング機能をインライン化して最適化 (@probablyup 氏) (詳細は#2021 を参照)