@thejaredwilcurt/csslop 0.0.25 → 0.0.27

package/src/declarations/lookup.js

@@ -1,9 +1,42 @@
 /**
- * @file Builds keyed lookups over a rule's declarations, so the shorthand
- * passes can ask which properties a rule sets without rescanning its
- * declarations once per property they are interested in.
+ * @file Builds keyed lookups and normalized views over a rule's declarations,
+ * so the shorthand passes can ask which properties a rule sets, and what each
+ * of them minifies to, without rescanning its declarations once per property
+ * they are interested in.
  */
 
+import { minifyValue } from '../value/minify.js';
+
+/**
+ * @typedef  {object}  DeclarationDescription
+ * @property {object}  declaration             The original declaration object.
+ * @property {number}  index                   The declaration's index within the rule.
+ * @property {string}  property                The declared property name.
+ * @property {string}  text                    The minified `property:value` text.
+ * @property {string}  value                   The minified value, without any `!important`.
+ * @property {boolean} isImportant             Whether the declaration carries `!important`.
+ */
+
+/**
+ * Describes a declaration through its minified value, which is the form the
+ * shorthand passes compare, rewrite, and measure the output length of.
+ *
+ * @param  {object}                 declaration  The CSS declaration object.
+ * @param  {number}                 index        The declaration's index within the rule.
+ * @return {DeclarationDescription}              The normalized view of the declaration.
+ */
+function describeDeclaration (declaration, index) {
+  const minifiedValue = minifyValue(declaration);
+  return {
+    declaration,
+    index,
+    property: declaration.property,
+    text: declaration.property + ':' + minifiedValue,
+    value: minifiedValue.replace('!important', '').trim(),
+    isImportant: minifiedValue.includes('!important')
+  };
+}
+
 /**
  * Indexes the first declaration of each property. The first occurrence is the
  * one a linear search would return, so this stands in for repeated scans that
@@ -40,5 +73,6 @@ function collectDeclaredProperties (declarations) {
 
 export {
   collectDeclaredProperties,
+  describeDeclaration,
   indexFirstDeclarationByProperty
 };

package/src/declarations/merge.js

@@ -22,6 +22,39 @@ import { buildShorthandValue } from './shorthand-values.js';
  */
 const MIXED_IMPORTANT_SHORTHANDS = new Set(['margin', 'padding', 'inset', 'position-try']);
 
