Skip to content

Commit

Permalink
fix: replace zeit/styled-jsx by vercel/styled-jsx
Browse files Browse the repository at this point in the history
  • Loading branch information
theoludwig committed Feb 1, 2021
1 parent 9d62903 commit 87af170
Show file tree
Hide file tree
Showing 14 changed files with 20 additions and 20 deletions.
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-linaria/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Example app with [linaria](https://linaria.now.sh/)

This example features how to use [linaria](https://linaria.now.sh/) as the styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx).
This example features how to use [linaria](https://linaria.now.sh/) as the styling solution instead of [styled-jsx](https://github.com/vercel/styled-jsx).

We are creating three `div` elements with custom styles being shared across the elements. The styles includes the use of pseudo-selector and CSS animations.

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
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

0 comments on commit 87af170

Please sign in to comment.