Add data-style attributes for resolved style fields

.github/workflows/cookieplone.yml

@@ -32,7 +32,7 @@ jobs:
 
       - name: Generate Cookieplone-based frontend addon
         run: |
-          uvx cookieplone@2.0.0b1 aurora_addon --no-input
+          uvx --prerelease allow cookieplone aurora_addon --no-input
 
       - name: Install generated package
         working-directory: plone-aurora-add-on

packages/helpers/news/+style-field-values.bugfix

@@ -0,0 +1 @@
+Preserved resolved style field values even when the selected definition does not contribute CSS styles. @sneridagh

packages/helpers/src/styleFields.test.ts

@@ -38,6 +38,19 @@ const resolveDefinitions = vi.fn((fieldName: string) => {
     ];
   }
 
+  if (fieldName === 'size') {
+    return [
+      {
+        name: 's',
+        label: 'Small',
+      },
+      {
+        name: 'm',
+        label: 'Medium',
+      },
+    ];
+  }
+
   return [];
 });
 
@@ -104,6 +117,24 @@ describe('style fields helpers', () => {
     });
   });
 
+  it('returns semantic values even when a definition has no style object', () => {
+    expect(
+      resolveStyleFields({
+        data: {
+          '@type': 'image',
+          size: 'm',
+        },
+        fieldConfigs: {
+          size: {},
+        },
+        resolveDefinitions,
+      }),
+    ).toEqual({
+      style: {},
+      values: { size: 'm' },
+    });
+  });
+
   it('applies configured defaults for missing values', () => {
     const data = {
       type: 'p',

packages/helpers/src/styleFields.ts

@@ -274,12 +274,13 @@ export const resolveStyleFields = ({
 
     if (!effectiveValue) return;
 
-    const definition = findStyleDefinitionByName(definitions, effectiveValue);
+    values[fieldName] = effectiveValue;
 
-    if (!definition?.style) return;
+    const definition = findStyleDefinitionByName(definitions, effectiveValue);
 
-    values[fieldName] = effectiveValue;
-    Object.assign(style, definition.style);
+    if (definition?.style) {
+      Object.assign(style, definition.style);
+    }
   });
 
   return { style, values };

packages/plate/components/editor/plugins/block-width-plugin.test.ts

@@ -183,6 +183,7 @@ describe('block width plugin', () => {
         },
       }),
     ).toEqual({
+      'data-style-blockWidth': 'default',
       style: {
         color: 'red',
         '--block-width': 'var(--default-container-width)',
@@ -232,6 +233,7 @@ describe('block width plugin', () => {
         },
       }),
     ).toEqual({
+      'data-style-blockWidth': 'full',
       style: {
         color: 'red',
         '--block-width': '100%',
@@ -281,6 +283,7 @@ describe('block width plugin', () => {
         },
       }),
     ).toEqual({
+      'data-style-blockWidth': 'layout',
       style: {
         color: 'red',
         '--block-width': 'var(--layout-container-width)',
@@ -669,6 +672,7 @@ describe('block width plugin', () => {
         },
       }),
     ).toEqual({
+      'data-style-blockWidth': 'layout',
       style: {
         color: 'red',
         '--block-width': 'var(--layout-container-width)',
@@ -734,6 +738,7 @@ describe('block width plugin', () => {
         },
       }),
     ).toEqual({
+      'data-style-blockWidth': 'default',
       style: {
         position: 'relative',
         '--block-width': 'var(--default-container-width)',
@@ -1475,6 +1480,7 @@ describe('block width plugin', () => {
         props: { style: {} },
       } as any),
     ).toEqual({
+      'data-style-theme': 'sand',
       style: {
         '--theme-color': 'wheat',
       },

packages/plate/components/editor/plugins/style-fields-plugin.ts

@@ -30,6 +30,14 @@ type ValueElement = Record<string, unknown> & {
   children?: unknown[];
 };
 
+const toStyleFieldDataAttributes = (values: Record<string, string>) =>
+  Object.fromEntries(
+    Object.entries(values).map(([fieldName, value]) => [
+      `data-style-${fieldName}`,
+      value,
+    ]),
+  );
+
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   !!value && typeof value === 'object' && !Array.isArray(value);
 
@@ -231,17 +239,22 @@ export const BaseStyleFieldsPlugin = createSlatePlugin({
           return props;
         }
 
-        const { style } = resolveStyleFields({
+        const { style, values } = resolveStyleFields({
           data: element as Record<string, unknown>,
           fieldConfigs: getElementStyleFieldConfigs(element),
           container: undefined,
           resolveDefinitions: getStyleFieldDefinitionsFromRegistry,
         });
 
-        if (!Object.keys(style).length) return props;
+        const dataAttributes = toStyleFieldDataAttributes(values);
+
+        if (!Object.keys(style).length && !Object.keys(dataAttributes).length) {
+          return props;
+        }
 
         return {
           ...props,
+          ...dataAttributes,
           style: {
             ...(props.style ?? {}),
             ...style,

packages/plate/news/+style-field-data-attrs.feature

@@ -0,0 +1 @@
+Added `data-style-*` attributes for resolved style field values in the Somersault-based editor element props. @sneridagh