Managing concrete'5 typography.css conflicts using Sass

It's important when you are editing a concrete5 site that the appearance of your content in the TinyMCE editor generally matches what it actually looks like on the page. If your headings are red on the site, it makes sense to show them as red in the editor as well.

TinyMCE specifically looks for the file typography.css to tell it how it should style content in its editor, but in many concrete5 themes it's linked in the header as well. The default themes for concrete5 for example link in both main.css and typography.css.

In essence this makes sense, you should only need to define the styles for your base elements once, being used for the display of your site and TinyMCE, don't repeat yourself, right?

But as TinyMCE is expecting just basic styles (so not styles nested under classes), the styles in typography can sometimes interfere with the actual concrete5 interface while logged in. Unfortunately at the moment concrete5 doesn't heavily enforce it's own interface styling on some of the editing panels. Adding something basic like:

h2 {
    color: red; 
    text-align: center;	
    font-family: 'Century Gothic', Arial;
}
 

Ends up with the following mess when you are adding a page list block for example:

That's not what the interface should look like!

This problem gets worse when you are using custom fonts, etc. In this example I've just added some quick styles to the H2 element. A workaround is to prefix the style with #tinymce and a class/ID on your page, e.g. #tinymce h2, .page h2, however this quickly becomes messy and isn't really future proof when TinyMCE is going to be replaced by a newer editor anyway.

The solution using Sass

With our shift to using Sass to build our custom concrete5 themes, we now have additional ways we can organise our CSS and I was determined to resolve this ongoing frustration. 

The first thing I did was not include typography.css in the theme's header. Our themes now just pull in one stylesheet (which we continue to call main.css). It's one less request to the server as a bonus.

We discovered in doing this that TinyMCE will look for and pull in typography.css automatically from the active theme, so it simply needs to exist in the theme folder, not linked in.

We then created _base.scss to store the styles that would normally be in typography.css.  In this, we added our typography styles for headings, paragraphs, etc. Note that this filename has a leading underscore, meaning that Sass won't turn this into an actual .css file - it's intended to be imported and it's called a 'partial'.

Then we created typography.scss, which when compiled actually creates the file typography.css. In this we placed a single line to import the styles from _base.scss:

@import "_base.scss";

Secondly, we created main.scss and in that placed:

.page {
    @import "_base.scss";    
}

This simple structure means we can add styles to _base.scss without the fear of them interfering with concrete5's interface. See our diagram above.

-Ryan