Skip to content

Commit b5eb992

Browse files
mike-diffmike-diff
authored
Merge pull request #17 from felixmosh/bump-deps
Bumps deps & add prettier.config.js
2 parents 26f9959 + ef0343a commit b5eb992

File tree

5 files changed

+122
-137
lines changed

5 files changed

+122
-137
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ node_modules
55
*.lock
66
package-lock.json
77
*.yml
8-
*error.log
8+
*error.log
9+
.idea

‎package.json‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
"author": "Mike Salvati",
88
"private": true,
99
"scripts": {
10-
"start": "NODE_ENV=development webpack --watch",
11-
"build": "webpack && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid",
12-
"deploy": "webpack && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && shopify-themekit deploy"
10+
"start": "webpack --mode=development --watch",
11+
"build": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid",
12+
"deploy": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && shopify-themekit deploy"
1313
},
1414
"dependencies": {
1515
"tailwindcss": "^1.9.6",
@@ -18,25 +18,29 @@
1818
"devDependencies": {
1919
"@babel/core": "^7.11.4",
2020
"@babel/preset-env": "^7.11.0",
21-
"@shopify/themekit": "^1.1.4",
22-
"autoprefixer": "^9.8.6",
21+
"@shopify/themekit": "^1.1.6",
22+
"autoprefixer": "^10.0.2",
2323
"babel-loader": "^8.1.0",
2424
"babel-plugin-transform-class-properties": "^6.24.1",
2525
"browser-sync": "^2.26.12",
2626
"clean-webpack-plugin": "^3.0.0",
27-
"copy-webpack-plugin": "^5.1.2",
28-
"css-loader": "^4.2.1",
27+
"copy-webpack-plugin": "^6.3.0",
28+
"css-loader": "^5.0.1",
2929
"file-loader": "^6.0.0",
30+
"glob": "^7.1.6",
3031
"html-webpack-plugin": "^4.3.0",
31-
"mini-css-extract-plugin": "^0.10.0",
32-
"node-sass": "^4.14.1",
33-
"postcss-loader": "^3.0.0",
34-
"sass-loader": "^9.0.3",
35-
"style-loader": "^1.2.1",
32+
"mini-css-extract-plugin": "^1.3.1",
33+
"node-sass": "^5.0.0",
34+
"postcss-loader": "^4.0.4",
35+
"prettier": "^2.1.2",
36+
"sass-loader": "^10.1.0",
37+
"style-loader": "^2.0.0",
3638
"transform-class-properties": "^1.0.0-beta",
37-
"webpack": "^4.44.1",
38-
"webpack-bundle-analyzer": "^3.8.0",
39-
"webpack-cli": "^3.3.12",
40-
"webpack-shell-plugin-next": "^1.2.0"
39+
"webpack": "^5.4.0",
40+
"webpack-bundle-analyzer": "^4.1.0",
41+
"webpack-cli": "^4.2.0",
42+
"webpack-dev-server": "^3.11.0",
43+
"webpack-shell-plugin-next": "^2.0.8",
44+
"yargs": "^16.1.0"
4145
}
4246
}

‎postcss.config.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
module.exports = {
2-
plugins: [
3-
require('autoprefixer')
4-
]
5-
}
2+
plugins: [require('autoprefixer')],
3+
};

‎prettier.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
printWidth: 100,
3+
trailingComma: 'es5',
4+
singleQuote: true,
5+
tabWidth: 4
6+
};

‎webpack.config.js‎

Lines changed: 92 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,133 @@
11
const path = require('path');
2-
const glob = require("glob");
2+
const glob = require('glob');
3+
const { argv } = require('yargs');
34
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
45
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
56
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
67
const CopyPlugin = require('copy-webpack-plugin');
78
const WebpackShellPluginNext = require('webpack-shell-plugin-next');
89

9-
const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production';
10-
const stats = mode === 'development' ? 'errors-warnings' : { children: false };
11-
10+
const isDev = argv.mode === 'development';
11+
const stats = isDev ? 'errors-warnings' : { children: false };
1212

