fix(inlineStyles): empty css block created empty attribute

lib/style.js

@@ -15,7 +15,7 @@
 
 const csstree = require('css-tree');
 const {
-  // @ts-ignore not defined in @types/csso
+  // @ts-ignore internal api
   syntax: { specificity },
 } = require('csso');
 const { visit, matches } = require('./xast.js');
@@ -47,9 +47,7 @@ const parseRule = (ruleNode, dynamic) => {
     }
   });
 
-  /**
-   * @type {StylesheetRule[]}
-   */
+  /** @type {StylesheetRule[]} */
   const rules = [];
   csstree.walk(ruleNode.prelude, (node) => {
     if (node.type === 'Selector') {
@@ -78,9 +76,7 @@ const parseRule = (ruleNode, dynamic) => {
  * @type {(css: string, dynamic: boolean) => Array<StylesheetRule>}
  */
 const parseStylesheet = (css, dynamic) => {
-  /**
-   * @type {Array<StylesheetRule>}
-   */
+  /** @type {Array<StylesheetRule>} */
   const rules = [];
   const ast = csstree.parse(css, {
     parseValue: false,
@@ -111,9 +107,7 @@ const parseStylesheet = (css, dynamic) => {
  * @type {(css: string) => Array<StylesheetDeclaration>}
  */
 const parseStyleDeclarations = (css) => {
-  /**
-   * @type {Array<StylesheetDeclaration>}
-   */
+  /** @type {Array<StylesheetDeclaration>} */
   const declarations = [];
   const ast = csstree.parse(css, {
     context: 'declarationList',
@@ -135,9 +129,7 @@ const parseStyleDeclarations = (css) => {
  * @type {(stylesheet: Stylesheet, node: XastElement) => ComputedStyles}
  */
 const computeOwnStyle = (stylesheet, node) => {
-  /**
-   * @type {ComputedStyles}
-   */
+  /** @type {ComputedStyles} */
   const computedStyle = {};
   const importantStyles = new Map();
 
@@ -197,10 +189,12 @@ const computeOwnStyle = (stylesheet, node) => {
 };
 
 /**
- * Compares two selector specificities.
- * extracted from https://github.com/keeganstreet/specificity/blob/main/specificity.js#L211
+ * Compares selector specificities.
+ * Derived from https://github.com/keeganstreet/specificity/blob/8757133ddd2ed0163f120900047ff0f92760b536/specificity.js#L207
  *
- * @type {(a: Specificity, b: Specificity) => number}
+ * @param {Specificity} a
+ * @param {Specificity} b
+ * @returns {number}
  */
 const compareSpecificity = (a, b) => {
   for (let i = 0; i < 4; i += 1) {
@@ -213,18 +207,15 @@ const compareSpecificity = (a, b) => {
 
   return 0;
 };
+exports.compareSpecificity = compareSpecificity;
 
 /**
  * @type {(root: XastRoot) => Stylesheet}
  */
 const collectStylesheet = (root) => {
-  /**
-   * @type {Array<StylesheetRule>}
-   */
+  /** @type {Array<StylesheetRule>} */
   const rules = [];
-  /**
-   * @type {Map<XastElement, XastParent>}
-   */
+  /** @type {Map<XastElement, XastParent>} */
   const parents = new Map();
   visit(root, {
     element: {

package.json

@@ -122,7 +122,7 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^14.1.0",
     "@types/css-tree": "^2.0.0",
-    "@types/csso": "^5.0.1",
+    "@types/csso": "^5.0.2",
     "@types/jest": "^29.5.5",
     "del": "^6.0.0",
     "eslint": "^8.24.0",

plugins/inlineStyles.js

@@ -8,57 +8,24 @@
 
 const csstree = require('css-tree');
 const {
-  // @ts-ignore not defined in @types/csso
+  // @ts-ignore internal api
   syntax: { specificity },
 } = require('csso');
 const {
   visitSkip,
   querySelectorAll,
   detachNodeFromParent,
 } = require('../lib/xast.js');
+const { compareSpecificity } = require('../lib/style');
 
 exports.name = 'inlineStyles';
 exports.description = 'inline styles (additional options)';
 
 /**
- * Compares two selector specificities.
- * extracted from https://github.com/keeganstreet/specificity/blob/main/specificity.js#L211
- *
- * @type {(a: Specificity, b: Specificity) => number}
- */
-const compareSpecificity = (a, b) => {
-  for (var i = 0; i < 4; i += 1) {
-    if (a[i] < b[i]) {
-      return -1;
-    } else if (a[i] > b[i]) {
-      return 1;
-    }
-  }
-  return 0;
-};
-
-/**
- * Moves + merges styles from style elements to element styles
- *
- * Options
- *   onlyMatchedOnce (default: true)
- *     inline only selectors that match once
- *
- *   removeMatchedSelectors (default: true)
- *     clean up matched selectors,
- *     leave selectors that hadn't matched
- *
- *   useMqs (default: ['', 'screen'])
- *     what media queries to be used
- *     empty string element for styles outside media queries
- *
- *   usePseudos (default: [''])
- *     what pseudo-classes/-elements to be used
- *     empty string element for all non-pseudo-classes and/or -elements
- *
- * @author strarsis <[email protected]>
+ * Merges styles from style nodes into inline styles.
  *
  * @type {import('./plugins-types').Plugin<'inlineStyles'>}
+ * @author strarsis <[email protected]>
  */
 exports.fn = (root, params) => {
   const {
@@ -205,9 +172,7 @@ exports.fn = (root, params) => {
         for (const selector of sortedSelectors) {
           // match selectors
           const selectorText = csstree.generate(selector.item.data);
-          /**
-           * @type {Array<XastElement>}
-           */
+          /** @type {Array<XastElement>} */
           const matchedElements = [];
           try {
             for (const node of querySelectorAll(root, selectorText)) {
@@ -232,9 +197,7 @@ exports.fn = (root, params) => {
           // apply <style/> to matched elements
           for (const selectedEl of matchedElements) {
             const styleDeclarationList = csstree.parse(
-              selectedEl.attributes.style == null
-                ? ''
-                : selectedEl.attributes.style,
+              selectedEl.attributes.style ?? '',
               {
                 context: 'declarationList',
                 parseValue: false,
@@ -280,8 +243,11 @@ exports.fn = (root, params) => {
                 }
               },
             });
-            selectedEl.attributes.style =
-              csstree.generate(styleDeclarationList);
+
+            const newStyles = csstree.generate(styleDeclarationList);
+            if (newStyles.length !== 0) {
+              selectedEl.attributes.style = newStyles;
+            }
           }
 
           if (

test/regression.js

@@ -30,17 +30,11 @@ const runTests = async ({ list }) => {
       name.startsWith('w3c-svg-11-test-suite/svg/animate-') ||
       // messed gradients
       name === 'w3c-svg-11-test-suite/svg/pservers-grad-18-b.svg' ||
-      // animated filter
-      name === 'w3c-svg-11-test-suite/svg/filters-light-04-f.svg' ||
-      // animated filter
-      name === 'w3c-svg-11-test-suite/svg/filters-composite-05-f.svg' ||
       // removing wrapping <g> breaks :first-child pseudo-class
       name === 'w3c-svg-11-test-suite/svg/styling-pres-04-f.svg' ||
       // rect is converted to path which matches wrong styles
       name === 'w3c-svg-11-test-suite/svg/styling-css-08-f.svg' ||
-      // external image
-      name === 'w3c-svg-11-test-suite/svg/struct-image-02-b.svg' ||
-      // complex selectors are messed becase of converting shapes to paths
+      // complex selectors are messed because of converting shapes to paths
       name === 'w3c-svg-11-test-suite/svg/struct-use-10-f.svg' ||
       name === 'w3c-svg-11-test-suite/svg/struct-use-11-f.svg' ||
       name === 'w3c-svg-11-test-suite/svg/styling-css-01-b.svg' ||

yarn.lock

@@ -958,12 +958,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/csso@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "@types/csso@npm:5.0.1"
+"@types/csso@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@types/csso@npm:5.0.2"
   dependencies:
     "@types/css-tree": "*"
-  checksum: 62c7e534dfde79c1bf3b3761baec06ac2aa2b568da9be4a548b95e709b65b3944b8ad4cd4d8926de2b4bb301b4f102fb0f8c1354cb203a92ebccf59e58c957a6
+  checksum: b2e4d6a99b9c233eb7a963eaf333b748f5967f74b62b002cd4bffa0d7ba12a0c10500a03acc001c1b9f87ec67c20e0b49b16720064dd6a3641362bc7abb12386
   languageName: node
   linkType: hard
 
@@ -4563,7 +4563,7 @@ __metadata:
     "@rollup/plugin-node-resolve": ^14.1.0
     "@trysound/sax": 0.2.0
     "@types/css-tree": ^2.0.0
-    "@types/csso": ^5.0.1
+    "@types/csso": ^5.0.2
     "@types/jest": ^29.5.5
     commander: ^7.2.0
     css-select: ^5.1.0