Building AMP website with Parcel

I have recently updated my personal website to use AMP framework. After I finished the transformation and started optimizing it, one of the main warnings I was getting from the audit tool in Chrome was about my assets not being minified.

I didn’t want to use popular tools like Webpack or Gulp since it would be a waste of time to configure them for such a small project. That is why I decided to use Parcel which works out of the box without any configuration.

However, Parcel runs a lot of tools under the hood that do not only remove whitespace characters but also change the actual code. This is not really desirable since an AMP website is not valid unless AMP CSS boilerplate is present without any modifications (except for whitespace characters). And invalid AMP websites are not cached in Google search results so you lose the main benefit of AMP.

Parcel uses htmlnano to minify HTML files. To prevent unwanted changes in HTML attributes, you need to create .htmlnanorc file in the root folder of your project with the following content:

{
  "collapseBooleanAttributes": {
      "amphtml": true
  }
}

And since htmlnano uses cssnano to minify the content of <style> tags, some CSS rules are also modified. In order to avoid this, create cssnano.config.js file with the following content:

module.exports = {
  preset: [
    'default',
    {
      minifySelectors: false,
      normalizeTimingFunctions: false
    }
  ]
};

If you now build your website with Parcel and run the AMP Validator, there will no longer be an error saying that AMP CSS boilerplate is missing.