feat(selector): add name and tag() function.

selector/_index.scss

@@ -1,7 +1,9 @@
 @forward 'selector.class.function';
+@forward 'selector.name.function';
 @forward 'selector.nest-content.mixin';
 @forward 'selector.nest.function';
 @forward 'selector.pseudo-class.function';
 @forward 'selector.replace-parent.function';
+@forward 'selector.tag.function';
 @forward 'selector.variables';
 @forward 'sass:selector' hide nest;

selector/_selector.name.function.scss

@@ -0,0 +1,55 @@
+// Modules.
+@use '../list';
+@use '../string';
+
+// Functions.
+@use '../class/class.name.function';
+@use '../functions';
+
+// Status: TODO: Check the usage.
+// The `selector.name()` function .
+// @param `$name`
+// @param `$dictionary`
+// @param `$delimiter`
+// @returns
+@function name($name, $dictionary: (), $delimiter: null) {
+  $index: list.nth(list.index($name, any, '==', '&', '&.', '.'), 1);
+  @if $index {
+    $class: class.name(list.from($name, $index), $dictionary, $delimiter);
+    @if $index > 1 {
+      @return if($index > 1, functions.name(list.to($name, $index - 1)), null) + string.replace($class, all, "&", "");
+    }
+    @return $class;
+  }
+
+  $name: functions.name($name);
+  @return if(not (string.index($name, '&') == 1), string.replace($name, all, "&", ""), $name);
+}
+
+// Examples.
+// @debug name('a' 'b' 'c'); // abc
+// @debug name('.abc'); // .abc
+// @debug name('.' 'a' 'b' 'c'); // .abc
+// @debug name('.' __CLASS__ 'a' 'b' 'c'); // .__CLASS_abc
+// @debug name(__CLASS__ 'a' 'b' 'c', $dictionary: ('a': 'ccc')); // __CLASS__abc
+// @debug name('a' 'b' 'c', $dictionary: ('a': 'ccc')); // abc
+// @debug name('&' 'a' 'b' 'c'); // &abc
+// @debug name('&.' 'a' 'b' 'c'); // &.abc
+// @debug name('&' '.' 'a' 'b' 'c'); // &.abc
+// @debug name('a' 'b' 'c' '&' '.'); // abc.
+// @debug name('span' '&' '.' 'a' 'b' 'c'); // span.abc
+// @debug name('&' 'span', null, '-'); // TODO: null dictionary.
+
+// Dictionary.
+// @debug name('&' accordion, (prefix: spectre));
+
+// hover
+// @debug name('&:hover'); // &:hover
+// @debug name('span' '&:hover'); // &:hover
+// @debug name('span' '&' '.' 'a' 'b' 'c' '&:hover'); // span.abc:hover
+
+// Tag.
+// @debug name('s' 'p' 'a' 'n' '[disabled=""]' '&' '.' 'border' 'width'); // span[disabled=""].borderwidth
+// @debug name('s' 'p' 'a' 'n' '[aria=""]' '&' '.' 'border' 'width'); // span[aria=""].borderwidth
+// @debug name('s' 'p' 'a' 'n' '[attr="aaa"]' '&.' 'border' 'width'); // span[attr="aaa"].borderwidth
+// @debug name('s' 'p' 'a' 'n' '[attr="aaa"]' '.' 'border' 'width'); // span[attr="aaa"].border-width

selector/_selector.tag.function.scss

@@ -0,0 +1,41 @@
+// Sass.
+@use 'sass:list';
+
+// Functions.
+@use 'selector.class.function' as *;
+@use 'selector.nest.function' as *;
+
+// Status: TODO: Check name function.
+// The `selector.tag()` function.
+// @param `$tag`
+// @param `$class`
+// @param `$pseudo-class`
+// @param `$dictionary`
+// @returns
+@function tag($tag, $class, $pseudo-class: (), $dictionary: ()) {
+  @return nest($tag, class($class, $dictionary: $dictionary), $pseudo-class);
+}
+
+// Examples.
+// tag input + class
+// @debug tag(input, lg); // (input .lg,)
+// @debug tag(input, '&lg'); // (input.lg,)
+// @debug tag(input, '&' lg); // (input.lg,)
+
+// input + class + :hover
+// @debug tag(input, lg, '&:hover'); // (input .lg:hover,)
+// @debug tag(input, '&lg', '&:hover'); // (input.lg:hover,)
+
+// input + class + dictionary
+// @debug tag(input, form lg, $dictionary: (lg: large)); // (input .form-large,)
+// @debug tag(input, form__ submit --disabled , $dictionary: (submit: submit-basic, separator: null)); // (input .form__submit-basic--disabled,)
+// @debug tag(input, '&form--' theme -xmas , $dictionary: (xmas: basic, separator: null)); // (input.form--theme-xmas,)
+
+// multiple classes
+// @debug tag(input, form (lg, sm)); // input .form-lg, input .form-sm
+// @debug tag(input, form (lg, md, sm)); // input .form-lg, input .form-md, input .form-sm
+// @debug tag(input, '&' form (lg, md, sm)); // input.form-lg, input.form-md, input.form-sm
+
+// pseudo selector
+// @debug tag('input', '&form' input (lg, sm), '&:hover'); // input.form-input-lg:hover, input.form-input-sm:hover
+// @debug tag('input', '&form' input (lg, sm), ('&:hover', '&:visited')); // input.form-input-lg:hover, input.form-input-lg:visited, input.form-input-sm:hover, input.form-input-sm:visited