@cntrl-site/sdk-nextjs 0.2.13 → 0.4.0

package/src/components/useItemPosition.ts

@@ -0,0 +1,36 @@
+import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
+import { useKeyframeValue } from '../common/useKeyframeValue';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+
+const defaultArea = {
+  left: 0,
+  top: 0,
+  width: 0,
+  height: 0,
+  angle: 0,
+  zIndex: 0
+};
+
+export const useItemPosition = (item: TArticleItemAny) => {
+  const layoutId = useCurrentLayout()
+  const { top, left } = useKeyframeValue<{ top: number; left: number }>(
+    item,
+    (item, layoutId) => item.area[layoutId],
+    (animator, scroll, value) => animator.getPositions(value, scroll),
+    [layoutId]
+  );
+  return { top: getItemTopStyle(top, layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top), left };
+};
+
+export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
+  const defaultValue = `${top * 100}vw`;
+  if (!anchorSide) return defaultValue;
+  switch (anchorSide) {
+    case AnchorSide.Top:
+      return defaultValue;
+    case AnchorSide.Center:
+      return `calc(50% + ${top * 100}vw)`;
+    case AnchorSide.Bottom:
+      return `calc(100% + ${top * 100}vw)`;
+  }
+}

package/src/index.ts

@@ -1,8 +1,8 @@
-import { cntrlSdkContext } from './provider/defaultContext';
+export { cntrlSdkContext } from './provider/defaultContext';
 
 export * from '@cntrl-site/sdk';
 
-export { RichTextConverter } from './utils/RichTextConverter';
+export { RichTextConverter } from './utils/RichTextConverter/RichTextConverter';
 export { Page } from './components/Page';
 export { CNTRLHead as Head } from './components/Head';
 export { Article } from './components/Article';
@@ -19,4 +19,3 @@ export { YoutubeEmbedItem } from './components/items/YoutubeEmbed';
 // custom items
 export { CntrlProvider } from './provider/CntrlProvider';
 export type { CustomItemComponent } from './provider/CustomItemTypes';
-export const CustomItems = cntrlSdkContext.customItems;

package/src/provider/ArticleRectContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { ArticleRectObserver } from '../utils/ArticleRectManager/ArticleRectObserver';
+
+export const ArticleRectContext = createContext<ArticleRectObserver | null>(null);

package/src/provider/CntrlSdkContext.ts

@@ -1,7 +1,27 @@
 import { CustomItemRegistry } from './CustomItemRegistry';
+import { TLayout, TTypePresets,  } from '@cntrl-site/sdk';
+
 
 export class CntrlSdkContext {
+  private _typePresets?: TTypePresets;
+  private _layouts: TLayout[] = [];
   constructor(
-    public readonly customItems: CustomItemRegistry
-  ) { }
+    public readonly customItems: CustomItemRegistry,
+  ) {}
+
+  setTypePresets(typePresets: TTypePresets) {
+    this._typePresets = typePresets;
+  }
+
+  setLayouts(layouts: TLayout[]) {
+    this._layouts = layouts;
+  }
+
+  get layouts(): TLayout[] {
+    return this._layouts;
+  }
+
+  get typePresets(): TTypePresets | undefined {
+    return this._typePresets;
+  }
 }

package/src/provider/Keyframes.ts

@@ -0,0 +1,11 @@
+import { TKeyframeAny } from '@cntrl-site/sdk';
+
+export class Keyframes {
+  constructor(
+    private keyframes: TKeyframeAny[] = []
+  ) {}
+
+  getItemKeyframes(itemId: string) {
+    return this.keyframes.filter(kf => kf.itemId === itemId);
+  }
+}

package/src/provider/KeyframesContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+import { Keyframes } from './Keyframes';
+
+export const KeyframesContext = createContext(new Keyframes());
+

package/src/utils/Animator/Animator.ts

