1 files changed, 491 insertions, 0 deletions
diff --git a/test/bem/_iro-bem-element.scss b/test/bem/_iro-bem-element.scss
new file mode 100644
index 0000000..f69f133
--- /dev/null
+++ b/test/bem/_iro-bem-element.scss
@@ -0,0 +1,491 @@
+// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
+//
+// Included test cases:
+//  - /// 1 ///  - single element
+//  - /// 2 ///  - single element, manual selector in-between
+//  - /// 3 ///  - single element, modifier in-between
+//  - /// 4 ///  - single element, nested
+//  - /// 5 ///  - single element, nested, manual selector in-between
+//  - /// 6 ///  - single element, nested, modifier in-between
+//  - /// 7 ///  - single element, in at-theme
+//  - /// 8 ///  - multiple elements
+//  - /// 9 ///  - multiple elements, manual selector in-between
+//  - /// 10 /// - multiple elements, modifier in-between
+//  - /// 11 /// - multiple elements, nested
+//  - /// 12 /// - multiple elements, nested, manual selector in-between
+//  - /// 13 /// - multiple elements, nested, modifier in-between
+//  - /// 14 /// - single element, in at-theme
+//
+@include it('iro-bem-element') {
+    @include assert('single element') { /// 1 ///
+        @include output {
+            @include iro-bem-block('something') {
+                @include iro-bem-element('child') {
+                    font-size: 2em;
+                }
+            }
+        }
+        @include expect {
+            .something__child {
+                font-size: 2em;
+            }
+        }
+    }
+    @include assert('single element, manual selector in-between') { /// 2 ///
+        @include output(false) {
+            @include iro-bem-block('something') {
+                &:hover {
+                    @include iro-bem-element('child1') {
+                        font-size: 2em;
+                    }
+                }
+                .test & {
+                    @include iro-bem-element('child2') {
+                        font-size: 2em;
+                    }
+                }
+            }
+        }
+        @include expect(false) {
+            .something:hover .something__child1 {
+                font-size: 2em;
+            }
+            .test .something__child2 {
+                font-size: 2em;
+            }
+        }
+    }
+    @include assert('single element, modifier in-between') { /// 3 ///
+        @include output {
+            @include iro-bem-block('something') {
+                @include iro-bem-modifier('mod') {
+                    @include iro-bem-element('child') {
+                        font-size: 2em;
+                    }
+                }
+            }
+        }
+        @include expect {
+            .something--mod .something__child {
+                font-size: 2em;
+            }
+        }
+    }
+    @include assert('single element, nested') { /// 4 ///
+        @include output {
+            @include iro-bem-block('something') {
+                @include iro-bem-element('child') {
+                    font-size: 2em;
+                    @include iro-bem-element('subchild') {
+                        font-size: 3em;
+                    }
+                }
+            }
+        }
+        @include expect {
+            .something__child {
+                font-size: 2em;
+            }
+            .something__child .something__subchild {
+                font-size: 3em;
+            }
+        }
+    }
+    @include assert('single element, nested, manual selector in-between') { /// 5 ///
+        @include output(false) {
+            @include iro-bem-block('something') {
+                &:hover {
+                    @include iro-bem-element('child1') {
+                        font-size: 2em;
+                        @include iro-bem-element('subchild1') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+                .test & {
+                    @include iro-bem-element('child2') {
+                        font-size: 2em;
+                        @include iro-bem-element('subchild2') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+                @include iro-bem-element('child3') {
+                    font-size: 2em;
+                    &:hover {
+                        @include iro-bem-element('subchild3') {
+                            font-size: 3em;
+                        }
+                    }
+                    .test & {
+                        @include iro-bem-element('subchild4') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+            }
+        }
+        @include expect(false) {
+            .something:hover .something__child1 {
+                font-size: 2em;
+            }
+            .something:hover .something__child1 .something__subchild1 {
+                font-size: 3em;
+            }
+            .test .something__child2 {
+                font-size: 2em;
+            }
+            .test .something__child2 .something__subchild2 {
+                font-size: 3em;
+            }
+            .something__child3 {
+                font-size: 2em;
+            }
+            .something__child3:hover .something__subchild3 {
+                font-size: 3em;
+            }
+            .test .something__child3 .something__subchild4 {
+                font-size: 3em;
+            }
+        }
+    }
+    @include assert('single element, nested, modifier in-between') { /// 6 ///
+        @include output {
+            @include iro-bem-block('something') {
+                @include iro-bem-modifier('mod') {
+                    @include iro-bem-element('child') {
+                        font-size: 2em;
+                        @include iro-bem-element('subchild') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+                @include iro-bem-element('child') {
+                    font-size: 2em;
+                    @include iro-bem-modifier('mod') {
+                        @include iro-bem-element('subchild') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+            }
+        }
+        @include expect {
+            .something--mod .something__child {
+                font-size: 2em;
+            }
+            .something--mod .something__child .something__subchild {
+                font-size: 3em;
+            }
+            .something__child {
+                font-size: 2em;
+            }
+            .something__child--mod .something__subchild {
+                font-size: 3em;
+            }
+        }
+    }
+    @include assert('single element, in at-theme') { /// 7 ///
+        @include output(false) {
+            @include iro-bem-block('something') {
+                @include iro-bem-at-theme('dark') {
+                    @include iro-bem-element('child') {
+                        font-size: 2em;
+                    }
+                }
+            }
+        }
+        @include expect(false) {
+            .t-dark .something__child,
+            [class*=' t-'] .t-dark .something__child,
+            [class^='t-'] .t-dark .something__child {
+                font-size: 2em;
+            }
+        }
+    }
+    @include assert('multiple elements') { /// 8 ///
+        @include output {
+            @include iro-bem-block('something') {
+                @include iro-bem-element('child1', 'child2') {
+                    font-size: 2em;
+                }
+            }
+        }
+        @include expect {
+            .something__child1,
+            .something__child2 {
+                font-size: 2em;
+            }
+        }
+    }
+    @include assert('multiple elements, manual selector in-between') { /// 9 ///
+        @include output(false) {
+            @include iro-bem-block('something') {
+                &:hover {
+                    @include iro-bem-element('child1', 'child2') {
+                        font-size: 2em;
+                    }
+                }
+                .test & {
+                    @include iro-bem-element('child3', 'child4') {
+                        font-size: 2em;
+                    }
+                }
+            }
+        }
+        @include expect(false) {
+            .something:hover .something__child1,
+            .something:hover .something__child2 {
+                font-size: 2em;
+            }
+            .test .something__child3,
+            .test .something__child4 {
+                font-size: 2em;
+            }
+        }
+    }
+    @include assert('multiple elements, modifier in-between') { /// 10 ///
+        @include output {
+            @include iro-bem-block('something') {
+                @include iro-bem-modifier('mod') {
+                    @include iro-bem-element('child1', 'child2') {
+                        font-size: 2em;
+                    }
+                }
+            }
+        }
+        @include expect {
+            .something--mod .something__child1,
+            .something--mod .something__child2 {
+                font-size: 2em;
+            }
+        }
+    }
+    @include assert('multiple elements, nested') { /// 11 ///
+        @include output {
+            @include iro-bem-block('something') {
+                @include iro-bem-element('child1', 'child2') {
+                    font-size: 2em;
+                    @include iro-bem-element('subchild1') {
+                        font-size: 3em;
+                    }
+                }
+                @include iro-bem-element('child3') {
+                    font-size: 2em;
+                    @include iro-bem-element('subchild2', 'subchild3') {
+                        font-size: 3em;
+                    }
+                }
+            }
+        }
+        @include expect {
+            .something__child1,
+            .something__child2 {
+                font-size: 2em;
+            }
+            .something__child1 .something__subchild1,
+            .something__child2 .something__subchild1 {
+                font-size: 3em;
+            }
+            .something__child3 {
+                font-size: 2em;
+            }
+            .something__child3 .something__subchild2,
+            .something__child3 .something__subchild3 {
+                font-size: 3em;
+            }
+        }
+    }
+    @include assert('multiple elements, nested, manual selector in-between') { /// 12 ///
+        @include output(false) {
+            @include iro-bem-block('something') {
+                @include iro-bem-element('child1', 'child2') {
+                    font-size: 2em;
+                    &:hover {
+                        @include iro-bem-element('subchild1') {
+                            font-size: 3em;
+                        }
+                    }
+                    .test & {
+                        @include iro-bem-element('subchild2') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+                @include iro-bem-element('child3') {
+                    font-size: 2em;
+                    &:hover {
+                        @include iro-bem-element('subchild3', 'subchild4') {
+                            font-size: 3em;
+                        }
+                    }
+                    .test & {
+                        @include iro-bem-element('subchild5', 'subchild6') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+            }
+        }
+        @include expect(false) {
+            .something__child1,
+            .something__child2 {
+                font-size: 2em;
+            }
+            .something__child1:hover .something__subchild1,
+            .something__child2:hover .something__subchild1 {
+                font-size: 3em;
+            }
+            .test .something__child1 .something__subchild2,
+            .test .something__child2 .something__subchild2 {
+                font-size: 3em;
+            }
+            .something__child3 {
+                font-size: 2em;
+            }
+            .something__child3:hover .something__subchild3,
+            .something__child3:hover .something__subchild4 {
+                font-size: 3em;
+            }
+            .test .something__child3 .something__subchild5,
+            .test .something__child3 .something__subchild6 {
+                font-size: 3em;
+            }
+        }
+    }
+    @include assert('multiple elements, nested, modifier in-between') { /// 13 ///
+        @include output {
+            @include iro-bem-block('something') {
+                @include iro-bem-element('child1', 'child2') {
+                    font-size: 2em;
+                    @include iro-bem-modifier('mod') {
+                        @include iro-bem-element('subchild1') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+                @include iro-bem-element('child3') {
+                    font-size: 2em;
+                    @include iro-bem-modifier('mod') {
+                        @include iro-bem-element('subchild2', 'subchild3') {
+                            font-size: 3em;
+                        }
+                    }
+                }
+            }
+        }
+        @include expect {
+            .something__child1,
+            .something__child2 {
+                font-size: 2em;
+            }
+            .something__child1--mod .something__subchild1,
+            .something__child2--mod .something__subchild1 {
+                font-size: 3em;
+            }
+            .something__child3 {
+                font-size: 2em;
+            }
+            .something__child3--mod .something__subchild2,
+            .something__child3--mod .something__subchild3 {
+                font-size: 3em;
+            }
+        }
+    }
+    @include assert('multiple elements, in at-theme') { /// 14 ///
+        @include output(false) {
+            @include iro-bem-block('something') {
+                @include iro-bem-at-theme('dark') {
+                    @include iro-bem-element('child1', 'child2') {
+                        font-size: 2em;
+                    }
+                }
+            }
+        }
+        @include expect(false) {
+            .t-dark .something__child1,
+            [class*=' t-'] .t-dark .something__child1,
+            [class^='t-'] .t-dark .something__child1,
+            .t-dark .something__child2,
+            [class*=' t-'] .t-dark .something__child2,
+            [class^='t-'] .t-dark .something__child2 {
+                font-size: 2em;
+            }
+        }
+    }
+}

diff --git a/test/bem/_iro-bem-element.scss b/test/bem/_iro-bem-element.scss new file mode 100644 index 0000000..f69f133 --- /dev/null +++ b/test/bem/_iro-bem-element.scss
@@ -0,0 +1,491 @@
	1	// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations
	2
	3	//
	4	// Included test cases:
	5	// - /// 1 /// - single element
	6	// - /// 2 /// - single element, manual selector in-between
	7	// - /// 3 /// - single element, modifier in-between
	8	// - /// 4 /// - single element, nested
	9	// - /// 5 /// - single element, nested, manual selector in-between
	10	// - /// 6 /// - single element, nested, modifier in-between
	11	// - /// 7 /// - single element, in at-theme
	12	// - /// 8 /// - multiple elements
	13	// - /// 9 /// - multiple elements, manual selector in-between
	14	// - /// 10 /// - multiple elements, modifier in-between
	15	// - /// 11 /// - multiple elements, nested
	16	// - /// 12 /// - multiple elements, nested, manual selector in-between
	17	// - /// 13 /// - multiple elements, nested, modifier in-between
	18	// - /// 14 /// - single element, in at-theme
	19	//
	20
	21	@include it('iro-bem-element') {
	22	@include assert('single element') { /// 1 ///
	23	@include output {
	24	@include iro-bem-block('something') {
	25	@include iro-bem-element('child') {
	26	font-size: 2em;
	27	}
	28	}
	29	}
	30
	31	@include expect {
	32	.something__child {
	33	font-size: 2em;
	34	}
	35	}
	36	}
	37
	38	@include assert('single element, manual selector in-between') { /// 2 ///
	39	@include output(false) {
	40	@include iro-bem-block('something') {
	41	&:hover {
	42	@include iro-bem-element('child1') {
	43	font-size: 2em;
	44	}
	45	}
	46
	47	.test & {
	48	@include iro-bem-element('child2') {
	49	font-size: 2em;
	50	}
	51	}
	52	}
	53	}
	54
	55	@include expect(false) {
	56	.something:hover .something__child1 {
	57	font-size: 2em;
	58	}
	59
	60	.test .something__child2 {
	61	font-size: 2em;
	62	}
	63	}
	64	}
	65
	66	@include assert('single element, modifier in-between') { /// 3 ///
	67	@include output {
	68	@include iro-bem-block('something') {
	69	@include iro-bem-modifier('mod') {
	70	@include iro-bem-element('child') {
	71	font-size: 2em;
	72	}
	73	}
	74	}
	75	}
	76
	77	@include expect {
	78	.something--mod .something__child {
	79	font-size: 2em;
	80	}
	81	}
	82	}
	83
	84	@include assert('single element, nested') { /// 4 ///
	85	@include output {
	86	@include iro-bem-block('something') {
	87	@include iro-bem-element('child') {
	88	font-size: 2em;
	89
	90	@include iro-bem-element('subchild') {
	91	font-size: 3em;
	92	}
	93	}
	94	}
	95	}
	96
	97	@include expect {
	98	.something__child {
	99	font-size: 2em;
	100	}
	101
	102	.something__child .something__subchild {
	103	font-size: 3em;
	104	}
	105	}
	106	}
	107
	108	@include assert('single element, nested, manual selector in-between') { /// 5 ///
	109	@include output(false) {
	110	@include iro-bem-block('something') {
	111	&:hover {
	112	@include iro-bem-element('child1') {
	113	font-size: 2em;
	114
	115	@include iro-bem-element('subchild1') {
	116	font-size: 3em;
	117	}
	118	}
	119	}
	120
	121	.test & {
	122	@include iro-bem-element('child2') {
	123	font-size: 2em;
	124
	125	@include iro-bem-element('subchild2') {
	126	font-size: 3em;
	127	}
	128	}
	129	}
	130
	131	@include iro-bem-element('child3') {
	132	font-size: 2em;
	133
	134	&:hover {
	135	@include iro-bem-element('subchild3') {
	136	font-size: 3em;
	137	}
	138	}
	139
	140	.test & {
	141	@include iro-bem-element('subchild4') {
	142	font-size: 3em;
	143	}
	144	}
	145	}
	146	}
	147	}
	148
	149	@include expect(false) {
	150	.something:hover .something__child1 {
	151	font-size: 2em;
	152	}
	153
	154	.something:hover .something__child1 .something__subchild1 {
	155	font-size: 3em;
	156	}
	157
	158	.test .something__child2 {
	159	font-size: 2em;
	160	}
	161
	162	.test .something__child2 .something__subchild2 {
	163	font-size: 3em;
	164	}
	165
	166	.something__child3 {
	167	font-size: 2em;
	168	}
	169
	170	.something__child3:hover .something__subchild3 {
	171	font-size: 3em;
	172	}
	173
	174	.test .something__child3 .something__subchild4 {
	175	font-size: 3em;
	176	}
	177	}
	178	}
	179
	180	@include assert('single element, nested, modifier in-between') { /// 6 ///
	181	@include output {
	182	@include iro-bem-block('something') {
	183	@include iro-bem-modifier('mod') {
	184	@include iro-bem-element('child') {
	185	font-size: 2em;
	186
	187	@include iro-bem-element('subchild') {
	188	font-size: 3em;
	189	}
	190	}
	191	}
	192
	193	@include iro-bem-element('child') {
	194	font-size: 2em;
	195
	196	@include iro-bem-modifier('mod') {
	197	@include iro-bem-element('subchild') {
	198	font-size: 3em;
	199	}
	200	}
	201	}
	202	}
	203	}
	204
	205	@include expect {
	206	.something--mod .something__child {
	207	font-size: 2em;
	208	}
	209
	210	.something--mod .something__child .something__subchild {
	211	font-size: 3em;
	212	}
	213
	214	.something__child {
	215	font-size: 2em;
	216	}
	217
	218	.something__child--mod .something__subchild {
	219	font-size: 3em;
	220	}
	221	}
	222	}
	223
	224	@include assert('single element, in at-theme') { /// 7 ///
	225	@include output(false) {
	226	@include iro-bem-block('something') {
	227	@include iro-bem-at-theme('dark') {
	228	@include iro-bem-element('child') {
	229	font-size: 2em;
	230	}
	231	}
	232	}
	233	}
	234
	235	@include expect(false) {
	236	.t-dark .something__child,
	237	[class*=' t-'] .t-dark .something__child,
	238	[class^='t-'] .t-dark .something__child {
	239	font-size: 2em;
	240	}
	241	}
	242	}
	243
	244	@include assert('multiple elements') { /// 8 ///
	245	@include output {
	246	@include iro-bem-block('something') {
	247	@include iro-bem-element('child1', 'child2') {
	248	font-size: 2em;
	249	}
	250	}
	251	}
	252
	253	@include expect {
	254	.something__child1,
	255	.something__child2 {
	256	font-size: 2em;
	257	}
	258	}
	259	}
	260
	261	@include assert('multiple elements, manual selector in-between') { /// 9 ///
	262	@include output(false) {
	263	@include iro-bem-block('something') {
	264	&:hover {
	265	@include iro-bem-element('child1', 'child2') {
	266	font-size: 2em;
	267	}
	268	}
	269
	270	.test & {
	271	@include iro-bem-element('child3', 'child4') {
	272	font-size: 2em;
	273	}
	274	}
	275	}
	276	}
	277
	278	@include expect(false) {
	279	.something:hover .something__child1,
	280	.something:hover .something__child2 {
	281	font-size: 2em;
	282	}
	283
	284	.test .something__child3,
	285	.test .something__child4 {
	286	font-size: 2em;
	287	}
	288	}
	289	}
	290
	291	@include assert('multiple elements, modifier in-between') { /// 10 ///
	292	@include output {
	293	@include iro-bem-block('something') {
	294	@include iro-bem-modifier('mod') {
	295	@include iro-bem-element('child1', 'child2') {
	296	font-size: 2em;
	297	}
	298	}
	299	}
	300	}
	301
	302	@include expect {
	303	.something--mod .something__child1,
	304	.something--mod .something__child2 {
	305	font-size: 2em;
	306	}
	307	}
	308	}
	309
	310	@include assert('multiple elements, nested') { /// 11 ///
	311	@include output {
	312	@include iro-bem-block('something') {
	313	@include iro-bem-element('child1', 'child2') {
	314	font-size: 2em;
	315
	316	@include iro-bem-element('subchild1') {
	317	font-size: 3em;
	318	}
	319	}
	320
	321	@include iro-bem-element('child3') {
	322	font-size: 2em;
	323
	324	@include iro-bem-element('subchild2', 'subchild3') {
	325	font-size: 3em;
	326	}
	327	}
	328	}
	329	}
	330
	331	@include expect {
	332	.something__child1,
	333	.something__child2 {
	334	font-size: 2em;
	335	}
	336
	337	.something__child1 .something__subchild1,
	338	.something__child2 .something__subchild1 {
	339	font-size: 3em;
	340	}
	341
	342	.something__child3 {
	343	font-size: 2em;
	344	}
	345
	346	.something__child3 .something__subchild2,
	347	.something__child3 .something__subchild3 {
	348	font-size: 3em;
	349	}
	350	}
	351	}
	352
	353	@include assert('multiple elements, nested, manual selector in-between') { /// 12 ///
	354	@include output(false) {
	355	@include iro-bem-block('something') {
	356	@include iro-bem-element('child1', 'child2') {
	357	font-size: 2em;
	358
	359	&:hover {
	360	@include iro-bem-element('subchild1') {
	361	font-size: 3em;
	362	}
	363	}
	364
	365	.test & {
	366	@include iro-bem-element('subchild2') {
	367	font-size: 3em;
	368	}
	369	}
	370	}
	371
	372	@include iro-bem-element('child3') {
	373	font-size: 2em;
	374
	375	&:hover {
	376	@include iro-bem-element('subchild3', 'subchild4') {
	377	font-size: 3em;
	378	}
	379	}
	380
	381	.test & {
	382	@include iro-bem-element('subchild5', 'subchild6') {
	383	font-size: 3em;
	384	}
	385	}
	386	}
	387	}
	388	}
	389
	390	@include expect(false) {
	391	.something__child1,
	392	.something__child2 {
	393	font-size: 2em;
	394	}
	395
	396	.something__child1:hover .something__subchild1,
	397	.something__child2:hover .something__subchild1 {
	398	font-size: 3em;
	399	}
	400
	401	.test .something__child1 .something__subchild2,
	402	.test .something__child2 .something__subchild2 {
	403	font-size: 3em;
	404	}
	405
	406	.something__child3 {
	407	font-size: 2em;
	408	}
	409
	410	.something__child3:hover .something__subchild3,
	411	.something__child3:hover .something__subchild4 {
	412	font-size: 3em;
	413	}
	414
	415	.test .something__child3 .something__subchild5,
	416	.test .something__child3 .something__subchild6 {
	417	font-size: 3em;
	418	}
	419	}
	420	}
	421
	422	@include assert('multiple elements, nested, modifier in-between') { /// 13 ///
	423	@include output {
	424	@include iro-bem-block('something') {
	425	@include iro-bem-element('child1', 'child2') {
	426	font-size: 2em;
	427
	428	@include iro-bem-modifier('mod') {
	429	@include iro-bem-element('subchild1') {
	430	font-size: 3em;
	431	}
	432	}
	433	}
	434
	435	@include iro-bem-element('child3') {
	436	font-size: 2em;
	437
	438	@include iro-bem-modifier('mod') {
	439	@include iro-bem-element('subchild2', 'subchild3') {
	440	font-size: 3em;
	441	}
	442	}
	443	}
	444	}
	445	}
	446
	447	@include expect {
	448	.something__child1,
	449	.something__child2 {
	450	font-size: 2em;
	451	}
	452
	453	.something__child1--mod .something__subchild1,
	454	.something__child2--mod .something__subchild1 {
	455	font-size: 3em;
	456	}
	457
	458	.something__child3 {
	459	font-size: 2em;
	460	}
	461
	462	.something__child3--mod .something__subchild2,
	463	.something__child3--mod .something__subchild3 {
	464	font-size: 3em;
	465	}
	466	}
	467	}
	468
	469	@include assert('multiple elements, in at-theme') { /// 14 ///
	470	@include output(false) {
	471	@include iro-bem-block('something') {
	472	@include iro-bem-at-theme('dark') {
	473	@include iro-bem-element('child1', 'child2') {
	474	font-size: 2em;
	475	}
	476	}
	477	}
	478	}
	479
	480	@include expect(false) {
	481	.t-dark .something__child1,
	482	[class*=' t-'] .t-dark .something__child1,
	483	[class^='t-'] .t-dark .something__child1,
	484	.t-dark .something__child2,
	485	[class*=' t-'] .t-dark .something__child2,
	486	[class^='t-'] .t-dark .something__child2 {
	487	font-size: 2em;
	488	}
	489	}
	490	}
	491	}