feat(purgecss): add PurgeCSS PostCSS plugins for production

packages/css-dev-tools/package.json

@@ -2,6 +2,7 @@
   "name": "@mozaic-ds/css-dev-tools",
   "version": "1.18.0",
   "dependencies": {
+    "@fullhuman/postcss-purgecss": "^4.0.3",
     "@mozaic-ds/configuration-manager": "^1.13.1",
     "@mozaic-ds/postcss-media-queries-packer-on-demand": "^1.14.0",
     "@mozaic-ds/postcss-prepend": "^1.14.0",

packages/css-dev-tools/postcssPluginConfig.js

@@ -6,6 +6,7 @@ const stylelint = require('stylelint')
 const base64 = require('postcss-base64')
 const reporter = require('postcss-reporter')
 const cssnano = require('cssnano')
+const purgecss = require('@fullhuman/postcss-purgecss')
 const mqpackerondemand = require('@mozaic-ds/postcss-media-queries-packer-on-demand')
 const cssprepend = require('@mozaic-ds/postcss-prepend')
 const CM = require('@mozaic-ds/configuration-manager')
@@ -74,4 +75,8 @@ if (CM.getKey('autoprefixer.disabled')) {
   productionPlugins.pop()
 }
 
+if(CM.getKey('purgecss')) {
+  productionPlugins.push(purgecss(CM.getKey('purgecss')));
+}
+
 module.exports = MOZAIC_ENV === 'production' ? productionPlugins : plugins

src/docs/GetStarted/Developers/Configuration/index.mdx

@@ -155,7 +155,7 @@ Allow you to disabled Mozaic built-in config.
 
 **Example: **
 ```js
-  disbaled: true | false
+  disabled: true | false
 ```
 
 `browserslist` is used to define custom browsers to use for SCSS compilation. 
@@ -171,4 +171,20 @@ Allow you to disabled Mozaic built-in config.
 module.exports = {
 	browserslist: ['last 2 versions', 'firefox >= 45', 'IE >= 11']
 }
-```
+```
+
+## PurgeCSS option: 
+
+### `purgecss` : Object
+
+Allow you to clean up CSS from your sources files.
+**Default values: null**
+
+**Example: **
+```js
+purgecss: {
+  content: ['./src/**/*.html', './src/**/*.js', './src/**/*.vue']
+}
+```
+
+To see all available options, referer to the [official documentation of the PostCSS plugin](https://purgecss.com/configuration.html#options)