Update dependencies, especially postcss

Author: jakeonfire

package.json

@@ -5,18 +5,18 @@
     "url": "http://gajus.com"
   },
   "dependencies": {
-    "@babel/plugin-syntax-jsx": "^7.0.0",
-    "@babel/types": "^7.0.0",
+    "@babel/plugin-syntax-jsx": "^7.13.13",
+    "@babel/types": "^7.18.10",
     "ajv": "^6.5.3",
     "ajv-keywords": "^3.2.0",
     "generic-names": "^2.0.1",
-    "postcss": "^7.0.2",
-    "postcss-modules": "^1.3.2",
-    "postcss-modules-extract-imports": "^1.2.0",
-    "postcss-modules-local-by-default": "^1.2.0",
+    "postcss": "^8.4.16",
+    "postcss-modules": "^4.3.1",
+    "postcss-modules-extract-imports": "^3.0.0",
+    "postcss-modules-local-by-default": "^4.0.0",
     "postcss-modules-parser": "^1.1.1",
-    "postcss-modules-scope": "^1.1.0",
-    "postcss-modules-values": "^1.3.0"
+    "postcss-modules-scope": "^3.0.0",
+    "postcss-modules-values": "^4.0.0"
   },
   "description": "Transforms styleName to className using compile time CSS module resolution.",
   "devDependencies": {
@@ -28,17 +28,17 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/register": "^7.0.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^23.6.0",
-    "babel-plugin-module-resolver": "^3.2.0",
-    "babel-plugin-tester": "^5.5.1",
+    "babel-jest": "^28.1.3",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-tester": "^10.1.0",
     "eslint": "^5.5.0",
     "eslint-config-canonical": "^12.0.0",
     "flow-bin": "^0.80.0",
     "husky": "^1.0.0-rc.13",
-    "jest": "^23.5.0",
-    "postcss-less": "^2.0.0",
-    "postcss-nested": "^3.0.0",
-    "postcss-scss": "^2.0.0",
+    "jest": "^28.1.3",
+    "postcss-less": "^6.0.0",
+    "postcss-nested": "^5.0.6",
+    "postcss-scss": "^4.0.4",
     "semantic-release": "^15.9.12"
   },
   "engines": {

src/conditionalClassMerge.js

@@ -2,6 +2,7 @@
 
 import {
   binaryExpression,
+  cloneNode,
   conditionalExpression,
   stringLiteral
 } from '@babel/types';
@@ -12,18 +13,17 @@ export default (
   classNameExpression: any,
   styleNameExpression: any,
 ): any => {
-  // classNameExpression ? (classNameExpression + ' ') : '' + styleNameExpression
   return binaryExpression(
     '+',
     conditionalExpression(
-      classNameExpression,
+      cloneNode(classNameExpression),
       binaryExpression(
         '+',
-        classNameExpression,
+        cloneNode(classNameExpression),
         stringLiteral(' ')
       ),
       stringLiteral('')
     ),
-    styleNameExpression
+    cloneNode(styleNameExpression)
   );
 };

src/createObjectExpression.js

@@ -1,7 +1,12 @@
 // @flow
 
-import BabelTypes, {
-  ObjectExpression
+import {
+  booleanLiteral,
+  isAnyTypeAnnotation,
+  ObjectExpression,
+  objectExpression,
+  objectProperty,
+  stringLiteral
 } from '@babel/types';
 
 type InputObjectType = {
@@ -11,7 +16,7 @@ type InputObjectType = {
 /**
  * Creates an AST representation of an InputObjectType shape object.
  */
-const createObjectExpression = (t: BabelTypes, object: InputObjectType): ObjectExpression => {
+const createObjectExpression = (object: InputObjectType): ObjectExpression => {
   const properties = [];
 
   for (const name of Object.keys(object)) {
@@ -20,14 +25,14 @@ const createObjectExpression = (t: BabelTypes, object: InputObjectType): ObjectE
     let newValue;
 
     // eslint-disable-next-line no-empty
-    if (t.isAnyTypeAnnotation(value)) {
+    if (isAnyTypeAnnotation(value)) {
 
     } else if (typeof value === 'string') {
-      newValue = t.stringLiteral(value);
+      newValue = stringLiteral(value);
     } else if (typeof value === 'object') {
-      newValue = createObjectExpression(t, value);
+      newValue = createObjectExpression(value);
     } else if (typeof value === 'boolean') {
-      newValue = t.booleanLiteral(value);
+      newValue = booleanLiteral(value);
     } else if (typeof value === 'undefined') {
       // eslint-disable-next-line no-continue
       continue;
@@ -36,14 +41,14 @@ const createObjectExpression = (t: BabelTypes, object: InputObjectType): ObjectE
     }
 
     properties.push(
-      t.objectProperty(
-        t.stringLiteral(name),
+      objectProperty(
+        stringLiteral(name),
         newValue
       )
     );
   }
 
-  return t.objectExpression(properties);
+  return objectExpression(properties);
 };
 
 export default createObjectExpression;

src/createSpreadMapper.js

@@ -4,6 +4,7 @@ import {
   Expression,
   memberExpression,
   binaryExpression,
+  cloneNode,
   conditionalExpression,
   stringLiteral,
   logicalExpression,
@@ -45,14 +46,14 @@ const createSpreadMapper = (path: *, stats: *): { [destinationName: string]: Exp
           '+',
           result[destinationName],
           conditionalExpression(
-            spread.argument,
+            cloneNode(spread.argument),
             binaryExpression(
               '+',
               stringLiteral(' '),
               logicalExpression(
                 '||',
                 memberExpression(
-                  spread.argument,
+                  cloneNode(spread.argument),
                   identifier(destinationName),
                 ),
                 stringLiteral('')
@@ -63,11 +64,11 @@ const createSpreadMapper = (path: *, stats: *): { [destinationName: string]: Exp
         );
       } else {
         result[destinationName] = conditionalExpression(
-          spread.argument,
+          cloneNode(spread.argument),
           logicalExpression(
             '||',
             memberExpression(
-              spread.argument,
+              cloneNode(spread.argument),
               identifier(destinationName),
             ),
             stringLiteral('')

src/index.js

@@ -67,7 +67,7 @@ export default ({
         [
           t.variableDeclarator(
             filenameMap[filename].styleModuleImportMapIdentifier,
-            createObjectExpression(t, filenameMap[filename].styleModuleImportMap)
+            createObjectExpression(filenameMap[filename].styleModuleImportMap)
           )
         ]
       )
@@ -245,7 +245,6 @@ export default ({
               setupFileForRuntimeResolution(path, filename);
             }
             replaceJsxExpressionContainer(
-              t,
               path,
               attribute,
               destinationName,

src/replaceJsxExpressionContainer.js

@@ -1,14 +1,17 @@
 // @flow
 
-import BabelTypes, {
+import {
   binaryExpression,
+  callExpression,
+  cloneNode,
   Identifier,
   isJSXExpressionContainer,
   isStringLiteral,
   jSXAttribute,
   JSXAttribute,
   jSXExpressionContainer,
-  jSXIdentifier
+  jSXIdentifier,
+  stringLiteral
 } from '@babel/types';
 import type {
   GetClassNameOptionsType
@@ -18,7 +21,6 @@ import createObjectExpression from './createObjectExpression';
 import optionsDefaults from './schemas/optionsDefaults';
 
 export default (
-  t: BabelTypes,
   // eslint-disable-next-line flowtype/no-weak-types
   path: Object,
   sourceAttribute: JSXAttribute,
@@ -41,18 +43,18 @@ export default (
 
   const args = [
     expressionContainerValue.expression,
-    styleModuleImportMapIdentifier
+    cloneNode(styleModuleImportMapIdentifier)
   ];
 
   // Only provide options argument if the options are something other than default
   // This helps save a few bits in the generated user code
   if (options.handleMissingStyleName !== optionsDefaults.handleMissingStyleName ||
     options.autoResolveMultipleImports !== optionsDefaults.autoResolveMultipleImports) {
-    args.push(createObjectExpression(t, options));
+    args.push(createObjectExpression(options));
   }
 
-  const styleNameExpression = t.callExpression(
-    t.clone(importedHelperIndentifier),
+  const styleNameExpression = callExpression(
+    cloneNode(importedHelperIndentifier),
     args
   );
 
@@ -63,7 +65,7 @@ export default (
         jSXExpressionContainer(
           binaryExpression(
             '+',
-            t.stringLiteral(destinationAttribute.value.value + ' '),
+            stringLiteral(destinationAttribute.value.value + ' '),
             styleNameExpression
           )
         )

src/requireCssModule.js

@@ -124,7 +124,7 @@ export default (cssSourceFilePath: string, options: OptionsType): StyleModuleMap
     Values,
     LocalByDefault,
     ExtractImports,
-    new Scope({
+    Scope({
       generateScopedName
     }),
     new Parser({

test/fixtures/react-css-modules/applies extra plugins/bar.scss

@@ -1,7 +1,7 @@
 .a {
   background-color: #ffffff;
-  
-  &_modified {
-    background-color: #000000;
-  }
+}
+
+.a_modified {
+  background-color: #000000;
 }