Skip to content

Commit 15c06f8

Browse files
brijeshb42brijeshb42
committed
[webpack] Fix support for webpack and add example app
1 parent 3bd6616 commit 15c06f8

File tree

13 files changed

+1730
-43
lines changed

13 files changed

+1730
-43
lines changed

‎apps/pigment-css-webpack-ts/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎apps/pigment-css-webpack-ts/README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Pigment CSS - Vite with TypeScript example project
2+
3+
## How to use
4+
5+
Download the example [or clone the repo](https://github.com/mui/pigment-css):
6+
7+
<!-- #default-branch-switch -->
8+
9+
```bash
10+
curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2 pigment-css-master/examples/pigment-css-vite-ts
11+
cd pigment-css-vite-ts
12+
```
13+
14+
Install it and run:
15+
16+
```bash
17+
npm install
18+
npm run dev
19+
```
20+
21+
or:
22+
23+
<!-- #default-branch-switch -->
24+
25+
[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/pigment-css/tree/master/examples/pigment-css-vite-ts)
26+
27+
[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/pigment-css/tree/master/examples/pigment-css-vite-ts)
28+
29+
## Learn more
30+
31+
To learn more about this example:
32+
33+
- [Pigment CSS documentation](https://github.com/mui/pigment-css/blob/master/README.md) - learn more about Pigment CSS features and APIs.
34+
- [Vite documentation](https://vitejs.dev/guide/) - learn about Vite features and APIs.

‎apps/pigment-css-webpack-ts/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="initial-scale=1, width=device-width" />
6+
<title>Pigment CSS + Webpack + TypeScript</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
</body>
11+
</html>

‎apps/pigment-css-webpack-ts/package.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "@app/wp-app",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "webpack serve --mode development",
7+
"build": "webpack build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"@pigment-css/react": "workspace:^",
12+
"react": "latest",
13+
"react-dom": "latest"
14+
},
15+
"devDependencies": {
16+
"@pigment-css/unplugin": "workspace:^",
17+
"@types/react": "latest",
18+
"@types/react-dom": "latest",
19+
"css-loader": "^7.1.2",
20+
"html-webpack-plugin": "^5.6.0",
21+
"style-loader": "^4.0.0",
22+
"ts-loader": "^9.5.1",
23+
"typescript": "latest",
24+
"webpack": "^5.91.0",
25+
"webpack-cli": "^5.1.4",
26+
"webpack-dev-server": "^5.0.4"
27+
},
28+
"nx": {
29+
"targets": {
30+
"preview": {
31+
"dependsOn": [
32+
"^build"
33+
]
34+
},
35+
"dev": {
36+
"dependsOn": [
37+
"^build"
38+
]
39+
}
40+
}
41+
}
42+
}

‎apps/pigment-css-webpack-ts/src/App.tsx

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
import * as React from 'react';
2+
import { styled, css, keyframes } from '@pigment-css/react';
3+
4+
const scale = keyframes({
5+
to: { scale: 'var(--s2)' },
6+
});
7+
8+
const Link = styled('a', { shouldForwardProp: (prop) => prop !== 'outlined' })<{
9+
outlined?: boolean;
10+
}>(({ theme }) => ({
11+
fontSize: '1rem',
12+
background: 'rgba(0 0 0 / 0.04)',
13+
padding: '0.8rem 1rem',
14+
letterSpacing: '1px',
15+
borderRadius: '8px',
16+
textAlign: 'center',
17+
...theme.applyStyles('dark', {
18+
background: 'rgba(255 255 255 / 0.1)',
19+
}),
20+
variants: [
21+
{
22+
props: { outlined: true },
23+
style: {
24+
background: 'transparent',
25+
color: `hsl(${theme.vars.palette.primary})`,
26+
border: `1px solid hsl(${theme.vars.palette.border})`,
27+
},
28+
},
29+
],
30+
}));
31+
32+
const Bubble = styled('span')({
33+
height: 'var(--size, 100%)',
34+
aspectRatio: '1',
35+
background: 'radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%)',
36+
position: 'absolute',
37+
display: 'inline-block',
38+
left: 'var(--x, 0)',
39+
top: 'var(--y, 0)',
40+
scale: '0',
41+
translate: '-50% -50%',
42+
mixBlendMode: 'multiply',
43+
filter: 'blur(2px)',
44+
animation: `${scale} var(--s, 2s) var(--d, 0s) infinite alternate`,
45+
});
46+
47+
function randomBetween(min: number, max: number) {
48+
return Math.floor(Math.random() * (max - min + 1) + min);
49+
}
50+
51+
function generateBubbleVars() {
52+
return `
53+
--x: ${randomBetween(10, 90)}%;
54+
--y: ${randomBetween(15, 85)}%;
55+
--h: ${randomBetween(0, 360)};
56+
--s2: ${randomBetween(2, 6)};
57+
--d: -${randomBetween(250, 400) / 1000}s;
58+
--s: ${randomBetween(3, 6)}s;
59+
`;
60+
}
61+
62+
export default function Home() {
63+
return (
64+
<main
65+
className={css({
66+
display: 'flex',
67+
flexDirection: 'column',
68+
alignItems: 'center',
69+
justifyContent: 'center',
70+
height: '100lvh',
71+
padding: '20px',
72+
color: 'hsl(var(--palette-foreground))',
73+
backgroundColor: 'hsl(var(--palette-background))',
74+
fontFamily:
75+
"system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
76+
})}
77+
>
78+
<h1
79+
className={`my-custom-class ${css(({ theme }) => ({
80+
fontFamily: 'system-ui, sans-serif',
81+
fontSize: '4rem',
82+
fontWeight: 500,
83+
textAlign: 'center',
84+
position: 'relative',
85+
display: 'flex',
86+
alignItems: 'center',
87+
color: '#888',
88+
marginBottom: '1rem',
89+
...theme.applyStyles('dark', { color: '#fff' }),
90+
}))}`}
91+
>
92+
Pigment&nbsp;CSS
93+
<span
94+
className={css(({ theme }) => ({
95+
position: 'absolute',
96+
inset: '0',
97+
background: 'white',
98+
mixBlendMode: 'color-burn',
99+
overflow: 'hidden',
100+
pointerEvents: 'none',
101+
...theme.applyStyles('dark', {
102+
mixBlendMode: 'darken',
103+
filter: 'brightness(2)',
104+
}),
105+
}))}
106+
>
107+
<Bubble
108+
className={css`
109+
${generateBubbleVars()}
110+
`}
111+
/>
112+
<Bubble
113+
className={css`
114+
${generateBubbleVars()}
115+
`}
116+
/>
117+
<Bubble
118+
className={css`
119+
${generateBubbleVars()}
120+
`}
121+
/>
122+
<Bubble
123+
className={css`
124+
${generateBubbleVars()}
125+
`}
126+
/>
127+
<Bubble
128+
className={css`
129+
${generateBubbleVars()}
130+
`}
131+
/>
132+
<Bubble
133+
className={css`
134+
${generateBubbleVars()}
135+
`}
136+
/>
137+
<Bubble
138+
className={css`
139+
${generateBubbleVars()}
140+
`}
141+
/>
142+
<Bubble
143+
className={css`
144+
${generateBubbleVars()}
145+
`}
146+
/>
147+
<Bubble
148+
className={css`
149+
${generateBubbleVars()}
150+
`}
151+
/>
152+
<Bubble
153+
className={css`
154+
${generateBubbleVars()}
155+
`}
156+
/>
157+
</span>
158+
</h1>
159+
<div
160+
className={css({
161+
fontFamily: 'system-ui, sans-serif',
162+
letterSpacing: '2px',
163+
opacity: 0.6,
164+
lineHeight: 2,
165+
textAlign: 'center',
166+
textWrap: 'balance',
167+
})}
168+
>
169+
CSS-in-JS library with static extraction
170+
</div>
171+
<div
172+
className={css({
173+
display: 'flex',
174+
flexWrap: 'wrap',
175+
gap: '1rem',
176+
marginTop: '2rem',
177+
})}
178+
>
179+
<Link
180+
href="https://github.com/mui/pigment-css/blob/master/README.md"
181+
target="_blank"
182+
rel="noopener noreferrer"
183+
>
184+
Documentation
185+
</Link>
186+
<Link
187+
outlined
188+
href="https://github.com/orgs/mui/projects/27/views/3"
189+
target="_blank"
190+
rel="noopener noreferrer"
191+
>
192+
Roadmap
193+
</Link>
194+
</div>
195+
</main>
196+
);
197+
}

‎apps/pigment-css-webpack-ts/src/augment.d.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type {} from '@pigment-css/react/theme';
2+
import type { ExtendTheme } from '@pigment-css/react';
3+
4+
declare module '@pigment-css/react/theme' {
5+
export interface ThemeArgs {
6+
theme: ExtendTheme<{
7+
colorScheme: 'light' | 'dark';
8+
tokens: {
9+
palette: {
10+
background: string;
11+
foreground: string;
12+
primary: string;
13+
primaryForeground: string;
14+
border: string;
15+
};
16+
};
17+
}>;
18+
}
19+
}

‎apps/pigment-css-webpack-ts/src/globals.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
* {
2+
box-sizing: border-box;
3+
padding: 0;
4+
margin: 0;
5+
}
6+
7+
a {
8+
color: inherit;
9+
text-decoration: none;
10+
}
11+
12+
@media (prefers-color-scheme: dark) {
13+
html {
14+
color-scheme: dark;
15+
}
16+
}

‎apps/pigment-css-webpack-ts/src/main.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom/client';
3+
import '@pigment-css/react/styles.css';
4+
import './globals.css';
5+
import App from './App';
6+
7+
ReactDOM.createRoot(document.getElementById('root')!).render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>,
11+
);

‎apps/pigment-css-webpack-ts/tsconfig.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"compilerOptions": {
3+
"outDir": "./dist/",
4+
"target": "ESNext",
5+
"useDefineForClassFields": true,
6+
"lib": ["DOM", "DOM.Iterable", "ESNext"],
7+
"allowJs": false,
8+
"skipLibCheck": true,
9+
"esModuleInterop": false,
10+
"allowSyntheticDefaultImports": true,
11+
"strict": true,
12+
"forceConsistentCasingInFileNames": true,
13+
"module": "ESNext",
14+
"moduleResolution": "Node",
15+
"resolveJsonModule": true,
16+
"isolatedModules": true,
17+
"jsx": "react-jsx"
18+
},
19+
"include": ["src"],
20+
"references": [{ "path": "./tsconfig.node.json" }]
21+
}

‎apps/pigment-css-webpack-ts/tsconfig.node.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"compilerOptions": {
3+
"composite": true,
4+
"module": "ESNext",
5+
"moduleResolution": "Node",
6+
"allowSyntheticDefaultImports": true
7+
}
8+
}

0 commit comments

Comments
 (0)