+/**
+ * The shorthands that may be built from only some of their longhands, and the
+ * longhands each of them cannot do without. Every listed group has to be
+ * satisfied by at least one of the properties it holds, so `font` needs both a
+ * size and a family, while `background` needs a color or an image.
+ *
+ * @type {{[key: string]: Array}}
+ */
+const PARTIAL_MERGE_REQUIREMENTS = {
+  animation: [['animation-name'], ['animation-duration']],
+  background: [['background-color', 'background-image']],
+  'background-position': [['background-position-x'], ['background-position-y']],
+  'border-image': [['border-image-source']],
+  font: [['font-size'], ['font-family']],
+  mask: [['mask-image']]
+};
+
+/**
+ * Checks whether a rule declares enough of a shorthand's longhands for the
+ * shorthand to be built from the subset it does declare.
+ *
+ * @param  {Array}   requirementGroups   The groups of interchangeable longhands the shorthand requires.
+ * @param  {Set}     declaredProperties  The property names the rule currently declares.
+ * @return {boolean}                     Whether every requirement group is satisfied.
+ */
+function meetsPartialMergeRequirements (requirementGroups, declaredProperties) {
+  return requirementGroups.every((requiredProperties) => {
+    return requiredProperties.some((property) => {
+      return declaredProperties.has(property);
+    });
+  });
+}
+
 /**
  * Determines which longhand properties are present and eligible for merging into a given shorthand. Returns null when the required longhands for the shorthand are not all available.
  *
@@ -37,35 +70,9 @@ function getMergeProps (shorthand, longhands, declaredProperties) {
   if (presentLonghands.length === 0) {
     return null;
   }
-  if (shorthand === 'font') {
-    const hasRequiredFontProps = declaredProperties.has('font-size') && declaredProperties.has('font-family');
-    if (hasRequiredFontProps) {
-      return presentLonghands;
-    }
-    return null;
-  }
-  if (shorthand === 'background-position') {
-    const hasBothAxes = declaredProperties.has('background-position-x') && declaredProperties.has('background-position-y');
-    if (hasBothAxes) {
-      return presentLonghands;
-    }
-    return null;
-  }
-  if (shorthand === 'background') {
-    const hasBackgroundProp = declaredProperties.has('background-color') || declaredProperties.has('background-image');
-    if (hasBackgroundProp) {
-      return presentLonghands;
-    }
-    return null;
-  }
-  if (shorthand === 'mask') {
-    if (declaredProperties.has('mask-image')) {
-      return presentLonghands;
-    }
-    return null;
-  }
-  if (shorthand === 'border-image') {
-    if (declaredProperties.has('border-image-source')) {
+  const requirementGroups = PARTIAL_MERGE_REQUIREMENTS[shorthand];
+  if (requirementGroups) {
+    if (meetsPartialMergeRequirements(requirementGroups, declaredProperties)) {
       return presentLonghands;
     }
     return null;
@@ -315,6 +322,7 @@ function tryMergeToShorthand (properties, declarations, shorthandName = '', cont
 }
 
 export {
+  canMergeVarValue,
   getMergeProps,
   tryMergeToShorthand
 };

package/src/declarations/order.js

@@ -6,26 +6,37 @@ import {
   shorthandMap,
   shorthandOverrideMap
 } from './config.js';
+import { collectDeclaredProperties } from './lookup.js';
 
 /**
- * Pairs of properties where the first must be emitted before the second, because
- * the first resets the second and a merged shorthand is appended after the
- * longhands it was built from.
+ * Builds the pairs of properties where the first has to be emitted before the
+ * second, because the first resets the second while a merged shorthand is
+ * appended after the longhands it was built from. Every property a shorthand
+ * resets but cannot express has to be restated after that shorthand, and a
+ * `margin` built from a mixed `!important` group leaves its important longhands
+ * behind for the same reason.
+ *
+ * @return {Array} The property pairs, each as a shorthand followed by the property it resets.
+ */
+function buildRequiredPropertyOrder () {
+  const orderedPairs = [];
+  for (const [shorthandProperty, resetProperties] of Object.entries(shorthandOverrideMap)) {
+    for (const resetProperty of resetProperties) {
+      orderedPairs.push([shorthandProperty, resetProperty]);
+    }
+  }
+  for (const longhandProperty of shorthandMap.margin) {
+    orderedPairs.push(['margin', longhandProperty]);
+  }
+  return orderedPairs;
+}
+
+/**
+ * The property pairs whose relative order the output has to correct.
  *
  * @type {Array}
  */
