Gatsby + Tailwind bootstrap script

bootstrap.sh

PROJECT_NAME="ignas.tech"

# Replace the line of the given line number with the given replacement in the given file.
function replace_string() {
  local file="$1"
  local find="$2"
  local replacement="$3"

  # Escape replacement
  replacement_escaped=$(echo "$replacement" | sed -e 's/[]\/$*.^[]/\\&/g')

  sed -i ".bak" "s/${find}.*/$replacement_escaped/" "$file"

  rm -rf "$file.bak"
}

function add_string() {
    local file="$1"
    local find="$2"
    local replacement="$3"

    num_matches=$(grep -o -E "$find" "$file" | wc -l)

    if [ "$num_matches" -eq 0 ]; then
      echo $replacement >> $file
    fi
}

gatsby new $PROJECT_NAME
cd $PROJECT_NAME
yarn add gatsby-plugin-postcss tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/forms @heroicons/react
npx tailwindcss init -p
yarn add gatsby-plugin-web-font-loader

replace_string tailwind.config.js purge "purge: ['./src/**/*.{js,jsx,ts,tsx}'],"
replace_string tailwind.config.js plugins "plugins: [require('@tailwindcss/forms')]"
replace_string gatsby-config.js plugins "plugins: ['gatsby-plugin-postcss',"

STYLE_DIR="./src/styles"
STYLE_FILE="$STYLE_DIR/global.css"

mkdir -p $STYLE_DIR
echo "/* Tailwind CSS */" > $STYLE_FILE
# shellcheck disable=SC2129
echo "" >> $STYLE_FILE
echo "@tailwind base;" >> $STYLE_FILE
echo "@tailwind components;" >> $STYLE_FILE
echo "@tailwind utilities;" >> $STYLE_FILE

add_string gatsby-browser.js import "import './src/styles/global.css';"