@@ -0,0 +1,206 @@
+import { KeyframeType, TKeyframeValueMap } from '@cntrl-site/sdk';
+import { binSearchInsertAt, createInsert } from '../binSearchInsertAt';
+
+export interface AnimationData<T extends KeyframeType> {
+  position: number;
+  value: TKeyframeValueMap[T];
+  type: T;
+}
+
+interface PositionKeyframes<T extends KeyframeType> {
+  start: AnimationData<T>;
+  end: AnimationData<T>;
+}
+
+export type KeyframesMap = {
+  [T in KeyframeType]: AnimationData<T>[];
+};
+
+const compare = (lhs: { position: number }, rhs: { position: number }) => lhs.position - rhs.position;
+const insertBin = createInsert(binSearchInsertAt, compare);
+
+export class Animator {
+  private static pushKeyframeToMap<T extends KeyframeType>(keyframe: AnimationData<T>, map: KeyframesMap): void {
+    insertBin(map[keyframe.type], keyframe);
+  }
+  private keyframesMap: KeyframesMap = createKeyframesMap();
+  constructor(
+    private keyframes: AnimationData<KeyframeType>[]
+  ) {
+    this.fillKeyframesMap();
+  }
+
+  getDimensions(
+    values: TKeyframeValueMap[KeyframeType.Dimensions],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.Dimensions] {
+    const keyframes = this.keyframesMap[KeyframeType.Dimensions];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        width: keyframe.value.width,
+        height: keyframe.value.height
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.Dimensions>(pos, keyframes);
+    return {
+      width: rangeMap(pos, start.position, end.position, start.value.width, end.value.width, true),
+      height: rangeMap(pos, start.position, end.position, start.value.height, end.value.height, true)
+    };
+  }
+
+  getPositions(
+    values: TKeyframeValueMap[KeyframeType.Position],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.Position] {
+    const keyframes = this.keyframesMap[KeyframeType.Position];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        left: keyframe.value.left,
+        top: keyframe.value.top
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.Position>(pos, keyframes);
+    return {
+      left: rangeMap(pos, start.position, end.position, start.value.left, end.value.left, true),
+      top: rangeMap(pos, start.position, end.position, start.value.top, end.value.top, true)
+    };
+  }
+
+  getColor(
+    values: TKeyframeValueMap[KeyframeType.Color],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.Color] {
+    const keyframes = this.keyframesMap[KeyframeType.Color];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        color: keyframe.value.color
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.Color>(pos, keyframes);
+    return {
+      color: this.getRgba(start, end, pos)
+    };
+  }
+
+  getRadius(
+    values: TKeyframeValueMap[KeyframeType.BorderRadius],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.BorderRadius] {
+    const keyframes = this.keyframesMap[KeyframeType.BorderRadius];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        radius: keyframe.value.radius
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.BorderRadius>(pos, keyframes);
+    return {
+      radius: rangeMap(pos, start.position, end.position, start.value.radius, end.value.radius, true)
+    };
+  }
+
+  getBorderWidth(
+    values: TKeyframeValueMap[KeyframeType.BorderWidth],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.BorderWidth] {
+    const keyframes = this.keyframesMap[KeyframeType.BorderWidth];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        borderWidth: keyframe.value.borderWidth
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.BorderWidth>(pos, keyframes);
+    return {
+      borderWidth: rangeMap(pos, start.position, end.position, start.value.borderWidth, end.value.borderWidth, true)
+    };
+  }
+
+  getRotation(
+    values: TKeyframeValueMap[KeyframeType.Rotation],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.Rotation] {
+    const keyframes = this.keyframesMap[KeyframeType.Rotation];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        angle: keyframe.value.angle
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.Rotation>(pos, keyframes);
+    return {
+      angle: rangeMap(pos, start.position, end.position, start.value.angle, end.value.angle, true)
+    };
+  }
+
+  getStartEnd<T extends KeyframeType>(position: number, keyframes: AnimationData<T>[]): PositionKeyframes<T> {
+    const index = binSearchInsertAt(keyframes, { position }, compare);
+    const end = index === keyframes.length ? index - 1 : index;
+    const start = end === 0 ? end : end - 1;
+    return { start: keyframes[start], end: keyframes[end] };
+  }
+
+  private fillKeyframesMap() {
+    this.keyframesMap = createKeyframesMap();
+    for (const keyframe of this.keyframes) {
+      Animator.pushKeyframeToMap(keyframe, this.keyframesMap);
+    }
+  }
+
+  private getRgba(
+    start: AnimationData<KeyframeType.Color>,
+    end: AnimationData<KeyframeType.Color>,
+    position: number
+  ): string {
+    const [startR, startG, startB, startA] = parseRgba(start.value.color);
+    const [endR, endG, endB, endA] = parseRgba(end.value.color);
+    const r = rangeMap(position, start.position, end.position, startR, endR, true);
+    const g = rangeMap(position, start.position, end.position, startG, endG, true);
+    const b = rangeMap(position, start.position, end.position, startB, endB, true);
+    const a = rangeMap(position, start.position, end.position, startA, endA, true);
+    return `rgba(${r},${g},${b},${a})`;
+  }
+}
+
+const reRgba = /^rgba?\( *(\d+) *, *(\d+) *, *(\d+)(?: *, *(\d+(?:\.\d+)?))? *\)$/i;
+
+function parseRgba(color: string): [r: number, g: number, b: number, a: number] {
+  const match = reRgba.exec(color);
+  if (!match) return [0, 0, 0, 1];
+  const [, r, g, b, a] = match;
+  return [parseInt(r, 10), parseInt(g, 10), parseInt(b, 10), a ? parseFloat(a) : NaN];
+}
+
+function createKeyframesMap(): KeyframesMap {
+  return {
+    [KeyframeType.Dimensions]: [],
+    [KeyframeType.Position]: [],
+    [KeyframeType.BorderWidth]: [],
+    [KeyframeType.BorderRadius]: [],
+    [KeyframeType.Color]: [],
+    [KeyframeType.Rotation]: []
+  };
+}
+
+function rangeMap(
+  n: number,
+  start1: number,
+  stop1: number,
+  start2: number,
+  stop2: number,
+  withinBounds: boolean = false
+): number {
+  const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+  if (withinBounds && n < start1) return start2;
+  if (withinBounds && n > stop1) return stop2;
+  return mapped;
+}

