Skip to content

Commit

Permalink
Fix CSS HMR
Browse files Browse the repository at this point in the history
  • Loading branch information
scriptex committed Jan 7, 2021
1 parent 95ab067 commit 62f2d04
Show file tree
Hide file tree
Showing 5 changed files with 574 additions and 862 deletions.
44 changes: 22 additions & 22 deletions index.php
Original file line number Diff line number Diff line change
Expand Up @@ -26,35 +26,35 @@ function autoversion($url) {
For more info about the favicons and meta tags below see
https://github.com/audreyr/favicon-cheat-sheet
-->
<link rel="apple-touch-icon" sizes="57x57" href="/assets/images/favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/assets/images/favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/assets/images/favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/assets/images/favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/assets/images/favicon/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/assets/images/favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/assets/images/favicon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/favicon/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-128.png" sizes="128x128" />
<link rel="shortcut icon" type="image/x-icon" href="/assets/images/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="assets/images/favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="60x60" href="assets/images/favicon/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="120x120" href="assets/images/favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="76x76" href="assets/images/favicon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="152x152" href="assets/images/favicon/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-128.png" sizes="128x128" />
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon/favicon.ico" />
<meta name="application-name" content="{ Project Name }"/>
<meta name="msapplication-TileColor" content="#000000" />
<meta name="msapplication-TileImage" content="/assets/images/favicon/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="/assets/images/favicon/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="/assets/images/favicon/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="/assets/images/favicon/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="/assets/images/favicon/mstile-310x310.png" />
<meta name="msapplication-config" content="/config.xml" />
<meta name="msapplication-TileImage" content="assets/images/favicon/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="assets/images/favicon/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="assets/images/favicon/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="assets/images/favicon/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="assets/images/favicon/mstile-310x310.png" />
<meta name="msapplication-config" content="config.xml" />
<meta name="theme-color" content="#000000" />

<?php critical_css(); ?>

<link rel="stylesheet" href="<?php autoversion('/assets/dist/app.css'); ?>" />
<link rel="stylesheet" href="<?php autoversion('assets/dist/app.css'); ?>" />
</head>
<body>
<script src="<?php autoversion('/assets/dist/app.js'); ?>" async defer></script>
<script src="<?php autoversion('assets/dist/app.js'); ?>" async defer></script>
</body>
</html>
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,12 @@
"clean-webpack-plugin": "1.0.1",
"create-pwa": "2.3.0",
"critical": "2.0.6",
"css-loader": "5.0.1",
"css-loader": "3.5.3",
"cssnano": "4.1.10",
"eslint": "7.17.0",
"eslint-config-recommended": "4.1.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "6.2.0",
"mini-css-extract-plugin": "1.3.3",
"node-sass": "4.14.1",
"node-sass-magic-importer": "5.3.2",
"postcss": "8.2.2",
Expand Down
3 changes: 2 additions & 1 deletion renovate.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,6 @@
"vulnerabilityAlerts": {
"labels": ["security"],
"assignees": ["@scriptex"]
}
},
"ignoreDeps": ["css-loader"]
}
48 changes: 24 additions & 24 deletions webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ const { parse } = require('url');

const magicImporter = require('node-sass-magic-importer');
const { ProvidePlugin } = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const SpritesmithPlugin = require('webpack-spritesmith');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const WebpackShellPlugin = require('webpack-shell-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const { url, server, NODE_ENV } = argv;
const sourceMap = {
Expand Down Expand Up @@ -108,7 +108,8 @@ const browserSyncConfig = {
};

const extractTextConfig = {
filename: 'dist/app.css'
filename: 'dist/app.css',
allChunks: true
};

const spritesmithConfig = {
Expand Down Expand Up @@ -171,28 +172,27 @@ module.exports = () => {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: sourceMap
},
{
loader: 'postcss-loader',
options: { postcssOptions }
},
{
loader: 'sass-loader',
options: {
sassOptions: {
importer: magicImporter()
},
...sourceMap
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: sourceMap
},
{
loader: 'postcss-loader',
options: { postcssOptions }
},
{
loader: 'sass-loader',
options: {
sassOptions: {
importer: magicImporter()
},
...sourceMap
}
}
}
]
]
})
},
{
test: /\.js$/,
Expand Down Expand Up @@ -221,7 +221,7 @@ module.exports = () => {
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new MiniCssExtractPlugin(extractTextConfig),
new ExtractTextPlugin(extractTextConfig),
new SpritesmithPlugin(spritesmithConfig),
new CleanWebpackPlugin(['../assets/dist/'], cleanConfig),
new WebpackShellPlugin({
Expand Down
Loading

0 comments on commit 62f2d04

Please sign in to comment.