Skip to content

Commit fbeac35

Browse files
joshuaellisjoshuaellis
authored
feat: css variables (#1798)
* chore: demo shuffle * chore: add css variable demo * feat: strings with `var(*)` should be animated * feat: add root finding off CSS variables * feat: add css fallback parsing * docs: update with CSS Variables * fix: revert deps being defined by default * chore: remove install-state * fix: add better testing an correctly parse variables as anticipated * docs: reword CSS variables to be clearer
1 parent 60c0c34 commit fbeac35

File tree

19 files changed

+371
-22
lines changed

19 files changed

+371
-22
lines changed

‎demo/src/App.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Card from './sandboxes/card/src/App'
88
import CardsStack from './sandboxes/cards-stack/src/App'
99
import Chain from './sandboxes/chain/src/App'
1010
import CssKeyframes from './sandboxes/css-keyframes/src/App'
11+
import CssVariables from './sandboxes/css-variables/src/App'
1112

1213
import DecayRocket from './sandboxes/rocket-decay/src/App'
1314
import DraggableList from './sandboxes/draggable-list/src/App'
@@ -46,6 +47,7 @@ const links = {
4647
'cards-stack': CardsStack,
4748
chain: Chain,
4849
'css-keyframes': CssKeyframes,
50+
'css-variables': CssVariables,
4951
'decay-rocket': DecayRocket,
5052
'draggable-list': DraggableList,
5153
'exit-before-enter': ExitBeforeEnter,
@@ -63,8 +65,8 @@ const links = {
6365
slide: Slide,
6466
'svg-filter': SvgFilter,
6567
trail: Trail,
66-
tree: Tree,
6768
viewpager: Viewpager,
69+
tree: Tree,
6870
}
6971

7072
const Example = ({ link }) => {

‎demo/src/index.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,8 @@ body {
2828
.flex.center {
2929
justify-content: center;
3030
}
31+
32+
:root {
33+
--from: #3cffd0;
34+
--to: #277ef4;
35+
}

‎demo/src/sandboxes/css-variables/.prettierrc

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"arrowParens": "avoid",
3+
"jsxBracketSameLine": true,
4+
"printWidth": 120,
5+
"semi": false,
6+
"singleQuote": true,
7+
"tabWidth": 2,
8+
"trailingComma": "es5"
9+
}

‎demo/src/sandboxes/css-variables/package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "spring-css-variables",
3+
"version": "1.0.0",
4+
"main": "src/index.tsx",
5+
"dependencies": {
6+
"@react-spring/web": "*",
7+
"react": "^17.0.1",
8+
"react-dom": "^17.0.1",
9+
"react-scripts": "4.0.3"
10+
},
11+
"scripts": {
12+
"start": "react-scripts start",
13+
"build": "react-scripts build",
14+
"test": "react-scripts test --env=jsdom",
15+
"eject": "react-scripts eject"
16+
},
17+
"browserslist": [
18+
">0.2%",
19+
"not dead",
20+
"not ie <= 11",
21+
"not op_mini all"
22+
],
23+
"bic": false,
24+
"devDependencies": {
25+
"@types/react": "^17.0.2",
26+
"@types/react-dom": "^17.0.1",
27+
"typescript": "^4.2.3"
28+
}
29+
}

‎demo/src/sandboxes/css-variables/public/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6+
<meta name="theme-color" content="#000000" />
7+
<!--
8+
manifest.json provides metadata used when your web app is added to the
9+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10+
-->
11+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
12+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
13+
<!--
14+
Notice the use of %PUBLIC_URL% in the tags above.
15+
It will be replaced with the URL of the `public` folder during the build.
16+
Only files inside the `public` folder can be referenced from the HTML.
17+
18+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19+
work correctly both with client-side routing and a non-root public URL.
20+
Learn how to configure a non-root public URL by running `npm run build`.
21+
-->
22+
<title>React Spring Sandbox</title>
23+
</head>
24+
25+
<body>
26+
<noscript> You need to enable JavaScript to run this app. </noscript>
27+
<div id="root"></div>
28+
<!--
29+
This HTML file is a template.
30+
If you open it directly in the browser, you will see an empty page.
31+
32+
You can add webfonts, meta tags, or analytics to this file.
33+
The build step will place the bundled scripts into the <body> tag.
34+
35+
To begin the development, run `npm start` or `yarn start`.
36+
To create a production bundle, use `npm run build` or `yarn build`.
37+
-->
38+
</body>
39+
</html>

‎demo/src/sandboxes/css-variables/src/App.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
import { useSpring, animated, config } from '@react-spring/web'
3+
import styles from './styles.module.css'
4+
5+
export default function App() {
6+
const [{ background }] = useSpring(
7+
() => ({
8+
from: {
9+
background: 'var(--from, pink)',
10+
},
11+
to: {
12+
background: 'var(--to, purple)',
13+
},
14+
config: config.molasses,
15+
loop: {
16+
reverse: true,
17+
},
18+
}),
19+
[]
20+
)
21+
22+
return (
23+
<div className={styles.container}>
24+
<animated.div className={styles.block} style={{ background }} />
25+
</div>
26+
)
27+
}

‎demo/src/sandboxes/css-variables/src/index.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
html,
2+
body,
3+
#root {
4+
height: 100%;
5+
width: 100%;
6+
}
7+
8+
body {
9+
font-family: system-ui;
10+
margin: 0;
11+
}
12+
13+
*,
14+
*:after,
15+
*:before {
16+
box-sizing: border-box;
17+
}
18+
19+
:root {
20+
--from: #3cffd0;
21+
--to: #277ef4;
22+
}

‎demo/src/sandboxes/css-variables/src/index.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
import App from './App'
4+
import './index.css'
5+
6+
const rootElement = document.getElementById('root')
7+
ReactDOM.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>,
11+
rootElement
12+
)

‎demo/src/sandboxes/css-variables/src/styles.module.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.block {
2+
width: 20vw;
3+
height: 20vw;
4+
display: block;
5+
border-radius: 8px;
6+
}
7+
8+
.container {
9+
display: flex;
10+
align-items: center;
11+
height: 100%;
12+
justify-content: center;
13+
}

‎docs/src/pages/basics.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,7 @@ function Scrolling() {
173173
Springs take pretty much everything, they don't just handle numbers.
174174

175175
- Colors (names, rgb, rgba, hsl, hsla, gradients)
176+
- CSS Variables (declared on :root) and their fallbacks
176177
- Absolute lengths (cm, mm, in, px, pt, pc)
177178
- Relative lengths (em, ex, ch, rem, vw, vh, vmin, vmax, %)
178179
- Angles (deg, rad, grad, turn)
@@ -195,6 +196,7 @@ const props = useSpring({
195196
borderBottom: '10px solid #2D3747',
196197
shape: 'M20,20 L20,380 L380,380 L380,20 L20,20 Z',
197198
textShadow: '0px 5px 15px rgba(255,255,255,0.5)',
199+
color: 'var(--darkModeColor)',
198200
})
199201
```
200202

0 commit comments

Comments
 (0)