[webpacker]

* removes postcss plugins to be able to use default css/sass webpack config
* documents out tweaks in webpack config for better clarity
* makes some paths more strict to better encapsulate yaml and babel loaders

.postcssrc.yml

@@ -1,3 +1 @@
 plugins:
-  postcss-smart-import: {}
-  postcss-cssnext: {}

config/webpack/environment.js

@@ -1,44 +1,33 @@
 const { environment } = require('@rails/webpacker')
 const path = require('path')
 
-// Add global webpack configs here
-
-environment.loaders.delete('css')
-environment.loaders.delete('moduleCss')
-environment.loaders.delete('sass')
-environment.loaders.delete('moduleSass')
+// TS and TSX transpilation is done with tsc via ts-loader, we don't use babel even though it's the
+// webpacker's default. The only use for babel is to transpile legacy module Stats, which could not
+// be migrated to Typescript due to potential extreme sanity loss.
+const babelLoader = environment.loaders.get('babel')
+babelLoader.test = /\.(js|jsx)/
+babelLoader.include = path.resolve(__dirname, '../../app/javascript/src/Stats')
 
 environment.loaders.append('ts', {
   test: /.(ts|tsx)$/,
   options: {},
   loader: 'ts-loader'
 })
 
+// Remove styles added automatically by @patternfly/react because it messes up our own styles.
+// We import the necessary styles manually in our .scss files and that way it works.
 environment.loaders.append('null', {
   test: /\.css$/,
   include: stylesheet => stylesheet.indexOf('@patternfly/react-styles/css/') > -1,
   use: ['null-loader']
 })
 
-environment.loaders.append('style', {
-  test: /(\.css|\.scss|\.sass)$/,
-  use: [
-    { loader: 'style-loader' },
-    { loader: 'css-loader' },
-    {
-      loader: 'sass-loader',
-      options: {
-        modules: true,
-        localIdentName: '[name]---[local]---[hash:base64:5]'
-      }
-    }
-  ]
-})
-
+// Quickstarts' guides are written in YAML for convenience (QuickStarts/templates), then this loader
+// allow us to import them as JSON and pass them to the React component (QuickStartContainer).
 environment.loaders.append('yaml', {
   test: /\.ya?ml$/,
   use: 'yaml-loader',
-  include: path.resolve(__dirname, '../../app/javascript'),
+  include: path.resolve(__dirname, '../../app/javascript/src/QuickStarts/templates'),
   type: 'json'
 })