Импортировать селекторы атрибутов из модуля CSS - PullRequest
Новая
       10

Импортировать селекторы атрибутов из модуля CSS

1 голос
/ 19 июня 2020

Я работаю над обработчиком реакции, который будет загружать стили из модуля (модулей) css на основе свойств, переданных компоненту. Выглядит это примерно так: 

import { useState, useEffect } from 'react';

export type SCSSModule = Record<string, string>;
export type Styles = Record<string, any>;

export default function useStyles(scssModule: SCSSModule, styles: Styles): string {
  const [className, setClassName] = useState<string>('');

  useEffect(() => {
    const classNames: string[] = [];

    for (const k in styles) {
      const attrSelector = `[${k}='${styles[k]}']`;

      if (k in scssModule) {
        classNames.push(scssModule[k]);
      } else if (attrSelector in scssModule) {
        classNames.push(scssModule[attrSelector]);
      } else {
        throw new Error(`Missing style for ${k}=${styles[k]}`);
      }

      setClassName(classNames.join(' '));
    }
  }, [styles]);

  return className;
}

Теоретически я хочу, чтобы мы могли написать модуль (S) CSS следующим образом: 

.grid {
  display: grid;
}

[gutter='small'] {
  grid-gap: 8px;
}

[gutter='medium'] {
  grid-gap: 16px;
}

[gutter='large'] {
  grid-gap: 24px;
}

[columns='1'] {
  grid-template-columns: repeat(1, 1fr);
}

[columns='2'] {
  grid-template-columns: repeat(2, 1fr);
}

[columns='3'] {
  grid-template-columns: repeat(3, 1fr);
}

и иметь возможность используйте такой хук: 

import styles from "./Grid.module.scss"
import useStyles from "../hooks/useStyles"
import type { FC } from "react";

const { grid } = styles;

interface GridProps {
  gutter?: "small" | "medium" | "large";
  columns?: number;
}

const Grid: FC<GridProps> = ({ gutter, columns, children }) => {
  const className = useStyles(styles, { grid, gutter, columns });
  return <div className={className}>{ children }</div>
}

, и это должно сделать загрузку стилей из модуля css на основе шаблона:

  • для каждого переданного ключа, см. если есть точное совпадение для ключа, загрузите его стиль, чтобы вы могли загружать стили напрямую
  • для каждого ключа / значения (опоры), переданного в ловушку, загрузите стили для [propName='propValue']

Кажется, я не могу загрузить определения вроде [columns='1'] {} из модуля CSS.

Я знаю, я мог бы изменить шаблон, чтобы вместо определения стилей для реквизита как [propName='propValue'] {} я мог бы определить их как .propName-propValue {} или что-то в этом роде, но я хочу посмотреть, есть ли это каким-либо образом Можно использовать синтаксис [propName='propValue'] {}.

Видите ли вы способ сделать это?

...