Convert SASS-style inline comments to CSS-style multiline comments.

[jesstelford]

Following on from the conversion of SASS -> CSS, this PR converts the SASS style inline comments to CSS style multiline comments.

Since this was the only reason we were using postcss-scss parser, it too has been removed.

---

I used this script to achieve the conversion:

#!/bin/bash

# Write a temporary postcss config for postcss to work
cat <<EOF > postcss.config.js
const spaceAtEndRegex = /\s$/;
const postCssInlineToMultilineComment = {
  postcssPlugin: 'postcss-inline-to-multiline-comment',
  Comment(node) {
    if (node.raws.inline && (!node.raws.right || !spaceAtEndRegex.test(node.raws.right))) {
      if (!node.raws.right) {
        node.raws.right = '';
      }
      node.raws.right += ' ';
    }
  },
}
module.exports = {
  // Need to understand SCSS inline comment syntax
  parser: 'postcss-scss',
  plugins: [
    postCssInlineToMultilineComment,
  ],
};
EOF

npx postcss-cli --yes postcss-cli -r --no-map --config="`pwd`" polaris-react/**/*.css

rm -f postcss.config.js  # Clean up temporary files

Then I confirmed it was successful with this script:

if [ -z "$1" ]; then echo "A filename is required:\n> $0 ./no-inline.css"; exit 1; fi;

# Write a temporary postcss config for cssnano to work
cat <<EOF > postcss.config.js
module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'lite',
    }),
  ],
};
EOF

yarn workspace @shopify/polaris add cssnano-preset-lite
yarn
yarn build --filter="@shopify/polaris"
cp polaris-react/build/esm/styles.css "$1" # Move out of ignored directories
yarn prettier -w "$1" # Pre-format to normalize whitespace
npx postcss-cli --yes postcss-cli -r --no-map --config="`pwd`" "$1" # cssnano removes more whitespace prettier doesn't
yarn prettier -w "$1" # Format again to get back into un-minified version
rm postcss.config.js # Clean up temporary files
yarn workspace @shopify/polaris remove cssnano-preset-lite

Run like this:

git checkout multiline-comments
./go.sh ./no-inline.css
git checkout main
./go.sh ./inline.css
git checkout -
git diff --histogram --no-index inline.css no-inline.css
# Should be an empty diff