package/src/utils/ArticleRectManager/ArticleRectObserver.ts

@@ -0,0 +1,69 @@
+import { EventEmitter } from '../EventEmitter';
+
+interface EventMap {
+  'scroll': undefined;
+  'resize': undefined;
+}
+
+export class ArticleRectObserver extends EventEmitter<EventMap> {
+  private resizeObserver: ResizeObserver;
+  private articleWidth: number = 0;
+  private scrollPos: number = window.scrollY;
+  private animationFrame: number = NaN;
+
+  constructor() {
+    super();
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+  }
+
+  get scroll(): number {
+    return this.scrollPos;
+  }
+
+  get width(): number {
+    return this.articleWidth;
+  }
+
+  private setScroll(scroll: number) {
+    this.scrollPos = scroll;
+  }
+
+  start(el: HTMLElement) {
+    this.resizeObserver.observe(el);
+    const onScroll = () => {
+      this.handleScroll(window.scrollY);
+      if (!isNaN(this.animationFrame)) return;
+      this.animationFrame = window.requestAnimationFrame(() => {
+        this.animationFrame = NaN;
+        this.emit('scroll', undefined);
+      });
+    };
+    window.addEventListener('scroll', onScroll);
+    return () => {
+      this.resizeObserver.unobserve(el);
+      window.removeEventListener('scroll', onScroll);
+      if (!isNaN(this.animationFrame)) {
+        window.cancelAnimationFrame(this.animationFrame);
+        this.animationFrame = NaN;
+      }
+    };
+  }
+
+  private handleScroll = (scroll: number) => {
+    this.setScroll(scroll / this.articleWidth);
+  };
+
+  private handleResize: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
+    const [entry] = entries;
+    if (!entry) return;
+    const element = entry.target;
+    if (!(element instanceof HTMLElement)) return;
+    this.notify(element);
+    this.emit('resize', undefined);
+  };
+
+  private notify(el: HTMLElement) {
+    const elBoundary = el.getBoundingClientRect();
+    this.articleWidth = elBoundary.width;
+  }
+}