-const REQUIRED_PROPERTY_ORDER = [
-  ['border', 'border-image'],
-  ['font', 'font-feature-settings'],
-  ['font', 'font-variant-ligatures'],
-  ['font', 'font-kerning'],
-  ['font', 'font-variation-settings'],
-  ['mask', 'mask-border'],
-  ['margin', 'margin-top'],
-  ['margin', 'margin-right'],
-  ['margin', 'margin-bottom'],
-  ['margin', 'margin-left']
-];
+const REQUIRED_PROPERTY_ORDER = buildRequiredPropertyOrder();
 
 /**
  * Reorders declarations so that shorthands appear before any related longhands they would override, preventing cascade issues in the minified output.
@@ -40,8 +51,16 @@ function orderDeclarations (declarations) {
       return declaration?.property === property;
     });
   };
+  // Most rules declare neither half of any of these pairs, so the properties a
+  // rule does declare are gathered once rather than scanned for per pair.
+  // Reordering the declarations never changes which properties are declared,
+  // so the set stays accurate as the pairs are applied.
+  const declaredProperties = collectDeclaredProperties(ordered);
 
   for (const [property, followingProperty] of REQUIRED_PROPERTY_ORDER) {
+    if (!declaredProperties.has(property) || !declaredProperties.has(followingProperty)) {
+      continue;
+    }
     const fromIndex = findPropertyIndex(property);
     const toIndex = findPropertyIndex(followingProperty);
     if (fromIndex === -1 || toIndex === -1 || fromIndex < toIndex) {

package/src/declarations/process.js

@@ -12,6 +12,7 @@ import {
   shorthandMap
 } from './config.js';
 import { hoistCssWideKeywordsIntoShorthands } from './css-wide-keywords.js';
+import { foldLonghandOverridesIntoShorthands } from './fold.js';
 import {
   collectDeclaredProperties,
   indexFirstDeclarationByProperty
@@ -24,6 +25,7 @@ import {
   getOverriddenLonghands,
   orderDeclarations
 } from './order.js';
+import { resetsPropertyDeclaredElsewhere } from './reset-hazards.js';
 
 /**
  * Shorthands that keep their non-important longhands in the output, so a mixed
@@ -347,6 +349,12 @@ function mergeLonghandsIntoShorthands (declarations, context) {
       if (declaredProperties.has(shorthand)) {
         continue;
       }
+      // Assembling a shorthand also resets the properties it cannot express, so
+      // a rule only collapses into one when nothing else in the stylesheet
+      // relies on a value that reset would discard.
+      if (resetsPropertyDeclaredElsewhere(shorthand, declaredProperties, context)) {
+        continue;
+      }
 
       const mergeableProperties = getMergeProps(shorthand, longhands, declaredProperties);
       if (!mergeableProperties) {
@@ -396,8 +404,9 @@ function processDeclarations (declarations, context) {
   result = removeLonghandsOverriddenByShorthands(result);
   result = absorbBackgroundLonghandsIntoShorthand(result);
   result = mergeLonghandsIntoShorthands(result, context);
-  result = hoistCssWideKeywordsIntoShorthands(result);
-  result = collapseBorderTrioWithPerEdgeColor(result);
+  result = foldLonghandOverridesIntoShorthands(result, context);
+  result = hoistCssWideKeywordsIntoShorthands(result, context);
+  result = collapseBorderTrioWithPerEdgeColor(result, context);
 
   return orderDeclarations(result);
 }

package/src/declarations/reset-hazards.js

@@ -0,0 +1,108 @@
+/**
+ * @file Tracks the properties a shorthand resets without being able to express them, so that assembling a shorthand out of longhands never cancels a value another rule of the stylesheet set.
+ */
+
+import {
+  getOverridesOf,
+  shorthandOverrideMap
+} from './config.js';
+
+/**
+ * Collects every property that some shorthand resets without being able to
+ * express it, such as `border-image` for `border`. Only these properties can
+ * lose their value to a newly assembled shorthand, so only these are worth
+ * tracking across the stylesheet.
+ *
+ * @return {Set} The property names a shorthand resets but cannot express.
+ */
+function collectResettableProperties () {
+  const resettableProperties = new Set();
+  for (const resetProperties of Object.values(shorthandOverrideMap)) {
+    for (const property of resetProperties) {
+      resettableProperties.add(property);
+    }
+  }
+  return resettableProperties;
+}
+
+/**
+ * The properties a shorthand resets but cannot express. The shorthand tables
+ * never change, so the set is built once.
+ *
+ * @type {Set<string>}
+ */
+const RESETTABLE_PROPERTIES = collectResettableProperties();
+
+/**
+ * Collects the rules nested inside a rule. The parser stores the children of an
+ * at-rule as a list of rules, and the children of a style rule that uses CSS
+ * nesting as declarations that carry rules of their own.
+ *
+ * @param  {object} rule  The AST rule node to look inside.
+ * @return {Array}        The rule nodes nested within it.
+ */
+function collectNestedRules (rule) {
+  const nestedRules = [...(rule.rules || [])];
+  for (const declaration of rule.declarations || []) {
+    if (declaration.rules || declaration.declarations) {
+      nestedRules.push(declaration);
+    }
+  }
+  return nestedRules;
+}
+
+/**
+ * Records which resettable properties the stylesheet declares, in any rule at
+ * any nesting depth, so that each rule can later ask whether assembling a
+ * shorthand would cancel a value another rule set.
+ *
+ * @param {Array}  rules    The AST rule nodes of the whole stylesheet.
+ * @param {object} context  The minification context to populate.
+ */
+function recordStylesheetResetProperties (rules, context) {
+  const pendingRules = [...rules];
+  while (pendingRules.length) {
+    const rule = pendingRules.pop();
+    for (const declaration of rule.declarations || []) {
+      if (RESETTABLE_PROPERTIES.has(declaration.property)) {
+        context.stylesheetResetProperties.add(declaration.property);
+      }
+    }
+    pendingRules.push(...collectNestedRules(rule));
+  }
+}
+
+/**
+ * Checks whether assembling a shorthand out of longhands would reset a property
+ * that the stylesheet sets somewhere else. The `border` shorthand resets
+ * `border-image`, so turning the border longhands of one rule into `border`
+ * cancels the `border-image` that another rule sets on the same element. A rule
+ * that states the reset property itself is safe, because that declaration is
+ * emitted after the shorthand and restates the value the shorthand discarded.
+ *
+ * @param  {string}  shorthandName       The shorthand that would be assembled.
+ * @param  {Set}     declaredProperties  The property names the rule declares.
+ * @param  {object}  context             The minification context with the stylesheet's reset properties.
+ * @return {boolean}                     Whether assembling the shorthand would discard another rule's value.
+ */
+function resetsPropertyDeclaredElsewhere (shorthandName, declaredProperties, context) {
+  const stylesheetResetProperties = context?.stylesheetResetProperties;
+  if (!stylesheetResetProperties?.size) {
+    return false;
+  }
+  for (const resetProperty of getOverridesOf(shorthandName)) {
+    const isSetElsewhere = (
+      stylesheetResetProperties.has(resetProperty) &&
+      !declaredProperties.has(resetProperty)
+    );
+    if (isSetElsewhere) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export {
+  recordStylesheetResetProperties,
+  resetsPropertyDeclaredElsewhere
+};

package/src/declarations/shorthand-values.js

@@ -6,6 +6,7 @@ import { collapseShorthandParts } from '../value/shared.js';
 import { splitTopLevelComponents } from '../value/syntax.js';
 
 import { buildBackgroundShorthandValue } from './background.js';
+import { UNIFORM_VALUE_SHORTHANDS } from './config.js';
 
 /**
  * @typedef  {object} ShorthandComponents
@@ -275,6 +276,25 @@ function buildFlexValue ({ valueMap, importantSuffix }) {
   return [grow, shrink, basis].join(' ') + importantSuffix;
 }
 
+/**
+ * Builds the value of a shorthand that applies one value to every longhand it
+ * sets, such as `marker` or the bidirectional gap decoration rules. Such a
+ * shorthand cannot express longhands that differ, so the group only collapses
+ * when every longhand already holds the same value.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildUniformValue ({ cleanValues, importantSuffix }) {
+  const isSharedByAll = cleanValues.every((value) => {
+    return value === cleanValues[0];
+  });
+  if (!isSharedByAll) {
+    return null;
+  }
+  return cleanValues[0] + importantSuffix;
+}
+
 /**
  * Determines whether a shorthand takes a single width, style, and color, as
  * `border` and `outline` do.
@@ -364,6 +384,9 @@ const NAMED_SHORTHAND_BUILDERS = {
  * @return {string|null}                        The shorthand value, or null when it cannot be built.
  */
 function buildShorthandValue (shorthandName, components) {
+  if (UNIFORM_VALUE_SHORTHANDS.has(shorthandName)) {
+    return buildUniformValue(components);
+  }
   const namedBuilder = NAMED_SHORTHAND_BUILDERS[shorthandName];
   if (namedBuilder) {
     return namedBuilder(components);

package/src/index.js

@@ -13,6 +13,7 @@ import {
   createMinifyContext,
   setActiveCharset
 } from './context.js';
+import { recordStylesheetResetProperties } from './declarations/reset-hazards.js';
 import {
   analyzePositionTryRules,
   cleanPositionTryRules,
@@ -231,6 +232,10 @@ export const minifyCSS = function (input) {
   const context = createMinifyContext();
 
   if (ast?.stylesheet?.rules) {
+    // Which properties a shorthand may not silently reset is a question about
+    // the whole stylesheet, so it is answered before any rule is rewritten.
+    recordStylesheetResetProperties(ast.stylesheet.rules, context);
+
     const {
       positionTryRules,
       positionTryUsage

package/src/position-try.js

@@ -2,6 +2,8 @@
  * @file Handles `@position-try` rule analysis, usage tracking, and dead-rule elimination during CSS minification.
  */
 
+import { registersCustomProperty } from './rules/property.js';
+
 /**
  * Scans top-level rules to register `@property` custom properties in the context and collect `@position-try` rule declarations and initial usage counts.
  *
@@ -14,7 +16,7 @@ function collectRuleMetadata (rules, context) {
   const positionTryUsage = new Map();
 
   for (const rule of rules) {
-    if (rule.type === 'property' && rule.name) {
+    if (rule.type === 'property' && rule.name && registersCustomProperty(rule)) {
       context.registeredCustomProperties.add(rule.name);
       const syntaxDeclaration = (rule.declarations || []).find((declaration) => {
         return declaration.type !== 'whitespace' && declaration.property === 'syntax';

package/src/rules/property.js

@@ -0,0 +1,177 @@
+/**
+ * @file Analyzes `@property` at-rules, resolving each descriptor against the value the CSS engine assumes when the descriptor is absent, so redundant descriptors and pointless registrations can be dropped.
+ */
+
+/**
+ * The descriptors an `@property` rule can declare. Anything else inside the
+ * rule is an unknown descriptor, which the CSS engine discards while parsing.
+ *
+ * @type {Set<string>}
+ */
+const PROPERTY_DESCRIPTORS = new Set([
+  'syntax',
+  'inherits',
+  'initial-value'
+]);
+
+/**
+ * The syntax that accepts any token sequence. It is also the syntax a
+ * registration falls back to when the rule omits the `syntax` descriptor.
+ *
+ * @type {string}
+ */
+const UNIVERSAL_SYNTAX = '*';
+
+/**
+ * The inheritance a registration falls back to when the rule omits the
+ * `inherits` descriptor.
+ *
+ * @type {string}
+ */
+const DEFAULT_INHERITS = 'true';
+
+/**
+ * Reads a descriptor value the way the CSS engine compares it, ignoring the
+ * whitespace that surrounds the value.
+ *
+ * @param  {object} declaration  The descriptor declaration node.
+ * @return {string}              The descriptor value without surrounding whitespace.
+ */
+function readDescriptorValue (declaration) {
+  return String(declaration.value ?? '').trim();
+}
+
+/**
+ * Reads a `syntax` descriptor as the syntax it describes, rather than as the
+ * string it is written as, so it can be compared against the universal syntax.
+ *
+ * @param  {string} syntaxValue  The raw `syntax` descriptor value, such as `"<length>"`.
+ * @return {string}              The described syntax, such as `<length>`.
+ */
+function unquoteSyntax (syntaxValue) {
+  // A value wrapped in a matching pair of quotes, capturing the string contents
+  const quotedStringPattern = /^(["'])([\s\S]*)\1$/;
+  const quotedString = syntaxValue.match(quotedStringPattern);
+  if (quotedString) {
+    return quotedString[2].trim();
+  }
+  return syntaxValue;
+}
+
+/**
+ * Collects the descriptors an `@property` rule declares, keyed by descriptor
+ * name and ordered by first appearance. Unknown descriptors are left out
+ * because the CSS engine ignores them, and a descriptor declared more than
+ * once resolves to its final declaration, which is the one the engine keeps.
+ *
+ * @param  {object} rule  The `@property` AST rule node.
+ * @return {Map}          Descriptor names mapped to the declaration that wins.
+ */
+function collectPropertyDescriptors (rule) {
+  const descriptors = new Map();
+  for (const declaration of rule.declarations || []) {
+    const descriptorName = String(declaration.property ?? '').toLowerCase();
+    const isKnownDescriptor = (
+      declaration.type === 'declaration' &&
+      PROPERTY_DESCRIPTORS.has(descriptorName)
+    );
+    if (isKnownDescriptor) {
+      descriptors.set(descriptorName, declaration);
+    }
+  }
+  return descriptors;
+}
+
+/**
+ * Resolves the syntax a set of descriptors registers, falling back to the
+ * universal syntax when the `syntax` descriptor is absent.
+ *
+ * @param  {Map}    descriptors  Descriptor names mapped to their declarations.
+ * @return {string}              The registered syntax.
+ */
+function resolveRegisteredSyntax (descriptors) {
+  const syntaxDeclaration = descriptors.get('syntax');
+  if (!syntaxDeclaration) {
+    return UNIVERSAL_SYNTAX;
+  }
+  return unquoteSyntax(readDescriptorValue(syntaxDeclaration));
+}
+
+/**
+ * Reports whether the CSS engine accepts the registration a set of descriptors
+ * describes. Registering anything narrower than the universal syntax requires
+ * an `initial-value`, since the engine has no valid value to start from
+ * otherwise, and a registration it rejects has no effect on the stylesheet.
+ *
+ * @param  {Map}     descriptors  Descriptor names mapped to their declarations.
+ * @return {boolean}              True when the registration is valid.
+ */
+function isValidRegistration (descriptors) {
+  if (resolveRegisteredSyntax(descriptors) === UNIVERSAL_SYNTAX) {
+    return true;
+  }
+  return descriptors.has('initial-value');
+}
+
+/**
+ * Reports whether a descriptor declares exactly what the CSS engine already
+ * assumes, which makes writing the descriptor out pointless. An
+ * `initial-value` always says something, because the value it defaults to is
+ * the guaranteed-invalid value, which no declaration can spell out.
+ *
+ * @param  {string}  descriptorName  The lowercased descriptor name.
+ * @param  {object}  declaration     The descriptor declaration node.
+ * @return {boolean}                 True when the descriptor restates a default.
+ */
+function isDefaultDescriptor (descriptorName, declaration) {
+  const value = readDescriptorValue(declaration);
+  if (descriptorName === 'syntax') {
+    return unquoteSyntax(value) === UNIVERSAL_SYNTAX;
+  }
+  if (descriptorName === 'inherits') {
+    return value.toLowerCase() === DEFAULT_INHERITS;
+  }
+  return false;
+}
+
+/**
+ * Reduces an `@property` rule to the descriptors worth writing out, meaning
+ * the ones that describe something other than what the CSS engine assumes on
+ * its own. An empty result means the entire rule can be dropped, either
+ * because the engine rejects the registration or because the registration
+ * matches an unregistered custom property in every way.
+ *
+ * @param  {object} rule  The `@property` AST rule node.
+ * @return {Array}        The descriptor declarations to render.
+ */
+function resolvePropertyDescriptors (rule) {
+  const descriptors = collectPropertyDescriptors(rule);
+  if (!isValidRegistration(descriptors)) {
+    return [];
+  }
+  const meaningfulDescriptors = [];
+  for (const [descriptorName, declaration] of descriptors) {
+    if (!isDefaultDescriptor(descriptorName, declaration)) {
+      meaningfulDescriptors.push(declaration);
+    }
+  }
+  return meaningfulDescriptors;
+}
+
+/**
+ * Reports whether an `@property` rule survives minification, which is also
+ * what decides whether the rest of the stylesheet may rely on the custom
+ * property being registered. Rules that describe nothing beyond the defaults
+ * leave the custom property just as unregistered as never mentioning it.
+ *
+ * @param  {object}  rule  The `@property` AST rule node.
+ * @return {boolean}       True when the rule registers the custom property.
+ */
+function registersCustomProperty (rule) {
+  return resolvePropertyDescriptors(rule).length > 0;
+}
+
+export {
+  registersCustomProperty,
+  resolvePropertyDescriptors
+};

package/src/rules/stringify.js

@@ -17,6 +17,7 @@ import {
   unescapeIdent,
   unescapeSelector
 } from './normalize.js';
+import { resolvePropertyDescriptors } from './property.js';
 import {
   flattenNestingParentIsSelector,
   mergeAdjacentWherePseudoClasses,
@@ -518,32 +519,7 @@ function stringifyRule (rule, context) {
   }
 
   if (rule.type === 'property') {
-    const propertyDeclarations = (rule.declarations || []).filter((declaration) => {
-      return declaration.type === 'declaration' && declaration.property;
-    });
-    const hasSyntaxDescriptor = propertyDeclarations.some((declaration) => {
-      return declaration.property === 'syntax';
-    });
-    const hasInheritsDescriptor = propertyDeclarations.some((declaration) => {
-      return declaration.property === 'inherits';
-    });
-    if (!hasSyntaxDescriptor || !hasInheritsDescriptor) {
-      return '';
-    }
-
-    const syntaxDeclaration = propertyDeclarations.find((declaration) => {
-      return declaration.property === 'syntax';
-    });
-    const syntaxValue = (syntaxDeclaration.value || '').replace(/["']/g, '').trim();
-    const isUniversalSyntax = syntaxValue === '*';
-    const hasInitialValue = propertyDeclarations.some((declaration) => {
-      return declaration.property === 'initial-value';
-    });
-    if (!isUniversalSyntax && !hasInitialValue) {
-      return '';
-    }
-
-    let renderedDeclarations = stringifyDeclarations(rule.declarations || []);
+    const renderedDeclarations = stringifyDeclarations(resolvePropertyDescriptors(rule));
     if (!renderedDeclarations) {
       return '';
     }