Use CSS-in-JS from @patternfly/react-styles

[jennydaman]

https://www.npmjs.com/package/@patternfly/react-styles

Continues #162

[somya51p]

@jennydaman Can I look into this one too. Can you help me out finding the resources for @pattern/react-styles

[DivyanshiSingh]

@jennydaman I would like to take this up next.

[jennydaman]

@somya51p as mentioned in our conversation in #162, I am not sure where to find documentation on @patternfly/react-styles either. It'll probably take a skim of the source code and a good IDE.

@DivyanshiSingh this issue depends on #162 which has not been merged yet.

[Goodiec]

Hi @jennydaman, I'm Goodness, an Outreachy applicant and I would like to work on the 'Improve ChRIS Core User Interface Experience and extend PACS Query React Components' project. Please could this issue be assigned to me?

[Akpjunior94]

Hi @mairin, My Name is Akpan Abraham, I'm an Outreachy intern and want to contribute to the project "Create external app registration system for React-based user interface". Can I be assigned to this issue please?

[olivcamj]

@jennydaman I am starting to work on this PR and I had a quick question... the current setup has CSS being imported into the JavaScript file after taking a look at the @patternfly/react-styles docs and examples (example) I realize I could keep the file structure the same (styles in a separate file then import into the component) or behavior and styles in a single file. I just want to clarify if you would like the CSS moved directly into JS?

[jennydaman]

Hey everyone sorry for missing these replies!

The issue is about using the "CSS-in-JS" syntax so that CSS files are imported as JavaScript objects, instead of referring to CSS classes by name using strings. For example, instead of

import 'styles.css';
...
<div className="something" />

We prefer

import { styles } from 'styles.css';
...
<div className={styles.something} />

The advantage of CSS modules are, class names can be scoped and they can also be checked to exist at build time.