# Gastby with ESLint, Prettier, Stylelint, Emotion Styled Components, Tailwindcss

basic configs for a new Gatsby build

## Install Prettier & ESLint Dev Dependencies

`npm i -D babel-eslint babel-preset-gatsby eslint eslint-config-airbnb eslint-config-prettier eslint-config-wesbos eslint-plugin-html eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier`


## Install Tailwind, Emotion, Emotion Styled Components & Twin Macro Dependencies

### <em>Breaking Changes in Emotion 11</em>

<em>Emotion 11 adds breaking changes to `gatsby-plugin-emotion`. Will need to update when fix is merged.</em>
- [Gatsby issue](https://github.com/gatsbyjs/gatsby/pull/27981)

`npm i -S @emotion/core @emotion/styled gatsby-plugin-emotion postcss postcss-import postcss-preset-env tailwindcss twin.macro`


## NVM Config

Create `.nvmrc` in root

- default node
- example: `14.12.0`


## Prettier Configs

Create `.prettierrc` in root

```js
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}
```

Create `.prettierignore` in root

node_modules/
.cache/

## Babel Config
Create `.babelrc` in root

```json
{
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "Firefox ESR"]
        }
      }
    ]
  ]
}
```

## ENV Config (dotenv)

`npm i -S dotenv`

Create `.env` in root
- environment variables, secrets in this file

Config in `gatsby-config.js`
- add to top of file

```js
require('dotenv').config({
  path: `.env.GATSBY_CONCURRENT_DOWNLOAD`,
})

// require .env.development or .env.production
require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})
```

## Create PostCSS Config

Create `postcss.config.js` in root

```js
module.exports = {
  plugins: [
    require('tailwindcss')('./tailwind.config.js'),
    require('postcss-import')({
      plugins: [require('stylelint-config-recommended')],
    }),
    require('postcss-preset-env')({
      autoprefixer: { grid: false },
      features: {
        'nesting-rules': true,
      },
      browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'],
    }),
  ],
}
```

## Create Tailwind Config

Create `tailwind.config.js` in root

```js
module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {
      screens: {
        sm: '640px',
        // => @media (min-width: 640px) { ... }

        md: '768px',
        // => @media (min-width: 768px) { ... }

        lg: '1024px',
        // => @media (min-width: 1024px) { ... }

        xl: '1280px',
        // => @media (min-width: 1280px) { ... }
      },
      gridAutoColumns: {
        '3fr': 'minmax(0, 3fr)',
      },
    },
  },
  variants: {},
  plugins: [],
}
```

-------------------

# Optional Configs

## SVG in React Components

[Gatsby Plugin React SVG Docs](https://www.gatsbyjs.com/plugins/gatsby-plugin-react-svg/)

`npm i gatsby-plugin-react-svg`

Config in `gatsby-config.js`

```js
{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: /\.inline\.svg$/
    }
  }
}

// Use imported SVGs as components
import Something from "./path/something.inline.svg";
<Something className="your-class" />;
```


## Install Google Fonts for Gatsby

`npm i gatsby-plugin-google-fonts`

Config in `gatsby-config.js`

```js
{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `kufam:wght@600;700;900`, // you can also specify font weights and styles
      `poppins:wght@400;500;600`, // you can also specify font weights and styles
      `montserrat:wght@400;500;600`, // you can also specify font weights and styles
    ],
    display: 'swap',
  },
}
```

## Sourcing Options
### Sourcing from WordPress

- [WordPress Gatsby Sourcing Docs](https://www.gatsbyjs.com/docs/sourcing-from-wordpress/)
- [gatsby-source-wordpress Docs](https://github.com/gatsbyjs/gatsby-source-wordpress-experimental)
- [WordPress Example Starter](https://github.com/TylerBarnes/using-gatsby-source-wordpress-experimental)

### Install Required WP Plugins

Download zip into WP plugins directory

- [WPGraphQL](https://github.com/wp-graphql/wp-graphql)
- [WP Gatsby](https://github.com/gatsbyjs/wp-gatsby)

### Setup Gatsby Config for WP sourcing

`npm i gatsby-source-wordpress-experimental`

Config in `gatsby-config.js`

```js
module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-source-wordpress-experimental`,
      options: {
        url:
          // allows a fallback url if WPGRAPHQL_URL is not set in the env, this may be a local or remote WP instance.
          process.env.WPGRAPHQL_URL || `https://localhost/graphql`,
        schema: {
          // Prefixes all WP Types with "Wp" so "Post and allPost" become "WpPost and allWpPost".
          typePrefix: `Wp`,
        },
        verbose: true,
        develop: {
          // caches media files outside of Gatsby's default cache an thus allows them to persist through a cache reset.
          hardCacheMediaFiles: true,
        },
        debug: {
          graphql: {
            writeQueriesToDisk: true,
          },
        },
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === `development`
                ? // Lets just pull 50 posts in development to make it easy on ourselves (aka. faster).
                  50
                : // and we don't actually need more than 5000 in production for this particular site
                  5000,
          },
        },
      },
    },
  ]
}
```

## Optional Stylelint for project

### Install Stylelint Recommended Config Dev Dependencies

`npm i -D stylelint-config-recommended`

### Create Stylelint Config

Create `stylelint.config.js` in root

```js
module.exports = {
  rules: {
    extends: ['stylelint-config-recommended'],
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'tailwind',
          'apply',
          'variants',
          'responsive',
          'screen',
        ],
      },
    ],
    'declaration-block-trailing-semicolon': null,
    'no-descending-specificity': null,
  },
}
```