PRO-8588: Add styles cascade (#5196)

* Add styles cascade

* Universal rendering

Author: myovchev

packages/apostrophe/modules/@apostrophecms/styles/index.js

@@ -23,6 +23,7 @@ module.exports = {
     // down the UI slightly but allows the use of a custom render function
     serverRendered: false
   },
+  cascades: [ 'styles' ],
   commands(self) {
     return {
       add: {
@@ -55,7 +56,10 @@ module.exports = {
       }
     };
   },
-  init(self, options) {
+  async init(self, options) {
+    const { default: render } = await import('./ui/universal/render.mjs');
+    self.stylesheetRender = render;
+
     self.apos.doc.addContextOperation({
       action: 'reset-styles-position',
       label: 'apostrophe:stylesResetPosition',

packages/apostrophe/modules/@apostrophecms/styles/lib/methods.js

@@ -1,8 +1,7 @@
 const { createId } = require('@paralleldrive/cuid2');
 const _ = require('lodash');
-const render = require('../utils/render');
 
-module.exports = self => {
+module.exports = (self) => {
   return {
     stylesheet(req) {
       // Stylesheet node should be created only for logged in users.
@@ -49,7 +48,7 @@ module.exports = self => {
       ];
     },
     getStylesheet(doc) {
-      return render(self.schema, doc);
+      return self.stylesheetRender(self.schema, doc);
     },
     addToAdminBar() {
       self.apos.adminBar.add(

packages/apostrophe/modules/@apostrophecms/styles/ui/apos/components/TheAposStyles.vue

@@ -79,7 +79,7 @@
 
 <script>
 import AposThemeMixin from 'Modules/@apostrophecms/ui/mixins/AposThemeMixin';
-import renderCss from 'apostrophe/modules/@apostrophecms/styles/utils/render';
+import renderCss from '../../universal/render.mjs';
 import { klona } from 'klona';
 import postcss from 'postcss';
 import postcssPlugin from 'postcss-viewport-to-container-toggle';

…rophecms/styles/utils/customRenderers.js …/styles/ui/universal/customRenderers.mjspackages/apostrophe/modules/@apostrophecms/styles/utils/customRenderers.js renamed to packages/apostrophe/modules/@apostrophecms/styles/ui/universal/customRenderers.mjs packages/apostrophe/modules/@apostrophecms/styles/utils/customRenderers.js renamed to packages/apostrophe/modules/@apostrophecms/styles/ui/universal/customRenderers.mjs

@@ -1,11 +1,11 @@
-/**
- * Custom render functions for fields with nuanced data structures
- * @param {object} field - the original schema field
- * @param {*} value - the value of the schema field
- * @returns {{ field: object, rule: string }}
- *  - object containing the (un)modified field and CSS rules
- */
-module.exports = {
+export default {
+  /**
+   * Custom render functions for fields with nuanced data structures
+   * @param {object} field - the original schema field
+   * @param {*} value - the value of the schema field
+   * @returns {{ field: object, rule: string }}
+   *  - object containing the (un)modified field and CSS rules
+   */
   box: function(field, value) {
     let rule;
     const {

…es/@apostrophecms/styles/utils/render.js …trophecms/styles/ui/universal/render.mjspackages/apostrophe/modules/@apostrophecms/styles/utils/render.js renamed to packages/apostrophe/modules/@apostrophecms/styles/ui/universal/render.mjs packages/apostrophe/modules/@apostrophecms/styles/utils/render.js renamed to packages/apostrophe/modules/@apostrophecms/styles/ui/universal/render.mjs

@@ -1,8 +1,8 @@
-const customRenderers = require('./customRenderers.js');
+import customRenderers from './customRenderers.mjs';
 // Render a stylesheet from a given schema and doc. Returns
 // a string. No dependencies, so it can be used both front and back end
 
-module.exports = function(schema, doc) {
+export default function(schema, doc) {
   const styles = new Map();
 
   const subset = schema.filter(field => field.selector);

packages/apostrophe/modules/@apostrophecms/widget-type/index.js

@@ -158,7 +158,7 @@
 const _ = require('lodash');
 
 module.exports = {
-  cascades: [ 'fields', 'widgetOperations' ],
+  cascades: [ 'fields', 'styles', 'widgetOperations' ],
   options: {
     neverLoadSelf: true,
     initialModal: true,

packages/apostrophe/test/styles.js

@@ -0,0 +1,63 @@
+const t = require('../test-lib/test.js');
+const assert = require('assert/strict');
+
+describe('Styles', function () {
+  let apos;
+
+  this.timeout(t.timeout);
+
+  before(async function () {
+    apos = await t.create({
+      root: module,
+      modules: {
+        '@apostrophecms/styles': {
+          styles(self, options) {
+            return {
+              add: {
+                border: 'border',
+                borderCard: {
+                  preset: 'border',
+                  label: 'Card Border',
+                  selector: '.card'
+                }
+              }
+            };
+          }
+        },
+        'test-widget': {
+          extend: '@apostrophecms/widget-type',
+          options: {
+            label: 'Test Widget',
+            styles: {
+              add: {
+                border: 'border',
+                backgroundColor: {
+                  type: 'color',
+                  required: true,
+                  property: 'background-color'
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+  });
+
+  after(async function () {
+    return t.destroy(apos);
+  });
+
+  it('@apostrophecms/styles should exist', async function () {
+    assert(
+      apos.modules['@apostrophecms/styles'],
+      '@apostrophecms/styles module should exist'
+    );
+    assert(apos.styles, 'Alias `apos.styles` should exist');
+  });
+
+  it('should cascade styles', async function () {
+    assert(apos.modules['test-widget'].styles, 'test-widget should have a styles property');
+    assert(apos.styles.styles, '@apostrophecms/styles should have a styles property');
+  });
+});