Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: retire macro docs #952

Merged
merged 4 commits into from
Oct 14, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 2 additions & 0 deletions sections/api/primary/css-prop.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 0 additions & 4 deletions sections/faqs/create-react-app.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
4 changes: 3 additions & 1 deletion sections/tooling/babel-macro.mdx
Original file line number Diff line number Diff line change
@@ -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).

Expand Down
1 change: 1 addition & 0 deletions test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions test/components/NavBar/__snapshots__/index.spec.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions test/components/__snapshots__/DocsLayout.spec.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions test/components/__snapshots__/Note.spec.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
59 changes: 52 additions & 7 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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"
Expand All @@ -9240,7 +9278,7 @@ __metadata:
peerDependenciesMeta:
babel-plugin-styled-components:
optional: true
checksum: 3c52399aab749ac547bd266fde4c9ca107e4c3ed41dd6caffdade9265b0af58dfc539841069efb357a2f16c08aa31175710ed2d41b103de798304cb68a26c40e
checksum: 2ef1fb67b4b690b969e1efd2dd56943f45399203fe4f6f8a821bb6c8722c1bb28f0eef57b8614ddd751c50f0e19de2baa08f3ada8b3b2dc28109e5650be3c0e9
languageName: node
linkType: hard

Expand Down Expand Up @@ -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"
Expand Down