Added: cssnext will now warn you when you have duplicates plugins

Author: MoOx

CHANGELOG.md

@@ -1,3 +1,11 @@
+- Added: cssnext will now warn you when you have duplicates plugins.
+  This is a really common mistake, people include plugins that are already
+  included in cssnext and maybe sometimes in an inaccurate position.
+  **Most tutorial on the internet are wrong (probably 99%)
+  and show provide duplicates in their examples.
+  (eg: autoprefixer + cssnext - but cssnext already includes autoprefixer).**
+  In order to fix this, here is a warning. You are welcome.
+  [Read more about this issue](https://github.com/postcss/postcss/issues/764)
 - Added: ``rem`` will now adjust its behavior according to browser option
   (IE 9 and IE 10 will only have ``px`` in some places, where rem support is
   buggy, per caniuse notes)

docs/content/usage.md

@@ -61,6 +61,15 @@ var output = cssnext(input, {
 })
 ```
 
+## `warnForDuplicates`
+
+_(default: true)_
+
+This option should be left with its default value, unless you really know what
+you are doing.
+Most tutorial on the internet are wrong and show provide duplicate
+(eg: autoprefixer + cssnext - but cssnext already includes autoprefixer).
+
 **To know all available options, please check corresponding postcss plugin by
 browsing the
 [feature mapping](https://github.com/MoOx/postcss-cssnext/blob/master/src/features.js).**

src/__tests__/option.warnForDuplicates.js

@@ -0,0 +1,92 @@
+import tape from "tape"
+
+import postcss from "postcss"
+import autoprefixer from "autoprefixer"
+import cssnext from ".."
+import { spotted } from "../warn-for-duplicates"
+
+const reportFail = (t) => (error) => {
+  console.log(error)
+  t.fail()
+}
+
+tape("cssnext warnForDuplicates option", (t) => {
+  const messages = []
+  spotted.length = 0 // reset spotted plugins
+  const instance = postcss([
+    cssnext({
+      console: { log: (msg) => messages.push(msg) }
+    }),
+  ])
+
+  instance.process("body{}").then(() => {
+    t.equal(
+      messages.length,
+      0,
+      "should not add warning if no duplicate"
+    )
+    t.end()
+  }, reportFail(t))
+})
+
+tape("cssnext warnForDuplicates option", (t) => {
+  const messages = []
+  spotted.length = 0 // reset spotted plugins
+  const instance = postcss([
+    autoprefixer(),
+    cssnext({
+      console: { log: (msg) => messages.push(msg) }
+    }),
+  ])
+
+  instance.process("body{}").then(() => {
+    t.ok(
+      messages[0].indexOf("Warning: postcss-cssnext found a duplicate plugin")
+      > -1,
+      "should add warning if there are duplicates before"
+    )
+    t.end()
+  }, reportFail(t))
+})
+
+tape("cssnext warnForDuplicates option", (t) => {
+  const messages = []
+  spotted.length = 0 // reset spotted plugins
+  const instance = postcss([
+    autoprefixer(),
+    cssnext({
+      warnForDuplicates: false,
+      console: { log: (msg) => messages.push(msg) }
+    }),
+  ])
+
+  instance.process("body{}").then(() => {
+    t.equal(
+      messages.length,
+      0,
+      "should NOT add warning if there are duplicates but !warnForDuplicates"
+    )
+    t.end()
+  }, reportFail(t))
+})
+
+tape("cssnext warnForDuplicates option", (t) => {
+  const messages = []
+  spotted.length = 0 // reset spotted plugins
+  const instance = postcss([
+    cssnext({
+      console: { log: (msg) => messages.push(msg) }
+    }),
+    autoprefixer(),
+  ])
+
+  instance.process("body{}").then(() => {
+    t.ok(
+      messages.length &&
+      messages[0].indexOf("Warning: postcss-cssnext found a duplicate plugin")
+      > -1,
+      "should add warning if there are duplicates after"
+    )
+    t.end()
+  }, reportFail(t))
+})

src/index.js

@@ -3,9 +3,12 @@ import { isSupported } from "caniuse-api"
 
 import libraryFeatures from "./features"
 import featuresActivationMap from "./features-activation-map"
+import warnForDuplicates from "./warn-for-duplicates"
 
 const plugin = postcss.plugin("postcss-cssnext", (options) => {
   options = {
+    console: console,
+    warnForDuplicates: true,
     features: {},
     // options.browsers is deliberately undefined by default to inherit
     // browserslist default behavior
@@ -69,6 +72,13 @@ const plugin = postcss.plugin("postcss-cssnext", (options) => {
     }
   })
 
+  if (options.warnForDuplicates) {
+    processor.use(warnForDuplicates({
+      keys: Object.keys(libraryFeatures),
+      console: options.console
+    }))
+  }
+
   return processor
 })
 

src/warn-for-duplicates.js

@@ -0,0 +1,52 @@
+import postcss from "postcss"
+import color from "chalk"
+
+const msg = (name) => (
+  `Warning: postcss-cssnext found a duplicate plugin ('${ name }') ` +
+  `in your postcss plugins. ` +
+  `This might be inefficient. You should remove '${ name }' of you postcss ` +
+  `plugin list since it's already included by postcss-cssnext.`
+)
+
+let shouldGlobalWarn = true
+const globalWarning = (
+  `Note: If, for a really specific reason, postcss-cssnext warnings are ` +
+  `irrelevant for your use case, and you really know what you are doing, ` +
+  `you can disable this warnings by setting  'warnForDuplicates' option of ` +
+  `postcss-cssnext to 'false'.`
+)
+export const spotted = []
+
+const warnForDuplicates = postcss.plugin(
+  "postcss-warn-for-duplicates",
+  (options) => {
+    return (style, result) => {
+      // https://github.com/postcss/postcss/issues/768
+      const { keys, console: messenger } = options
+      const pluginNames = []
+      result.processor.plugins.forEach((plugin) => {
+        const name = plugin.postcssPlugin
+        if (
+          pluginNames.indexOf(name) > -1 &&
+          // warn for cssnext plugins only
+          keys.indexOf(name) > -1 &&
+          // show warning once
+          spotted.indexOf(name) === -1
+        ) {
+          messenger.log(color.yellow.bold(msg(name)))
+          spotted.push(name)
+        }
+        else {
+          pluginNames.push(name)
+        }
+      })
+
+      if (spotted.length > 0 && shouldGlobalWarn) {
+        shouldGlobalWarn = false
+        messenger.log(globalWarning)
+      }
+    }
+  }
+)
+
+export default warnForDuplicates