feat: added shorthand support

src/defaults.js

@@ -6,6 +6,8 @@
  * @property {boolean} [ignoreFunctions=true] - Wheter or not to ignore function.
  * @property {null|number|string|Array|object} [ignoreKeywords=null] - **DEPRECATED:** An ignored keywords config.
  * @property {number|string|RegExp|Array|object} [ignoreValues=null] - An ignored values config.
+ * @property {boolean} [expandShorthand=true] - Wheter or not to expand shorthand CSS properties.
+ * @property {boolean} [recurseLonghand=false] - Wheter or not to expand longhand CSS properties recursivly - this is only useful for the border property.
  * @property {string} [severity='error'] - Adjust severity of the rule, `'warning'` or `'error'` (default).
  * @property {null|string} [message=null] - A custom message when a rule is violated, interpolated with `${types}`, `${value}` and `${property}`.
  * @property {boolean} [disableFix=false] - Don't auto-fix if `--fix` option is applied.
@@ -20,6 +22,8 @@
  * @property {boolean} [ignoreFunctions=true] - Ignore function by default.
  * @property {null} [ignoreKeywords=null] - **DEPRECATED:** Forbid keywords by default.
  * @property {null} [ignoreValues=null] - Forbid values by default.
+ * @property {boolean} [expandShorthand=true] - Expand shorthand CSS properties.
+ * @property {boolean} [recurseLonghand=false] - Do not expand longhand properties recursivly - only useful for `border`.
  * @property {string} [severity='error'] - This rule's default severity is `'error'`.
  * @property {null} [message=null] - Use default message.
  * @property {null} [disableFix=false] - Don't auto-fix if `--fix` option is applied.
@@ -31,6 +35,8 @@ const defaults = {
   ignoreFunctions: true,
   ignoreKeywords: null,
   ignoreValues: null,
+  expandShorthand: true,
+  recurseLonghand: false,
   severity: 'error',
   message: null,
   disableFix: false,

src/index.js

@@ -1,4 +1,5 @@
 import stylelint from 'stylelint'
+import shortCSS from 'shortcss'
 
 import {
   validProperties, validOptions, expected, getTypes, getIgnoredKeywords, getIgnoredValues, getAutoFixFunc,
@@ -106,7 +107,7 @@ const ruleFunction = (properties, options, context = {}) => (root, result) => {
     ...options,
   }
   const {
-    ignoreVariables, ignoreFunctions, ignoreKeywords, ignoreValues, message, disableFix, autoFixFunc,
+    ignoreVariables, ignoreFunctions, ignoreKeywords, ignoreValues, message, disableFix, autoFixFunc, expandShorthand, recurseLonghand,
   } = config
   const autoFixFuncNormalized = getAutoFixFunc(autoFixFunc)
   const reKeywords = ignoreKeywords ? {} : null
@@ -122,7 +123,36 @@ const ruleFunction = (properties, options, context = {}) => (root, result) => {
     }
 
     // walk through all declarations filtered by configured properties
-    root.walkDecls(propFilter, lintDeclStrictValue)
+    root.walkDecls(filterDesls)
+
+    /**
+     * Filter declarations for matching properties and expand shorthand properties.
+     *
+     * @callback
+     * @param {object} node - A Declaration-Node from PostCSS AST-Parser.
+     */
+    function filterDesls(node) {
+      const { value: originalValue, prop: originalProp } = node
+
+      // skip variable declarations
+      if (reSkipProp.test(originalProp)) return
+
+      if (originalProp === propFilter || (propFilter instanceof RegExp && propFilter.test(originalProp))) {
+        lintDeclStrictValue(node)
+      } else if (expandShorthand && shortCSS.isShorthand(originalProp)) {
+        const expandedProps = shortCSS.expand(originalProp, originalValue, recurseLonghand)
+
+        Object.keys(expandedProps).forEach((prop) => {
+          const value = expandedProps[prop]
+
+          if (prop === propFilter || (propFilter instanceof RegExp && propFilter.test(prop))) {
+            const { raws } = node
+
+            lintDeclStrictValue(node.clone({ value, prop, raws }))
+          }
+        })
+      }
+    }
 
     /**
      * Lint usages of declarations values againts, variables, functions
@@ -134,9 +164,6 @@ const ruleFunction = (properties, options, context = {}) => (root, result) => {
     function lintDeclStrictValue(node) {
       const { value, prop } = node
 
-      // skip variable declarations
-      if (reSkipProp.test(prop)) return
-
       // falsify everything by default
       let validVar = false
       let validFunc = false