feat | update to shopify cli and tailwindcss

.env.sample

@@ -0,0 +1,5 @@
+# Sample env file, remove the .sample extension and fill in the values
+STORE_URL='my-shopify-store.myshopify.com'
+STORE_PASSWORD='shpat_e122110f8a000000dddeeff777'
+STAGING_THEME_ID='12300000002'
+LIVE_THEME_ID='12300000001'

.gitignore

@@ -11,4 +11,5 @@
 *config.yml
 *.env
 *node_modules/
-*theme.update
+*theme.update
+dist/assets

gulpfile.js

@@ -1,38 +1,35 @@
-const { task, src, dest, series, parallel, watch } = require('gulp');
-const terser = require('gulp-terser');
-const rename = require('gulp-rename');
-const cssbeautify = require('gulp-cssbeautify');
-const stripComments = require('gulp-strip-comments');
-const sourcemaps = require('gulp-sourcemaps');
-const gulpif = require('gulp-if');
-const cleanCSS = require('gulp-clean-css');
-const purgecss = require('gulp-purgecss');
-const size = require('gulp-size');
-const imagemin = require('gulp-imagemin');
-const sass = require('gulp-sass');
-sass.compiler = require('sass');
-const touch = require('gulp-touch-custom');
+require("dotenv").config();
+const run = require("gulp-run");
+const { task, src, dest, series, parallel, watch } = require("gulp");
+const terser = require("gulp-terser");
+const rename = require("gulp-rename");
+const stripComments = require("gulp-strip-comments");
+const sourcemaps = require("gulp-sourcemaps");
+const gulpif = require("gulp-if");
+const cssnano = require("gulp-cssnano");
+const prettier = require("gulp-prettier");
+const postcss = require("gulp-postcss");
+const size = require("gulp-size");
+const imagemin = require("gulp-imagemin");
 
-//roll up required plugins
-const rollup = require('gulp-better-rollup');
-const { nodeResolve } = require('@rollup/plugin-node-resolve'); //allow rollup to parse npm_modules
-const commonjs = require('@rollup/plugin-commonjs'); //allow rollup to use npm_modiules by converting to es6 exports
-const rollupJson = require('@rollup/plugin-json'); //also used to use node modules
-// const babel = require('@rollup/plugin-babel');
+//rollup required plugins
+const rollup = require("gulp-better-rollup");
+const { nodeResolve } = require("@rollup/plugin-node-resolve"); //allow rollup to parse npm_modules
+const commonjs = require("@rollup/plugin-commonjs"); //allow rollup to use npm_modules by converting to es6 exports
+const rollupJson = require("@rollup/plugin-json"); //also used to use node modules
 
 //=============================
 // Configuration
 //=============================
+const isProduction = process.env.NODE_ENV === "production" ? true : false;
 
 //main path ways
