docs: revise documentation for various plugins

docs/03-plugins/inline-styles.mdx

@@ -16,7 +16,7 @@ svgo:
       description: What pseudo-classes and pseudo-elements to use. An empty string signifies all non-pseudo-classes and non-pseudo-elements. 
 ---
 
-Move and merge styles from `<style>` elements to a respective elements `style` attributes.
+Merges styles from `<style>` elements to the `style` attribute of matching elements.
 
 ## Usage
 

docs/03-plugins/remove-attributes-by-selector.mdx

@@ -4,7 +4,7 @@ svgo:
   pluginId: removeAttributesBySelector
   parameters:
     selectors:
-      description: This is an array of objects with two properties, <code>selector</code>, and <code>attributes</code>, which represent a CSS selector and the attributes to remove respectively.
+      description: An array of objects with two properties, <code>selector</code>, and <code>attributes</code>, which represent a CSS selector and the attributes to remove respectively.
       default: null
 ---
 

docs/03-plugins/remove-comments.mdx

@@ -28,6 +28,10 @@ Removing a comment like this may be considered a breach of the license terms, as
 
 <PluginUsage/>
 
+### Parameters
+
+<PluginParams/>
+
 ## Demo
 
 <PluginDemo/>

docs/03-plugins/remove-empty-text.mdx

@@ -5,13 +5,13 @@ svgo:
   defaultPlugin: true
   parameters:
     text:
-      description: Removes empty <a href="https://developer.mozilla.org/docs/Web/SVG/Element/text" target="_blank"><code>&lt;text&gt;</code></a> elements.
+      description: If to remove empty <a href="https://developer.mozilla.org/docs/Web/SVG/Element/text" target="_blank"><code>&lt;text&gt;</code></a> elements.
       default: true
     tspan:
-      description: Removes empty <a href="https://developer.mozilla.org/docs/Web/SVG/Element/tspan" target="_blank"><code>&lt;tspan&gt;</code></a> elements.
+      description: If to remove empty <a href="https://developer.mozilla.org/docs/Web/SVG/Element/tspan" target="_blank"><code>&lt;tspan&gt;</code></a> elements.
       default: true
     tref:
-      description: Removes empty <a href="https://developer.mozilla.org/docs/Web/SVG/Element/tref" target="_blank"><code>&lt;tref&gt;</code></a> elements.
+      description: If to remove empty <a href="https://developer.mozilla.org/docs/Web/SVG/Element/tref" target="_blank"><code>&lt;tref&gt;</code></a> elements.
       default: true
 ---
 

docs/03-plugins/remove-hidden-elems.mdx

@@ -55,7 +55,7 @@ Remove hidden or invisible elements from the document. This can be elements with
 
 This plugin ignores non-rendering elements, such as [`<clipPath>`](https://developer.mozilla.org/docs/Web/SVG/Element/clipPath) and [`<linearGradient>`](https://developer.mozilla.org/docs/Web/SVG/Element/linearGradient), which still apply regardless of styles, unless they are unused.
 
-Refer to the paremeters for the conditions this plugin looks for. All checks enabled by default.
+Refer to the parameters for the conditions this plugin looks for. All checks enabled by default.
 
 ## Usage
 

docs/03-plugins/remove-useless-stroke-and-fill.mdx

@@ -17,7 +17,7 @@ svgo:
 
 Removes useless `stroke` and `fill` attributes.
 
-Assigning these attributes can sometimes change nothing in the document. For example, in most cases assigning a `stoke` color is redundant if the elements [`stroke-width`](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-width) or [`stroke-opacity`](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-opacity) is `0`.
+Assigning these attributes can sometimes change nothing in the document. For example, in most cases assigning a `stroke` color is redundant if the elements [`stroke-width`](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-width) or [`stroke-opacity`](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-opacity) is `0`.
 
 ## Usage
 

lib/style.js

@@ -278,17 +278,20 @@ const computeStyle = (stylesheet, node) => {
 exports.computeStyle = computeStyle;
 
 /**
- * Determines if the given CSS selector references the given attribute.
+ * Determines if the CSS selector references the given attribute.
  *
  * @param {csstree.ListItem<csstree.CssNode>|string} selector
  * @param {string} attr
  * @returns {boolean}
  * @see https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors
  */
-const containsAttrSelector = (selector, attr) => {
-  const body =
-    typeof selector === 'string' ? selector : csstree.generate(selector.data);
+const includesAttrSelector = (selector, attr) => {
+  const attrSelectorPattern = new RegExp(`\\[\\s*${attr}\\s*[\\]=~|^$*]`, 'i');
 
-  return new RegExp(`\\[\\s*${attr}`).test(body);
+  if (typeof selector === 'string') {
+    return attrSelectorPattern.test(attr);
+  }
+
+  return attrSelectorPattern.test(csstree.generate(selector.data));
 };
-exports.containsAttrSelector = containsAttrSelector;
+exports.includesAttrSelector = includesAttrSelector;

plugins/inlineStyles.js

@@ -15,7 +15,7 @@ const {
   querySelectorAll,
   detachNodeFromParent,
 } = require('../lib/xast.js');
-const { compareSpecificity, containsAttrSelector } = require('../lib/style');
+const { compareSpecificity, includesAttrSelector } = require('../lib/style');
 const { attrsGroups } = require('./_collections');
 
 exports.name = 'inlineStyles';
@@ -222,7 +222,7 @@ exports.fn = (root, params) => {
                 if (
                   attrsGroups.presentation.includes(property) &&
                   !selectors.some((selector) =>
-                    containsAttrSelector(selector.item, property)
+                    includesAttrSelector(selector.item, property)
                   )
                 ) {
                   delete selectedEl.attributes[property];