Skip to content
This repository has been archived by the owner on Mar 18, 2019. It is now read-only.

Commit

Permalink
Add a warning for custom property sets that are going to be removed +…
Browse files Browse the repository at this point in the history
… an option to hide the warning
  • Loading branch information
MoOx committed Jul 5, 2017
1 parent cc7c864 commit db0f0fa
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 4 deletions.
7 changes: 7 additions & 0 deletions docs/content/usage.md
Expand Up @@ -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
Expand Down
59 changes: 59 additions & 0 deletions 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))
})
8 changes: 8 additions & 0 deletions src/index.js
Expand Up @@ -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
Expand Down Expand Up @@ -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 ||
Expand Down
37 changes: 37 additions & 0 deletions 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
6 changes: 2 additions & 4 deletions src/warn-for-duplicates.js
Expand Up @@ -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
Expand Down

0 comments on commit db0f0fa

Please sign in to comment.