Skip to content

Instantly share code, notes, and snippets.

@moxdev

moxdev/gatsby-setup-prettier-eslint-emotion-tailwindcss.md

Last active November 12, 2020 20:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save moxdev/498c140fbe25650d509cc0f5a273a532 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save moxdev/498c140fbe25650d509cc0f5a273a532 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. moxdev revised this gist Nov 12, 2020. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions gatsby-setup-prettier-eslint-emotion-tailwindcss.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,10 +9,10 @@ basic configs for a new Gatsby build

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

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

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

  2. moxdev revised this gist Nov 12, 2020. 1 changed file with 56 additions and 31 deletions.
    87 changes: 56 additions & 31 deletions gatsby-setup-prettier-eslint-emotion-tailwindcss.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,14 +4,17 @@ 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-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks`
    `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
    `npm i --save tailwindcss @emotion/core @emotion/styled gatsby-plugin-emotion twin.macro gatsby-plugin-postcss postcss-import postcss-preset-env stylelint prettier`

    ## Install Stylelint Recommended Config Dev Dependencies
    `npm i -D stylelint-config-recommended`
    ### <em>Breaking Changed in Emotion 11</em>

    Emotion 11 adds breaking changes to `gatsby-plugin-emotion`. Will need to update when fix is merged.
    [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
    @@ -57,12 +60,27 @@ Create `.babelrc` in root
    }
    ```

    ## ENV Config
    ## ENV Config (dotenv)

    Create `.env` in root
    `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
    @@ -121,31 +139,6 @@ module.exports = {
    }
    ```

    ## 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,
    },
    }
    ```
    -------------------

    # Optional Configs
    @@ -252,4 +245,36 @@ module.exports = {
    },
    ]
    }
    ```

    ## 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,
    },
    }
    ```
  3. moxdev revised this gist Nov 12, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gatsby-setup-prettier-eslint-emotion-tailwindcss.md
    View file
    Original file line number Diff line number Diff line change
    @@ -176,7 +176,7 @@ import Something from "./path/something.inline.svg";

    ## Install Google Fonts for Gatsby

    `gatsby-plugin-google-fonts`
    `npm i gatsby-plugin-google-fonts`

    Config in `gatsby-config.js`

  4. moxdev revised this gist Nov 12, 2020. 1 changed file with 39 additions and 10 deletions.
    49 changes: 39 additions & 10 deletions gatsby-setup-prettier-eslint-emotion-tailwindcss.md
    View file
    Original file line number Diff line number Diff line change
    @@ -14,18 +14,17 @@ basic configs for a new Gatsby build
    `npm i -D stylelint-config-recommended`


    ## Install Google Fonts for Gatsby
    `gatsby-plugin-google-fonts`

    ## NVM Config

    `.nvmrc`
    Create `.nvmrc` in root

    - default node
    - example: `14.12.0`


    ## Prettier Configs
    `.prettierrc`

    Create `.prettierrc` in root

    ```js
    {
    @@ -35,13 +34,13 @@ basic configs for a new Gatsby build
    }
    ```

    `.prettierignore`
    Create `.prettierignore` in root

    node_modules/
    .cache/

    ## Babel Config
    `.babelrc`
    Create `.babelrc` in root

    ```json
    {
    @@ -60,13 +59,13 @@ node_modules/

    ## ENV Config

    `.env`
    Create `.env` in root

    - environment variables, secrets in this file

    ## Create PostCSS Config

    `postcss.config.js`
    Create `postcss.config.js` in root

    ```js
    module.exports = {
    @@ -88,6 +87,8 @@ module.exports = {

    ## Create Tailwind Config

    Create `tailwind.config.js` in root

    ```js
    module.exports = {
    future: {
    @@ -122,6 +123,8 @@ module.exports = {

    ## Create Stylelint Config

    Create `stylelint.config.js` in root

    ```js
    module.exports = {
    rules: {
    @@ -153,6 +156,8 @@ module.exports = {

    `npm i gatsby-plugin-react-svg`

    Config in `gatsby-config.js`

    ```js
    {
    resolve: 'gatsby-plugin-react-svg',
    @@ -168,7 +173,29 @@ import Something from "./path/something.inline.svg";
    <Something className="your-class" />;
    ```

    ## Sourcing from WordPress

    ## Install Google Fonts for Gatsby

    `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)
    @@ -185,6 +212,8 @@ Download zip into WP plugins directory

    `npm i gatsby-source-wordpress-experimental`

    Config in `gatsby-config.js`

    ```js
    module.exports = {
    ...
  5. moxdev revised this gist Nov 12, 2020. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions gatsby-setup-prettier-eslint-emotion-tailwindcss.md
    View file
    Original file line number Diff line number Diff line change
    @@ -170,16 +170,16 @@ import Something from "./path/something.inline.svg";

    ## 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)
    - [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)
    - [WPGraphQL](https://github.com/wp-graphql/wp-graphql)
    - [WP Gatsby](https://github.com/gatsbyjs/wp-gatsby)

    ### Setup Gatsby Config for WP sourcing

  6. moxdev revised this gist Nov 12, 2020. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion gatsby-setup-prettier-eslint-emotion-tailwindcss.md
    View file
    Original file line number Diff line number Diff line change
    @@ -143,9 +143,10 @@ module.exports = {
    },
    }
    ```
    -------------------

    # Optional Configs
    -------------------

    ## SVG in React Components

    [Gatsby Plugin React SVG Docs](https://www.gatsbyjs.com/plugins/gatsby-plugin-react-svg/)
  7. moxdev revised this gist Nov 12, 2020. 1 changed file with 80 additions and 0 deletions.
    80 changes: 80 additions & 0 deletions gatsby-setup-prettier-eslint-emotion-tailwindcss.md
    View file
    Original file line number Diff line number Diff line change
    @@ -142,4 +142,84 @@ module.exports = {
    'no-descending-specificity': null,
    },
    }
    ```

    # 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`

    ```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" />;
    ```

    ## 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`

    ```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,
    },
    },
    },
    },
    ]
    }
    ```
  8. moxdev revised this gist Nov 12, 2020. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions gatsby-setup-prettier-eslint-emotion-tailwindcss.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,15 +2,15 @@

    basic configs for a new Gatsby build

    ## Install Prettier & EsLint Dev Dependencies
    ## 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-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks`


    ## Install Tailwind, Emotion, Emotion Styled Components & Twin Macro Dependencies
    `npm i --save tailwindcss @emotion/core @emotion/styled gatsby-plugin-emotion twin.macro gatsby-plugin-postcss postcss-import postcss-preset-env stylelint prettier`

    ## Install Style Lint Recommended Config Dev Dependencies
    ## Install Stylelint Recommended Config Dev Dependencies
    `npm i -D stylelint-config-recommended`


    @@ -86,7 +86,7 @@ module.exports = {
    }
    ```

    ## Creat Tailwind Config
    ## Create Tailwind Config

    ```js
    module.exports = {
    @@ -120,7 +120,7 @@ module.exports = {
    }
    ```

    ## Create Style Lint Config
    ## Create Stylelint Config

    ```js
    module.exports = {
  9. moxdev created this gist Nov 12, 2020.
    145 changes: 145 additions & 0 deletions gatsby-setup-prettier-eslint-emotion-tailwindcss.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,145 @@
    # 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-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks`


    ## Install Tailwind, Emotion, Emotion Styled Components & Twin Macro Dependencies
    `npm i --save tailwindcss @emotion/core @emotion/styled gatsby-plugin-emotion twin.macro gatsby-plugin-postcss postcss-import postcss-preset-env stylelint prettier`

    ## Install Style Lint Recommended Config Dev Dependencies
    `npm i -D stylelint-config-recommended`


    ## Install Google Fonts for Gatsby
    `gatsby-plugin-google-fonts`

    ## NVM Config

    `.nvmrc`
    - default node
    - example: `14.12.0`


    ## Prettier Configs
    `.prettierrc`

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

    `.prettierignore`

    node_modules/
    .cache/

    ## Babel Config
    `.babelrc`

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

    ## ENV Config

    `.env`

    - environment variables, secrets in this file

    ## Create PostCSS Config

    `postcss.config.js`

    ```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'],
    }),
    ],
    }
    ```

    ## Creat Tailwind Config

    ```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: [],
    }
    ```

    ## Create Style Lint Config

    ```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,
    },
    }
    ```