Add a warning for custom property sets that are going to be removed + an option to hide the warning

Author: MoOx

docs/content/usage.md

@@ -84,6 +84,13 @@ 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._
 
+## `warnForDeprecations`
+
+_(default: true)_
+
+This option should be left with its default value, unless you are aware of the
+risk and plan to handle the situation.  
+
 ---
 
 **To know all available options, please check corresponding postcss plugin by

src/__tests__/option.warnForDeprecations.js

@@ -0,0 +1,59 @@
+import tape from "tape"
+
+import postcss from "postcss"
+import cssnext from ".."
+import { resetWarning } from "../warn-for-deprecations"
+
+const reportFail = (t) => (error) => {
+  console.log(error)
+  t.fail()
+}
+
+tape("cssnext warnForDeprecation option", (t) => {
+  const messages = []
+  resetWarning()
+  const instance = postcss([
+    cssnext({
+      console: { log: (msg) => messages.push(msg) },
+    }),
+  ])
+
+  instance.process("body{}").then(() => {
+    t.equal(
+      messages.length,
+      0,
+      "should not add warning there is no deprecated stuff"
+    )
+    t.end()
+  }, reportFail(t))
+})
+
+tape("cssnext warnForDeprecation option", (t) => {
+  const messages = []
+  resetWarning()
+  const instance = postcss([
+    cssnext({
+      console: { log: (msg) => messages.push(msg) },
+    }),
+  ])
+
+  instance.process(`
+:root {
+  --toolbar-theme: {
+    border: 1px solid green;
+  };
+}
+.Toolbar {
+  @apply --toolbar-theme;
+  @apply --toolbar-theme;
+}
+  `)
+  .then(() => {
+    t.equal(
+      messages.length,
+      1,
+      "should add a single warning if there are deprecated stuff"
+    )
+    t.end()
+  }, reportFail(t))
+})

src/index.js

@@ -4,11 +4,13 @@ import { isSupported } from "caniuse-api"
 import libraryFeatures from "./features"
 import featuresActivationMap from "./features-activation-map"
 import warnForDuplicates from "./warn-for-duplicates"
+import warnForDeprecations from "./warn-for-deprecations"
 
 const plugin = postcss.plugin("postcss-cssnext", (options) => {
   options = {
     console: console,
     warnForDuplicates: true,
+    warnForDeprecations: true,
     features: {},
     // options.browsers is deliberately undefined by default to inherit
     // browserslist default behavior
@@ -41,6 +43,12 @@ const plugin = postcss.plugin("postcss-cssnext", (options) => {
 
   const processor = postcss()
 
+  if (options.warnForDeprecations) {
+    processor.use(warnForDeprecations({
+      console: options.console,
+    }))
+  }
+
   // features
   Object.keys(libraryFeatures).forEach(key => {
     // feature is auto enabled if: not disable && (enabled || no data yet ||

src/warn-for-deprecations.js

@@ -0,0 +1,37 @@
+import postcss from "postcss"
+import color from "chalk"
+
+let shouldGlobalWarn = true
+export const resetWarning = () => shouldGlobalWarn = true
+
+const warnForDeprecations = postcss.plugin(
+  "postcss-cssnext-warn-for-deprecations",
+  ({ console: messenger }) => {
+    return (style) => {
+        // warn for removed @apply
+      style.walkAtRules("apply", () => {
+        if (shouldGlobalWarn) {
+          shouldGlobalWarn = false
+          messenger.log(
+color.yellow.bold(
+  "You are using @apply rule and custom property sets. \n" +
+
+  "This feature won't be included in next the major release "+
+  "of postcss-cssnext. \n"
+) +
+
+color.grey(
+  "This most likely won't get any more support from browser vendors as the " +
+  "spec is yet considered deprecated and alternative solutions are being "+
+  "discussed. \n"
+) +
+
+  "Read more about the reason here https://github.com/pascalduez/postcss-apply."
+          )
+        }
+      })
+    }
+  }
+)
+
+export default warnForDeprecations

src/warn-for-duplicates.js

@@ -18,11 +18,9 @@ const globalWarning = (
 export const spotted = []
 
 const warnForDuplicates = postcss.plugin(
-  "postcss-warn-for-duplicates",
-  (options) => {
+  "postcss-cssnext-warn-for-duplicates",
+  ({ keys, console: messenger }) => {
     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