[TYPO3-v4] Extending CSS styled content to wrap extension plugins in the frontend

[Thomas "Thasmo" Deinhamer]

Hello folks,

probably you know that several extensions use wrapInBaseClass() inside 
the plugin class to wrap extension plugins inside it's own wrapper.

Imho this is unneccesary markup and I always remove this or sometimes I 
am forced to use it, because I need it for CSS etc.

This TS changes the behaviour of CSS styled content and adds two new 
classes to the csc-default wrap for identifying extension plugins.

TypoScript:
==================================================
tt_content.stdWrap.innerWrap.cObject.default.15 >
tt_content.stdWrap.innerWrap.cObject.default.15 = COA
tt_content.stdWrap.innerWrap.cObject.default.15 {
	
	stdWrap.wrap = class="|"
	required = 1
	
	10 = TEXT
	10 {
		value = csc-default
	}
	
	20 = TEXT
	20 {
		if.isTrue.field = list_type
		noTrimWrap = | ||
		
		value = csc-plugin csc-plugin-{field:list_type}
		insertData = 1
	}
}

tt_content.stdWrap.innerWrap.cObject {
	1 =< tt_content.stdWrap.innerWrap.cObject.default
	1.15.10.value = csc-frame csc-frame-invisible

	5 =< tt_content.stdWrap.innerWrap.cObject.default
	5.15.10.value = csc-frame csc-frame-rulerBefore

	6 =< tt_content.stdWrap.innerWrap.cObject.default
	6.15.10.value = csc-frame csc-frame-rulerAfter

	10 =< tt_content.stdWrap.innerWrap.cObject.default
	10.15.10.value = csc-frame csc-frame-indent

	11 =< tt_content.stdWrap.innerWrap.cObject.default
	11.15.10.value = csc-frame csc-frame-indent3366

	12 =< tt_content.stdWrap.innerWrap.cObject.default
	12.15.10.value = csc-frame csc-frame-indent6633

	20 =< tt_content.stdWrap.innerWrap.cObject.default
	20.15.10.value = csc-frame csc-frame-frame1

	21 =< tt_content.stdWrap.innerWrap.cObject.default
	21.15.10.value = csc-frame csc-frame-frame2
}
==================================================

The resulting Markup is this:
<div id="c30" class="csc-default csc-plugin 
csc-plugin-plugin_name">...</div>

It even works when changing the frame in the backend; looks like this then:
<div id="c30" class="csc-frame csc-frame-frame1 csc-plugin 
csc-plugin-hypestore_category">...</div>

What do you think about this solution? Furthermore I'm aiming for a 
better one, also including the class for the specific "CODE" (or 
'action' in Extbase) inside this div tag, to be able to set CSS for 
specific plugin actions/views.

Thanks for your feedback,
Thomas