Update app dependencies, migrate from styled-jsx to CSS Modules.

This commit is contained in:
Jayden Seric 2021-02-10 00:25:17 +11:00
parent c456f86b58
commit aec1a284be
9 changed files with 4170 additions and 7222 deletions

View File

@ -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
View 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"]
}
]
}
}

View File

@ -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} />
);

View File

@ -0,0 +1,3 @@
.header {
margin: var(--daui-spacing);
}

View File

@ -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} />
);

View File

@ -0,0 +1,3 @@
.section {
margin: calc(var(--daui-spacing) * 2) 0;
}

11287
app/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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",

View File

@ -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>
);