package/src/utils/ArticleRectManager/useArticleRectObserver.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import { ArticleRectObserver } from './ArticleRectObserver';
+
+export const useArticleRectObserver = (el?: HTMLElement | null) => {
+  const [articleRectObserver, setArticleRectObserver] = useState<ArticleRectObserver | null>(null);
+
+  useEffect(() => {
+    setArticleRectObserver(new ArticleRectObserver());
+  }, []);
+
+  useEffect(() => {
+    if (!el || !articleRectObserver) return;
+    return articleRectObserver.start(el);
+  }, [el, articleRectObserver]);
+
+  return articleRectObserver;
+};

package/src/utils/EventEmitter.ts

@@ -0,0 +1,41 @@
+export type Listener<P> = (payload: P) => void;
+type Listeners<EventMap> = {
+  [E in keyof (EventMap)]?: Listener<EventMap[E]>[];
+};
+
+export abstract class EventEmitter<EventMap> {
+  protected listeners: Listeners<EventMap> = {};
+
+  on<E extends (keyof EventMap)>(
+    event: E,
+    listener: Listener<EventMap[E]>
+  ): () => void {
+    if (!Array.isArray(this.listeners[event])) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event]?.push(listener);
+    return () => {
+      this.off(event, listener);
+    };
+  }
+
+  off<E extends (keyof EventMap)>(
+    event: E,
+    listener: Listener<EventMap[E]>
+  ): void {
+    const filtered = this.listeners[event]?.filter(l => l !== listener);
+    this.listeners[event] = filtered && filtered.length > 0 ? filtered : undefined;
+  }
+
+  protected emit<E extends (keyof EventMap)>(event: E, payload: EventMap[E]): void {
+    const listeners = this.listeners[event];
+    if (!Array.isArray(listeners)) return;
+    for (const listener of listeners) {
+      try {
+        listener(payload);
+      } catch (error) {
+        console.error(error instanceof Error ? error.stack : error);
+      }
+    }
+  }
+}

package/src/utils/{RichTextConverter.tsx → RichTextConverter/RichTextConverter.tsx}

@@ -7,12 +7,12 @@ import {
   TRichTextItem,
   VerticalAlign
 } from '@cntrl-site/sdk';
