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

Setup require hook in next-server for styled-jsx resolving #39305

Merged
merged 23 commits into from Aug 9, 2022
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 0 additions & 1 deletion package.json
Expand Up @@ -191,7 +191,6 @@
"semver": "7.3.7",
"shell-quote": "1.7.3",
"styled-components": "5.3.3",
"styled-jsx": "link:packages/next/node_modules/styled-jsx",
"styled-jsx-plugin-postcss": "3.0.2",
"tailwindcss": "1.1.3",
"taskr": "1.1.0",
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default function Foo() {
return /*#__PURE__*/ React.createElement("div", {
render: function(v) {
Expand Down
2 changes: 1 addition & 1 deletion packages/next-swc/crates/styled_jsx/src/utils.rs
Expand Up @@ -310,7 +310,7 @@ pub fn styled_jsx_import_decl(style_import_name: &str) -> ModuleItem {
})],
src: Str {
span: DUMMY_SP,
value: "next/dist/shared/lib/styled-jsx".into(),
value: "next/dist/shared/lib/styled-jsx/style".into(),
raw: None,
},
}))
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
const Component = ()=><>
<header >
<Comp >
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (()=><div >

<style jsx>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default {
styles: <_JSXStyle id={"71f03d42ea0ec6"}>{".container.jsx-71f03d42ea0ec6{background:#000;color:white;font-weight:700;height:100px}"}</_JSXStyle>,
className: "jsx-71f03d42ea0ec6"
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (()=><div >

<style jsx>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (()=><div >

<style jsx>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (()=><div >

<style jsx>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (()=>{
const Element = 'div';
return <div className={"jsx-abb4c2202db1a207"}>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
import styles from './styles';
const styles2 = require('./styles2');
// external only
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default class {
render() {
return <div className={"jsx-b2b86d63f35d25ee"}>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default class {
render() {
return <div className={"jsx-1952086b0a5ae64c"}>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
const Test = ()=><div className={"jsx-a9535d7d5f32c3c4"}>

<span className={"jsx-a9535d7d5f32c3c4"}>test</span>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
function NavigationItem({ active , className , }) {
return <span className={"jsx-2342aae4628612c6" + " " + (cn({
active
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (({ children })=><div className={`jsx-${styles.__hash}`}>

<p className={`jsx-${styles.__hash}`}>{children}</p>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
const color = 'red';
const otherColor = 'green';
const A = ()=><div className={"jsx-551210e97e875d0e"}>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default class {
render() {
const Element = 'div';
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
import styles from './styles2';
export default (({ level =1 })=>{
const Element = `h${level}`;
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (({ level =1 })=>{
const Element = `h${level}`;
return <Element className={"jsx-fca64cc3f069b519" + " " + "root"}>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
const darken = (c)=>c;
const color = 'red';
const otherColor = 'green';
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
function test() {
({
styles: <_JSXStyle id={"abb4c2202db1a207"}>{"div.jsx-abb4c2202db1a207{color:red}"}</_JSXStyle>,
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
import styles, { foo as styles3 } from './styles';
const styles2 = require('./styles2');
export default (()=><div >
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
import styles from './styles';
export default (()=><div className={`jsx-${styles.__hash}`}>

Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
import styles from './styles';
const styles2 = require('./styles2');
import { foo as styles3 } from './styles';
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
import React from 'react';
export default (()=><>

Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
const Test = ()=><div className={"jsx-5a206f122d1cb32e"}>

<span className={"jsx-5a206f122d1cb32e"}>test</span>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default function IndexPage() {
return <div className={"jsx-b6abd0684ba81871"}>

Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
const Test = ()=><div className={"jsx-d47d6adadf14e957"}>

<_JSXStyle id={"d47d6adadf14e957"}>{"body{color:red}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;-moz-animation:foo 1s ease-out;-o-animation:foo 1s ease-out;animation:foo 1s ease-out}div a{display:none}[data-test]>div{color:red}"}</_JSXStyle>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (({ breakPoint })=><div className={_JSXStyle.dynamic([
[
"5d2a0e645566ce9c",
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default function IndexPage() {
return <div className={"jsx-bbdada4ef17d18ef"}>

Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default class {
render() {
return <div className={_JSXStyle.dynamic([
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
const Test = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>;
export default (()=><div className={"jsx-3822e6e1fb9fa41a"}>

Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
const attrs = {
id: 'test'
};
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (()=><div className={"jsx-94239b6d6b42c9b5"}>

<p className={"jsx-94239b6d6b42c9b5"}>woot</p>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
import Link from "next/link";
export default function IndexPage() {
return <div className={"jsx-9a4b3442d519aae9"}>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (()=><div className={"jsx-c7c3a8e231c9215a"}>

<p className={"jsx-c7c3a8e231c9215a"}>test</p>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (()=><div className={"jsx-94239b6d6b42c9b5"}>

<p className={"jsx-94239b6d6b42c9b5"}>test</p>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
import colors, { size } from './constants';
const color = 'red';
const bar = new String("div.jsx-aaed0341accea8f{font-size:3em}");
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export const Red = ({ Component ='button' , })=>{
return <Component className={_JSXStyle.dynamic([
[
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default class {
render() {
return <div className={"jsx-1f6cef12199c3a8f"}>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default function Home({ fontFamily }) {
return <div className={_JSXStyle.dynamic([
[
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default class {
render() {
return <div className={_JSXStyle.dynamic([
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default class {
render() {
return <div className={_JSXStyle.dynamic([
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default class {
render() {
return <div className={_JSXStyle.dynamic([
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default class {
render() {
return <div className={_JSXStyle.dynamic([
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default class {
render() {
return <div className={_JSXStyle.dynamic([
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (()=><div className={"jsx-53fd644ab080300c"}>

<p className={"jsx-53fd644ab080300c"}>test</p>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (()=><div className={"jsx-1f7963ae04c6466a"}>

<p className={"jsx-1f7963ae04c6466a"}>test</p>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (()=><div className={"jsx-1a19bb4817c105dd"}>

<p className={"jsx-1a19bb4817c105dd"}>test</p>
Expand Down
@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (()=><div className={"jsx-938ca197692ef624"}>

<p className={"jsx-938ca197692ef624"}>test</p>
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

@@ -1,4 +1,4 @@
import _JSXStyle from "next/dist/shared/lib/styled-jsx";
import _JSXStyle from "next/dist/shared/lib/styled-jsx/style";
export default (()=><div className={"jsx-94239b6d6b42c9b5"}>

<p className={"jsx-94239b6d6b42c9b5"}>test</p>
Expand Down
2 changes: 1 addition & 1 deletion packages/next/build/babel/preset.ts
Expand Up @@ -16,7 +16,7 @@ type StyledJsxBabelOptions =
// Resolve styled-jsx plugins
function styledJsxOptions(options: StyledJsxBabelOptions) {
options = options || {}
options.styleModule = 'next/dist/shared/lib/styled-jsx'
options.styleModule = 'next/dist/shared/lib/styled-jsx/style'

if (!Array.isArray(options.plugins)) {
return options
Expand Down
8 changes: 7 additions & 1 deletion packages/next/build/webpack-config.ts
Expand Up @@ -685,6 +685,8 @@ export default async function getBaseWebpackConfig(
'react-dom/server$': `${reactDomDir}/server`,
'react-dom/server.browser$': `${reactDomDir}/server.browser`,
'react-dom/client$': `${reactDomDir}/client`,
'styled-jsx/style$': require.resolve(`styled-jsx/style`),
'styled-jsx$': require.resolve(`styled-jsx`),

...customAppAliases,
...customErrorAlias,
Expand Down Expand Up @@ -816,9 +818,13 @@ export default async function getBaseWebpackConfig(
resolveRequest: string
) => Promise<[string | null, boolean]>
) {
// Rewrite back to internals to avoid bundled into chunks after overriding in require-hook
if (request === 'styled-jsx') {
huozhi marked this conversation as resolved.
Show resolved Hide resolved
request = 'next/dist/shared/lib/styled-jsx'
}
// We need to externalize internal requests for files intended to
// not be bundled.
const isLocal: boolean =
let isLocal: boolean =
request.startsWith('.') ||
// Always check for unix-style path, as webpack sometimes
// normalizes as posix.
Expand Down
2 changes: 2 additions & 0 deletions packages/next/build/webpack/require-hook.ts
Expand Up @@ -126,6 +126,8 @@ const hookPropertyMap = new Map(
'next/dist/compiled/@babel/runtime/package.json',
],
['node-fetch', 'next/dist/compiled/node-fetch'],
['styled-jsx/style', 'styled-jsx/style'],
['styled-jsx', 'styled-jsx'],
ijjk marked this conversation as resolved.
Show resolved Hide resolved
].map(([request, replacement]) => [request, require.resolve(replacement)])
)

Expand Down
4 changes: 2 additions & 2 deletions packages/next/pages/_error.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import Head from '../shared/lib/head'
import { NextPageContext } from '../shared/lib/utils'
import type { NextPageContext } from '../shared/lib/utils'

const statusCodes: { [code: number]: string } = {
400: 'Bad Request',
Expand Down Expand Up @@ -57,7 +57,7 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
.next-error-h1 {
border-right: 1px solid rgba(0, 0, 0, .3);
}

${
withDarkMode
? `@media (prefers-color-scheme: dark) {
Expand Down
1 change: 1 addition & 0 deletions packages/next/shared/lib/styled-jsx/index.d.ts
@@ -0,0 +1 @@
export * from 'next/dist/styled-jsx-types'
1 change: 1 addition & 0 deletions packages/next/shared/lib/styled-jsx/index.js
@@ -0,0 +1 @@
module.exports = require('styled-jsx')