_f-context-selector.scss

@use "sass:meta";
@use "../01-abstract/variables";

/**
 * Context selector - Make a context selector (editor / style)
 *
 * @author Milan Ricoul
 *
 * @param $default
 * @param $editor
 * @param $selector
 *
 * Examples :
 *      #{ context-selector('#main__content', '#editor', '.block') } {
 *          ... your css
 *      }
 *
 *      return for style.scss :
 *      #main__content .block {
 *          ... your css
 *      }
 *
 *      return for editor.scss :
 *      #editor .block {
 *          ... your css
 *      }
 *
 *      $selectors: ".blocks-gallery-image,", ".blocks-gallery-item";
 *      #{ context-selector('.wp-block-gallery', '.blocks-gallery-grid', selectors) } {
 *          ... your css
 *      }
 *
 *      return for style.scss :
 *      .wp-block-gallery .blocks-gallery-image,
 *      .wp-block-gallery .blocks-gallery-item {
 *          ... your css
 *      }
 *
 *      return for editor.scss :
 *      .blocks-gallery-grid .blocks-gallery-image,
 *      .blocks-gallery-grid .blocks-gallery-item {
 *          ... your css
 *      }
 *
 *      It can be used to define a variable :
 *      $parent: context-selector('#main__content', '#editor')
 *      #{(dollar)parent} > .block {
 *          ... your css
 *      }
 *
 *      the variable $entry-file-name is defined in style.scss and editor.scss
 *
 */

@function context-selector($default: null, $editor: null, $selector: null) {
    $full-selector: "";
    $parent: "";

    @if (variables.$entry-file-name == "editor" and $editor) {
        $parent: $editor;
    } @else if (variables.$entry-file-name == "style" and $default) {
        $parent: $default;
    } @else {
        @return $selector;
    }

    @if (meta.type-of($selector) == "string") {
        $full-selector: $parent + " " + $selector;
    } @else if (meta.type-of($selector) == "list") {
        @each $s in $selector {
            $full-selector: $full-selector + $parent + " " + $s;
        }
    } @else {
        $full-selector: $parent;
    }

    @return $full-selector;
}