CSS for backoffice

[Dan9boi]

How could we do CSS for eg. styling Umbraco Grid in the backoffice?

Requirements:

A way of adding PostCss plugins for only some bundles - Eg. postcss-prefix for prefixing all classes.

Suggestion:

Add a flag to the style-task like:

npm run styles -- -prefix

Or maybe a way of adding bundles of CSS and defining which plugins they use...

[hesselberg]

Awesome! It would be even better if the generated file is a separate file, also just deployed to the dist folder. That way, whenever a new release in the FE project is submitted, the pipeline for the implementation project just pulls in the dist folder, and nobody has to do manual copy / paste of files.

[soreng]

When creating SPA solutions, where umbraco is just used as a content repo, umbraco (or other CMS) can be in a different solution, thus not having the ability to shared frontend code.

This is how many of the solutions in Commerce are being build these days. Please consider this when implementing new features.

[hesselberg]

@soreng exactly -- in the most recent project in our team we've kept the split between our FE repo and Umbraco repo, even though there's no SPA. The Umbraco repo just pulls in the FE as a submodule when building, copying in the dist folder.

[Dan9boi]

...and this repository is for "non-SPA" anyways, but thanks for the concideration @soreng 💯

[Dan9boi]

@hesselberg did you try the "not-so-elegant-but-still-may-work"-solution, adding CSS like this in the backoffice.css:

.umbraco-backoffice {
  @import '../_base/_normalize.css';
  @import '../_base/_variables.css';
  @import '../_base/_base.css';
  @import '../_base/_fonts.css';
  @import '../_base/_grid.css';
}

For doing the nesting, without using a postcss-plugin...

[hesselberg]

@Dan9boi I didn't, but thats more a case of the backoffice.css not being processed by postcss.
This means that the imports will be stay as they are, rather than being inlined.

This on top of the us nesting things and then with the postcss-nested module rewriting it not to be nested, causes a lot of headaches.

Again for our current setup we keep the FE repo and the BE repo separate :-)

[hesselberg]

@Dan9boi in case of that we use the Novicell frontend package for a non Umbraco site, how would this then work? It would either mean that we generate extra stylesheets that will never be used, or, you have to remember to generate the stylesheets every time.

Also, if the Umbraco setups are different, (for instance if one uses the Doc Type Grid Editor, and one doesn't), it also changes the styles and the markup.

[Dan9boi]

You can just decide to only make a new css module (css file in modules folder) that includes the suggested stuff, and you could nest it in whatever - doesn't need to be an umbraco selector...
Maybe just:

.backoffice {
  @import '../_base/_normalize.css';
  @import '../_base/_variables.css';
  @import '../_base/_base.css';
  @import '../_base/_fonts.css';
  @import '../_base/_grid.css';
}

[Dan9boi]

If you have a better solution to the problem, please bring ideas :)

[hesselberg]

I actually did set up a stylesheet being generated specifically for the Umbraco grid, but also the RTE.

First I added postcss-prefixwrap and postcss-import-ext-glob as devDependencies.

I created new postcss config files, similar to the normal one but also including the following plugins:

require("postcss-import-ext-glob")
require("postcss-prefixwrap")(".umb-cell-content")

Then, a few changes to the package.json file:

"config": {
    "DIST": "dist",
    "CSS_MODULES": "src/modules/*.css",
    "CSS_MODULES_UMBRACO_GRID": "src/modules/umbraco/umbraco-grid-master.css",
    "CSS_MODULES_UMBRACO_RTE": "src/modules/umbraco/umbraco-rte-master.css"
  },

"scripts": {
    "styles": "cross-env-shell postcss $npm_package_config_CSS_MODULES --dir $npm_package_config_DIST/css --ext min.css --config config/styles && npm run styles:umbraco",
    "styles:umbraco": "cross-env-shell postcss $npm_package_config_CSS_MODULES_UMBRACO_GRID --dir $npm_package_config_DIST/css --ext min.css --config config/styles-umbraco-grid && cross-env-shell postcss $npm_package_config_CSS_MODULES_UMBRACO_RTE --dir $npm_package_config_DIST/css --ext min.css --config config/styles-umbraco-rte",
}

This will also compile the umbraco stylesheets when running the default styles script.

Finally an example of the umbraco-grid-master.css:

/* Settings */
@import "../../_base/_normalize.css";
@import "../../_base/_variables.css";
@import "../../_base/_fonts.css";
@import "../../_base/_grid.css";
@import "../../_base/_typography.css";
@import "../../_base/_helpers.css";
@import "../../_base/_themes.css";

/* Atoms */
@import-glob '../../01-atoms/**/*.css';

/* Molecules */
@import-glob '../../02-molecules/**/*.css';

/* Organisms */
@import-glob '../../03-organisms/**/*.css';

/* Everything from the base stylesheet, wrapped in a body tag */
body {
... 
}

The result is a minified css file, with a prefix on all classes (and the styling of everything inside the body).

This works well because I know how to target my output, but this wouldn't work for a Premium setup, as the Premium uses two different outputs for the razor. One for the backoffice, and one for the transformed components.

TL;DR
The above is a good way of having CSS for the backoffice, but it modifies the styles script, and generates extra css files that aren't necessary.

It also doesn't work for Novicell Premium, unless you are using the Novicell Premium frontend, and not a custom frontend.

Perhaps this should potentially be added as a guide, rather than a part of the normal repository?