fix: Update webpack config to work with css-loader 3.1.0

package.json

@@ -79,11 +79,11 @@
     "babel-loader": "8.0.6",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "core-js": "2.6.5",
-    "css-loader": "2.1.1",
+    "css-loader": "3.1.0",
     "eslint": "5.16.0",
     "eslint-plugin-jest": "22.9.0",
     "eslint-plugin-react": "7.14.1",
-    "file-loader": "4.0.0",
+    "file-loader": "4.1.0",
     "http-server": "0.11.1",
     "jest": "24.8.0",
     "marked": "0.6.2",

src/lib/getFileName.js

@@ -11,9 +11,6 @@ export default function getFileName(name) {
   if (name instanceof Parse.File) {
     return getFileName(name.name());
   }
-  let offset = 37;
-  if (name.indexOf('tfss-') === 0) {
-    offset += 5;
-  }
+  const offset = name.indexOf('_') + 1;
   return name.substr(offset);
 }

src/lib/tests/getFileName.test.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+jest.dontMock('../getFileName');
+const getFileName = require('../getFileName').default;
+const Parse = require('parse');
+
+describe('getFileName', () => {
+  it('get filename prefixed with hex', () => {
+    const actualFilename = 'profile.jpg';
+    expect(getFileName(`7b16230f584b360f667665fcb7d7a98b_${actualFilename}`)).toBe(actualFilename);
+
+    const parseFile = new Parse.File(`7b16230f584b360f667665fcb7d7a98b_${actualFilename}`);
+    expect(getFileName(parseFile)).toBe(actualFilename);
+  });
+
+  it('get filename containing underscore and prefixed with hex', () => {
+    const actualFilename = 'bg_img.png';
+    expect(getFileName(`7b16230f584b360f667665fcb7d7a98b_${actualFilename}`)).toBe(actualFilename);
+
+    const parseFile = new Parse.File(`7b16230f584b360f667665fcb7d7a98b_${actualFilename}`);
+    expect(getFileName(parseFile)).toBe(actualFilename);
+  });
+});

webpack/base.config.js

@@ -33,17 +33,28 @@ module.exports = {
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        use: { 
-          loader: 'babel-loader', 
+        use: {
+          loader: 'babel-loader',
           query: {
             plugins: [["@babel/plugin-proposal-decorators", { "legacy": true }], '@babel/transform-regenerator', '@babel/transform-runtime'],
             presets: ['@babel/preset-react', '@babel/preset-env']
           },
         },
       }, {
         test: /\.scss$/,
-        use: [ "style-loader", "css-loader?modules&localIdentName=[local]__[hash:base64:5]!sass-loader?includePaths[]=" +
-          encodeURIComponent(path.resolve(__dirname, '../src')) ]
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[local]__[hash:base64:5]'
+              },
+              importLoaders: 2
+            },
+          },
+          "sass-loader?includePaths[]=" + encodeURIComponent(path.resolve(__dirname, '../src'))
+        ]
       }, {
         test: /\.css$/,
         use: [ 'style-loader', 'css-loader' ]