Skip to content

Instantly share code, notes, and snippets.

@robksawyer

robksawyer/.babelrc

Last active December 22, 2019 04:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robksawyer/83df60e6ea85d500dceab1e6d9f9b491 to your computer and use it in GitHub Desktop.
Save robksawyer/83df60e6ea85d500dceab1e6d9f9b491 to your computer and use it in GitHub Desktop.
Download ZIP
Collection of setting files for NextJS that uses TailwindCSS, PostCSS, Storybook and Styled-JSX.
Raw
.babelrc
{
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
"styled-jsx-plugin-postcss"
]
}
}
]
],
"plugins": [ "inline-react-svg" ]
}
Raw
next.config.js
/**
* next.config.js
* Next JS configuration file
* The following helps to use multiple plugins
* @see https://github.com/JerryCauser/next-compose
*/
/**
* Use SASS styles
* @see https://github.com/zeit/next-plugins/tree/master/packages/next-sass
* Using Fonts
* @see https://github.com/rohanray/next-fonts
* Environment variables
* @see https://stackoverflow.com/questions/50416138/nextjs-set-dynamic-environment-variables-at-the-start-of-the-application
*/
/**
* Exclude tests and stories from being compiled.
* @see https://github.com/zeit/next.js/issues/1914
* via
* excludeFile: ... (see below)
*/
const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')
const withFonts = require('next-fonts')
const optimizedImages = require('next-optimized-images')
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')
const path = require('path')
console.log('NextJs Config Environment:', process.env.NODE_ENV)
// const protocol = process.env.NODE_ENV === 'production' ? 'https' : 'http'
// const port = process.env.NODE_ENV === 'production' ? 8081 : 3000
// console.log('Client API is running on port', port, 'and protocol', protocol)
const nextConfig = {
distDir: '_next',
// serverRuntimeConfig: { // Will only be available on the server side
// wordpressApiUrl: process.env.WORDPRESS_API_URL
// },
// publicRuntimeConfig: { // Will be available on both server and client
// staticFolder: '/public',
// port: 8081 // The server port
// },
// pageExtensions: ['jsx', 'js'],
// Removes the [BABEL] Note: The code generator has deoptimised the styling of
compact: true,
webpack: (config, options) => {
const { dev } = options
if (dev) {
// Skip tests and stories from being compiled during development
// Note: This speeds up compilation.
config.module.rules.push(
{
test: /\.(spec,test,stories)\.(js|jsx)$/,
loader: 'ignore-loader'
},
{
test: /\.{js,jsx}$/,
enforce: 'pre',
include: [
path.resolve('components'),
path.resolve('pages'),
],
exclude: ['/node_modules/', '/.next/', '/out/'],
options: {
// Compile, but with a warning
emitWarning: true,
},
loader: 'eslint-loader'
}
)
}
return config
},
// Client-side environment variables
env: {
// Where am I
STAGING_URL: 'my-site.appspot.com',
PRODUCTION_URL: 'my-site.appspot.com',
// Headless-CMS
// HEADLESS_CMS_API_URL: 'https://api.mysite.com',
// HEADLESS_STAGING_CMS_API_URL: 'https://mysite.wpengine.com',
// HEADLESS_STAGING_CMS_API_URL: 'https://mysite.prismic.io',
HEADLESS_STAGING_CMS_API_URL: 'https://graphqlzero.almansi.me/api',
// Site configuration
PAGE_TITLE: 'My Site',
META_TITLE: 'My Site',
META_DESCRIPTION: 'The Global Celebration of Web Apps. Produced by Layerframe.',
META_KEYWORDS: 'stuff,more stuff',
META_AUTHOR: 'My Site',
SOCIAL_TWITTER: '@mysite',
// Mailchimp
// MAILCHIMP_API_KEY: '00000000-us9',
// MAILCHIMP_LIST_ID: 'xxx000xx',
// MAILING_LIST_UNSUBSCRIBE: '',
// Google Analytics
GOOGLE_UTM_CODE: process.env.NODE_ENV === 'production'
? 'UA-000000000-1'
: 'UA-000000000-1',
// Facebook Analytics
FACEBOOK_ANALYTICS_ID: process.env.NODE_ENV === 'production'
? '000000000'
: '000000000',
}
}
module.exports = withPlugins([
[withImages, {}],
[optimizedImages, {}],
[withFonts, {}],
[withCSS, {}],
], nextConfig)
Raw
postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('precss'), // Accepts SASS-like styles in PostCSS
require('postcss-easing-gradients'),
require('postcss-selector-not'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({ stage: 1 }),
require('tailwindcss'),
require('autoprefixer'),
]
};
Raw
tailwind.config.js
const { colors } = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1440px',
xxl: '1800px',
},
extend: {
colors: {
transparent: 'transparent',
primary: 'var(--color-primary)',
secondary: 'var(--color-secondary)',
accent0: '#EB367C',
accent1: '#F04D39',
accent2: '#49E8D9',
accent3: '#4212C4',
accent4: '#FDAFA0',
blue: {
...colors.blue,
'2f': '#2F2FFF',
'01': '#015BFE',
'07': '#075CFC',
},
purple: {
...colors.purple,
'86': '#860DFF',
},
red: {
...colors.red,
'fe': '#FE0000',
'fc': '#FCB3A7',
},
pink: {
...colors.pink,
'ff': '#FF4B99',
},
},
fontFamily: {
acuminPro: [
'acumin-pro',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
acuminProCondensed: [
'acumin-pro-condensed',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
basicSans: [
'basic-sans',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
ivymode: [
'ivymode',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
},
spacing: {
'0': '0',
'5': '5px',
'10': '10px',
'15': '15px',
'20': '20px',
'25': '25px',
'30': '30px',
'35': '35px',
'40': '40px',
'45': '45px',
'50': '50px',
'55': '55px',
'60': '60px',
'70': '70px',
'80': '80px',
'90': '90px',
'100': '100px',
'110': '110px',
'120': '120px',
'130': '130px',
'140': '140px',
'150': '150px',
'160': '160px',
'170': '170px',
'180': '180px',
'190': '190px',
'200': '200px',
'210': '210px',
'220': '220px',
'230': '230px',
'240': '240px',
'250': '250px',
},
fontSize: {
'8': '8px',
'9': '9px',
'10': '10px',
'11': '11px',
'12': '12px',
'13': '13px',
'14': '14px',
'15': '15px',
'16': '16px',
'17': '17px',
'18': '18px',
'19': '19px',
'20': '20px',
'21': '21px',
'22': '22px',
'25': '25px',
'24': '24px',
'25': '25px',
'26': '26px',
'28': '28px',
'31': '31px',
'32': '32px',
'34': '34px',
'35': '35px',
'37': '37px',
'39': '39px',
'40': '40px',
'41': '41px',
'44': '44px',
'46': '46px',
'47': '47px',
'48': '48px',
'49': '49px',
'50': '50px',
'52': '52px',
'55': '55px',
'57': '57px',
'60': '60px',
'61': '61px',
'64': '64px',
'67': '67px',
'70': '70px',
'72': '72px',
'74': '74px',
'78': '78px',
'80': '80px',
'82': '82px',
'85': '85px',
'88': '88px',
'90': '90px',
'94': '94px',
'100': '100px',
'102': '102px',
'107': '107px',
'110': '110px',
'113': '113px',
'124': '124px',
'125': '125px',
'140': '140px',
'148': '148px',
'170': '170px',
'190': '190px',
'250': '250px',
},
}
},
variants: {
backgroundColor: ['responsive', 'focus', 'hover', 'active'],
textColor: ['responsive', 'focus', 'hover', 'active'],
borderColor: ['responsive', 'focus', 'hover', 'active'],
},
plugins: []
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment