@abcnews/aunty 13.2.1 → 14.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abcnews/aunty",
-  "version": "13.2.1",
+  "version": "14.0.0",
   "description": "A toolkit for working with ABC News projects",
   "repository": "abcnews/aunty",
   "license": "MIT",
@@ -70,8 +70,6 @@
     "node-fetch": "^2.6.0",
     "ora": "^5.0.0",
     "pify": "^5.0.0",
-    "postcss": "^8.3.6",
-    "postcss-loader": "^6.1.1",
     "prettier": "^2.0.5",
     "requireg": "^0.2.2",
     "rsyncwrapper": "^3.0.1",
@@ -92,9 +90,6 @@
     "yeoman-environment": "^3.2.0",
     "yeoman-generator": "^5.2.0"
   },
-  "optionalDependencies": {
-    "@abcaustralia/postcss-config": "^11.2.5"
-  },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
     "eslint": "^7.7.0",

package/src/config/webpack.js

@@ -4,7 +4,6 @@ const { join, resolve } = require('path');
 
 // External
 const importLazy = require('import-lazy')(require);
-const getContext = importLazy('@abcaustralia/postcss-config/getContext'); // optional dependency
 const CopyPlugin = importLazy('copy-webpack-plugin');
 const Dotenv = importLazy('dotenv-webpack');
 const ForkTsCheckerWebpackPlugin = importLazy('fork-ts-checker-webpack-plugin');
@@ -147,6 +146,8 @@ function createWebpackConfig({ isModernJS } = {}) {
   const { pkg, root, hasTS, type, webpack: projectWebpackConfig } = getProjectConfig();
   const { entry, extractCSS, from, includedDependencies, staticDir, to, useCSSModules } = getBuildConfig();
   const isProd = process.env.NODE_ENV === 'production';
+  const hasEnvFile = existsSync(join(root, '.env'));
+  const hasEnvExampleFile = existsSync(join(root, '.env.example'));
 
   const config = merge(
     {
@@ -232,9 +233,11 @@ function createWebpackConfig({ isModernJS } = {}) {
       },
       plugins: [
         new EnvironmentPlugin(Object.keys(process.env)),
-        new Dotenv({
-          safe: true
-        }),
+        hasEnvFile || hasEnvExampleFile
+          ? new Dotenv({
+              safe: hasEnvExampleFile
+            })
+          : null,
         hasTS
           ? new ForkTsCheckerWebpackPlugin({
               logger: { infrastructure: 'silent', issues: 'silent' },
@@ -261,7 +264,6 @@ function createWebpackConfig({ isModernJS } = {}) {
         moduleIds: isProd ? 'deterministic' : 'named'
       }
     },
-    conditionallyEnableABCAustraliaStyles,
     PROJECT_TYPES_CONFIG[type],
     projectWebpackConfig
   );
@@ -283,74 +285,3 @@ function createWebpackConfig({ isModernJS } = {}) {
 function getHintedRule(config, hint) {
   return config.module.rules.find(rule => rule.__hint__ === hint);
 }
-
-const ABC_POSTCSS_CONTEXT_SUGGESTION = `
-
-To compile @abcaustralia/* styles, you need to add the following to your package.json:
-
-"abc": {
-  "css": {
-    "libraryDir": "./node_modules/@abcaustralia/nucleus/css",
-    "logVariables": "false"
-  }
-}
-`;
-
-function getABCAustraliaPostCSSContext(isDev) {
-  try {
-    return getContext(isDev);
-  } catch (err) {
-    if (err.message.indexOf('css') > -1) {
-      err.message += ABC_POSTCSS_CONTEXT_SUGGESTION;
-    }
-
-    throw err;
-  }
-}
-
-const ABC_PACKAGE_PATTERN = /(node_modules\/@abcaustralia\/*)/;
-
-function conditionallyEnableABCAustraliaStyles(config) {
-  const { pkg } = getProjectConfig();
-
-  // Only enable if we have an @abcaustralia/* dependency
-  if (!Object.keys(pkg.dependencies || {}).find(x => x.indexOf('@abcaustralia/') === 0)) {
-    return config;
-  }
-
-  const isProd = config.mode === 'production';
-  const stylesRule = getHintedRule(config, 'styles');
-
-  stylesRule.exclude = ABC_PACKAGE_PATTERN;
-
-  config.module.rules.push({
-    __hint__: 'styles/@abcaustralia',
-    test: /\.css$/,
-    include: ABC_PACKAGE_PATTERN,
-    use: [
-      stylesRule.use[0],
-      {
-        loader: require.resolve('css-loader'),
-        options: {
-          importLoaders: 1,
-          modules: {
-            exportLocalsConvention: 'camelCase',
-            localIdentName: `${isProd ? '' : '[name]__[local]--'}[contenthash:base64:5]`
-          },
-          url: false
-        }
-      },
-      {
-        loader: require.resolve('postcss-loader'),
-        options: {
-          postcssOptions: {
-            config: require.resolve('@abcaustralia/postcss-config'),
-            ...getABCAustraliaPostCSSContext(!isProd)
-          }
-        }
-      }
-    ]
-  });
-
-  return config;
-}

package/src/config/webpackDevServer.js

@@ -17,7 +17,8 @@ module.exports.getWebpackDevServerConfig = async () => {
       allowedHosts: 'all',
       client: {
         logging: 'warn',
-        overlay: true
+        overlay: true,
+        webSocketURL: `ws${https ? 's' : ''}://${host}:${port}/ws`
       },
       devMiddleware: {
         publicPath: `http${https ? 's' : ''}://${host}:${port}/`

package/src/generators/project/templates/_common/package.json

@@ -14,11 +14,5 @@
     "start": "aunty serve",
     "dev": "aunty serve",
     "test": "aunty test"
-  }<% if (projectType === "react") { %>,
-  "abc": {
-    "css": {
-      "libraryDir": "./node_modules/@abcaustralia/nucleus/css",
-      "logVariables": "false"
-    }
-  }<% } %>
+  }
 }

package/src/generators/project/templates/react/src/index.tsx

@@ -27,7 +27,7 @@ if (module.hot) {
   module.hot.accept('./components/App', () => {
     try {
       renderApp();
-    } catch (err) {
+    } catch (err: any) {
       import('./components/ErrorBox').then(({ default: ErrorBox }) => {
         root.render(<ErrorBox error={err} />);
       });