refactor these 3 classes for diy principles without breaking the existing api of PluginInterface.
PluginInterface can have actual code and plugin instance can call.
```
class PluginInterface {
  /**
   * Attaches the plugin to the system by setting global CSS variables and returning CSS rules.
   * @param {HTMLElement} host - The shadow host element.
   * @returns [base, additional] - An array containing 'base' and 'additional' CSS rules.
   */
  attach(host) {
    throw new Error('attach method must be implemented by the plugin.');
  }

  /**
   * Detaches the plugin from the system by removing global CSS variables and performing cleanup.
   * @param {HTMLElement} host - The shadow host element.
   */
  detach(host) {
    throw new Error('detach method must be implemented by the plugin.');
  }

  /**
   * Updates global configurations and returns the updated CSS.
   * @param {Object} options - Options to update.
   * @returns [base, additional] - An array containing 'base' and 'additional' CSS rules.
   */
  updateGlobal(options = {}) {
    throw new Error('updateGlobal method must be implemented by the plugin.');
  }

  /**
   * Updates per-rectangle configurations.
   * @param {HTMLElement} rect - The rectangle element.
   * @param {Object} options - Options to update.
   */
  updateRect(rect, options = {}) {
    throw new Error('updateRect method must be implemented by the plugin.');
  }

  /**
   * Cleans up per-rectangle configurations if necessary.
   * @param {HTMLElement} rect - The rectangle element.
   */
  onRectRemove(rect) {
    throw new Error('onRectRemove method must be implemented by the plugin.');
  }
}

// BorderPlugin Implementation
class BorderPlugin extends PluginInterface {
  constructor(options = {}) {
    super();
    this.size = options.size || '2px';
    this.color = options.color || '#000';
    this.host = null;
    this.updateCSS();
  }

  /**
   * Updates the CSS rules based on current configurations.
   */
  updateCSS() {
    this.baseRule = `
      border: var(--border-size, ${this.size}) solid var(--border-color, ${this.color});
    `;
    
    // BorderPlugin doesn't have additional CSS rules
    this.additionalCSS = '';
  }

  /**
   * Attaches the plugin by setting global CSS variables and returning CSS rules.
   * @param {HTMLElement} host - The shadow host element.
   * @returns [base, additional] - An array containing 'base' and 'additional' CSS rules.
   */
  attach(host) {
    if (host) {
      this.host = host;
    }
    host = this.host;
    host.style.setProperty('--border-size', this.size);
    host.style.setProperty('--border-color', this.color);
    this.updateCSS();
    return [this.baseRule, this.additionalCSS];
  }

  /**
   * Detaches the plugin by removing global CSS variables.
   * @param {HTMLElement} host - The shadow host element.
   */
  detach(host) {
    host.style.removeProperty('--border-size');
    host.style.removeProperty('--border-color');
  }

  /**
   * Provides the updated CSS rules for borders.
   * @returns [base, additional] - An array containing 'base' and 'additional' CSS rules.
   */
  getCSS() {
    return [this.baseRule, this.additionalCSS];
  }

  /**
   * Updates global configurations and returns the updated CSS.
   * @param {Object} options - Options to update.
   * @returns [base, additional] - An array containing 'base' and 'additional' CSS rules.
   */
  updateGlobal(options = {}) {
    if (options.size) this.size = options.size;
    if (options.color) this.color = options.color;
    return this.attach();
  }

  /**
   * Updates per-rectangle configurations by setting CSS variables on the rectangle.
   * @param {HTMLElement} rect - The rectangle element.
   * @param {Object} options - Options to update.
   */
  updateRect(rect, options = {}) {
    if (options.size) {
      rect.style.setProperty('--border-size', typeof options.size === 'number' ? `${options.size}px` : options.size);
    }
    if (options.color) {
      rect.style.setProperty('--border-color', options.color);
    }
  }

  /**
   * Cleans up per-rectangle configurations by removing CSS variables.
   * @param {HTMLElement} rect - The rectangle element.
   */
  onRectRemove(rect) {
    rect.style.removeProperty('--border-size');
    rect.style.removeProperty('--border-color');
  }
}

// VertexPlugin Implementation
class VertexPlugin extends PluginInterface {
  constructor(options = {}) {
    super();
    this.size = options.size || '25px';
    this.color = options.color || '#3498db';
    this.host = null;
    this.updateCSS();
  }

  /**
   * Updates the CSS rules based on current configurations.
   */
  updateCSS() {
    // VertexPlugin doesn't have base CSS for .rect-region
    this.baseRule = '';

    this.additionalCSS = `
      .rect-region::before {
        content: '';
        position: absolute;
        width: var(--vertex-size, ${this.size});
        height: var(--vertex-size, ${this.size});
        background-color: var(--vertex-color, ${this.color});
        box-sizing: border-box;

        /* Intermediate variables */
        --offset: calc(-0.5 * (var(--border-size, 2px) + var(--vertex-size)));
        --adjusted-width: calc(var(--width) - var(--border-size, 2px));
        --adjusted-height: calc(var(--height) - var(--border-size, 2px));

        /* Positioning the first vertex */
        top: var(--offset);
        left: var(--offset);

        /* Creating three more vertices using box-shadow, positioned at each corner */
        box-shadow:
          var(--adjusted-width) 0 0 0 var(--vertex-color),
          var(--adjusted-width) var(--adjusted-height) 0 0 var(--vertex-color),
          0 var(--adjusted-height) 0 0 var(--vertex-color);
      }
    `;
  }

  /**
   * Attaches the plugin by setting global CSS variables and returning CSS rules.
   * @param {HTMLElement} host - The shadow host element.
   * @returns [base, additional] - An array containing 'base' and 'additional' CSS rules.
   */
  attach(host) {
    if (host) {
      this.host = host;
    }
    host = this.host;
    host.style.setProperty('--vertex-size', this.size);
    host.style.setProperty('--vertex-color', this.color);
    this.updateCSS();
    return [this.baseRule, this.additionalCSS];
  }

  /**
   * Detaches the plugin by removing global CSS variables.
   * @param {HTMLElement} host - The shadow host element.
   */
  detach(host) {
    host.style.removeProperty('--vertex-size');
    host.style.removeProperty('--vertex-color');
  }

  /**
   * Provides the updated CSS rules for vertices.
   * @returns [base, additional] - An array containing 'base' and 'additional' CSS rules.
   */
  getCSS() {
    return [this.baseRule, this.additionalCSS];
  }

  /**
   * Updates global configurations and returns the updated CSS.
   * @param {Object} options - Options to update.
   * @returns [base, additional] - An array containing 'base' and 'additional' CSS rules.
   */
  updateGlobal(options = {}) {
    if (options.size) this.size = options.size;
    if (options.color) this.color = options.color;
    return this.attach();
  }

  /**
   * Updates per-rectangle configurations by setting CSS variables on the rectangle.
   * @param {HTMLElement} rect - The rectangle element.
   * @param {Object} options - Options to update.
   */
  updateRect(rect, options = {}) {
    if (options.size) {
      rect.style.setProperty('--vertex-size', typeof options.size === 'number' ? `${options.size}px` : options.size);
    }
    if (options.color) {
      rect.style.setProperty('--vertex-color', options.color);
    }
  }

  /**
   * Cleans up per-rectangle configurations by removing CSS variables.
   * @param {HTMLElement} rect - The rectangle element.
   */
  onRectRemove(rect) {
    rect.style.removeProperty('--vertex-size');
    rect.style.removeProperty('--vertex-color');
  }
}
```