Merge pull request #2604 from naturalcrit/CSS-Layers

Try @Layers to not need `.page` in user style

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -134,7 +134,7 @@ const BrewRenderer = createClass({
 
 	renderStyle : function() {
 		if(!this.props.style) return;
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.props.style} </style>` }} />;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.props.style}\n} </style>` }} />;
 	},
 
 	renderPage : function(pageText, index){

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -219,12 +219,13 @@ const ListPage = createClass({
 
 	render : function(){
 		return <div className='listPage sitePage'>
+			<style>@layer V3_5ePHB, bundle;</style>
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}
 
 			<div className='content V3'>
-				<div className='phb page'>
+				<div className='page'>
 					{this.renderBrewCollection(this.state.brewCollection)}
 				</div>
 			</div>

client/homebrew/pages/basePages/listPage/listPage.less

@@ -10,14 +10,14 @@
 	-moz-column-width    : auto;
 	-webkit-column-gap   : auto;
 	-moz-column-gap      : auto;
-}
-.listPage{
-	.content{
-		.phb{
-			.noColumns();
 	height               : auto;
 	min-height           : 279.4mm;
 	margin               : 20px auto;
+}
+.listPage{
+	.content{
+		.page{
+			.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
 			&::after{
 				display : none;
 			}

client/homebrew/pages/printPage/printPage.jsx

@@ -60,7 +60,7 @@ const PrintPage = createClass({
 
 	renderStyle : function() {
 		if(!this.state.brew.style) return;
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.state.brew.style} </style>` }} />;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.state.brew.style}\n} </style>` }} />;
 	},
 
 	renderPages : function(){

scripts/buildHomebrew.js

@@ -20,7 +20,8 @@ const transforms = {
 };
 
 const build = async ({ bundle, render, ssr })=>{
-	const css = await lessTransform.generate({ paths: './shared' });
+	let css = await lessTransform.generate({ paths: './shared' });
+	css = `@layer bundle {\n${css}\n}`;
 	await fs.outputFile('./build/homebrew/bundle.css', css);
 	await fs.outputFile('./build/homebrew/bundle.js', bundle);
 	await fs.outputFile('./build/homebrew/ssr.js', ssr);

themes/Legacy/5ePHB/style.less

@@ -1,3 +1,4 @@
+@layer Legacy_5ePHB {
 	@import (less) './themes/fonts/5e legacy/fonts.less';
 	@import (less) './themes/assets/assets.less';
 	@import (less) './themes/phb.depricated.less';
@@ -495,3 +496,4 @@ body {
 			margin-bottom : 10px;
 		}
 	}
+}

themes/V3/5eDMG/style.less

@@ -1,3 +1,4 @@
+@layer V3_5eDMG {
 	:root {
 		//Colors
 		--HB_Color_Accent                : #EBCEC3; // Salmon
@@ -17,3 +18,4 @@
 			bottom : 40px;
 		}
 	}
+}

themes/V3/5ePHB/style.less

@@ -1,3 +1,4 @@
+@layer V3_5ePHB {
 	@import (less) './themes/fonts/5e/fonts.less';
 	@import (less) './themes/assets/assets.less';
 
@@ -794,3 +795,4 @@ body {
 	.page h1 + *{
 		margin-top : 0;
 	}
+}

themes/V3/Blank/style.less

@@ -1,3 +1,4 @@
+@layer V3_Blank {
 	@import (less) './themes/fonts/5e/fonts.less';
 	@import (less) './themes/assets/assets.less';
 
@@ -274,3 +275,4 @@ body {
 			}
 		}
 	}
+}

themes/V3/Journal/style.less

@@ -1,3 +1,4 @@
+@layer V3_Journal {
 	@import (less) './themes/fonts/Journal/fonts.less';
 	@import (less) './themes/assets/assets.less';
 
@@ -557,3 +558,4 @@
 	.page .wide {
 		margin-bottom       : 0.45cm;
 	}
+}