merge-style-modules

Welcome to merge-style-modules 👋

A package that merge style modules

Install

yarn add merge-style-modules

How to use

Sometimes you want to use more than one file with SASS/CSS modules like that:

/* @styles/default.modules.scss */

.container {
  background-color: red;
}

/* @styles/component.modules.scss */

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

import defaultStyle from "@styles/default.modules.scss";
import componentStyle from "@styles/component.modules.scss";
import { useMemo } from "react";

const Component = () => {
  // You can't just merge these objects because of property conflicts
  const styles = useMemo(() => ({ ...defaultStyle, ...componentStyle }), []);

  return <div className={styles.container}>test</div>;
};

So I've created this package :)

Now you just have to do that:

import defaultStyle from "@styles/default.modules.scss";
import componentStyle from "@styles/component.modules.scss";
import { mergeStyles } from "merge-style-modules";
import { useMemo } from "react";

const Component = () => {
  const styles = useMemo(() => mergeStyles(defaultStyle, componentStyle), []);
  return <div className={styles.container}>test</div>;
};

Author

👤 edusantosbrito

• Website: https://brito.top
• Twitter: @edusantosbrito
• Github: @EduSantosBrito

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2020 edusantosbrito.
This project is ISC licensed.

This README was generated with ❤️ by readme-md-generator