Skip to content

Commit

Permalink
add injetable css
Browse files Browse the repository at this point in the history
  • Loading branch information
cea2aj committed Nov 24, 2021
1 parent 187cf6b commit ef508bd
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 0 deletions.
31 changes: 31 additions & 0 deletions sample-app/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions sample-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
"private": true,
"dependencies": {
"@babel/core": "^7.14.8",
"@css-modules-theme/core": "^2.3.0",
"@css-modules-theme/react": "^2.3.0",
"@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
"@reduxjs/toolkit": "^1.5.1",
"@svgr/webpack": "5.5.0",
Expand Down
60 changes: 60 additions & 0 deletions sample-app/src/utils/composeCssClasses.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { composeTheme } from '@css-modules-theme/core';
import { Compose, Theme } from '@css-modules-theme/core';

/**
* The method of combining a component's built-in CSS classes with custom CSS classes
* @remarks
* Merge keeps the component's built-in classes and adds the custom classes to them (default).
* Replace ignore all of the component’s built-in classes and only uses the custom classes.
* Assign keeps the component's built-in classes, however custom classes will completely override their associated built-in classes.
*/
export type Composition = 'merge' | 'replace' | 'assign';

/**
* Combines a component's built-in CSS classes with custom CSS classes.
* @param builtInClasses The component's built-in css classes
* @param customClasses The custom classes to combine with the built-in ones
* @param composition The method of combining the built-in classes with the custom classes
* @returns
*/
export function composeCssClasses<ClassInterface> (
builtInClasses: ClassInterface,
customClasses?: ClassInterface,
composition?: Composition
): ClassInterface | Theme {
if (!isThemeObject(customClasses)) {
return builtInClasses;
}
if (!isThemeObject(builtInClasses)) {
return customClasses ?? {};
}
const compose = getCssModulesCompose(composition);
return composeTheme([{ theme: builtInClasses }, { theme: customClasses, compose }]);
}

/**
* Transforms the Composition types to the Compose types of the css-modules-theme library
* @param composition The composition method
* @returns
*/
function getCssModulesCompose(composition?: Composition): Compose {
if (composition === 'replace') {
return Compose.Replace;
} else if (composition === 'assign') {
return Compose.Assign;
} else {
return Compose.Merge;
}
}

/**
* Returns true if the object can be used a as css-modules-theme Theme
* @param obj The object to test
* @returns
*/
function isThemeObject (obj: unknown): obj is Theme {
if (obj === null || typeof obj !== 'object') {
return false;
}
return true;
}

0 comments on commit ef508bd

Please sign in to comment.