1313
module.exports = {
14-
mode: mode,
1514
stats: stats,
1615
entry: glob.sync('./src/components/**/*.js').reduce((acc, path) => {
17-
const entry = path.replace(/^.*[\\\/]/, '').replace('.js','');
16+
const entry = path.replace(/^.*[\\\/]/, '').replace('.js', '');
1817
acc[entry] = path;
1918
return acc;
20-
}, {}),
19+
}, {}),
2120
output: {
2221
filename: './assets/bundle.[name].js',
2322
path: path.resolve(__dirname, 'dist'),
2423
},
25-
plugins: [
26-
new CleanWebpackPlugin(),
27-
new BundleAnalyzerPlugin({
28-
analyzerMode: 'disabled',
29-
generateStatsFile: true
30-
}),
31-
new MiniCssExtractPlugin({
32-
filename: '/assets/bundle.[name].css'
33-
}),
34-
new CopyPlugin([{
35-
from: 'src/components/**/*',
36-
to: '[folder]/[name].[ext]',
37-
ignore: [
38-
'src/components/**/*.js',
39-
'src/components/**/*.scss',
40-
'src/assets/**/*',
41-
'src/components/sections/**/*',
42-
'src/components/templates/**/*',
43-
'src/components/snippets/**/*',
44-
'src/components/tailwind.css'
45-
]
46-
},
47-
{
48-
from: 'src/components/templates/**/*.liquid',
49-
to: 'templates/[name].[ext]',
50-
flatten: true
51-
},
52-
{
53-
from: 'src/components/sections/**/*.liquid',
54-
to: 'sections/[name].[ext]',
55-
flatten: true
56-
},
57-
{
58-
from: 'src/components/snippets/**/*.liquid',
59-
to: 'snippets/[name].[ext]',
60-
flatten: true
61-
},
62-
{
63-
from: 'src/assets/**/*',
64-
to: 'assets/',
65-
flatten: true
66-
},
67-
{
68-
from: 'src/config/*.json',
69-
to: 'config/[name].[ext]',
70-
},
71-
{
72-
from: 'src/locales/*.json',
73-
to: 'locales/[name].[ext]',
74-
},
75-
])
76-
],
7724
module: {
78-
rules: [{
25+
rules: [
26+
{
7927
test: /\.(sc|sa|c)ss$/,
8028
use: [
8129
MiniCssExtractPlugin.loader,
8230
{
8331
loader: 'css-loader',
8432
options: {
85-
url: false
86-
}
33+
url: false,
34+
},
8735
},
8836
'postcss-loader',
8937
{
9038
loader: 'sass-loader',
9139
options: {
9240
sourceMap: true,
93-
}
94-
}
95-
]
41+
},
42+
},
43+
],
9644
},
9745
{
9846
test: /\.(png|svg|jpg|gif)$/,
99-
use: [
100-
'file-loader'
101-
]
47+
use: ['file-loader'],
10248
},
10349
{
10450
test: /\.(woff|woff2|eot|ttf|otf)$/,
105-
use: [
106-
'file-loader'
107-
]
108-
},
109-
{
110-
test: /\.m?js$/,
111-
exclude: /(node_modules|bower_components)/,
112-
use: {
113-
loader: 'babel-loader',
114-
options: {
115-
presets: ['@babel/preset-env'],
116-
plugins: ['transform-class-properties'],
117-
plugins: ['babel-plugin-transform-class-properties']
118-
}
119-
}
51+
use: ['file-loader'],
12052
},
12153
{
12254
test: /\.js$/,
12355
exclude: /node_modules/,
124-
loader: "babel-loader"
125-
}
126-
]
127-
}
128-
};
56+
loader: 'babel-loader',
57+
},
58+
],
59+
},
60+
plugins: [
61+
new CleanWebpackPlugin(),
62+
isDev &&
63+
new BundleAnalyzerPlugin({
64+
analyzerMode: 'disabled',
65+
generateStatsFile: true,
66+
}),
67+
isDev &&
68+
new WebpackShellPluginNext({
69+
onBuildStart: {
70+
scripts: ['echo -- Webpack build started 🛠'],
71+
blocking: true,
72+
parallel: false,
73+
},
74+
onBuildError: {
75+
scripts: ['echo -- ☠️ Aw snap, Webpack build failed...'],
76+
},
77+
onBuildEnd: {
78+
scripts: [
79+
'echo -- Webpack build complete ✓',
80+
'echo -- Building TailwindCSS...',
81+
'npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid',
82+
'echo -- Deploying to theme ✈️',
83+
'shopify-themekit deploy',
84+
'echo -- Deployment competed ✓',
85+
'shopify-themekit open',
86+
'shopify-themekit watch',
87+
],
88+
blocking: true,
89+
parallel: false,
90+
},
91+
}),
12992

130-
// Run Shell commmands during Webpack operations
131-
if (mode === 'development') {
132-
module.exports.plugins.push(
133-
new WebpackShellPluginNext({
134-
onBuildStart:{
135-
scripts: ['echo -- Webpack build started 🛠'],
136-
blocking: true,
137-
parallel: false
138-
},
139-
onBuildError:{
140-
scripts: ['echo -- ☠️ Aw snap, Webpack build failed...'],
141-
},
142-
onBuildEnd:{
143-
scripts: [
144-
'echo -- Webpack build complete ✓',
145-
'echo -- Building TailwindCSS...',
146-
'npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid',
147-
'echo -- Deploying to theme ✈️',
148-
'shopify-themekit deploy',
149-
'echo -- Deployment competed ✓',
150-
'shopify-themekit open',
151-
'shopify-themekit watch'],
152-
blocking: true,
153-
parallel: false
154-
}
155-
})
156-
)
157-
}
93+
new MiniCssExtractPlugin({
94+
filename: '/assets/bundle.[name].css',
95+
}),
96+
new CopyPlugin({
97+
patterns: [
98+
{
99+
from: 'src/components/*/*.liquid',
100+
to: '[folder]/[name].[ext]',
101+
},
102+
{
103+
from: 'src/components/templates/**/*.liquid',
104+
to: 'templates/[name].[ext]',
105+
flatten: true,
106+
},
107+
{
108+
from: 'src/components/sections/**/*.liquid',
109+
to: 'sections/[name].[ext]',
110+
flatten: true,
111+
},
112+
{
113+
from: 'src/components/snippets/**/*.liquid',
114+
to: 'snippets/[name].[ext]',
115+
flatten: true,
116+
},
117+
{
118+
from: 'src/assets/**/*',
119+
to: 'assets/',
120+
flatten: true,
121+
},
122+
{
123+
from: 'src/config/*.json',
124+
to: 'config/[name].[ext]',
125+
},
126+
{
127+
from: 'src/locales/*.json',
128+
to: 'locales/[name].[ext]',
129+
},
130+
],
131+
}),
132+
].filter(Boolean),
133+
};

0 commit comments

Comments
 (0)