-import { LinkWrapper } from '../components/LinkWrapper';
+import { LinkWrapper } from '../../components/LinkWrapper';
 
 interface StyleGroup {
   start: number;
   end: number;
-  styles: DraftStyle[];
+  styles: Style[];
 }
 
 interface EntitiesGroup {
@@ -22,7 +22,7 @@ interface EntitiesGroup {
   end: number;
 }
 
-interface DraftStyle {
+interface Style {
   name: string;
   value?: string;
 }
@@ -36,7 +36,8 @@ export const FontStyles: Record<string, Record<string, string>> = {
 export class RichTextConverter {
   toHtml(
     richText: TRichTextItem,
-    layouts: TLayout[]
+    layouts: TLayout[],
+    hasPreset: boolean
   ): [ReactNode[], string] {
     const { text: rawText, blocks = [] } = richText.commonParams;
     const text = Array.from(rawText); // because of emoji
@@ -86,7 +87,7 @@ export class RichTextConverter {
             .${blockClass} {
               display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
               text-align: ${ta};
-              line-height: 0;
+              ${hasPreset ? '' : 'line-height: 0;'}
               white-space: normal;
               overflow-wrap: break-word;
             }
@@ -215,7 +216,7 @@ export class RichTextConverter {
     return entitiesGroups;
   }
 
-  private static fromDraftToInline(draftStyle: DraftStyle): string {
+  private static fromDraftToInline(draftStyle: Style): string {
     const { value, name } = draftStyle;
     const map: Record<string, Record<string, string | undefined>> = {
       'COLOR': { 'color': value },

package/src/utils/binSearchInsertAt.ts

@@ -0,0 +1,33 @@
+type CompareFn<L, R> = (lhs: L, rhs: R) => number;
+type InsertStrategy<T> = (list: T[], item: T, compare: CompareFn<T, T>) => number;
+
+export function binSearchInsertAt<T, K>(list: T[], item: K, compare: CompareFn<K, T>): number {
+  switch (list.length) {
+    case 0: return 0;
+    case 1: return compare(item, list[0]) < 0 ? 0 : 1;
+  }
+  let start = 0;
+  let end = list.length;
+  let pivot: number;
+  let cmpResult: number;
+  while (start < end) {
+    pivot = start + Math.floor((end - start) / 2);
+    cmpResult = compare(item, list[pivot]);
+    if (cmpResult === 0) return pivot + 1;
+    if (cmpResult < 0) {
+      end = pivot;
+    }
+    if (cmpResult > 0) {
+      start = pivot + 1;
+    }
+  }
+  if (start >= list.length) return list.length;
+  return compare(item, list[start]) < 0 ? start : start + 1;
+}
+
+export function createInsert<T>(start: InsertStrategy<T>, compare: CompareFn<T, T>): (list: T[], item: T) => void {
+  return (list: T[], item: T): void => {
+    const pos = start(list, item, compare);
+    list.splice(pos, 0, item);
+  };
+}

package/src/utils/generateTypePresetStyles/__mock__/layoutsMock.ts

@@ -0,0 +1,37 @@
+import { TLayout } from '@cntrl-site/sdk';
+
+const sampleGrid = {
+  columnsAmount: 0,
+  beatHeight: 0,
+  beatMultiplier: 1,
+  maxWidth: 0,
+  columnWidth: 0.01,
+  gutterWidth: 0.001
+};
+
+export const layoutsMock: TLayout[] = [
+  {
+    id: 'tablet',
+    exemplary: 768,
+    startsWith: 768,
+    title: 'Tablet',
+    icon: 'any',
+    grid: sampleGrid
+  },
+  {
+    id: 'desktop',
+    exemplary: 1440,
+    startsWith: 1024,
+    title: 'Desktop',
+    icon: 'any',
+    grid: sampleGrid
+  },
+  {
+    id: 'mobile',
+    exemplary: 375,
+    startsWith: 0,
+    title: 'Mobile',
+    icon: 'any',
+    grid: sampleGrid
+  }
+];

package/src/utils/generateTypePresetStyles/__mock__/presetMock.ts

@@ -0,0 +1,49 @@
+import { AllowedTags, TTypePresets } from '@cntrl-site/sdk';
+
+const layoutParams = {
+  'desktop': {
+    fontSize: 0.011111,
+    lineHeight: 0.013888,
+    wordSpacing: 0.0006944,
+    letterSpacing: 0.0006944,
+    color: 'rgba(0, 0, 0, 1)'
+  },
+  'tablet': {
+    fontSize: 0.02604,
+    lineHeight: 0.03125,
+    wordSpacing: 0,
+    letterSpacing: 0,
+    color: 'rgba(0, 0, 0, 1)'
+  },
+  'mobile': {
+    fontSize: 0.053333,
+    lineHeight: 0.064,
+    wordSpacing: 0.008,
+    letterSpacing: 0.008,
+    color: 'rgba(0, 0, 0, 1)'
+  }
+};
+
+export const presetMock: TTypePresets = {
+  id: 'presetId',
+  presets: [
+    {
+      id: 'heading01',
+      fontFamily: 'Aeonik',
+      fontWeight: '400',
+      fontStyle: '',
+      name: 'Heading',
+      tag: AllowedTags.h1,
+      layoutParams
+    },
+    {
+      id: 'heading02',
+      fontFamily: 'Aeonik',
+      fontWeight: '400',
+      fontStyle: 'italic',
+      name: 'Heading',
+      tag: AllowedTags.h1,
+      layoutParams
+    }
+  ]
+};

package/src/utils/generateTypePresetStyles/generateTypePresetStyles.test.ts

@@ -0,0 +1,49 @@
+import { generateTypePresetStyles } from './generateTypePresetStyles';
+import { presetMock } from './__mock__/presetMock';
+import { layoutsMock } from './__mock__/layoutsMock';
+
+describe('generateTypePresetStyles', () => {
+  it('generates blocks of styles', () => {
+    const styles = generateTypePresetStyles(presetMock, layoutsMock);
+    const expectedMedia = (id: string) =>
+`@media (min-width: 0px) and (max-width: 767px) {
+  .cntrl-preset-${id} {
+    font-size: 5.3332999999999995vw;
+    line-height: 6.4vw;
+    letter-spacing: 0.8vw;
+    word-spacing: 0.8vw;
+    color: rgba(0, 0, 0, 1);
+  }
+}
+@media (min-width: 768px) and (max-width: 1023px) {
+  .cntrl-preset-${id} {
+    font-size: 2.604vw;
+    line-height: 3.125vw;
+    letter-spacing: 0vw;
+    word-spacing: 0vw;
+    color: rgba(0, 0, 0, 1);
+  }
+}
+@media (min-width: 1024px) {
+  .cntrl-preset-${id} {
+    font-size: 1.1111vw;
+    line-height: 1.3888vw;
+    letter-spacing: 0.06944vw;
+    word-spacing: 0.06944vw;
+    color: rgba(0, 0, 0, 1);
+  }
+}`;
+    expect(styles).toBe(
+`.cntrl-preset-heading01 {
+  font-family: Aeonik;
+  font-weight: 400;
+}
+${expectedMedia('heading01')}
+.cntrl-preset-heading02 {
+  font-family: Aeonik;
+  font-style: italic;
+  font-weight: 400;
+}
+${expectedMedia('heading02')}`);
+  });
+});

package/src/utils/generateTypePresetStyles/generateTypePresetStyles.ts

@@ -0,0 +1,25 @@
+import { getLayoutMediaQuery, TLayout, TTypePresets } from '@cntrl-site/sdk';
+
+const reEmptyLines = /^\s*\n/gm;
+
+export function generateTypePresetStyles(preset: TTypePresets, layouts: TLayout[]): string {
+  const sorted = layouts.slice().sort((a, b) => a.startsWith - b.startsWith);
+  const stylesStr = (`
+    ${preset.presets.map(p => (`
+.cntrl-preset-${p.id} {
+  font-family: ${p.fontFamily};
+  ${p.fontStyle.length > 0 ? `font-style: ${p.fontStyle};` : ''}
+  font-weight: ${p.fontWeight};
+}
+  ${sorted.map(l => (`
+${getLayoutMediaQuery(l.id, sorted)} {
+  .cntrl-preset-${p.id} {
+    font-size: ${p.layoutParams[l.id].fontSize * 100}vw;
+    line-height: ${p.layoutParams[l.id].lineHeight * 100}vw;
+    letter-spacing: ${p.layoutParams[l.id].letterSpacing * 100}vw;
+    word-spacing: ${p.layoutParams[l.id].wordSpacing * 100}vw;
+    color: ${p.layoutParams[l.id].color};
+  }
+}`)).join('\n')}`)).join('\n')}`);
+  return stylesStr.replace(reEmptyLines, '');
+}