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

build(deps): bump styled-jsx from 3.3.2 to 3.4.4 #21650

Closed
wants to merge 3 commits into from
Closed
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 examples/with-aphrodite/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Example app with aphrodite

This example features how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [Aphrodite](https://github.com/Khan/aphrodite/).
This example features how to use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [Aphrodite](https://github.com/Khan/aphrodite/).

For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`.

Expand Down
2 changes: 1 addition & 1 deletion examples/with-astroturf/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Example app with [astroturf](https://github.com/4Catalyzer/astroturf)

This example features how to use [astroturf](https://github.com/4Catalyzer/astroturf) as the zero-runtime CSS-in-JS styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx).
This example features how to use [astroturf](https://github.com/4Catalyzer/astroturf) as the zero-runtime CSS-in-JS styling solution instead of [styled-jsx](https://github.com/vercel/styled-jsx).

## Deploy your own

Expand Down
2 changes: 1 addition & 1 deletion examples/with-cxs/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Example app with cxs

This example shows how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [cxs](https://github.com/jxnblk/cxs/).
This example shows how to use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [cxs](https://github.com/jxnblk/cxs/).

For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`.

Expand Down
2 changes: 1 addition & 1 deletion examples/with-fela/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Example app with Fela

This example features how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [fela](https://github.com/rofrischmann/fela).
This example features how to use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [fela](https://github.com/rofrischmann/fela).

For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`.

Expand Down
2 changes: 1 addition & 1 deletion examples/with-glamor/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Example app with glamor

This example features how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [glamor](https://github.com/threepointone/glamor).
This example features how to use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [glamor](https://github.com/threepointone/glamor).

For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`.

Expand Down
2 changes: 1 addition & 1 deletion examples/with-react-with-styles/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Example app with react-with-styles

This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles.
This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles.
That means we can serve the required styles for the first render within the HTML and then load the rest in the client.
In this case we are using [react-with-styles](https://github.com/airbnb/react-with-styles).

Expand Down
2 changes: 1 addition & 1 deletion examples/with-styled-components/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Example app with styled-components

This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components).
This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components).

For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`, and also adding the `babel-plugin-styled-components` (which is required for server side rendering). Additionally we set up a global [theme](https://www.styled-components.com/docs/advanced#theming) for styled-components using NextJS custom [`<App>`](https://nextjs.org/docs/advanced-features/custom-app) component.

Expand Down
4 changes: 2 additions & 2 deletions examples/with-styled-jsx-plugins/README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# With styled-jsx plugins

Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you
Next.js ships with [styled-jsx](https://github.com/vercel/styled-jsx) allowing you
to write scope styled components with full css support. This is important for
the modularity and code size of your bundles and also for the learning curve of the framework. If you know css you can write styled-jsx right away.

This example shows how to configure styled-jsx to use external plugins to modify the output. Using this you can use PostCSS, SASS (SCSS), LESS, or any other pre-processor with styled-jsx. You can define plugins in `.babelrc`. In this case PostCSS was used as an example. PostCSS plugins are defined in `package.json`.

More details about how plugins work can be found in the [styled-jsx readme](https://github.com/zeit/styled-jsx#css-preprocessing-via-plugins)
More details about how plugins work can be found in the [styled-jsx readme](https://github.com/vercel/styled-jsx#css-preprocessing-via-plugins)

## Deploy your own

Expand Down
4 changes: 2 additions & 2 deletions examples/with-styled-jsx-scss/README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# With styled-jsx SASS / SCSS

Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you
Next.js ships with [styled-jsx](https://github.com/vercel/styled-jsx) allowing you
to write scope styled components with full css support. This is important for
the modularity and code size of your bundles and also for the learning curve of the framework. If you know css you can write styled-jsx right away.

This example shows how to configure styled-jsx to use external plugins to modify the output. Using this you can use PostCSS, SASS (SCSS), LESS, or any other pre-processor with styled-jsx. You can define plugins in `.babelrc`. This example shows how to implement the SASS plugin.

More details about how plugins work can be found in the [styled-jsx readme](https://github.com/zeit/styled-jsx#css-preprocessing-via-plugins)
More details about how plugins work can be found in the [styled-jsx readme](https://github.com/vercel/styled-jsx#css-preprocessing-via-plugins)

## Deploy your own

Expand Down
2 changes: 1 addition & 1 deletion examples/with-styletron/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Example app with styletron

This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styletron](https://github.com/rtsao/styletron).
This example features how yo use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styletron](https://github.com/rtsao/styletron).

For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`.

Expand Down
2 changes: 1 addition & 1 deletion examples/with-typestyle/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Example app with typestyle

This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [typestyle](https://github.com/typestyle/typestyle).
This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [typestyle](https://github.com/typestyle/typestyle).

For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`. Refer to [with-typescript](https://github.com/vercel/next.js/tree/master/examples/with-typescript) to use this with typescript.

Expand Down
3 changes: 1 addition & 2 deletions packages/next/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
"stream-browserify": "3.0.0",
"stream-http": "3.1.1",
"string_decoder": "1.3.0",
"styled-jsx": "3.3.2",
"styled-jsx": "3.4.4",
"timers-browserify": "2.0.12",
"tty-browserify": "0.0.1",
"use-subscription": "1.5.1",
Expand Down Expand Up @@ -179,7 +179,6 @@
"@types/react-is": "16.7.1",
"@types/semver": "7.3.1",
"@types/send": "0.14.4",
"@types/styled-jsx": "2.2.8",
"@types/text-table": "0.2.1",
"@types/webpack-sources": "0.1.5",
"@vercel/ncc": "0.27.0",
Expand Down
6 changes: 0 additions & 6 deletions packages/next/types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,6 @@ declare module 'react' {
interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
nonce?: string
}

// <style jsx> and <style jsx global> support for styled-jsx
interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
jsx?: boolean
global?: boolean
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't know there were styled-jsx types inside next, even if apparently it was the case, it was not working, users still needed to install @types/styled-jsx, now that it is included in [email protected], we don't need it anymore inside next.

}
}

export type Redirect =
Expand Down
6 changes: 3 additions & 3 deletions test/integration/basepath/test/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ const runTests = (dev = false) => {
})

// Added because of a regression in react-hot-loader, see issues: #4246 #4273
// Also: https://github.com/zeit/styled-jsx/issues/425
// Also: https://github.com/vercel/styled-jsx/issues/425
it('should update styles correctly', async () => {
let browser
try {
Expand Down Expand Up @@ -232,7 +232,7 @@ const runTests = (dev = false) => {
})

// Added because of a regression in react-hot-loader, see issues: #4246 #4273
// Also: https://github.com/zeit/styled-jsx/issues/425
// Also: https://github.com/vercel/styled-jsx/issues/425
it('should update styles in a stateful component correctly', async () => {
let browser
const pagePath = join(
Expand Down Expand Up @@ -271,7 +271,7 @@ const runTests = (dev = false) => {
})

// Added because of a regression in react-hot-loader, see issues: #4246 #4273
// Also: https://github.com/zeit/styled-jsx/issues/425
// Also: https://github.com/vercel/styled-jsx/issues/425
it('should update styles in a dynamic component correctly', async () => {
let browser = null
let secondBrowser = null
Expand Down
6 changes: 3 additions & 3 deletions test/integration/basic/test/hmr.js
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export default (context, renderViaHTTP) => {
})

// Added because of a regression in react-hot-loader, see issues: #4246 #4273
// Also: https://github.com/zeit/styled-jsx/issues/425
// Also: https://github.com/vercel/styled-jsx/issues/425
it('should update styles correctly', async () => {
let browser
try {
Expand Down Expand Up @@ -180,7 +180,7 @@ export default (context, renderViaHTTP) => {
})

// Added because of a regression in react-hot-loader, see issues: #4246 #4273
// Also: https://github.com/zeit/styled-jsx/issues/425
// Also: https://github.com/vercel/styled-jsx/issues/425
it('should update styles in a stateful component correctly', async () => {
let browser
const pagePath = join(
Expand Down Expand Up @@ -219,7 +219,7 @@ export default (context, renderViaHTTP) => {
})

// Added because of a regression in react-hot-loader, see issues: #4246 #4273
// Also: https://github.com/zeit/styled-jsx/issues/425
// Also: https://github.com/vercel/styled-jsx/issues/425
it('should update styles in a dynamic component correctly', async () => {
let browser = null
let secondBrowser = null
Expand Down
17 changes: 6 additions & 11 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@
dependencies:
"@babel/types" "^7.12.1"

"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.5":
"@babel/helper-module-imports@7.12.5", "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.5":
version "7.12.5"
resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb"
integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==
Expand Down Expand Up @@ -3262,12 +3262,6 @@
version "1.1.1"
resolved "https://registry.yarnpkg.com/@types/string-hash/-/string-hash-1.1.1.tgz#4c336e61d1e13ce2d3efaaa5910005fd080e106b"

"@types/[email protected]":
version "2.2.8"
resolved "https://registry.yarnpkg.com/@types/styled-jsx/-/styled-jsx-2.2.8.tgz#b50d13d8a3c34036282d65194554cf186bab7234"
dependencies:
"@types/react" "*"

"@types/[email protected]":
version "4.0.3"
resolved "https://registry.yarnpkg.com/@types/tar/-/tar-4.0.3.tgz#e2cce0b8ff4f285293243f5971bd7199176ac489"
Expand Down Expand Up @@ -15129,11 +15123,12 @@ [email protected]:
postcss "^7.0.2"
postcss-load-plugins "^2.3.0"

styled-jsx@3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.2.tgz#2474601a26670a6049fb4d3f94bd91695b3ce018"
integrity sha512-daAkGd5mqhbBhLd6jYAjYBa9LpxYCzsgo/f6qzPdFxVB8yoGbhxvzQgkC0pfmCVvW3JuAEBn0UzFLBfkHVZG1g==
styled-jsx@3.4.4:
version "3.4.4"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.4.4.tgz#d5012cac2ed22be0b72e28932f3eece8d83b695c"
integrity sha512-PkZi/col7R4cpwSPY2n4JjpcTYfBgaWg/1mt0+1E/pmkXL+Pik5Kr/snYMWj90+N3kDw+BqfnJOogdRw4621GQ==
dependencies:
"@babel/helper-module-imports" "7.12.5"
"@babel/types" "7.8.3"
babel-plugin-syntax-jsx "6.18.0"
convert-source-map "1.7.0"
Expand Down