diff --git a/package.json b/package.json index 789310d73bcd..efb10eda64d7 100644 --- a/package.json +++ b/package.json @@ -192,7 +192,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", diff --git a/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js b/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js index f82bfb4e4a00..ed60ad648aa2 100644 --- a/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js +++ b/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js @@ -1,4 +1,4 @@ -import _JSXStyle from "next/dist/shared/lib/styled-jsx"; +import _JSXStyle from "styled-jsx/style"; export default function Foo() { return /*#__PURE__*/ React.createElement("div", { render: function(v) { diff --git a/packages/next-swc/crates/styled_jsx/src/utils.rs b/packages/next-swc/crates/styled_jsx/src/utils.rs index 678762e3c4fa..bc720b16af38 100644 --- a/packages/next-swc/crates/styled_jsx/src/utils.rs +++ b/packages/next-swc/crates/styled_jsx/src/utils.rs @@ -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: "styled-jsx/style".into(), raw: None, }, })) diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js index 38d68136f2d8..6a801091839c 100644 --- a/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js +++ b/packages/next-swc/crates/styled_jsx/tests/errors/nested-style-tags/output.js @@ -1,4 +1,4 @@ -import _JSXStyle from "next/dist/shared/lib/styled-jsx"; +import _JSXStyle from "styled-jsx/style"; const Component = ()=><>
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js index 908b640b076a..90fb7d27831c 100644 --- a/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js +++ b/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js @@ -1,4 +1,4 @@ -import _JSXStyle from "next/dist/shared/lib/styled-jsx"; +import _JSXStyle from "styled-jsx/style"; export default (()=>
+

styled-jsx

This area is rendered by styled-jsx

+
) diff --git a/test/e2e/app-dir/rsc-basic/app/root-style-registry.client.js b/test/e2e/app-dir/rsc-basic/app/root-style-registry.client.js index 922aa3ee46a4..c642e14fb1a7 100644 --- a/test/e2e/app-dir/rsc-basic/app/root-style-registry.client.js +++ b/test/e2e/app-dir/rsc-basic/app/root-style-registry.client.js @@ -20,12 +20,10 @@ export default function RootStyleRegistry({ children }) { } useFlushEffects(() => { - const effects = styledComponentsFlushEffect() - return ( <> {styledJsxFlushEffect()} - {effects} + {styledComponentsFlushEffect()} ) }) diff --git a/test/e2e/styled-jsx/app/.npmrc b/test/e2e/styled-jsx/app/.npmrc new file mode 100644 index 000000000000..4c2f52b3be71 --- /dev/null +++ b/test/e2e/styled-jsx/app/.npmrc @@ -0,0 +1,2 @@ +auto-install-peers=true +strict-peer-dependencies=false diff --git a/test/e2e/styled-jsx/app/node_modules_bak/my-comps/button.js b/test/e2e/styled-jsx/app/node_modules_bak/my-comps/button.js new file mode 100644 index 000000000000..a800c06432f5 --- /dev/null +++ b/test/e2e/styled-jsx/app/node_modules_bak/my-comps/button.js @@ -0,0 +1,31 @@ +Object.defineProperty(exports, '__esModule', { value: true }) + +function _interopDefault(ex) { + return ex && typeof ex === 'object' && 'default' in ex ? ex['default'] : ex +} + +var _JSXStyle = _interopDefault(require('styled-jsx/style')) +var React = require('react') + +function Button() { + return React.createElement( + 'button', + { + className: 'jsx-451104437', + }, + 'hello', + React.createElement( + _JSXStyle, + { + id: '451104437', + }, + '.jsx-451104437{color:cyan;}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTWtCLEFBRW1CLFVBQ1oiLCJmaWxlIjoiQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQnV0dG9uKCkge1xuICByZXR1cm4gKFxuICAgIDxidXR0b24+XG4gICAgICBoZWxsb1xuICAgICAgPHN0eWxlIGpzeD57YFxuICAgICAgICBjb2xybzogcmVkO1xuICAgICAgYH08L3N0eWxlPlxuICAgIDwvYnV0dG9uPlxuICApO1xufVxuIl19 */\n/*@ sourceURL=Button.tsx */' + ) + ) +} + +/** + * @class ExampleComponent + */ + +exports.Button = Button diff --git a/test/e2e/styled-jsx/app/pages/amp.js b/test/e2e/styled-jsx/app/pages/amp.js new file mode 100644 index 000000000000..8f71fdbc5ce3 --- /dev/null +++ b/test/e2e/styled-jsx/app/pages/amp.js @@ -0,0 +1,12 @@ +import { Button } from 'my-comps/button' + +export const config = { amp: true } + +export default function page() { + return ( + <> +

Hello world

+ + + ) +} diff --git a/test/e2e/styled-jsx/app/pages/index.js b/test/e2e/styled-jsx/app/pages/index.js index 31c938b25e4f..378661135fc9 100644 --- a/test/e2e/styled-jsx/app/pages/index.js +++ b/test/e2e/styled-jsx/app/pages/index.js @@ -1,8 +1,11 @@ +import { Button } from 'my-comps/button' + export default function Page() { return (

hello world

+
) } diff --git a/test/e2e/styled-jsx/index.test.ts b/test/e2e/styled-jsx/index.test.ts index c0f52f658ff9..aa22928ece66 100644 --- a/test/e2e/styled-jsx/index.test.ts +++ b/test/e2e/styled-jsx/index.test.ts @@ -2,35 +2,67 @@ import path from 'path' import { createNext, FileRef } from 'e2e-utils' import { NextInstance } from 'test/lib/next-modes/base' import { renderViaHTTP } from 'next-test-utils' -import cheerio from 'cheerio' +import webdriver from 'next-webdriver' const appDir = path.join(__dirname, 'app') -function runTest(packageManager?: string) { - describe(`styled-jsx${packageManager ? ' ' + packageManager : ''}`, () => { +function runTest() { + describe(`styled-jsx`, () => { let next: NextInstance beforeAll(async () => { next = await createNext({ files: { + node_modules_bak: new FileRef(path.join(appDir, 'node_modules_bak')), pages: new FileRef(path.join(appDir, 'pages')), + '.npmrc': new FileRef(path.join(appDir, '.npmrc')), }, - ...(packageManager - ? { - installCommand: `npx ${packageManager} install`, - } - : {}), + packageJson: { + scripts: { + setup: `cp -r ./node_modules_bak/my-comps ./node_modules;`, + build: `yarn setup && next build`, + dev: `yarn setup && next dev`, + start: 'next start', + }, + }, + dependencies: { + 'styled-jsx': '5.0.0', // styled-jsx on user side + }, + startCommand: 'yarn ' + ((global as any).isNextDev ? 'dev' : 'start'), + buildCommand: `yarn build`, }) }) afterAll(() => next.destroy()) - it('should contain styled-jsx styles in html', async () => { + it('should contain styled-jsx styles during SSR', async () => { const html = await renderViaHTTP(next.url, '/') - const $ = cheerio.load(html) - expect($('html').text()).toMatch(/color:(\s)*red/) + expect(html).toMatch(/color:.*?red/) + expect(html).toMatch(/color:.*?cyan/) + }) + + it('should render styles during CSR', async () => { + const browser = await webdriver(next.url, '/') + const color = await browser.eval( + `getComputedStyle(document.querySelector('button')).color` + ) + + expect(color).toMatch('0, 255, 255') + }) + + it('should render styles during CSR (AMP)', async () => { + const browser = await webdriver(next.url, '/amp') + const color = await browser.eval( + `getComputedStyle(document.querySelector('button')).color` + ) + + expect(color).toMatch('0, 255, 255') + }) + + it('should render styles during SSR (AMP)', async () => { + const html = await renderViaHTTP(next.url, '/amp') + expect(html).toMatch(/color:.*?cyan/) }) }) } runTest() -runTest('pnpm') diff --git a/test/integration/styled-jsx-module/app/node_modules/my-comps/button.js b/test/integration/styled-jsx-module/app/node_modules/my-comps/button.js deleted file mode 100644 index 7176c6258a9d..000000000000 --- a/test/integration/styled-jsx-module/app/node_modules/my-comps/button.js +++ /dev/null @@ -1,22 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, '__esModule', { value: true }); - -function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } - -var _JSXStyle = _interopDefault(require('styled-jsx/style')); -var React = require('react'); - -function Button() { - return React.createElement("button", { - className: "jsx-451104437" - }, "hello", React.createElement(_JSXStyle, { - id: "451104437" - }, ".jsx-451104437{color:cyan;}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTWtCLEFBRW1CLFVBQ1oiLCJmaWxlIjoiQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQnV0dG9uKCkge1xuICByZXR1cm4gKFxuICAgIDxidXR0b24+XG4gICAgICBoZWxsb1xuICAgICAgPHN0eWxlIGpzeD57YFxuICAgICAgICBjb2xybzogcmVkO1xuICAgICAgYH08L3N0eWxlPlxuICAgIDwvYnV0dG9uPlxuICApO1xufVxuIl19 */\n/*@ sourceURL=Button.tsx */")); -} - -/** - * @class ExampleComponent - */ - -exports.Button = Button; \ No newline at end of file diff --git a/test/integration/styled-jsx-module/app/node_modules/my-comps/package.json b/test/integration/styled-jsx-module/app/node_modules/my-comps/package.json deleted file mode 100644 index c0952cffa5d6..000000000000 --- a/test/integration/styled-jsx-module/app/node_modules/my-comps/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "my-comps", - "version": "1.0.0", - "main": "index.js", - "license": "MIT" -} diff --git a/test/integration/styled-jsx-module/app/package.json b/test/integration/styled-jsx-module/app/package.json deleted file mode 100644 index b9506bee3387..000000000000 --- a/test/integration/styled-jsx-module/app/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "styled-jsx-module", - "version": "1.0.0", - "main": "index.js", - "license": "MIT" -} diff --git a/test/integration/styled-jsx-module/app/pages/amp.js b/test/integration/styled-jsx-module/app/pages/amp.js deleted file mode 100644 index 5e3645d14252..000000000000 --- a/test/integration/styled-jsx-module/app/pages/amp.js +++ /dev/null @@ -1,12 +0,0 @@ -import { Button } from 'my-comps/button' - -export const config = { amp: true } - -const Index = () => ( - <> -

Hello world

- - -) - -export default Index diff --git a/test/integration/styled-jsx-module/app/pages/index.js b/test/integration/styled-jsx-module/app/pages/index.js deleted file mode 100644 index 3ebb08835bd2..000000000000 --- a/test/integration/styled-jsx-module/app/pages/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import { Button } from 'my-comps/button' - -const Index = () => ( - <> -

Hello world

- - -) - -export default Index diff --git a/test/integration/styled-jsx-module/test/index.test.js b/test/integration/styled-jsx-module/test/index.test.js deleted file mode 100644 index 3bad07cb13c4..000000000000 --- a/test/integration/styled-jsx-module/test/index.test.js +++ /dev/null @@ -1,69 +0,0 @@ -/* eslint-env jest */ - -import { join } from 'path' -import webdriver from 'next-webdriver' -import { - killApp, - findPort, - nextStart, - nextBuild, - launchApp, - renderViaHTTP, -} from 'next-test-utils' - -const appDir = join(__dirname, '../app') -let appPort -let app - -function runTests() { - it('should render styles during CSR', async () => { - const browser = await webdriver(appPort, '/') - const color = await browser.eval( - `getComputedStyle(document.querySelector('button')).color` - ) - - expect(color).toMatch('0, 255, 255') - }) - - it('should render styles during CSR (AMP)', async () => { - const browser = await webdriver(appPort, '/amp') - const color = await browser.eval( - `getComputedStyle(document.querySelector('button')).color` - ) - - expect(color).toMatch('0, 255, 255') - }) - - it('should render styles during SSR', async () => { - const html = await renderViaHTTP(appPort, '/') - expect(html).toMatch(/color:.*?cyan/) - }) - - it('should render styles during SSR (AMP)', async () => { - const html = await renderViaHTTP(appPort, '/amp') - expect(html).toMatch(/color:.*?cyan/) - }) -} - -describe('styled-jsx using in node_modules', () => { - describe('Production', () => { - beforeAll(async () => { - await nextBuild(appDir) - appPort = await findPort() - app = await nextStart(appDir, appPort) - }) - afterAll(() => killApp(app)) - - runTests() - }) - - describe('Development', () => { - beforeAll(async () => { - appPort = await findPort() - app = await launchApp(appDir, appPort) - }) - afterAll(() => killApp(app)) - - runTests() - }) -})