Skip to content

Commit

Permalink
feat(gatsby): add style-jsx support for gatsby (nrwl#5300)
Browse files Browse the repository at this point in the history
add style-jsx option for gatsby
add plugin to add _JSXStyle to global
  • Loading branch information
xiongemi authored May 3, 2021
1 parent a964405 commit efd706f
Show file tree
Hide file tree
Showing 25 changed files with 336 additions and 238 deletions.
2 changes: 1 addition & 1 deletion docs/angular/api-gatsby/generators/application.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion docs/angular/api-gatsby/generators/component.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
2 changes: 1 addition & 1 deletion docs/angular/api-gatsby/generators/page.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
2 changes: 1 addition & 1 deletion docs/node/api-gatsby/generators/application.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion docs/node/api-gatsby/generators/component.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
2 changes: 1 addition & 1 deletion docs/node/api-gatsby/generators/page.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
2 changes: 1 addition & 1 deletion docs/react/api-gatsby/generators/application.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion docs/react/api-gatsby/generators/component.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
2 changes: 1 addition & 1 deletion docs/react/api-gatsby/generators/page.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
16 changes: 15 additions & 1 deletion e2e/gatsby/src/gatsby.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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`);

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -265,4 +265,4 @@
"resolutions": {
"ng-packagr/rxjs": "6.6.3"
}
}
}
11 changes: 4 additions & 7 deletions packages/create-nx-workspace/bin/create-nx-workspace.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
18 changes: 18 additions & 0 deletions packages/gatsby/plugins/nx-gatsby-ext-plugin/gatsby-ssr.ts
Original file line number Diff line number Diff line change
@@ -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 };
Original file line number Diff line number Diff line change
Expand Up @@ -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 <style jsx> in index page', async () => {
await applicationGenerator(tree, {
name: 'myApp',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ module.exports = {
<% if (style === 'styl') { %>'gatsby-plugin-stylus',<% } %>
<% if (style === 'styled-components') { %>'gatsby-plugin-styled-components',<% } %>
<% if (style === '@emotion/styled') { %>'gatsby-plugin-emotion',<% } %>
<% if (style === 'styled-jsx') { %>'gatsby-plugin-styled-jsx',<% } %>
<% if (isPnpm) { %>
{
resolve: 'gatsby-plugin-pnpm',
Expand Down
Loading

0 comments on commit efd706f

Please sign in to comment.