Skip to content

examples of icss as well as syncing variables #1162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

examples of icss as well as syncing variables #1162

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c83a177
examples of icss as well as syncing variables
kroko Aug 12, 2020
f5639f9
typo in variable name
kroko Aug 12, 2020
953f940
tab to space
kroko Aug 12, 2020
7bfad02
pass linting except for jsx
kroko Aug 12, 2020
714b6dd
strip jsx to pass linting
kroko Aug 12, 2020
14e0c1e
redundant newline
kroko Aug 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
strip jsx to pass linting
  • Loading branch information
@kroko
kroko authored Aug 12, 2020
commit 714b6dda2ee4b5bb7ff3b3bb255e36b13f75edbd
30 changes: 7 additions & 23 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1441,33 +1441,17 @@ $colorBackground: red;

**Component.jsx**

```javascript
'use strict';

```jsx
import svars from 'variables.scss';
import styles from 'Component.module.scss';
import React, {useRef, useEffect} from 'react';

const Component = () => {
const mountsGlCanvas = useRef();
useEffect(() => {
console.log('Hi there!');
return () => {
console.log('Bye!');
};
}, []);
return (
<div className={styles.componentClass}>
<canvas ref={mountsGlCanvas}/>
</div>
);
};

export default Component;

// somewhere in canvas drawing code
// render DOM with CSS modules class name
// <div className={styles.componentClass}>
// <canvas ref={mountsCanvas}/>
// </div>

const ctx = mountsGlCanvas.current.getContext('2d', {alpha: false});
// somewhere in JavaScript canvas drawing code use the variable directly
// const ctx = mountsCanvas.current.getContext('2d',{alpha: false});
ctx.fillStyle = `${svars.colorBackgroundCanvas}`;
```

Expand Down