Update app dependencies, migrate from styled-jsx to CSS Modules.
This commit is contained in:
parent
c456f86b58
commit
aec1a284be
13
app/.babelrc
13
app/.babelrc
@ -1,13 +1,4 @@
|
||||
{
|
||||
"plugins": ["graphql-tag"],
|
||||
"presets": [
|
||||
[
|
||||
"next/babel",
|
||||
{
|
||||
"styled-jsx": {
|
||||
"optimizeForSpeed": false
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
"presets": ["next/babel"],
|
||||
"plugins": ["graphql-tag"]
|
||||
}
|
||||
|
||||
12
app/.stylelintrc.json
Normal file
12
app/.stylelintrc.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"extends": ["stylelint-config-recommended", "stylelint-prettier/recommended"],
|
||||
"rules": {
|
||||
"max-nesting-depth": 0,
|
||||
"rule-empty-line-before": [
|
||||
"always",
|
||||
{
|
||||
"except": ["after-single-line-comment", "first-nested"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,5 @@
|
||||
import styles from './Header.module.css';
|
||||
|
||||
export const Header = (props) => (
|
||||
<>
|
||||
<header {...props} />
|
||||
<style jsx>{`
|
||||
header {
|
||||
margin: var(--daui-spacing);
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
<header {...props} className={styles.header} />
|
||||
);
|
||||
|
||||
3
app/components/Header.module.css
Normal file
3
app/components/Header.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.header {
|
||||
margin: var(--daui-spacing);
|
||||
}
|
||||
@ -1,10 +1,5 @@
|
||||
import styles from './Section.module.css';
|
||||
|
||||
export const Section = (props) => (
|
||||
<>
|
||||
<section {...props} />
|
||||
<style jsx>{`
|
||||
section {
|
||||
margin: calc(var(--daui-spacing) * 2) 0;
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
<section {...props} className={styles.section} />
|
||||
);
|
||||
|
||||
3
app/components/Section.module.css
Normal file
3
app/components/Section.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.section {
|
||||
margin: calc(var(--daui-spacing) * 2) 0;
|
||||
}
|
||||
11287
app/package-lock.json
generated
11287
app/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -21,31 +21,36 @@
|
||||
},
|
||||
"browserslist": "Node 12 - 13 and Node < 13, Node >= 13.7.0, > 0.5%, not OperaMini all, not dead",
|
||||
"dependencies": {
|
||||
"@apollo/client": "^3.3.6",
|
||||
"@apollo/client": "^3.3.8",
|
||||
"apollo-upload-client": "^14.1.3",
|
||||
"device-agnostic-ui": "^6.0.0",
|
||||
"graphql": "^15.4.0",
|
||||
"next": "^10.0.4",
|
||||
"device-agnostic-ui": "^7.0.1",
|
||||
"graphql": "^15.5.0",
|
||||
"next": "^10.0.6",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-plugin-graphql-tag": "^3.1.0",
|
||||
"eslint": "^7.16.0",
|
||||
"eslint-config-env": "^15.0.1",
|
||||
"eslint-config-prettier": "^7.1.0",
|
||||
"@babel/eslint-parser": "^7.12.13",
|
||||
"babel-plugin-graphql-tag": "^3.2.0",
|
||||
"eslint": "^7.19.0",
|
||||
"eslint-config-env": "^18.0.1",
|
||||
"eslint-config-prettier": "^7.2.0",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"eslint-plugin-jsdoc": "^30.7.9",
|
||||
"eslint-plugin-jsdoc": "^31.6.1",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-prettier": "^3.3.0",
|
||||
"eslint-plugin-react": "^7.21.5",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"eslint-plugin-react": "^7.22.0",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"prettier": "^2.2.1"
|
||||
"prettier": "^2.2.1",
|
||||
"stylelint": "^13.9.0",
|
||||
"stylelint-config-prettier": "^8.0.2",
|
||||
"stylelint-config-recommended": "^3.0.0",
|
||||
"stylelint-prettier": "^1.1.2"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "npm run test:eslint && npm run test:prettier",
|
||||
"test": "npm run test:eslint && npm run test:stylelint && npm run test:prettier",
|
||||
"test:eslint": "eslint .",
|
||||
"test:stylelint": "stylelint '**/*.css'",
|
||||
"test:prettier": "prettier -c .",
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
|
||||
@ -1,6 +1,17 @@
|
||||
import 'device-agnostic-ui/public/theme.css';
|
||||
import 'device-agnostic-ui/public/global.css';
|
||||
import 'device-agnostic-ui/public/components/Button.css';
|
||||
import 'device-agnostic-ui/public/components/ButtonSubmit.css';
|
||||
import 'device-agnostic-ui/public/components/Code.css';
|
||||
import 'device-agnostic-ui/public/components/Fieldset.css';
|
||||
import 'device-agnostic-ui/public/components/Heading.css';
|
||||
import 'device-agnostic-ui/public/components/Loading.css';
|
||||
import 'device-agnostic-ui/public/components/Margin.css';
|
||||
import 'device-agnostic-ui/public/components/Scroll.css';
|
||||
import 'device-agnostic-ui/public/components/Table.css';
|
||||
import 'device-agnostic-ui/public/components/Textbox.css';
|
||||
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
|
||||
import { createUploadLink } from 'apollo-upload-client';
|
||||
import { stylesGlobal, stylesGlobalTheme } from 'device-agnostic-ui';
|
||||
import Head from 'next/head';
|
||||
|
||||
const createApolloClient = (cache = {}) =>
|
||||
@ -24,12 +35,6 @@ const App = ({
|
||||
<link rel="manifest" href="/manifest.webmanifest" />
|
||||
</Head>
|
||||
<Component {...pageProps} />
|
||||
<style jsx global>
|
||||
{stylesGlobalTheme}
|
||||
</style>
|
||||
<style jsx global>
|
||||
{stylesGlobal}
|
||||
</style>
|
||||
</ApolloProvider>
|
||||
);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user