Merge pull request #100 from marp-team/upgrade-dependencies

Upgrade dependent packages to the latest

.eslintrc.js

@@ -19,7 +19,7 @@ module.exports = {
       extends: [
         'plugin:@typescript-eslint/recommended',
         'plugin:import/typescript',
-        'prettier/@typescript-eslint',
+        'prettier',
       ],
       rules: {
         '@typescript-eslint/no-explicit-any': 'off',

.nvmrc

@@ -1 +1 @@
-14.15.0
+14.16.1

package.json

@@ -35,18 +35,15 @@
   },
   "devDependencies": {
     "@tsconfig/recommended": "^1.0.1",
-    "@types/node": "^14.14.7",
-    "@typescript-eslint/eslint-plugin": "^4.7.0",
-    "@typescript-eslint/parser": "^4.7.0",
-    "eslint": "^7.13.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-import-resolver-typescript": "^2.3.0",
+    "@types/node": "~14.14.43",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "eslint": "^7.25.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-import": "^2.22.1",
-    "lerna": "^3.22.1",
+    "lerna": "^4.0.0",
     "prettier": "^2.1.2",
-    "typescript": "~4.0.5"
-  },
-  "resolutions": {
-    "webpack": "^5.0.0"
+    "typescript": "^4.2.4"
   }
 }

website/.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
     'plugin:jsx-a11y/recommended',
