mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-28 00:06:53 +01:00
50fb671b66
* docs: add ADRs
* docs/adrs
* fix: update developer guide
* fix: add space
* Update website/docs/contributing/backend/overview.md
Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>
* docs: remove auto-generated sidebar
This should've been in .gitignore, but has only been ignored to the
ignore file for the website subdirectory. (This has been fixed on main.)
* docs: delete empty file
* Revert "docs: delete empty file"
This reverts commit 2435f173ff.
* docs: add frontmatter to new dev docs
* Docs(fix): add quotes around page titles
In yaml, the colon is a special character, so we need to use quotes.
* docs: fix remaining titles
* Update website/docs/contributing/backend/overview.md
Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>
* fix: update empty ADR
* fix: update text to reflect postgres 12
* fix: update backend overview
* fix: remove link
* fix: add form ADR
Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>
Co-authored-by: Thomas Heartman <thomas@getunleash.ai>
1.6 KiB
1.6 KiB
| title |
|---|
| ADR: preferred styles import placement |
Background
SUPERSEDED BY ADR: Preferred styling method
In the codebase, we have found a need to standardise where to locate the styles import. When using CSS modules, the styles import placement matters for the priority of the styles if you are passing through styles to other components. IE:
// import order matters, because the useStyles in MyComponent now
// is after the useStyles import it will not take precedence if it has
// a styling conflict.
import useStyles from './SecondComponent.styles.ts';
import MyComponent from '../MyComponent/MyComponent.tsx';
const SecondComponent = () => {
const styles = useStyles();
return <MyComponent className={styles.overrideStyles} />
}
Decision
We have decided to always place style imports as the last import in the file, so that any components that the file may use can safely be overriden with styles from the parent component.
// Do:
import MyComponent from '../MyComponent/MyComponent.tsx';
import useStyles from './SecondComponent.styles.ts';
const SecondComponent = () => {
const styles = useStyles();
return <MyComponent className={styles.overrideStyles} />;
};
// Don't:
import useStyles from './SecondComponent.styles.ts';
import MyComponent from '../MyComponent/MyComponent.tsx';
const SecondComponent = () => {
const styles = useStyles();
return <MyComponent className={styles.overrideStyles} />;
};
The reason for this decision is to remove the posibillity for hard to find bugs, that are not obvious to detect and that might be time consuming to find a solution to.