diff --git a/package.json b/package.json index fe4bc042..45ef90ff 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "react-is": "^17.0.2", "react-live-runner": "^1.0.5", "react-transition-group": "^4.4.5", - "styled-components": "^6.0.0-rc.2", + "styled-components": "^6.0.0", "styled-theming": "^2.2.0", "stylis": "^4.2.0", "stylis-plugin-rtl": "^2.1.1" diff --git a/sections/api/primary/css-prop.mdx b/sections/api/primary/css-prop.mdx index fce85782..6175534b 100644 --- a/sections/api/primary/css-prop.mdx +++ b/sections/api/primary/css-prop.mdx @@ -38,6 +38,8 @@ Note that you don't even have to add the import, the Babel plugin does that auto #### Usage with the Babel macro +> This functionality was removed in v6.1 due to lack of usage and unnecessary bloat for other consumers. [More info](https://github.com/styled-components/styled-components/issues/4064) + You can use the [Babel macro](/docs/tooling#babel-macro) to make this work in `create-react-app`. Unfortunately, Babel macros only run when imported so **the import can not be added automatically.** The above code works perfectly if you add the import to the macro manually: ```tsx diff --git a/sections/faqs/create-react-app.mdx b/sections/faqs/create-react-app.mdx index eca06bbf..8872ffcb 100644 --- a/sections/faqs/create-react-app.mdx +++ b/sections/faqs/create-react-app.mdx @@ -3,7 +3,3 @@ The basic functionality of the library should work out of the box like any other library. However, if you want to do server-side rendering or take advantage of some of the advanced capabilities of the [styled-components babel plugin](/docs/tooling#babel-plugin) without ejecting you'll need to set up [`react-app-rewired`](https://github.com/timarney/react-app-rewired) and [`react-app-rewire-styled-components`](https://github.com/withspectrum/react-app-rewire-styled-components). - -### Babel Macro - -As of create-react-app v2, there is now an alternative to setting up `react-app-rewired` through use of "babel macros". See the [documentation for the styled-components babel macro](/docs/tooling#babel-macro) for setup and usage. diff --git a/sections/tooling/babel-macro.mdx b/sections/tooling/babel-macro.mdx index c8f52ba6..271b609b 100644 --- a/sections/tooling/babel-macro.mdx +++ b/sections/tooling/babel-macro.mdx @@ -1,4 +1,6 @@ -## Babel Macro | v4 +## Babel Macro | v4 | v5 + +> This functionality was removed in v6.1 due to lack of usage and unnecessary bloat for other consumers. [More info](https://github.com/styled-components/styled-components/issues/4064) [Babel macros](https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros) are quickly gaining steam as a full-featured option to allow advanced code transpilation for zero-config projects like [create-react-app](https://github.com/facebook/create-react-app). diff --git a/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap b/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap index 6a9a4b9a..a723dc3e 100644 --- a/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap +++ b/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap @@ -165,6 +165,7 @@ exports[`Navbar renders correctly 1`] = ` align-items: center; background-color: rgba(12, 13, 15, 0.7); backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); box-sizing: border-box; color: white; display: flex; diff --git a/test/components/NavBar/__snapshots__/index.spec.tsx.snap b/test/components/NavBar/__snapshots__/index.spec.tsx.snap index f460a051..bc78a0bc 100644 --- a/test/components/NavBar/__snapshots__/index.spec.tsx.snap +++ b/test/components/NavBar/__snapshots__/index.spec.tsx.snap @@ -173,6 +173,7 @@ exports[`Nav renders correctly 1`] = ` align-items: center; background-color: rgba(12, 13, 15, 0.7); backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); box-sizing: border-box; color: white; display: flex; diff --git a/test/components/__snapshots__/DocsLayout.spec.tsx.snap b/test/components/__snapshots__/DocsLayout.spec.tsx.snap index 330f28e6..cbfc2054 100644 --- a/test/components/__snapshots__/DocsLayout.spec.tsx.snap +++ b/test/components/__snapshots__/DocsLayout.spec.tsx.snap @@ -197,6 +197,7 @@ exports[`DocsLayout renders correctly 1`] = ` align-items: center; background-color: rgba(12, 13, 15, 0.7); backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); box-sizing: border-box; color: white; display: flex; diff --git a/test/components/__snapshots__/Note.spec.tsx.snap b/test/components/__snapshots__/Note.spec.tsx.snap index c94f8fbf..95051f32 100644 --- a/test/components/__snapshots__/Note.spec.tsx.snap +++ b/test/components/__snapshots__/Note.spec.tsx.snap @@ -14,8 +14,8 @@ exports[`Note renders correctly 1`] = ` margin: 0 0 0.2777777777777778rem 0; } -.sc-hzvfaM+.c0, -.sc-clmipK+.c0 { +.sc-eDDNPB+.c0, +.sc-dmqGxT+.c0 { margin-top: 1.9444444444444444rem; } diff --git a/yarn.lock b/yarn.lock index e6b01226..a418225f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1660,6 +1660,22 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:^1.2.1": + version: 1.2.1 + resolution: "@emotion/is-prop-valid@npm:1.2.1" + dependencies: + "@emotion/memoize": ^0.8.1 + checksum: 8f42dc573a3fad79b021479becb639b8fe3b60bdd1081a775d32388bca418ee53074c7602a4c845c5f75fa6831eb1cbdc4d208cc0299f57014ed3a02abcad16a + languageName: node + linkType: hard + +"@emotion/memoize@npm:^0.8.1": + version: 0.8.1 + resolution: "@emotion/memoize@npm:0.8.1" + checksum: a19cc01a29fcc97514948eaab4dc34d8272e934466ed87c07f157887406bc318000c69ae6f813a9001c6a225364df04249842a50e692ef7a9873335fbcc141b0 + languageName: node + linkType: hard + "@emotion/unitless@npm:^0.8.0": version: 0.8.0 resolution: "@emotion/unitless@npm:0.8.0" @@ -2644,6 +2660,13 @@ __metadata: languageName: node linkType: hard +"@types/stylis@npm:^4.0.2": + version: 4.2.1 + resolution: "@types/stylis@npm:4.2.1" + checksum: 556e7e4c3140f70afba4b1eacd2af48f6877c86eef43ce5d10d9d607e68f46ab25fe2cf9ae8a2f93765ca59aede98b6a1fd3cb66b4f8d73769932c50b614c8c3 + languageName: node + linkType: hard + "@types/tough-cookie@npm:*": version: 4.0.2 resolution: "@types/tough-cookie@npm:4.0.2" @@ -7468,7 +7491,7 @@ __metadata: languageName: node linkType: hard -"nanoid@npm:^3.3.4": +"nanoid@npm:^3.3.4, nanoid@npm:^3.3.6": version: 3.3.6 resolution: "nanoid@npm:3.3.6" bin: @@ -8100,6 +8123,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.4.23": + version: 8.4.31 + resolution: "postcss@npm:8.4.31" + dependencies: + nanoid: ^3.3.6 + picocolors: ^1.0.0 + source-map-js: ^1.0.2 + checksum: 1d8611341b073143ad90486fcdfeab49edd243377b1f51834dc4f6d028e82ce5190e4f11bb2633276864503654fb7cab28e67abdc0fbf9d1f88cad4a0ff0beea + languageName: node + linkType: hard + "preact@npm:^10.0.0": version: 10.15.0 resolution: "preact@npm:10.15.0" @@ -9204,7 +9238,7 @@ __metadata: react-transition-group: ^4.4.5 remark-gfm: ^3.0.1 rimraf: ^3.0.2 - styled-components: ^6.0.0-rc.2 + styled-components: ^6.0.0 styled-theming: ^2.2.0 stylis: ^4.2.0 stylis-plugin-rtl: ^2.1.1 @@ -9214,9 +9248,9 @@ __metadata: languageName: unknown linkType: soft -"styled-components@npm:^6.0.0-rc.2": - version: 6.0.0-rc.2 - resolution: "styled-components@npm:6.0.0-rc.2" +"styled-components@npm:^6.0.0": + version: 6.0.9 + resolution: "styled-components@npm:6.0.9" dependencies: "@babel/cli": ^7.21.0 "@babel/core": ^7.21.0 @@ -9228,10 +9262,14 @@ __metadata: "@babel/preset-react": ^7.18.6 "@babel/preset-typescript": ^7.21.0 "@babel/traverse": ^7.21.2 + "@emotion/is-prop-valid": ^1.2.1 "@emotion/unitless": ^0.8.0 + "@types/stylis": ^4.0.2 css-to-react-native: ^3.2.0 + csstype: ^3.1.2 + postcss: ^8.4.23 shallowequal: ^1.1.0 - stylis: ^4.2.0 + stylis: ^4.3.0 tslib: ^2.5.0 peerDependencies: babel-plugin-styled-components: ">= 2" @@ -9240,7 +9278,7 @@ __metadata: peerDependenciesMeta: babel-plugin-styled-components: optional: true - checksum: 3c52399aab749ac547bd266fde4c9ca107e4c3ed41dd6caffdade9265b0af58dfc539841069efb357a2f16c08aa31175710ed2d41b103de798304cb68a26c40e + checksum: 2ef1fb67b4b690b969e1efd2dd56943f45399203fe4f6f8a821bb6c8722c1bb28f0eef57b8614ddd751c50f0e19de2baa08f3ada8b3b2dc28109e5650be3c0e9 languageName: node linkType: hard @@ -9283,6 +9321,13 @@ __metadata: languageName: node linkType: hard +"stylis@npm:^4.3.0": + version: 4.3.0 + resolution: "stylis@npm:4.3.0" + checksum: 6120de3f03eacf3b5adc8e7919c4cca991089156a6badc5248752a3088106afaaf74996211a6817a7760ebeadca09004048eea31875bd8d4df51386365c50025 + languageName: node + linkType: hard + "sucrase@npm:^3.21.0": version: 3.31.0 resolution: "sucrase@npm:3.31.0"