-    'prettier/react',
+    'prettier',
   ],
   rules: {
     'react/react-in-jsx-scope': 'off',

website/babel.config.js

@@ -8,7 +8,7 @@ module.exports = {
         'styled-jsx': {
           plugins: [
             [
-              'styled-jsx-plugin-postcss',
+              require.resolve('styled-jsx-plugin-postcss'),
               { path: path.resolve(__dirname, './postcss.config.js') },
             ],
           ],

website/components/Button.tsx

@@ -1,7 +1,10 @@
 import classNames from 'classnames'
+import { ReactNode } from 'react'
 
 export type ButtonProps = {
+  children?: ReactNode
   color?: 'primary'
+  href?: string
   outline?: boolean
   [key: string]: unknown
 }
@@ -50,10 +53,10 @@ export const Button = ({
           @apply bg-background duration-150;
         }
         .button:hover:active {
-          @apply outline-none shadow-outline bg-gray-300 duration-0;
+          @apply outline-none ring bg-gray-300 duration-0;
         }
         .button:focus {
-          @apply outline-none shadow-outline;
+          @apply outline-none ring;
         }
 
         /* Primary color */

website/components/Typography.tsx

@@ -27,7 +27,7 @@ export const Typography: React.FC = ({ children }) => (
         @apply relative font-bold text-sm text-gray-600 mt-6 mb-4;
       }
       .typography :global(.anchor-link) {
-        @apply absolute inset-0 w-5 -ml-5 overflow-hidden whitespace-no-wrap my-auto bg-no-repeat bg-left hidden;
+        @apply absolute inset-0 w-5 -ml-5 overflow-hidden whitespace-nowrap my-auto bg-no-repeat bg-left hidden;
 
         background-size: 1rem 1rem;
         background-image: url('https://icongr.am/octicons/link.svg?color=718096');

website/components/docs/Breadcrumb.tsx

@@ -33,7 +33,7 @@ export const Breadcrumb = ({ breadcrumbs }: BreadcrumbProps) => (
         @apply absolute inset-0 flex items-center justify-end;
       }
       ol {
-        @apply flex-1 inline-flex flex-no-wrap whitespace-no-wrap;
+        @apply flex-1 inline-flex flex-nowrap whitespace-nowrap;
       }
       li {
         @apply block;

website/components/docs/Navigation.tsx

@@ -63,7 +63,7 @@ export const Navigation = ({
           @apply bg-gray-300 duration-0;
         }
         .page-link:focus-visible {
-          @apply shadow-outline;
+          @apply ring;
         }
 
         .page-link.active {

website/components/docs/layouts/Mobile.tsx

@@ -95,6 +95,7 @@ export const Mobile: React.FC<LayoutProps> = ({
           allowOutsideClick: () => true,
           escapeDeactivates: false,
           initialFocus: '#docs-nav',
+          fallbackFocus: '#docs-nav-toggle',
         }}
       >
         <nav
@@ -125,6 +126,7 @@ export const Mobile: React.FC<LayoutProps> = ({
       <nav className="docs-topbar">
         <button
           className="docs-btn w-8 h-8 m-1 relative z-20"
+          id="docs-nav-toggle"
           type="button"
           onClick={toggle}
           aria-controls="docs-nav"
@@ -174,7 +176,7 @@ export const Mobile: React.FC<LayoutProps> = ({
           @apply bg-gray-300 outline-none;
         }
         .docs-btn:focus-visible {
-          @apply shadow-outline;
+          @apply ring;
         }
 
         #docs-nav {

website/components/top/GetStarted.tsx

@@ -106,7 +106,7 @@ const Card: React.FC<CardProps> = ({
       }
       .card-link:hover:active,
       .card-link:focus {
-        @apply shadow-outline outline-none duration-0;
+        @apply ring outline-none duration-0;
       }
 
       @screen lg {
@@ -137,7 +137,7 @@ const Card: React.FC<CardProps> = ({
 export const GetStarted = () => (
   <>
     <span id="get-started" className="named-anchor" />
-    <div className="get-started clearfix">
+    <div className="get-started flow-root">
       <section className="container mx-auto py-10 px-8 lg:px-16">
         <h3 className="font-bold text-center text-2xl sm:text-3xl">
           <mark>Tools and integrations</mark>

website/css/plugin-rem.js

@@ -1,24 +1,27 @@
 // Based on Marpit PostCSS rem plugin
 // https://github.com/marp-team/marpit/blob/main/src/postcss/root/rem.js
 
-const { plugin } = require('postcss')
 const rootFontSizeCustomProp = '--root-font-size'
 const skipParsingMatcher = /("[^"]*"|'[^']*'|(?:attr|url|var)\([^)]*\))/g
 
-module.exports = plugin('marp-rem', () => (css) =>
-  css.walkDecls((decl) => {
-    if (decl.prop === rootFontSizeCustomProp) return
+module.exports = () => ({
+  postcssPlugin: 'marp-rem',
+  Once: (css) =>
+    css.walkDecls((decl) => {
+      if (decl.prop === rootFontSizeCustomProp) return
 
-    decl.value = decl.value
-      .split(skipParsingMatcher)
-      .map((v, i) => {
-        if (i % 2) return v
+      decl.value = decl.value
+        .split(skipParsingMatcher)
+        .map((v, i) => {
+          if (i % 2) return v
 
-        return v.replace(
-          /(-?\d*\.?\d+)rem\b/g,
-          (_, num) => `calc(var(${rootFontSizeCustomProp}, 1rem) * ${num})`
-        )
-      })
-      .join('')
-  })
-)
+          return v.replace(
+            /(-?\d*\.?\d+)rem\b/g,
+            (_, num) => `calc(var(${rootFontSizeCustomProp}, 1rem) * ${num})`
+          )
+        })
+        .join('')
+    }),
+})
+
+module.exports.postcss = true

website/next.config.js

@@ -2,6 +2,12 @@ const path = require('path')
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: !!process.env.ANALYZE,
 })
+const withTM = require('next-transpile-modules')([
+  'unist-util-remove-position',
+  'unist-util-visit',
+  'unist-util-is',
+  'hast-util-whitespace',
+])
 const { devDependencies } = require('./package.json')
 
 // Build test function to ignore devDependencies in client build
@@ -18,27 +24,32 @@ const testToignoreDevDependenciesInClient = (id) =>
 const env = { BUILD_YEAR: new Date().getFullYear().toString() }
 if (process.env.URL) env.NEXT_PUBLIC_HOST = process.env.URL // for Netlify's deploy preview
 
-module.exports = withBundleAnalyzer({
-  env,
-  experimental: {
-    optimizeFonts: true,
-  },
-  webpack: (config, { isServer }) => {
-    config.module.rules.push({ test: /\.md$/, use: 'raw-loader' })
-    config.module.rules.push({
-      test: /\.ya?ml$/,
-      type: 'json',
-      use: 'yaml-loader',
-    })
-
-    if (!isServer) {
+module.exports = withBundleAnalyzer(
+  withTM({
+    env,
+    experimental: {
+      optimizeFonts: true,
+    },
+    future: {
+      webpack5: true,
+    },
+    webpack: (config, { isServer }) => {
+      config.module.rules.push({ test: /\.md$/, type: 'asset/source' })
       config.module.rules.push({
-        test: testToignoreDevDependenciesInClient,
-        issuer: [__dirname],
-        use: 'null-loader',
+        test: /\.ya?ml$/,
+        type: 'json',
+        use: 'yaml-loader',
       })
-    }
 
-    return config
-  },
-})
+      if (!isServer) {
+        config.module.rules.push({
+          test: testToignoreDevDependenciesInClient,
+          issuer: [__dirname],
+          use: 'null-loader',
+        })
+      }
+
+      return config
+    },
+  })
+)

website/package.json

@@ -11,44 +11,46 @@
   },
   "dependencies": {
     "body-scroll-lock": "^3.1.5",
-    "classnames": "^2.2.6",
-    "focus-trap-react": "^8.1.1",
+    "classnames": "^2.3.1",
+    "focus-trap-react": "^8.5.0",
     "focus-visible": "^5.2.0",
     "hast-util-sanitize": "^3.0.1",
-    "next": "^10.0.6",
+    "next": "^10.1.3",
     "nprogress": "^0.2.0",
-    "prism-react-renderer": "^1.1.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "prism-react-renderer": "^1.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "remark-react": "^8.0.0",
     "use-media": "^1.4.0",
-    "wicg-inert": "^3.1.0",
+    "wicg-inert": "^3.1.1",
     "wil-react-sticky": "^1.0.5"
   },
   "devDependencies": {
-    "@marp-team/marp-core": "^1.5.0",
-    "@next/bundle-analyzer": "^10.0.3",
-    "@types/classnames": "^2.2.11",
-    "@types/react": "^16.9.56",
-    "@types/resize-observer-browser": "^0.1.4",
+    "@marp-team/marp-core": "^2.0.1",
+    "@next/bundle-analyzer": "^10.1.3",
+    "@types/classnames": "^2.3.1",
+    "@types/react": "^17.0.4",
+    "@types/resize-observer-browser": "^0.1.5",
     "@types/webpack-env": "^1.15.3",
+    "autoprefixer": "^10.2.5",
     "dot-prop": "^6.0.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "gray-matter": "^4.0.2",
-    "hast-util-whitespace": "^1.0.4",
+    "gray-matter": "^4.0.3",
+    "hast-util-whitespace": "^2.0.0",
+    "next-transpile-modules": "^6.4.1",
     "null-loader": "^4.0.1",
-    "postcss-flexbugs-fixes": "^4.2.1",
+    "postcss": "^8.2.13",
+    "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^6.7.0",
-    "raw-loader": "^4.0.2",
     "remark-parse": "^9.0.0",
     "remark-slug": "^6.0.0",
-    "styled-jsx-plugin-postcss": "^3.0.2",
-    "tailwindcss": "^1.9.6",
-    "unified": "^9.2.0",
-    "unist-util-remove-position": "^3.0.0",
-    "unist-util-visit": "^2.0.3",
+    "styled-jsx-plugin-postcss": "^4.0.1",
+    "tailwindcss": "^2.1.2",
+    "unified": "^9.2.1",
+    "unist-util-remove-position": "^4.0.0",
+    "unist-util-visit": "^3.0.0",
     "yaml-loader": "^0.6.0"
   }
 }

website/pages/blog.tsx

@@ -10,10 +10,10 @@ import { parse, parseMatter, renderToReact } from 'utils/markdown'
 const toJSON = (obj: any) => JSON.parse(JSON.stringify(obj))
 
 export const getStaticProps = async () => {
-  const ctx = require.context('blog', false, /\.md$/)
+  const ctx = require.context('blog', false, /^.[\\/][^\\/]*\.md$/)
   const mdMetas = await Promise.all(
     ctx.keys().map((id) => {
-      const { default: md } = ctx(id)
+      const md = ctx(id)
       const { data, excerpt } = parseMatter(md)
 
       return (async () => ({
@@ -121,7 +121,7 @@ const Blog = ({ articles }: InferGetStaticPropsType<typeof getStaticProps>) => (
             @apply shadow-lg bg-white;
           }
           .article-container-link:hover:active {
-            @apply shadow-outline bg-white outline-none duration-0;
+            @apply ring bg-white outline-none duration-0;
           }
           .article-container-link:hover + * .read-more {
             @apply text-marp-brand;
@@ -129,7 +129,7 @@ const Blog = ({ articles }: InferGetStaticPropsType<typeof getStaticProps>) => (
         }
 
         .article-container-link:focus {
-          @apply shadow-outline bg-white outline-none duration-0;
+          @apply ring bg-white outline-none duration-0;
         }
 
         .read-more {

website/tailwind.config.js

@@ -1,24 +1,28 @@
-const {
-  colors: { black, current, gray, transparent, white },
-  fontFamily,
-} = require('tailwindcss/defaultTheme')
+const { fontFamily } = require('tailwindcss/defaultTheme')
+
+const gray = {
+  100: '#f7fafc',
+  200: '#edf2f7',
+  300: '#e2e8f0',
+  400: '#cbd5e0',
+  500: '#a0aec0',
+  600: '#718096',
+  700: '#4a5568',
+  800: '#2d3748',
+  900: '#1a202c',
+}
 
 module.exports = {
-  future: {
-    removeDeprecatedGapUtilities: true, // ok
-    purgeLayersByDefault: true,
-    defaultLineHeights: true,
-    standardFontWeights: true,
-  },
   plugins: [],
   purge: ['@(components|pages|utils)/**/*.[jt]s?(x)'],
   theme: {
+    borderColor: (theme) => ({ ...theme('colors'), DEFAULT: gray[300] }),
     colors: {
-      black,
-      current,
+      black: '#000',
+      current: 'currentColor',
       gray,
-      transparent,
-      white,
+      transparent: 'transparent',
+      white: '#fff',
       background: '#f8f8f8',
       foreground: gray[800],
       marp: {
@@ -37,6 +41,12 @@ module.exports = {
       sans: ['Inter', ...fontFamily.sans],
       rounded: ['Quicksand', 'Avenir', 'Century Gothic', ...fontFamily.sans],
     },
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+    },
     extend: { transitionDuration: { 0: '0s' } },
   },
   variants: { transitionDuration: ['responsive', 'hover'] },

website/utils/markdown/parse/image-paragrpah-to-figure.ts

@@ -1,5 +1,5 @@
-import whitespace from 'hast-util-whitespace'
-import visit from 'unist-util-visit'
+import { whitespace } from 'hast-util-whitespace'
+import { visit } from 'unist-util-visit'
 
 // Based on remark-unwrap-images
 // https://github.com/remarkjs/remark-unwrap-images/blob/main/index.js

website/utils/markdown/parse/index.ts

@@ -1,7 +1,7 @@
 import remarkParse from 'remark-parse'
 import remarkSlug from 'remark-slug'
 import unified from 'unified'
-import removePosition from 'unist-util-remove-position'
+import { removePosition } from 'unist-util-remove-position'
 import { imageParagraphToFigure } from './image-paragrpah-to-figure'
 
 let parser: unified.Processor | undefined