diff --git a/.gitignore b/.gitignore index 5c3578e..7da9db2 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ node_modules *.lock package-lock.json *.yml -*error.log \ No newline at end of file +*error.log +.idea diff --git a/package.json b/package.json index 8bdfc94..f02a138 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,9 @@ "author": "Mike Salvati", "private": true, "scripts": { - "start": "NODE_ENV=development webpack --watch", - "build": "webpack && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid", - "deploy": "webpack && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && shopify-themekit deploy" + "start": "webpack --mode=development --watch", + "build": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid", + "deploy": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && shopify-themekit deploy" }, "dependencies": { "tailwindcss": "^1.9.6", @@ -18,25 +18,29 @@ "devDependencies": { "@babel/core": "^7.11.4", "@babel/preset-env": "^7.11.0", - "@shopify/themekit": "^1.1.4", - "autoprefixer": "^9.8.6", + "@shopify/themekit": "^1.1.6", + "autoprefixer": "^10.0.2", "babel-loader": "^8.1.0", "babel-plugin-transform-class-properties": "^6.24.1", "browser-sync": "^2.26.12", "clean-webpack-plugin": "^3.0.0", - "copy-webpack-plugin": "^5.1.2", - "css-loader": "^4.2.1", + "copy-webpack-plugin": "^6.3.0", + "css-loader": "^5.0.1", "file-loader": "^6.0.0", + "glob": "^7.1.6", "html-webpack-plugin": "^4.3.0", - "mini-css-extract-plugin": "^0.10.0", - "node-sass": "^4.14.1", - "postcss-loader": "^3.0.0", - "sass-loader": "^9.0.3", - "style-loader": "^1.2.1", + "mini-css-extract-plugin": "^1.3.1", + "node-sass": "^5.0.0", + "postcss-loader": "^4.0.4", + "prettier": "^2.1.2", + "sass-loader": "^10.1.0", + "style-loader": "^2.0.0", "transform-class-properties": "^1.0.0-beta", - "webpack": "^4.44.1", - "webpack-bundle-analyzer": "^3.8.0", - "webpack-cli": "^3.3.12", - "webpack-shell-plugin-next": "^1.2.0" + "webpack": "^5.4.0", + "webpack-bundle-analyzer": "^4.1.0", + "webpack-cli": "^4.2.0", + "webpack-dev-server": "^3.11.0", + "webpack-shell-plugin-next": "^2.0.8", + "yargs": "^16.1.0" } } diff --git a/postcss.config.js b/postcss.config.js index ff189d7..f720c87 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,5 +1,3 @@ module.exports = { - plugins: [ - require('autoprefixer') - ] - } \ No newline at end of file + plugins: [require('autoprefixer')], +}; diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 0000000..afd811c --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,6 @@ +module.exports = { + printWidth: 100, + trailingComma: 'es5', + singleQuote: true, + tabWidth: 4 +}; diff --git a/webpack.config.js b/webpack.config.js index 0dd364e..8c2199d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,157 +1,133 @@ const path = require('path'); -const glob = require("glob"); +const glob = require('glob'); +const { argv } = require('yargs'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const WebpackShellPluginNext = require('webpack-shell-plugin-next'); -const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production'; -const stats = mode === 'development' ? 'errors-warnings' : { children: false }; - +const isDev = argv.mode === 'development'; +const stats = isDev ? 'errors-warnings' : { children: false }; module.exports = { - mode: mode, stats: stats, entry: glob.sync('./src/components/**/*.js').reduce((acc, path) => { - const entry = path.replace(/^.*[\\\/]/, '').replace('.js',''); + const entry = path.replace(/^.*[\\\/]/, '').replace('.js', ''); acc[entry] = path; return acc; - }, {}), + }, {}), output: { filename: './assets/bundle.[name].js', path: path.resolve(__dirname, 'dist'), }, - plugins: [ - new CleanWebpackPlugin(), - new BundleAnalyzerPlugin({ - analyzerMode: 'disabled', - generateStatsFile: true - }), - new MiniCssExtractPlugin({ - filename: '/assets/bundle.[name].css' - }), - new CopyPlugin([{ - from: 'src/components/**/*', - to: '[folder]/[name].[ext]', - ignore: [ - 'src/components/**/*.js', - 'src/components/**/*.scss', - 'src/assets/**/*', - 'src/components/sections/**/*', - 'src/components/templates/**/*', - 'src/components/snippets/**/*', - 'src/components/tailwind.css' - ] - }, - { - from: 'src/components/templates/**/*.liquid', - to: 'templates/[name].[ext]', - flatten: true - }, - { - from: 'src/components/sections/**/*.liquid', - to: 'sections/[name].[ext]', - flatten: true - }, - { - from: 'src/components/snippets/**/*.liquid', - to: 'snippets/[name].[ext]', - flatten: true - }, - { - from: 'src/assets/**/*', - to: 'assets/', - flatten: true - }, - { - from: 'src/config/*.json', - to: 'config/[name].[ext]', - }, - { - from: 'src/locales/*.json', - to: 'locales/[name].[ext]', - }, - ]) - ], module: { - rules: [{ + rules: [ + { test: /\.(sc|sa|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { - url: false - } + url: false, + }, }, 'postcss-loader', { loader: 'sass-loader', options: { sourceMap: true, - } - } - ] + }, + }, + ], }, { test: /\.(png|svg|jpg|gif)$/, - use: [ - 'file-loader' - ] + use: ['file-loader'], }, { test: /\.(woff|woff2|eot|ttf|otf)$/, - use: [ - 'file-loader' - ] - }, - { - test: /\.m?js$/, - exclude: /(node_modules|bower_components)/, - use: { - loader: 'babel-loader', - options: { - presets: ['@babel/preset-env'], - plugins: ['transform-class-properties'], - plugins: ['babel-plugin-transform-class-properties'] - } - } + use: ['file-loader'], }, { test: /\.js$/, exclude: /node_modules/, - loader: "babel-loader" - } - ] - } -}; + loader: 'babel-loader', + }, + ], + }, + plugins: [ + new CleanWebpackPlugin(), + isDev && + new BundleAnalyzerPlugin({ + analyzerMode: 'disabled', + generateStatsFile: true, + }), + isDev && + new WebpackShellPluginNext({ + onBuildStart: { + scripts: ['echo -- Webpack build started 🛠'], + blocking: true, + parallel: false, + }, + onBuildError: { + scripts: ['echo -- ☠️ Aw snap, Webpack build failed...'], + }, + onBuildEnd: { + scripts: [ + 'echo -- Webpack build complete ✓', + 'echo -- Building TailwindCSS...', + 'npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid', + 'echo -- Deploying to theme ✈️', + 'shopify-themekit deploy', + 'echo -- Deployment competed ✓', + 'shopify-themekit open', + 'shopify-themekit watch', + ], + blocking: true, + parallel: false, + }, + }), -// Run Shell commmands during Webpack operations -if (mode === 'development') { - module.exports.plugins.push( - new WebpackShellPluginNext({ - onBuildStart:{ - scripts: ['echo -- Webpack build started 🛠'], - blocking: true, - parallel: false - }, - onBuildError:{ - scripts: ['echo -- ☠️ Aw snap, Webpack build failed...'], - }, - onBuildEnd:{ - scripts: [ - 'echo -- Webpack build complete ✓', - 'echo -- Building TailwindCSS...', - 'npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid', - 'echo -- Deploying to theme ✈️', - 'shopify-themekit deploy', - 'echo -- Deployment competed ✓', - 'shopify-themekit open', - 'shopify-themekit watch'], - blocking: true, - parallel: false - } - }) - ) - } + new MiniCssExtractPlugin({ + filename: '/assets/bundle.[name].css', + }), + new CopyPlugin({ + patterns: [ + { + from: 'src/components/*/*.liquid', + to: '[folder]/[name].[ext]', + }, + { + from: 'src/components/templates/**/*.liquid', + to: 'templates/[name].[ext]', + flatten: true, + }, + { + from: 'src/components/sections/**/*.liquid', + to: 'sections/[name].[ext]', + flatten: true, + }, + { + from: 'src/components/snippets/**/*.liquid', + to: 'snippets/[name].[ext]', + flatten: true, + }, + { + from: 'src/assets/**/*', + to: 'assets/', + flatten: true, + }, + { + from: 'src/config/*.json', + to: 'config/[name].[ext]', + }, + { + from: 'src/locales/*.json', + to: 'locales/[name].[ext]', + }, + ], + }), + ].filter(Boolean), +};