Use Laravel Mix

assets/css/base.css

@@ -1,20 +1,27 @@
-h1, h2, h3
+h1, h2, h3 {
   @apply font-bold
+}
 
-h1
+h1 {
   @apply text-3xl
+}
 
-h2
+h2 {
   @apply text-2xl
+}
 
-img
+img {
   @apply max-w-full h-auto
+}
 
-a
-  @apply text-blue-700 no-underline
+a {
+  @apply text-blue-700 no-underline;
 
-  &:hover
+  &:hover {
     @apply underline
+  }
+}
 
-blockquote
+blockquote {
   @apply border-l-4 border-blue-600 pl-4 px-6 py-2
+}

assets/css/components/button.css

@@ -1,10 +1,13 @@
-.button
-  @apply bg-blue-600 border-blue-600 border inline-block text-white no-underline py-2 px-3 rounded text-sm
+.button {
+  @apply bg-blue-600 border-blue-600 border inline-block text-white no-underline py-2 px-3 rounded text-sm;
 
-  &:focus
+  &:focus {
     @apply py-2 px-3 m-0
+  }
 
   &:active,
   &:focus,
-  &:hover
+  &:hover {
     @apply bg-white text-blue-600
+  }
+}

assets/css/components/container.css

@@ -1,2 +1,3 @@
-.container
+.container {
   @apply w-full max-w-5xl px-4 mx-auto
+}

assets/css/components/lead.css

@@ -1,3 +1,5 @@
-p.lead
-  @screen md
+p.lead {
+  @screen md {
     @apply text-lg
+  }
+}

assets/css/components/markup.css

@@ -1,16 +1,19 @@
-.markup
-  @apply leading-normal
+.markup {
+  @apply leading-normal;
 
   h2,
   h3,
-  h4
+  h4 {
     @apply text-black font-bold mb-3
+  }
 
-  h2
+  h2 {
     @apply mt-8 mb-3
+  }
 
-  h3
+  h3 {
     @apply text-lg mt-8
+  }
 
   p,
   ul,
@@ -19,28 +22,38 @@
   table,
   figure,
   pre,
-  [v-pre]
-    &:not(:last-child)
+  [v-pre] {
+    &:not(:last-child) {
       @apply mb-6
+    }
+  }
 
-  ul
+  ul {
     @apply list-disc ml-5
+  }
 
-  code
+  code {
     @apply bg-gray-200 font-mono text-sm
+  }
 
   p,
-  li
-    code
+  li {
+    code {
       @apply inline-block border border-gray-300 font-bold mx-px p-1 leading-none
+    }
+  }
 
   pre code,
-  .hljs
+  .hljs {
     @apply block leading-loose overflow-x-scroll p-6
+  }
 
   figure,
-  img
+  img {
     @apply block
+  }
 
-  figcaption
+  figcaption {
     @apply italic text-sm text-gray-800 text-center mb-0 mt-1
+  }
+}

assets/css/components/note.css

@@ -1,11 +1,15 @@
-.note
-  @apply bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded
+.note {
+  @apply bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded;
 
-  > *:not(:first-child)
+  > *:not(:first-child) {
     @apply mt-6
+  }
 
-  p a
-    @apply text-black underline
+  p a {
+    @apply text-black underline;
 
-    &:hover
+    &:hover {
       @apply no-underline
+    }
+  }
+}

assets/css/components/table.css

@@ -1,13 +1,18 @@
-.table
-  @apply w-full
+.table {
+  @apply w-full;
 
-  th
+  th {
     @apply bg-gray-200 text-left
+  }
 
   th,
-  td
+  td {
     @apply px-4 py-2 border border-solid border-gray-300
+  }
+}
 
-table.is-striped
-  tbody > tr:not(:nth-child(odd)) td
+table.is-striped {
+  tbody > tr:not(:nth-child(odd)) td {
     @apply bg-gray-100
+  }
+}

assets/css/components/video.css

@@ -1,7 +1,9 @@
-.video-full
-  @apply w-full relative
-  padding-top: 56.25%
+.video-full {
+  @apply w-full relative;
+  padding-top: 56.25%;
 
   iframe,
-  embed
+  embed {
     @apply absolute h-full left-0 top-0 w-full
+  }
+}

assets/css/components/widget.css

@@ -1,2 +1,3 @@
-.widget
+.widget {
   @apply block mb-6
+}

assets/css/components/wrap.css

@@ -1,5 +1,7 @@
-.wrap
-  @apply w-full max-w-3xl mx-auto
+.wrap {
+  @apply w-full max-w-3xl mx-auto;
 
-  &.is-wide
+  &.is-wide {
     @apply max-w-5xl
+  }
+}

assets/css/tailwind.css

@@ -1,18 +1,18 @@
-@import 'tailwindcss/base'
-@import './base.css'
+@import 'tailwindcss/base';
+@import './base.css';
 
-@import 'tailwindcss/components'
-@import './components/button.css'
-@import './components/container.css'
-@import './components/lead.css'
-@import './components/markup.css'
-@import './components/note.css'
-@import './components/table.css'
-@import './components/video.css'
-@import './components/widget.css'
-@import './components/wrap.css'
+@import 'tailwindcss/components';
+@import './components/button.css';
+@import './components/container.css';
+@import './components/lead.css';
+@import './components/markup.css';
+@import './components/note.css';
+@import './components/table.css';
+@import './components/video.css';
+@import './components/widget.css';
+@import './components/wrap.css';
 
