diff --git a/docs/angular/api-gatsby/generators/application.md b/docs/angular/api-gatsby/generators/application.md index 6378fe7a59..fbb651cd28 100644 --- a/docs/angular/api-gatsby/generators/application.md +++ b/docs/angular/api-gatsby/generators/application.md @@ -66,7 +66,7 @@ Default: `css` Type: `string` -Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `none` +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` The file extension to be used for style files. diff --git a/docs/angular/api-gatsby/generators/component.md b/docs/angular/api-gatsby/generators/component.md index 58421410b8..9c7056ca0d 100644 --- a/docs/angular/api-gatsby/generators/component.md +++ b/docs/angular/api-gatsby/generators/component.md @@ -102,6 +102,6 @@ Default: `css` Type: `string` -Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `none` +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` The file extension to be used for style files. diff --git a/docs/angular/api-gatsby/generators/page.md b/docs/angular/api-gatsby/generators/page.md index f188dae08d..fde9fb6dd0 100644 --- a/docs/angular/api-gatsby/generators/page.md +++ b/docs/angular/api-gatsby/generators/page.md @@ -102,6 +102,6 @@ Default: `css` Type: `string` -Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `none` +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` The file extension to be used for style files. diff --git a/docs/node/api-gatsby/generators/application.md b/docs/node/api-gatsby/generators/application.md index 444d19ee1b..240428c26f 100644 --- a/docs/node/api-gatsby/generators/application.md +++ b/docs/node/api-gatsby/generators/application.md @@ -66,7 +66,7 @@ Default: `css` Type: `string` -Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `none` +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` The file extension to be used for style files. diff --git a/docs/node/api-gatsby/generators/component.md b/docs/node/api-gatsby/generators/component.md index 505bd2d0d8..a53d8d9763 100644 --- a/docs/node/api-gatsby/generators/component.md +++ b/docs/node/api-gatsby/generators/component.md @@ -102,6 +102,6 @@ Default: `css` Type: `string` -Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `none` +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` The file extension to be used for style files. diff --git a/docs/node/api-gatsby/generators/page.md b/docs/node/api-gatsby/generators/page.md index 9310106396..8730405e89 100644 --- a/docs/node/api-gatsby/generators/page.md +++ b/docs/node/api-gatsby/generators/page.md @@ -102,6 +102,6 @@ Default: `css` Type: `string` -Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `none` +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` The file extension to be used for style files. diff --git a/docs/react/api-gatsby/generators/application.md b/docs/react/api-gatsby/generators/application.md index 444d19ee1b..240428c26f 100644 --- a/docs/react/api-gatsby/generators/application.md +++ b/docs/react/api-gatsby/generators/application.md @@ -66,7 +66,7 @@ Default: `css` Type: `string` -Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `none` +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` The file extension to be used for style files. diff --git a/docs/react/api-gatsby/generators/component.md b/docs/react/api-gatsby/generators/component.md index 505bd2d0d8..a53d8d9763 100644 --- a/docs/react/api-gatsby/generators/component.md +++ b/docs/react/api-gatsby/generators/component.md @@ -102,6 +102,6 @@ Default: `css` Type: `string` -Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `none` +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` The file extension to be used for style files. diff --git a/docs/react/api-gatsby/generators/page.md b/docs/react/api-gatsby/generators/page.md index 9310106396..8730405e89 100644 --- a/docs/react/api-gatsby/generators/page.md +++ b/docs/react/api-gatsby/generators/page.md @@ -102,6 +102,6 @@ Default: `css` Type: `string` -Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `none` +Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none` The file extension to be used for style files. diff --git a/e2e/gatsby/src/gatsby.test.ts b/e2e/gatsby/src/gatsby.test.ts index 1b8dc0a32f..f50fddcd55 100644 --- a/e2e/gatsby/src/gatsby.test.ts +++ b/e2e/gatsby/src/gatsby.test.ts @@ -45,7 +45,21 @@ describe('Gatsby Applications', () => { ); }, 300000); - test('supports --js option', async () => { + it('should support styled-jsx', async () => { + const appName = uniq('app'); + + runCLI(`generate @nrwl/gatsby:app ${appName} --style styled-jsx`); + + let result = runCLI(`build ${appName}`); + expect(result).toContain('Done building in'); + + result = runCLI(`lint ${appName}`); + expect(result).not.toMatch('Lint errors found in the listed files'); + + await expect(runCLIAsync(`test ${appName}`)).resolves.toBeTruthy(); + }, 120000); + + it('should support --js option', async () => { const app = uniq('app'); runCLI(`generate @nrwl/gatsby:app ${app} --js`); diff --git a/package.json b/package.json index b1b417c07a..616049976e 100644 --- a/package.json +++ b/package.json @@ -265,4 +265,4 @@ "resolutions": { "ng-packagr/rxjs": "6.6.3" } -} +} \ No newline at end of file diff --git a/packages/create-nx-workspace/bin/create-nx-workspace.ts b/packages/create-nx-workspace/bin/create-nx-workspace.ts index 1456c9cec2..3b4d23327c 100644 --- a/packages/create-nx-workspace/bin/create-nx-workspace.ts +++ b/packages/create-nx-workspace/bin/create-nx-workspace.ts @@ -373,16 +373,13 @@ function determineStyle(preset: Preset, parsedArgs: any) { name: '@emotion/styled', message: 'emotion [ https://emotion.sh ]', - } - ); - // TODO: Remove below if condition when Gatsby supports styled-jsx - if (Preset.Gatsby !== preset) { - choices.push({ + }, + { name: 'styled-jsx', message: 'styled-jsx [ https://www.npmjs.com/package/styled-jsx ]', - }); - } + } + ); } if (!parsedArgs.style) { diff --git a/packages/gatsby/plugins/nx-gatsby-ext-plugin/gatsby-ssr.ts b/packages/gatsby/plugins/nx-gatsby-ext-plugin/gatsby-ssr.ts new file mode 100644 index 0000000000..0d47a70f97 --- /dev/null +++ b/packages/gatsby/plugins/nx-gatsby-ext-plugin/gatsby-ssr.ts @@ -0,0 +1,18 @@ +/* + * This plugin is a workaround to a known styled-jsx issue. + * + * See: https://github.com/vercel/styled-jsx/issues/695 + * + * If the issue is fixed in the future, we should be able to remove this patch. + */ + +function onPreRenderHTML(_, pluginOptions: any) { + try { + const _JSXStyle = require('styled-jsx/style').default; + Object.assign(global, { _JSXStyle }); + } catch { + // nothing + } +} + +export { onPreRenderHTML }; diff --git a/packages/gatsby/src/generators/application/application.spec.ts b/packages/gatsby/src/generators/application/application.spec.ts index 7d598e9002..e26c856a26 100644 --- a/packages/gatsby/src/generators/application/application.spec.ts +++ b/packages/gatsby/src/generators/application/application.spec.ts @@ -172,9 +172,7 @@ describe('app', () => { }); }); - // TODO: We should also add styled-jsx support for Gatsby to keep React plugins consistent. - // This needs to be here before Nx 12 is released. - xdescribe('--style styled-jsx', () => { + describe('--style styled-jsx', () => { it('should use ` : `` %> + <%- appContent %> > ); }; diff --git a/packages/gatsby/src/generators/application/files/tsconfig.app.json__tmpl__ b/packages/gatsby/src/generators/application/files/tsconfig.app.json__tmpl__ index 432e3cac21..2042e97c3e 100644 --- a/packages/gatsby/src/generators/application/files/tsconfig.app.json__tmpl__ +++ b/packages/gatsby/src/generators/application/files/tsconfig.app.json__tmpl__ @@ -2,7 +2,10 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "<%= offsetFromRoot %>dist/out-tsc", - "types": ["node", "jest"] + "types": [ + <% if (style === 'styled-jsx') { %>"styled-jsx",<% } %> + "node" + ] }, "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.spec.js", "**/*.spec.jsx"], "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"] diff --git a/packages/gatsby/src/generators/application/lib/create-application-files.helpers.ts b/packages/gatsby/src/generators/application/lib/create-application-files.helpers.ts new file mode 100644 index 0000000000..b337cb7ede --- /dev/null +++ b/packages/gatsby/src/generators/application/lib/create-application-files.helpers.ts @@ -0,0 +1,215 @@ +export function createAppJsx(name: string) { + return ` +
+ +

Welcome to ${name}!

+
+
+

Resources & Tools

+

+ Thank you for using and showing some ♥ for Nx. +

+
+ If you like Nx, please give it a star: +
+ + Star +
+ +
+

+ Here are some links to help you get started. +

+ +

Next Steps

+

+ Here are some things you can do with Nx. +

+
+ Add UI library + 
{\`# Generate UI lib
+nx g @nrwl/react:lib ui
+
+# Add a component
+nx g @nrwl/react:component xyz --project ui\`}
+
+
+ View dependency graph + 
{\`nx dep-graph\`}
+
+
+ Run affected commands + 
{\`# see what's been affected by changes
+nx affected:dep-graph
+
+# run tests for current changes
+nx affected:test
+
+# run e2e tests for current changes
+nx affected:e2e
+\`}
+
+
+`; +} + +export function createPageWrapperStyle() { + return ` + font-family: sans-serif; + min-width: 300px; + max-width: 600px; + margin: 50px auto; + `; +} + +export function createPageStyleContent() { + return ` + .gutter-left { + margin-left: 9px; + } + + .col-span-2 { + grid-column: span 2; + } + + .flex { + display: flex; + align-items: center; + justify-content: center; + } + + header { + background-color: #143055; + color: white; + padding: 5px; + border-radius: 3px; + } + + main { + padding: 0 36px; + } + + p { + text-align: center; + } + + h1 { + text-align: center; + margin-left: 18px; + font-size: 24px; + } + + h2 { + text-align: center; + font-size: 20px; + margin: 40px 0 10px 0; + } + + .resources { + text-align: center; + list-style: none; + padding: 0; + display: grid; + grid-gap: 9px; + grid-template-columns: 1fr 1fr; + } + + .resource { + color: #0094ba; + height: 36px; + background-color: rgba(0, 0, 0, 0); + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 4px; + padding: 3px 9px; + text-decoration: none; + } + + .resource:hover { + background-color: rgba(68, 138, 255, 0.04); + } + + pre { + padding: 9px; + border-radius: 4px; + background-color: black; + color: #eee; + } + + details { + border-radius: 4px; + color: #333; + background-color: rgba(0, 0, 0, 0); + border: 1px solid rgba(0, 0, 0, 0.12); + padding: 3px 9px; + margin-bottom: 9px; + } + + summary { + outline: none; + height: 36px; + line-height: 36px; + } + + .github-star-container { + margin-top: 12px; + line-height: 20px; + } + + .github-star-container a { + display: flex; + align-items: center; + text-decoration: none; + color: #333; + } + + .github-star-badge { + color: #24292e; + display: flex; + align-items: center; + font-size: 12px; + padding: 3px 10px; + border: 1px solid rgba(27,31,35,.2); + border-radius: 3px; + background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%); + margin-left: 4px; + font-weight: 600; + } + + .github-star-badge:hover { + background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%); + border-color: rgba(27,31,35,.35); + background-position: -.5em; + } + .github-star-badge .material-icons { + height: 16px; + width: 16px; + margin-right: 4px; + } + `; +} diff --git a/packages/gatsby/src/generators/application/lib/create-application-files.ts b/packages/gatsby/src/generators/application/lib/create-application-files.ts index aba3f67b69..3f5542a5cc 100644 --- a/packages/gatsby/src/generators/application/lib/create-application-files.ts +++ b/packages/gatsby/src/generators/application/lib/create-application-files.ts @@ -8,6 +8,11 @@ import { Tree, updateTsConfigsToJs, } from '@nrwl/devkit'; +import { + createAppJsx, + createPageStyleContent, + createPageWrapperStyle, +} from './create-application-files.helpers'; export function createApplicationFiles(host: Tree, options: NormalizedSchema) { const isPnpm = host.exists('pnpm-lock.yaml'); @@ -17,6 +22,9 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) { ...names(options.name), offsetFromRoot: offsetFromRoot(options.projectRoot), tmpl: '', + appContent: createAppJsx(options.name), + pageWrapperStyle: createPageWrapperStyle(), + pageStyleContent: createPageStyleContent(), }; generateFiles( diff --git a/packages/gatsby/src/generators/application/schema.json b/packages/gatsby/src/generators/application/schema.json index c729d4134e..0ec1afc20c 100644 --- a/packages/gatsby/src/generators/application/schema.json +++ b/packages/gatsby/src/generators/application/schema.json @@ -69,6 +69,10 @@ "value": "@emotion/styled", "label": "emotion [ https://emotion.sh ]" }, + { + "value": "styled-jsx", + "label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]" + }, { "value": "none", "label": "None" diff --git a/packages/gatsby/src/generators/component/schema.json b/packages/gatsby/src/generators/component/schema.json index f31d70e697..d3209c410b 100644 --- a/packages/gatsby/src/generators/component/schema.json +++ b/packages/gatsby/src/generators/component/schema.json @@ -66,6 +66,10 @@ "value": "@emotion/styled", "label": "emotion [ https://emotion.sh ]" }, + { + "value": "styled-jsx", + "label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]" + }, { "value": "none", "label": "None" diff --git a/packages/gatsby/src/generators/page/schema.json b/packages/gatsby/src/generators/page/schema.json index d3cb98a0e4..51a3fa25bf 100644 --- a/packages/gatsby/src/generators/page/schema.json +++ b/packages/gatsby/src/generators/page/schema.json @@ -66,6 +66,10 @@ "value": "@emotion/styled", "label": "emotion [ https://emotion.sh ]" }, + { + "value": "styled-jsx", + "label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]" + }, { "value": "none", "label": "None" diff --git a/packages/gatsby/src/utils/styles.ts b/packages/gatsby/src/utils/styles.ts index 5f9522550b..8769358f9a 100644 --- a/packages/gatsby/src/utils/styles.ts +++ b/packages/gatsby/src/utils/styles.ts @@ -4,6 +4,7 @@ import { gatsbyPluginLessVersion, gatsbyPluginSassVersion, gatsbyPluginStyledComponentsVersion, + gatsbyPluginStyledJsx, gatsbyPluginStylusVersion, nodeSassVersion, } from './versions'; @@ -46,6 +47,13 @@ export const GATSBY_SPECIFIC_STYLE_DEPENDENCIES = { 'gatsby-plugin-stylus': gatsbyPluginStylusVersion, }, }, + 'styled-jsx': { + dependencies: CSS_IN_JS_DEPENDENCIES['styled-jsx'].dependencies, + devDependencies: { + 'gatsby-plugin-styled-jsx': gatsbyPluginStyledJsx, + ...CSS_IN_JS_DEPENDENCIES['styled-jsx'].devDependencies, + }, + }, }; export function addStyleDependencies(host: Tree, style: string) { diff --git a/packages/gatsby/src/utils/versions.ts b/packages/gatsby/src/utils/versions.ts index ab75bfc6a6..db56c8886a 100644 --- a/packages/gatsby/src/utils/versions.ts +++ b/packages/gatsby/src/utils/versions.ts @@ -6,6 +6,7 @@ export const gatsbyPluginManifestVersion = '3.2.0'; export const gatsbyPluginOfflineVersion = '4.2.0'; export const gatsbyPluginReactHelmetVersion = '4.2.0'; export const gatsbyPluginSharpVersion = '3.2.0'; +export const gatsbyPluginStyledJsx = '4.2.0'; export const gatsbySourceFilesystemVersion = '3.2.0'; export const gatsbyTransformerSharpVersion = '3.2.0'; export const propTypesVersion = '15.7.2'; diff --git a/workspace.json b/workspace.json index f66fbd3143..f15efc6af5 100644 --- a/workspace.json +++ b/workspace.json @@ -2019,6 +2019,32 @@ "sourceRoot": "packages/gatsby", "projectType": "library", "targets": { + "e2e": { + "executor": "@nrwl/workspace:run-commands", + "options": { + "commands": [ + { + "command": "yarn e2e-start-local-registry" + }, + { + "command": "yarn e2e-build-package-publish" + }, + { + "command": "nx run-e2e-tests e2e-gatsby" + } + ], + "parallel": false + } + }, + "run-e2e-tests": { + "executor": "@nrwl/jest:jest", + "options": { + "jestConfig": "e2e/gatsby/jest.config.js", + "passWithNoTests": true, + "runInBand": true + }, + "outputs": ["coverage/e2e/gatsby"] + }, "test": { "executor": "@nrwl/jest:jest", "options": {