# Separate styles for frontend + editor

**URL:** https://discourse.roots.io/t/separate-styles-for-frontend-editor/17858
**Category:** sage
**Tags:** webpack, sage9
**Created:** 2020-03-19T15:47:11Z
**Posts:** 1

## Post 1 by @strarsis — 2020-03-19T15:47:12Z

Sometimes extra styles are required for the Gutenberg editor (DOM elements).  
Currently these editor-specific styles (which are not auto-body-mapped to the styles wrapper as they are added as normal stylesheet to Gutenberg editor page) are put in a separate CSS file.  
This often leads to duplication, e.g. in some cases some inline styles from editor have to be overriden using `!important`, but only in the editor styles.

Ideally I could just use some kind of specific syntax like `.test { transform: [...]; @editor-only { transform: [...] !important; }}`. Using this approach the styles and context can be kept together.  
Is this possible with postcss, webpack and sass?  
Is something like this planed for the upcoming Gutenberg-friendly Sage 10?