@davidwells/config-postcss 0.1.5 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@davidwells/config-postcss",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "description": "Reusable postcss config",
   "author": "DavidWells",
   "license": "MIT",
@@ -22,41 +22,30 @@
   ],
   "dependencies": {
     "@davidwells/postcss-math": "^1.0.3",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.4.20",
     "color": "^3.1.3",
-    "cssnano": "^4.1.10",
+    "css-color-function": "^1.3.3",
+    "cssnano": "^7.0.6",
     "dedent": "^0.7.0",
     "globby": "^11.0.1",
     "is-color": "^1.0.2",
     "is-css-unit": "^1.0.0",
     "kleur": "^4.1.3",
-    "pleeease-filters": "^4.0.0",
-    "postcss": "^8.3.0",
-    "postcss-calc": "^7.0.5",
-    "postcss-cli": "^8.3.1",
-    "postcss-color-function": "^4.1.0",
-    "postcss-combine-media-query": "^1.0.1",
-    "postcss-comment": "^2.0.0",
-    "postcss-custom-media": "^7.0.8",
-    "postcss-custom-properties": "^10.0.0",
-    "postcss-custom-selectors": "^5.1.2",
-    "postcss-extract-media-query": "^2.0.0",
-    "postcss-flexbugs-fixes": "^4.2.1",
-    "postcss-functions": "^3.0.0",
-    "postcss-import": "^12.0.1",
-    "postcss-initial": "3.0.2",
-    "postcss-media-minmax": "^4.0.0",
-    "postcss-mixins": "6.2.3",
-    "postcss-nested": "4.2.3",
-    "postcss-nested-ancestors": "^2.0.0",
-    "postcss-nesting": "^7.0.1",
-    "postcss-preset-env": "^7.4.1",
-    "postcss-reporter": "^7.0.2",
-    "postcss-selector-matches": "^4.0.0",
-    "postcss-selector-not": "^4.0.0",
-    "postcss-simple-vars": "5.0.2",
-    "postcss-sort-media-queries": "^2.3.15",
-    "postcss-sorting": "^6.0.0",
+    "postcss": "^8.4.47",
+    "postcss-calc": "^10.1.0",
+    "postcss-custom-media": "^11.0.5",
+    "postcss-custom-properties": "^14.0.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-functions": "^4.0.2",
+    "postcss-import": "^16.1.0",
+    "postcss-media-minmax": "^5.0.0",
+    "postcss-mixins": "^11.0.3",
+    "postcss-nested": "^7.0.2",
+    "postcss-nested-ancestors": "^3.0.0",
+    "postcss-nesting": "^13.0.1",
+    "postcss-preset-env": "^7.8.3",
+    "postcss-simple-vars": "^6.0.3",
+    "postcss-value-parser": "^4.2.0",
     "rgb-hex": "^3.0.0",
     "safe-chalk": "^1.0.0",
     "validate-color": "^2.1.1"

package/src/getPostCSSPlugins.js

@@ -46,8 +46,8 @@ module.exports = function getPostCSSPlugins({ variables, mixins, functions, env
     'postcss-functions': {
       functions: functions
     },
-    /* https://github.com/postcss/postcss-color-function */
-    'postcss-color-function': {},
+    /* Inline PostCSS 8 port of postcss-color-function (legacy color() adjuster syntax) */
+    '@davidwells/config-postcss/src/plugins/color-function': {},
     /* https://github.com/postcss/postcss-custom-properties */
     'postcss-custom-properties': {},
     /* https://github.com/postcss/postcss-custom-media */
@@ -64,12 +64,6 @@ module.exports = function getPostCSSPlugins({ variables, mixins, functions, env
     'postcss-nesting': {},
     /* https://github.com/postcss/postcss-nested */
     'postcss-nested': {},
-    /* https://github.com/iamvdo/pleeease-filters */
-    'pleeease-filters': {},
-    /* https://github.com/postcss/postcss-selector-matches */
-    'postcss-selector-matches': {},
-    /* https://github.com/postcss/postcss-selector-not */
-    'postcss-selector-not': {},
     /* https://github.com/luisrudge/postcss-flexbugs-fixes */
     'postcss-flexbugs-fixes': {},
     // /* https://github.com/maximkoretskiy/postcss-initial */

package/src/plugins/color-function.js

@@ -0,0 +1,41 @@
+// PostCSS 8 port of postcss-color-function (abandoned, postcss 6).
+// Transforms the legacy color() adjuster syntax, e.g. color(#0685c4 lightness(40%)),
+// into a computed rgb()/hex value via the css-color-function library.
+const parser = require('postcss-value-parser')
+const colorFn = require('css-color-function')
+
+function transformColor(string) {
+  return parser(string).walk((node) => {
+    if (node.type !== 'function' || node.value !== 'color') {
+      return
+    }
+    node.value = colorFn.convert(parser.stringify(node))
+    node.type = 'word'
+  }).toString()
+}
+
+module.exports = (opts = {}) => {
+  const preserveCustomProps = opts.preserveCustomProps !== false
+  return {
+    postcssPlugin: 'postcss-color-function',
+    Declaration(decl) {
+      if (!decl.value || decl.value.indexOf('color(') === -1) {
+        return
+      }
+      // Can't resolve color() that references a var() at build time
+      if (decl.value.indexOf('var(') !== -1) {
+        if (!preserveCustomProps) {
+          decl.remove()
+        }
+        return
+      }
+      try {
+        decl.value = transformColor(decl.value)
+      } catch (error) {
+        // Leave the value untouched if it can't be parsed/converted
+        console.warn('postcss-color-function: could not convert', decl.value, error.message)
+      }
+    },
+  }
+}
+module.exports.postcss = true

package/src/print.js

@@ -12,15 +12,18 @@ function printVariables(variables = {}) {
   if (!variables) {
     return
   }
-  console.log('CSS variables:')
+  console.log()
+  console.log(chalk.bold('CSS variables:'))
   Object.keys(variables).forEach((key) => {
     const val = variables[key]
     if (val && typeof val === 'string') {
       console.log(`$${key} - ${val}`)
     }
   })
-  console.log('Colors:')
+  console.log()
+  console.log(chalk.bold('Colors:'))
   printColors(variables)
+  console.log()
   console.log('👆 CSS variables usable via ${nameOfThing} in css files') // eslint-disable-line
 }
 

package/src/webpackLoaderOptionUtil.js

@@ -1,11 +1,10 @@
-/* https://github.com/zoubin/postcss-comment - Allow postcss to support inline comments. */
-const commentParser = require('postcss-comment')
-
 module.exports = function loaderOptions(postcssPlugins) {
   return (postcssLoaderOptions, { env, paths }) => {
     /* Hot reload modules */
     postcssLoaderOptions.map = env === 'development' ? { inline: true } : false
-    postcssLoaderOptions.parser = commentParser
+    /* Inline-comment parser, lazily required so consumers that don't use it
+       (e.g. Next.js) don't need postcss-comment installed. */
+    postcssLoaderOptions.parser = require('postcss-comment')
     postcssLoaderOptions.plugins = postcssPlugins
     return postcssLoaderOptions
   }