Splitting CSS into structure and skin sections using Sublime Text

README.md

Splitting CSS into structure and skin sections using Sublime Text

Setting Up

Make sure you have Package Control installed

You can install it with these https://sublime.wbond.net/installation.

Install the RegReplace package

Go to Package Control: Install Packages and install RegReplace

Add the settings and commands

Go to Preferences > Package Settings > Reg Replace > Settings - User, and paste https://gist.github.com/natecavanaugh/bcefc9aba3d96d3cc79a#file-reg_replace-sublime-settings into the file.

Go to Preferences > Package Settings > Reg Replace > Commands - User, and paste https://gist.github.com/natecavanaugh/bcefc9aba3d96d3cc79a#file-default-sublime-commands into the file.

Running the commands

• Open your CSS File and select the CSS you wish to split
• Launch the GoTo Anything Palette (ctrl/cmd + shift + P)
• Type "Separate Skin and Structure"
  • This will duplicate your CSS file into two blocks: a "Structure" section at the top, and a "Skin" section at the bottom (which has the /*Skin*/ comment above it)
• Select the CSS in the "Structure" section (so the rules above the Skin comment)
• Launch the GoTo Anything Palette (ctrl/cmd + shift + P)
• Type "Clean Structure", and select it
• Now select all of the CSS in the "Skin" section (everything under the Skin comment)
• Again, Launch the GoTo Anything Palette (ctrl/cmd + shift + P)
• Type "Clean Skin", and select it

You should now have two sections split out and the top one (the "Structure") holding only structural rules, and the bottom one (the "Skin") containing only decorational rules.

Limitations

However, this isn't perfect, so you may need to go through and check that the formatting is still okay (no extraneous new lines, etc), as well as retest the CSS to make sure nothing was messed up (though that should be fairly limited).

The main ones to look out for are border rules. For instance, this rule:

	.some-rule {
		border: 1px solid #F00;
	}

should be split up like this:

	/*Structure*/
	.some-rule {
		border: 1px solid transparent;
	}

	/*Skin*/
	.some-rule {
		border-color: #F00;
	}

But unfortunately, I haven't figured out how to best do this, so they need to be manually done for now.

Default.sublime-commands

[
	{
		"caption": "Reg Replace: Clean Skin",
		"command": "reg_replace",
		"args": {"replacements": ["css_comment_skin_properties", "css_comment_skin_properties_borders", "css_comment_skin_mixins", "css_remove_uncommented_properties", "css_remove_comment_from_property", "css_remove_empty_class_rule", "css_reduce_new_lines"]}
	},
	{
		"caption": "Reg Replace: Clean Structure",
		"command": "reg_replace",
		"args": {"replacements": ["css_comment_skin_properties", "css_comment_skin_properties_borders", "css_comment_skin_mixins", "css_remove_commented_properties", "css_remove_empty_class_rule", "css_reduce_new_lines"]}
	},
	{
		"caption": "Reg Replace: Remove Uncommented CSS Property",
		"command": "reg_replace",
		"args": {"replacements": ["css_remove_uncommented_properties"]}
	},
	{
		"caption": "Reg Replace: Remove Empty CSS Rule",
		"command": "reg_replace",
		"args": {"replacements": ["css_remove_empty_class_rule"]}
	},
	{
		"caption": "Reg Replace: Remove CSS Comment from Property",
		"command": "reg_replace",
		"args": {"replacements": ["css_remove_comment_from_property"]}
	},
	{
		"caption": "Reg Replace: Remove Commented CSS Property",
		"command": "reg_replace",
		"args": {"replacements": ["css_remove_commented_properties"]}
	},
	{
		"caption": "Reg Replace: Reduce New Lines",
		"command": "reg_replace",
		"args": {"replacements": ["css_reduce_new_lines"]}
	},
	{
		"caption": "Reg Replace: Comment Skin",
		"command": "reg_replace",
		"args": {"replacements": ["css_comment_skin_properties", "css_comment_skin_properties_borders", "css_comment_skin_mixins"]}
	},
	{
		"caption": "Reg Replace: Separate Skin & Structure",
		"command": "reg_replace",
		"args": {"replacements": ["css_separate_skin_structure"]}
	}
]

reg_replace.sublime-settings

{
  "selection_only": true,
	"replacements": {
		"css_remove_comment_from_property": {
			"find": "(\\t+)/\\*([^*]+)\\*/(\\n)",
			"replace": "\\1\\2\\3",
			"greedy": true,
			"case": false
		},
		"css_remove_commented_properties": {
			"find": "(\\t+)/\\*([^*]+)\\*/(\\n)",
			"replace": "",
			"greedy": true,
			"case": false
		},
		"css_remove_empty_class_rule": {
			"find": "^(\\t*)&?(\\.|\\[)[^{]+\\{\\n+\\t*\\}",
			"replace": "",
			"greedy": true,
			"case": false
		},
		"css_remove_uncommented_properties": {
			"find": "\\t+[^.&][^/\\n]+?;\\n",
			"replace": "",
			"greedy": true,
			"case": false
		},
		"css_comment_skin_properties": {
			"find": "(\\t+)((box-shadow|background|color|(?:font-(?:family|variant|style|stretch|weight))|outline|text-decoration|text-shadow|word)([^:]+)?:([^;]+)?;)",
			"replace": "\\1/*\\2*/",
			"greedy": true,
			"case": false
		},
		"css_comment_skin_properties_borders": {
			"find": "(\\t+)(((?:border-(?:[^-]+-)?(?:color|style)))([^:]+)?:([^;]+)?;)",
			"replace": "\\1/*\\2*/",
			"greedy": true,
			"case": false
		},
		"css_comment_skin_mixins": {
			"find": "(\\t+)(@include\\s(box-shadow|opacity|border-radius|linear-gradient)([^;]+)?;)",
			"replace": "\\1/*\\2*/",
			"greedy": true,
			"case": false
		},
		"css_separate_skin_structure": {
			"find": "((.|\n)*)",
			"replace": "\\1\\n\\n/*Skin*/\\n\\1",
			"greedy": false,
			"case": false
		},
		"css_reduce_new_lines": {
			"find": "\\n{2,}",
			"replace": "\\n\\n",
			"greedy": true,
			"case": false
		}
	}
}