feat(gatsby): add style-jsx support for gatsby (#5300)
add style-jsx option for gatsby add plugin to add _JSXStyle to global
This commit is contained in:
Emily Xiong
GitHub
parent
a964405b93
commit
efd706ff5f
@ -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.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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`);
|
||||
|
||||
|
||||
@ -265,4 +265,4 @@
|
||||
"resolutions": {
|
||||
"ng-packagr/rxjs": "6.6.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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) {
|
||||
|
||||
18
packages/gatsby/plugins/nx-gatsby-ext-plugin/gatsby-ssr.ts
Normal file
18
packages/gatsby/plugins/nx-gatsby-ext-plugin/gatsby-ssr.ts
Normal file
@ -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 };
|
||||
@ -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',
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -1,233 +1,24 @@
|
||||
import React from 'react';
|
||||
<% if (styledModule) {
|
||||
<% if (styledModule && styledModule !== 'styled-jsx') {
|
||||
var wrapper = 'StyledApp';
|
||||
%>import styled from '<%= styledModule %>';<% } else {
|
||||
var wrapper = 'div';
|
||||
%>
|
||||
|
||||
import * as styles from './index.module.<%= style %>';
|
||||
<%- styledModule !== 'styled-jsx' ? `import * as styles from './index.module.${style}';` : '' %>
|
||||
<% }
|
||||
%>
|
||||
|
||||
import { ReactComponent as Logo } from './logo.svg';
|
||||
import star from './star.svg';
|
||||
|
||||
<% if (styledModule) { %>
|
||||
<% if (styledModule && styledModule !== 'styled-jsx') { %>
|
||||
const StyledApp = styled.div`
|
||||
/*
|
||||
* Remove template code below
|
||||
*/
|
||||
<%- pageWrapperStyle %>
|
||||
|
||||
font-family: sans-serif;
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
margin: 50px auto;
|
||||
|
||||
.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;
|
||||
}
|
||||
<%- pageStyleContent %>
|
||||
`;
|
||||
<% }%>
|
||||
|
||||
<%
|
||||
var innerJsx = `
|
||||
<header className="flex">
|
||||
<Logo width="75" height="75"/>
|
||||
<h1>Welcome to ${name}!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<h2>Resources & Tools</h2>
|
||||
<p>
|
||||
Thank you for using and showing some ♥ for Nx.
|
||||
</p>
|
||||
<div className="flex github-star-container">
|
||||
<a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
|
||||
<div className="github-star-badge">
|
||||
<img src={star} className="material-icons" alt="" />
|
||||
Star
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
Here are some links to help you get started.
|
||||
</p>
|
||||
<ul className="resources">
|
||||
<li className="col-span-2">
|
||||
<a
|
||||
className="resource flex"
|
||||
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
||||
>
|
||||
Scale React Development with Nx (Course)
|
||||
</a>
|
||||
</li>
|
||||
<li className="col-span-2">
|
||||
<a
|
||||
className="resource flex"
|
||||
href="https://nx.dev/latest/react/tutorial/01-create-application"
|
||||
>
|
||||
Interactive tutorial
|
||||
</a>
|
||||
</li>
|
||||
<li className="col-span-2">
|
||||
<a className="resource flex" href="https://nx.app/">
|
||||
<svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
|
||||
<path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
|
||||
</svg>
|
||||
<span className="gutter-left">Nx Cloud</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Next Steps</h2>
|
||||
<p>
|
||||
Here are some things you can do with Nx.
|
||||
</p>
|
||||
<details open>
|
||||
<summary>Add UI library</summary>
|
||||
<pre>{\`# Generate UI lib
|
||||
nx g @nrwl/react:lib ui
|
||||
|
||||
# Add a component
|
||||
nx g @nrwl/react:component xyz --project ui\`}</pre>
|
||||
</details>
|
||||
<details>
|
||||
<summary>View dependency graph</summary>
|
||||
<pre>{\`nx dep-graph\`}</pre>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Run affected commands</summary>
|
||||
<pre>{\`# 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
|
||||
\`}</pre>
|
||||
</details>
|
||||
</main>
|
||||
`;
|
||||
%>
|
||||
|
||||
export function Index() {
|
||||
/*
|
||||
* Replace the elements below with your own.
|
||||
@ -235,8 +26,14 @@ export function Index() {
|
||||
* Note: The corresponding styles are in the ./<%= fileName %>.<%= style %> file.
|
||||
*/
|
||||
return (
|
||||
<<%= wrapper %><% if (!styledModule) {%> className={styles.page}<% } %>>
|
||||
<%- innerJsx %>
|
||||
<<%= wrapper %><% if (!styledModule) {%> className={styles.page} <%} else if (styledModule === 'styled-jsx'){%> className='page' <%}%>>
|
||||
<%- styledModule === 'styled-jsx' ? `<style jsx>{\`
|
||||
.page {
|
||||
${pageWrapperStyle}
|
||||
}
|
||||
${pageStyleContent}
|
||||
\`}</style>` : `` %>
|
||||
<%- appContent %>
|
||||
</<%= wrapper %>>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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"]
|
||||
|
||||
@ -0,0 +1,215 @@
|
||||
export function createAppJsx(name: string) {
|
||||
return `
|
||||
<header className="flex">
|
||||
<Logo width="75" height="75"/>
|
||||
<h1>Welcome to ${name}!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<h2>Resources & Tools</h2>
|
||||
<p>
|
||||
Thank you for using and showing some ♥ for Nx.
|
||||
</p>
|
||||
<div className="flex github-star-container">
|
||||
<a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
|
||||
<div className="github-star-badge">
|
||||
<img src={star} className="material-icons" alt="" />
|
||||
Star
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
Here are some links to help you get started.
|
||||
</p>
|
||||
<ul className="resources">
|
||||
<li className="col-span-2">
|
||||
<a
|
||||
className="resource flex"
|
||||
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
||||
>
|
||||
Scale React Development with Nx (Course)
|
||||
</a>
|
||||
</li>
|
||||
<li className="col-span-2">
|
||||
<a
|
||||
className="resource flex"
|
||||
href="https://nx.dev/latest/react/tutorial/01-create-application"
|
||||
>
|
||||
Interactive tutorial
|
||||
</a>
|
||||
</li>
|
||||
<li className="col-span-2">
|
||||
<a className="resource flex" href="https://nx.app/">
|
||||
<svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
|
||||
<path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
|
||||
</svg>
|
||||
<span className="gutter-left">Nx Cloud</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Next Steps</h2>
|
||||
<p>
|
||||
Here are some things you can do with Nx.
|
||||
</p>
|
||||
<details open>
|
||||
<summary>Add UI library</summary>
|
||||
<pre>{\`# Generate UI lib
|
||||
nx g @nrwl/react:lib ui
|
||||
|
||||
# Add a component
|
||||
nx g @nrwl/react:component xyz --project ui\`}</pre>
|
||||
</details>
|
||||
<details>
|
||||
<summary>View dependency graph</summary>
|
||||
<pre>{\`nx dep-graph\`}</pre>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Run affected commands</summary>
|
||||
<pre>{\`# 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
|
||||
\`}</pre>
|
||||
</details>
|
||||
</main>
|
||||
`;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
@ -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(
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user