-var config = {
-  rootImg: 'src/images/*',
-  rootJS: 'src/js/*.js',
-  deepJS: 'src/js/**/*.js',
-  rootSass: 'src/sass/*.scss',
-  deepSass: 'src/sass/**/*.scss',
-  liquid: 'dist/**/*.liquid',
-  dest: './dist/assets'
+const config = {
+  srcImg: "src/images/**/*.{jpg,jpeg,png,gif,svg}",
+  srcJS: "src/js/*.{js, jsx, ts, tsx}",
+  srcStyles: "src/styles/*.css",
+  rootDist: "dist/**/*.{liquid, json}",
+  dest: "./dist/assets",
 };
 
 //=============================
@@ -48,90 +45,83 @@ function imageBuildChannel(srcPath) {
 }
 
 //js channel
-function jsBuildChannel(srcPath, isStaging = false) {
+function jsBuildChannel(srcPath) {
   src(srcPath)
     .pipe(sourcemaps.init())
-    .pipe(rollup({ plugins: [commonjs(), nodeResolve({ preferBuiltins: true, browser: true })] }, 'iife'))
+    .pipe(
+      rollup(
+        {
+          plugins: [
+            commonjs(),
+            nodeResolve({ preferBuiltins: true, browser: true }),
+          ],
+        },
+        "iife"
+      )
+    )
     .pipe(stripComments())
-    .pipe(gulpif(isStaging, terser()))
-    .pipe(rename({ extname: '.min.js' }))
+    .pipe(
+      gulpif(
+        isProduction,
+        terser({
+          compress: {
+            drop_console: true, //removes console logs, set to false to keep them
+          },
+        })
+      )
+    )
+    .pipe(rename({ extname: ".min.js" }))
     .pipe(size({ showFiles: true }))
-    .pipe(dest(config.dest))
-    .pipe(touch());
+    .pipe(dest(config.dest));
 }
 
 //css channel
-function cssBuildChannel(srcPath, isStaging = false) {
+function cssBuildChannel(srcPath) {
   src(srcPath)
-    .pipe(sass().on('error', sass.logError))
-    .pipe(cssbeautify())
-    .pipe(gulpif(isStaging, cleanCSS()))
-    .pipe(
-      purgecss({
-        //rejecting all right now
-        content: [config.liquid, config.deepJS] //parse liquid files to remove unused css
-      })
-    )
-    .pipe(rename({ extname: '.min.css' }))
+    .pipe(gulpif(!isProduction, prettier()))
+    .pipe(gulpif(isProduction, cssnano()))
+    .pipe(postcss()) // configured in src/styles/postcss.config.js
+    .pipe(rename({ extname: ".min.css" }))
     .pipe(size({ showFiles: true }))
-    .pipe(dest(config.dest))
-    .pipe(touch());
+    .pipe(dest(config.dest));
 }
 
 //=============================
 // TASKS
 //=============================
 
 //build js files
-task('build', async () => {
-  jsBuildChannel(config.rootJS);
-  cssBuildChannel(config.rootSass);
+task("build", async () => {
+  jsBuildChannel(config.srcJS);
+  cssBuildChannel(config.srcStyles);
+  imageBuildChannel([config.srcImg]);
 });
 
 //compress images
 //build css from scss
-task('build:img', async () => {
-  imageBuildChannel([config.rootImg]);
+task("build:img", async () => {
+  imageBuildChannel([config.srcImg]);
 });
 
 //build js files
-task('build:js', async () => {
-  jsBuildChannel(config.rootJS);
+task("build:js", async () => {
+  jsBuildChannel("src/js/*.{js, jsx, ts, tsx}");
 });
 
 //build css from scss
-task('build:css', async () => {
-  cssBuildChannel(config.rootSass);
-});
-
-//build with staging flag set to true
-task('build:staging', async () => {
-  jsBuildChannel(config.rootJS, true);
-  cssBuildChannel(config.rootSass, true);
+task("build:css", async () => {
+  cssBuildChannel(config.srcStyles);
 });
 
 //watch /src files for changes then build
-task('watch', async () => {
-  watch(config.deepJS, series('build:js'));
-  watch(config.deepSass, series('build:css'));
-  watch(config.rootImg, series('build:img'));
+task("watch", async () => {
+  watch(config.srcJS, series("build:js"));
+  watch(config.srcStyles, series("build:css"));
+  watch(config.srcImg, series("build:img"));
+  watch(config.rootDist, parallel("build:css"));
 });
 
-//shows the purged css selectors
-task('log:purgedCSS', async () => {
-  src(config.rootSass)
-    .pipe(sass().on('error', sass.logError))
-    .pipe(cssbeautify())
-    .pipe(
-      purgecss({
-        content: [config.liquid, config.deepJS], //parse liquid files to remove unused css
-        rejected: true
-      })
-    )
-    .pipe(
-      rename({
-        suffix: '.rejected'
-      })
-    )
-    .pipe(dest('./src/tmp'));
+task("store:login", async () => {
+  const cmd = new run.Command(`shopify login --store ${process.env.STORE_URL}`);
+  cmd.exec();
 });