Skip to content

Commit 0214e59

Browse files
markdalgleishmarkdalgleish
authored
Add example project, add CodeSandbox links (#66)
1 parent 2cecc8a commit 0214e59

File tree

18 files changed

+1243
-172
lines changed

18 files changed

+1243
-172
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ Basically, it’s [“CSS Modules](https://github.com/css-modules/css-modules)-i
3434

3535
---
3636

37+
🖥   [Try it out for yourself in CodeSandbox.](https://codesandbox.io/s/github/seek-oss/vanilla-extract/tree/master/examples/webpack-react?file=/src/App.css.ts)
38+
39+
---
40+
3741
**Write your styles in `.css.ts` files.**
3842

3943
```ts

‎examples/webpack-react/package.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "vanilla-extract-webpack-react",
3+
"description": "Example React project using vanilla-extract and Sprinkles, compiling with webpack",
4+
"keywords": [
5+
"vanilla-extract",
6+
"sprinkles",
7+
"css-in-js",
8+
"css-in-ts",
9+
"css",
10+
"webpack",
11+
"react"
12+
],
13+
"version": "0.0.0",
14+
"main": "src/index.ts",
15+
"author": "SEEK",
16+
"scripts": {
17+
"start": "webpack serve",
18+
"build": "webpack"
19+
},
20+
"private": true,
21+
"dependencies": {
22+
"@babel/preset-env": "^7.13.15",
23+
"@babel/preset-react": "^7.13.13",
24+
"@babel/preset-typescript": "^7.13.0",
25+
"@vanilla-extract/babel-plugin": "^0.4.0",
26+
"@vanilla-extract/css": "0.4.0",
27+
"@vanilla-extract/sprinkles": "^0.1.0",
28+
"@vanilla-extract/webpack-plugin": "^0.3.0",
29+
"babel-loader": "^8.2.2",
30+
"css-loader": "^5.2.4",
31+
"html-webpack-plugin": "^5.3.1",
32+
"mini-css-extract-plugin": "^1.5.1",
33+
"polished": "^4.1.2",
34+
"react": "^17.0.2",
35+
"react-dom": "^17.0.2",
36+
"tailwindcss": "^2.1.2",
37+
"webpack": "^5.36.1",
38+
"webpack-cli": "^4.6.0",
39+
"webpack-dev-server": "^3.11.2"
40+
},
41+
"devDependencies": {
42+
"@types/react": "^17",
43+
"@types/react-dom": "^17",
44+
"@types/tailwindcss": "^2"
45+
}
46+
}

‎examples/webpack-react/sandbox.config.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"template": "node",
3+
"node": "14",
4+
"container": {
5+
"node": "14"
6+
}
7+
}

‎examples/webpack-react/src/App.css.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { style, composeStyles } from '@vanilla-extract/css';
2+
import { atoms } from './atoms.css';
3+
4+
export const card = composeStyles(
5+
atoms({
6+
background: {
7+
lightMode: 'green-50',
8+
darkMode: 'gray-800',
9+
},
10+
borderRadius: {
11+
mobile: '4x',
12+
desktop: '5x',
13+
},
14+
padding: {
15+
mobile: '7x',
16+
desktop: '8x',
17+
},
18+
}),
19+
style({
20+
transition: 'transform 4s ease-in-out',
21+
':hover': {
22+
cursor: 'default',
23+
transform: 'scale(2) rotate(720deg)',
24+
},
25+
}),
26+
);

‎examples/webpack-react/src/App.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { atoms } from './atoms.css';
2+
import * as styles from './App.css';
3+
4+
export const App = () => (
5+
<div
6+
className={atoms({
7+
background: {
8+
lightMode: 'green-500',
9+
darkMode: 'gray-900',
10+
},
11+
height: '100vh',
12+
width: '100vw',
13+
display: 'flex',
14+
placeItems: 'center',
15+
padding: '6x',
16+
})}
17+
>
18+
<div className={styles.card}>
19+
<div
20+
className={atoms({
21+
display: 'flex',
22+
alignItems: 'center',
23+
flexDirection: 'column',
24+
gap: {
25+
mobile: '5x',
26+
desktop: '6x',
27+
},
28+
})}
29+
>
30+
<h1
31+
className={atoms({
32+
fontFamily: 'body',
33+
textAlign: 'center',
34+
typeSize: {
35+
mobile: '4x',
36+
tablet: '4x',
37+
desktop: '5x',
38+
},
39+
})}
40+
>
41+
<span role="img" aria-label="Waving hand">
42+
👋
43+
</span>
44+
<span role="img" aria-label="vanilla-extract logo">
45+
🧁
46+
</span>
47+
<span role="img" aria-label="Sprinkles logo">
48+
🍨
49+
</span>
50+
</h1>
51+
<h2
52+
className={atoms({
53+
fontFamily: 'body',
54+
color: {
55+
lightMode: 'green-700',
56+
darkMode: 'green-50',
57+
},
58+
textAlign: 'center',
59+
typeSize: {
60+
mobile: '2x',
61+
tablet: '3x',
62+
desktop: '4x',
63+
},
64+
})}
65+
>
66+
Hello from vanilla-extract and Sprinkles
67+
</h2>
68+
</div>
69+
</div>
70+
</div>
71+
);

‎examples/webpack-react/src/atoms.css.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { createAtomicStyles, createAtomsFn } from '@vanilla-extract/sprinkles';
2+
import { vars } from './vars.css';
3+
4+
const responsiveStyles = createAtomicStyles({
5+
conditions: {
6+
mobile: {},
7+
tablet: { '@media': 'screen and (min-width: 768px)' },
8+
desktop: { '@media': 'screen and (min-width: 1024px)' },
9+
},
10+
defaultCondition: 'mobile',
11+
properties: {
12+
display: ['none', 'flex'],
13+
flexDirection: ['row', 'column'],
14+
alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
15+
justifyContent: ['stretch', 'flex-start', 'center', 'flex-end'],
16+
gap: vars.space,
17+
paddingTop: vars.space,
18+
paddingBottom: vars.space,
19+
paddingLeft: vars.space,
20+
paddingRight: vars.space,
21+
width: ['100vw'],
22+
height: ['100vh'],
23+
borderRadius: vars.borderRadius,
24+
fontFamily: vars.fontFamily,
25+
fontSize: vars.fontSize,
26+
lineHeight: vars.lineHeight,
27+
textAlign: ['center'],
28+
},
29+
shorthands: {
30+
padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
31+
paddingX: ['paddingLeft', 'paddingRight'],
32+
paddingY: ['paddingTop', 'paddingBottom'],
33+
placeItems: ['alignItems', 'justifyContent'],
34+
typeSize: ['fontSize', 'lineHeight'],
35+
},
36+
});
37+
38+
const colorModeStyles = createAtomicStyles({
39+
conditions: {
40+
lightMode: {},
41+
darkMode: { '@media': '(prefers-color-scheme: dark)' },
42+
},
43+
defaultCondition: 'lightMode',
44+
properties: {
45+
color: vars.color,
46+
background: vars.color,
47+
},
48+
});
49+
50+
export const atoms = createAtomsFn(responsiveStyles, colorModeStyles);

‎examples/webpack-react/src/global.css.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { globalStyle } from '@vanilla-extract/css';
2+
3+
globalStyle('body, body *', {
4+
all: 'unset',
5+
boxSizing: 'border-box',
6+
});

‎examples/webpack-react/src/index.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { render } from 'react-dom';
2+
import './global.css';
3+
import { App } from './App';
4+
5+
const root = document.createElement('div');
6+
document.body.appendChild(root);
7+
8+
render(<App />, root);

‎examples/webpack-react/src/vars.css.ts‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { createGlobalTheme } from '@vanilla-extract/css';
2+
import { modularScale } from 'polished';
3+
import colors from 'tailwindcss/colors';
4+
5+
const createScale = (ratio: number, base: number) => (steps: number) =>
6+
`${modularScale(steps, base, ratio)}px`;
7+
8+
const spaceScale = createScale(1.4, 4);
9+
const fontSizeScale = createScale(1.3, 16);
10+
const lineHeightScale = createScale(1.25, 24);
11+
const borderRadiusScale = createScale(1.5, 4);
12+
13+
export const vars = createGlobalTheme(':root', {
14+
space: {
15+
none: '0',
16+
'0x': spaceScale(0),
17+
'1x': spaceScale(1),
18+
'2x': spaceScale(2),
19+
'3x': spaceScale(3),
20+
'4x': spaceScale(4),
21+
'5x': spaceScale(5),
22+
'6x': spaceScale(6),
23+
'7x': spaceScale(7),
24+
'8x': spaceScale(8),
25+
},
26+
color: {
27+
white: '#fff',
28+
29+
'gray-50': colors.coolGray[50],
30+
'gray-100': colors.coolGray[100],
31+
'gray-200': colors.coolGray[200],
32+
'gray-300': colors.coolGray[300],
33+
'gray-400': colors.coolGray[400],
34+
'gray-500': colors.coolGray[500],
35+
'gray-600': colors.coolGray[600],
36+
'gray-700': colors.coolGray[700],
37+
'gray-800': colors.coolGray[800],
38+
'gray-900': colors.coolGray[900],
39+
40+
'green-50': colors.emerald[50],
41+
'green-100': colors.emerald[100],
42+
'green-200': colors.emerald[200],
43+
'green-300': colors.emerald[300],
44+
'green-400': colors.emerald[400],
45+
'green-500': colors.emerald[500],
46+
'green-600': colors.emerald[600],
47+
'green-700': colors.emerald[700],
48+
'green-800': colors.emerald[800],
49+
'green-900': colors.emerald[900],
50+
},
51+
borderRadius: {
52+
'0x': borderRadiusScale(0),
53+
'1x': borderRadiusScale(1),
54+
'2x': borderRadiusScale(2),
55+
'3x': borderRadiusScale(3),
56+
'4x': borderRadiusScale(4),
57+
'5x': borderRadiusScale(5),
58+
full: '99999px',
59+
},
60+
fontFamily: {
61+
body:
62+
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
63+
},
64+
fontSize: {
65+
'0x': fontSizeScale(0),
66+
'1x': fontSizeScale(1),
67+
'2x': fontSizeScale(2),
68+
'3x': fontSizeScale(3),
69+
'4x': fontSizeScale(4),
70+
'5x': fontSizeScale(5),
71+
},
72+
lineHeight: {
73+
'0x': lineHeightScale(0),
74+
'1x': lineHeightScale(1),
75+
'2x': lineHeightScale(2),
76+
'3x': lineHeightScale(3),
77+
'4x': lineHeightScale(4),
78+
'5x': lineHeightScale(5),
79+
},
80+
});

‎examples/webpack-react/webpack.config.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const path = require('path');
2+
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
3+
const HtmlWebpackPlugin = require('html-webpack-plugin');
4+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5+
6+
module.exports = {
7+
entry: path.join(__dirname, './src/index.tsx'),
8+
mode: 'development',
9+
resolve: {
10+
extensions: ['.js', '.json', '.ts', '.tsx'],
11+
},
12+
devtool: 'source-map',
13+
module: {
14+
rules: [
15+
{
16+
test: /\.(js|ts|tsx)$/,
17+
exclude: [/node_modules/],
18+
use: [
19+
{
20+
loader: 'babel-loader',
21+
options: {
22+
babelrc: false,
23+
presets: [
24+
'@babel/preset-typescript',
25+
['@babel/preset-react', { runtime: 'automatic' }],
26+
[
27+
'@babel/preset-env',
28+
{ targets: { node: 14 }, modules: false },
29+
],
30+
],
31+
plugins: ['@vanilla-extract/babel-plugin'],
32+
},
33+
},
34+
],
35+
},
36+
{
37+
test: /\.css$/i,
38+
use: [MiniCssExtractPlugin.loader, 'css-loader'],
39+
},
40+
],
41+
},
42+
plugins: [
43+
new HtmlWebpackPlugin(),
44+
new MiniCssExtractPlugin(),
45+
new VanillaExtractPlugin(),
46+
],
47+
stats: 'minimal',
48+
};

0 commit comments

Comments
 (0)