aboutsummaryrefslogtreecommitdiffstats
path: root/src/bem/_suffix.scss
blob: 2ddb54d11262588d74f16758c855b71a79b7d41f (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
////
/// @group BEM
///
/// @access public
////

@use './validators';
@use './vars';
@use '../functions';
@use '../contexts';

/// 
/// Generate a new suffix.
///
/// @param {string} $name - Suffix name
///
/// @content
///
/// @throw If the element is not preceded by a block or modifier.
///
/// @example scss - Using a suffix
///   @include utility('hidden') {
///     display: none;
///     
///     @media (max-width: 320px) {
///       @include suffix('phone') {
///         display: none;
///       }
///     }
///     
///     @media (max-width: 768px) {
///       @include suffix('tablet') {
///         display: none;
///       }
///     }
///   }
///   
///   // Generates:
///   
///   .u-hidden {
///     display: none;
///   }
///   
///   @media (max-width: 320px) {
///     .u-hidden@phone {
///       display: none;
///     }
///   }
///   
///   @media (max-width: 768px) {
///     .u-hidden@tablet {
///       display: none;
///     }
///   }
///
@mixin suffix($name) {
    $result:   suffix($name);
    $selector: nth($result, 1);
    $context:  nth($result, 2);

    @include validators.validate(
        'suffix',
        (name: $name),
        $selector,
        $context
    );

    @include contexts.push(vars.$context-id, $context...);
    @at-root #{$selector} {
        @content;
    }
    @include contexts.pop(vars.$context-id);
}

///
/// Generate a new suffix. Check the respective mixin documentation for more information.
/// 
/// @return {list} A list with two items: 1. selector, 2. context or `null`
///
/// @see {mixin} suffix
///
@function suffix($name) {
    //
    // Suffixes can be used on block, element and modifier.
    //

    $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
    $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block');
    $noop: contexts.assert-stack-must-not-contain(vars.$context-id, 'suffix');

    $parent-context:  contexts.get(vars.$context-id, 'block' 'element' 'modifier');
    $parent-selector: map-get(nth($parent-context, 2), 'selector');

    @if not functions.selector-suffix-match(&, $parent-selector) {
        //
        // The current selector doesn't match the parent selector.
        // The user manually added a selector between parent context and this suffix call.
        // This case is forbidden because any outcome semantically wouldn't make sense:
        //   - {b,e,m} [manual selector] {b,e,m}@suffix
        //   - {b,e,m}@suffix [manual selector]
        // The first case would make the modifier behave like an element.
        // The second case is unintuitive, the code would be more clear by nesting the manual
        // selector in the suffix instead.
        //

        @error 'A suffix must be an immediate child of the parent context';
    }

    //
    // The suffix part can simply be appended.
    // Possible outcomes:
    //   - {b,e,m}@suffix
    //

    $selector: selector-append(&, vars.$suffix-separator + $name);

    $context: 'suffix', (
        'name':     $name,
        'selector': $selector
    );

    @return $selector $context;
}