Написать Babel плагин для обработки CSS Modules #3345
Description
Описание
Задача плагина перевести код:
import { classNamesString } from "../../lib/classNames";
import styles from './Component.module.css';
const colorsClassName = {
blue: styles["Component--color-blue"],
};
const Component = ({ color, mode, appearance, gradientColor }) => {
return (
<div className={classNamesString(
styles.Component,
styles["Component--disabled"],
styles[`Component--mode-${mode}`],
styles[`Component--${appearance}-${gradientColor}`],
colorsClassName[color],
)} />
);
}в
import { classNamesString } from "./helpers/classNames";
const colorsClassName = {
blue: "vkuiComponent--color-blue",
};
const Component = ({ color }) => {
return (
<div className={classNamesString(
"vkuiComponent",
"vkuiComponent--disabled",
styles[`Component--mode-${mode}`],
styles[`Component--${appearance}-${gradientColor}`],
colorsClassName[color],
)} />
);
}
const styles = {
"Component--mode-card": "vkuiComponent--mode-card",
"Component--mode-plain": "vkuiComponent--mode-plain",
"Component--light-1": "vkuiComponent--light-1",
"Component--dark-1": "vkuiComponent--dark-1",
"Component--light-2": "vkuiComponent--light-2",
"Component--dark-2": "vkuiComponent--dark-2",
};второй вариант
import { classNamesString } from "./helpers/classNames";
const colorsClassName = {
blue: "vkuiComponent--color-blue",
};
const Component = ({ color }) => {
return (
<div className={classNamesString(
"vkuiComponent",
"vkuiComponent--disabled",
getClassNameByComputedKey(`Component--mode-${mode}`),
getClassNameByComputedKey(`Component--${appearance}-${gradientColor}`),
colorsClassName[color],
)} />
);
}
function getClassNameByComputedKey(computedKey) {
switch (computedKey) {
case "Component--mode-card":
return "vkuiComponent--mode-card";
case "Component--mode-plain":
return "vkuiComponent--mode-plain";
case "Component--light-1":
return "vkuiComponent--light-1";
case "Component--dark-1":
return "vkuiComponent--dark-1";
case "Component--light-2":
return "vkuiComponent--light-2";
case "Component--dark-2":
return "vkuiComponent--dark-2";
}
}Есть ли готовые решения?
Да, но, к сожалению, они все те, которые удалось найти, не удовлетворяют задаче.
- https://github.com/michalkvasnicak/babel-plugin-css-modules-transform (уже используется [Feature] Добавление поддержки CSS Modules путём использования расширения
*.module.css#2294) - https://github.com/gajus/babel-plugin-react-css-modules