-@import 'highlightjs/styles/github-gist'
+@import 'highlightjs/styles/github-gist';
 
-@import 'tailwindcss/utilities'
-@import './utilities.css'
+@import 'tailwindcss/utilities';
+@import './utilities.css';

assets/css/utilities.css

@@ -1,2 +1,3 @@
-.no-js .js-hidden
+.no-js .js-hidden {
   display: none
+}

mix-manifest.json

@@ -0,0 +1,4 @@
+{
+    "/source/build/app.js": "/source/build/app.js",
+    "/source/build/app.css": "/source/build/app.css"
+}

netlify.toml

@@ -1,9 +1,10 @@
 [build]
 command = """
 composer test && \
-  yarn lint --fix-dry-run && \
-  yarn build && \
-  composer build
+  composer build && \
+  npm run lint --fix-dry-run && \
+  npm run production && \
+  cp -R source/build output_prod
 """
 publish = "output_prod"
 environment = { PHP_VERSION = "7.2", YARN_VERSION = "1.13.0" }

package.json

@@ -1,14 +1,18 @@
 {
   "private": true,
   "scripts": {
-    "dev": "encore dev",
-    "watch": "encore dev --watch",
-    "build": "encore production --progress",
-    "lint": "eslint --ext .js,.vue assets/js/app.js"
+    "dev": "npm run development",
+    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "lint": "eslint --ext .js,.vue assets/js/app.js",
+    "watch": "npm run development -- --watch",
+    "prod": "npm run production",
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "dependencies": {
-    "@symfony/webpack-encore": "^0.28.0",
+    "cross-env": "^6.0.3",
     "highlightjs": "^9.16.2",
+    "laravel-mix": "^5.0.0",
+    "laravel-mix-purgecss": "^4.2.0",
     "postcss-import": "^12.0.1",
     "postcss-nested": "^4.2.1",
     "tailwindcss": "^1.1.3",
@@ -20,6 +24,8 @@
     "vue": "^2.6.10"
   },
   "devDependencies": {
+    "browser-sync": "^2.26.7",
+    "browser-sync-webpack-plugin": "^2.0.1",
     "eslint": "^5.15.3",
     "eslint-config-standard": "^12.0.0",
     "eslint-plugin-import": "^2.16.0",

postcss.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  parser: 'sugarss',
-  plugins: [
-    require('postcss-import'),
-    require('tailwindcss'),
-    require('postcss-nested'),
-    require('autoprefixer')
-  ]
-}

source/_layouts/app.html.twig

@@ -9,7 +9,7 @@
             <meta name="twitter:creator" content="@{{ site.twitter.user }}">
         {% endblock %}
 
-        <link rel="stylesheet" href="{{ asset('build/app.css') }}">
+        <link rel="stylesheet" href="/build/app.css">
         {% block stylesheets %}{% endblock %}
 
         {% for size in site.apple_touch_icon_sizes %}
@@ -29,7 +29,7 @@
             <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '{{ site.google_analytics.id }}', 'auto'); ga('send', 'pageview');</script>
         {% endif %}
 
-        <script src="{{ asset('build/app.js') }}"></script>
+        <script src="/build/app.js"></script>
         {% block scripts %}{% endblock %}
     </body>
 </html>

webpack.config.js

@@ -1,27 +0,0 @@
-const Encore = require('@symfony/webpack-encore')
-const glob = require('glob-all')
-const PurgecssPlugin = require('purgecss-webpack-plugin')
-
-Encore
-  .disableSingleRuntimeChunk()
-  .cleanupOutputBeforeBuild()
-  .setOutputPath('source/build/')
-  .setPublicPath('/build')
-  .addEntry('app', './assets/js/app.js')
-  .enablePostCssLoader()
-  .enableVueLoader()
-  .enableSourceMaps(!Encore.isProduction())
-
-if (Encore.isProduction()) {
-  Encore
-    .enableVersioning()
-    .addPlugin(new PurgecssPlugin({
-      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
-      paths: () => glob.sync([
-        'assets/**/*.vue',
-        'source/**/*.{md,twig}'
-      ])
-    }))
-}
-
-module.exports = Encore.getWebpackConfig()

webpack.mix.js

@@ -0,0 +1,27 @@
+let mix = require('laravel-mix')
+
+require('laravel-mix-purgecss')
+
+mix.disableNotifications()
+  .postCss('assets/css/tailwind.css', 'source/build/app.css', [
+    require('postcss-import'),
+    require('tailwindcss'),
+    require('postcss-nested'),
+    require('autoprefixer')
+  ])
+  .js('assets/js/app.js', 'source/build')
+
+mix.browserSync({
+  proxy: 'localhost:8000',
+  files: [
+    'output_*/**/*'
+  ],
+  notify: false
+})
+
+mix.purgeCss({
+  extensions: ['html', 'twig', 'vue'],
+  folders: ['assets/js', 'output_*'],
+  whitelistPatterns: [],
+  whitelistPatternsChildren: []
+})