lightening aura components style classes are not getting applied to respective component html

Issue details:

1. component hierarchy:

	--App-1
	'-->component-1
	'-->sub_component_1
	'-->sub_component_2
	'-->component-2
	'-->sub_component_3
	'-->sub_component_4

view raw lightening-aura-components-style-1.css hosted with ❤ by GitHub

2. sub_component_1 style class file name will be sub_component_1.css
3. style classes will be  loaded as given below:

	.csub_component_1 .custom-class {
	display: none;
	}

view raw lightening-aura-components-style-2.css hosted with ❤ by GitHub

4. when component div tag try to utilize the above style, its not applying.

	<div class="custom-class">
	<!-- UI Elements -->
	</div>

view raw lightening-aura-components-style-3.htm hosted with ❤ by GitHub

Work around:
wrap your component with div tag having a style class as "c + COMP_Name", given an example below:

	<div class="csub_component_1">
	<div class="custom-class">
	<!-- UI elements -->
	</div>
	</div>

view raw lightening-aura-components-style-4.htm hosted with ❤ by GitHub