feat: add postcss codemod (#893)

* feat: add postcss codemod

Author: montezume

codemods/custom-property-replacer/README.md

@@ -0,0 +1,27 @@
+#### Custom Property Replacer
+
+The purpose of this PostCSS plugin is to replace deprecated custom properties with the new custom properties. To use this plugin, follow the following instructions.
+
+First create a file called `postcss.config.js` in the root of your project.
+
+```js
+module.exports = {
+  plugins: [
+    require('@commercetools-frontend/ui-kit/codemods/custom-property-replacer')(
+      {
+        file: require.resolve(
+          '@commercetools-frontend/ui-kit/codemods/custom-property-replacer/v10/variable-mapping.json'
+        ),
+      }
+    ),
+  ],
+};
+```
+
+Note: if you are using SCSS instead of CSS, you may need to change the parser. Please check the `postcss-cli` [documentation](https://github.com/postcss/postcss-cli) for more information.
+
+Next, use the command line to run the code transformation.
+
+`npx postcss-cli **/*.css -r`
+
+This will replace your usage of deprecated custom properties with the new custom properties.

codemods/custom-property-replacer/custom-property-replacer.js

@@ -0,0 +1,35 @@
+const fs = require('fs');
+const postcss = require('postcss');
+const parser = require('postcss-value-parser');
+
+module.exports = postcss.plugin('postcss-var-replacer', opts => {
+  let variables;
+
+  if (opts && opts.file) {
+    variables = JSON.parse(fs.readFileSync(opts.file));
+  }
+
+  if (!variables) {
+    throw new Error(
+      'postcss-var-replacer must be configured with the JSON file to use'
+    );
+  }
+
+  return css => {
+    css.walkDecls(decl => {
+      let variableFound = false;
+
+      const parsedValue = parser(decl.value);
+      parsedValue.walk(node => {
+        if (node.type === 'word' && variables[node.value]) {
+          variableFound = true;
+          // eslint-disable-next-line no-param-reassign
+          node.value = variables[node.value];
+        }
+      });
+      if (variableFound) {
+        decl.replaceWith(decl.clone({ value: parsedValue.toString() }));
+      }
+    });
+  };
+});

codemods/custom-property-replacer/custom-property-replacer.spec.js

@@ -0,0 +1,37 @@
+import path from 'path';
+import postcss from 'postcss';
+import plugin from '.';
+
+const processor = postcss([
+  plugin({ file: path.resolve(__dirname, './v10/variable-mapping.json') }),
+]);
+
+const process = input => processor.process(input).css;
+
+describe('custom-property-replacer', () => {
+  describe('with nested selectors', () => {
+    it('should replace known variables', () => {
+      expect(process('a { span { color: var(--color-green) }}')).toEqual(
+        'a { span { color: var(--color-primary) }}'
+      );
+    });
+  });
+  it('should replace known variables', () => {
+    expect(process('a { color: var(--color-green) }')).toEqual(
+      'a { color: var(--color-primary) }'
+    );
+  });
+  it('should ignore unknown variables', () => {
+    expect(process('a { color: var(--color-green-99) }')).toEqual(
+      'a { color: var(--color-green-99) }'
+    );
+  });
+
+  it('throws an error if the file option is not defined', () => {
+    expect(() => {
+      postcss(plugin());
+    }).toThrow(
+      'postcss-var-replacer must be configured with the JSON file to use'
+    );
+  });
+});

codemods/custom-property-replacer/index.js

@@ -0,0 +1,3 @@
+const customPropertyReplacer = require('./custom-property-replacer');
+
+module.exports = customPropertyReplacer;

codemods/custom-property-replacer/v10/variable-mapping.json

@@ -0,0 +1,46 @@
+{
+  "--color-green": "--color-primary",
+  "--color-green-25": "--color-primary-25",
+  "--color-green-40": "--color-primary-40",
+  "--color-green-85": "--color-primary-85",
+  "--color-green-95": "--color-primary-95",
+  "--color-navy": "--color-accent",
+  "--color-navy-30": "--color-accent-30",
+  "--color-navy-40": "--color-accent-40",
+  "--color-navy-95": "--color-accent-95",
+  "--color-navy-98": "--color-accent-98",
+  "--color-gray": "--color-neutral",
+  "--color-gray-60": "--color-neutral-60",
+  "--color-gray-90": "--color-neutral-90",
+  "--color-gray-95": "--color-neutral-95",
+  "--color-blue": "--color-info",
+  "--color-blue-85": "--color-info-95",
+  "--color-blue-95": "--color-info-95",
+  "--color-orange": "--color-warning",
+  "--color-orange-95": "--color-warning-95",
+  "--color-red": "--color-error",
+  "--color-red-95": "--color-error-95",
+  "--color-black": "--color-solid",
+  "--color-white": "--color-surface",
+  "--spacing-4": "--spacing-xs",
+  "--spacing-8": "--spacing-s",
+  "--spacing-16": "--spacing-m",
+  "--spacing-24": "--spacing-l",
+  "--spacing-32": "--spacing-xl",
+  "--background-color-input-pristine": "--background-color-for-input",
+  "--background-color-input-disabled": "--background-color-for-input-when-disabled",
+  "--background-color-input-hover": "--background-color-for-input-when-hovered",
+  "--background-color-input-selected": "--background-color-for-input-when-selected",
+  "--background-color-tag-pristine": "--background-color-for-tag",
+  "--background-color-tag-warning": "--background-color-for-tag-warning",
+  "--border-color-input-pristine": "--border-color-for-input",
+  "--border-color-input-focus": "--border-color-for-input-when-focused",
+  "--border-color-input-disabled": "--border-color-for-input-when-disabled",
+  "--border-color-input-readonly": "--border-color-for-input-when-readonly",
+  "--border-color-input-error": "--border-color-for-input-when-error",
+  "--border-color-input-warning": "--border-color-for-input-when-warning",
+  "--border-color-tag-pristine": "--border-color-for-tag",
+  "--border-color-tag-warning": "--border-color-for-tag-warning",
+  "--border-color-tag-focus": "--border-color-for-tag-when-focused",
+  "--border-color-tag-warning-hover": "--border-color-for-tag-warning"
+}