Skip to content

Bumps deps & add prettier.config.js #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 14, 2020
Merged

Bumps deps & add prettier.config.js #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d831095
Merge pull request #16 from 3daddict/dev
mike-diff Nov 10, 2020
ef0343a
Bumps deps & add prettier.config.js
felixmosh Nov 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ node_modules
*.lock
package-lock.json
*.yml
*error.log
*error.log
.idea
36 changes: 20 additions & 16 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
}
}
6 changes: 2 additions & 4 deletions postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
module.exports = {
plugins: [
require('autoprefixer')
]
}
plugins: [require('autoprefixer')],
};
6 changes: 6 additions & 0 deletions prettier.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
printWidth: 100,
trailingComma: 'es5',
singleQuote: true,
tabWidth: 4
};
208 changes: 92 additions & 116 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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),
};