Skip to content

Commit d5cfc2d

Browse files
brijeshb42Brijesh Bittu
brijeshb42
and
Brijesh Bittu
authored
[pigment-core] Create new UI framework independent package (#371)
Co-authored-by: Brijesh Bittu <brijesh42@gmail.com>
1 parent 2992662 commit d5cfc2d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+2103
-4
lines changed

‎.codesandbox/ci.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"installCommand": "install:codesandbox",
44
"node": "18",
55
"packages": [
6+
"packages/pigment-css-core",
67
"packages/pigment-css-nextjs-plugin",
78
"packages/pigment-css-react",
89
"packages/pigment-css-theme",

‎.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
/packages/pigment-css-react/exports/
1010
/packages/pigment-css-react/theme/
1111
/packages/pigment-css-react/tests/**/fixtures
12+
/packages/pigment-css-core/exports/
13+
/packages/pigment-css-core/tests/**/fixtures
1214
/packages/pigment-css-nextjs-plugin/loader.js
1315
# Ignore fixtures
1416
/packages-internal/scripts/typescript-to-proptypes/test/*/*

‎packages/pigment-css-core/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
runtime
2+
processors

‎packages/pigment-css-core/README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Pigment CSS
2+
3+
Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
4+
5+
## Getting started
6+
7+
Pigment CSS supports Next.js and Vite with support for more bundlers in the future.
8+
9+
### Why choose Pigment CSS
10+
11+
Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "traditional" CSS-in-JS solutions that process styles at runtime are no longer required for unlocking features like color transformations and theme variables which are necessary for maintaining a sophisticated design system.
12+
13+
Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components.
14+
15+
Compared to its predecessors, Pigment CSS offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components.
16+
Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment CSS in v6.
17+
18+
### Installation
19+
20+
<!-- #default-branch-switch -->
21+
22+
```bash
23+
npm install @pigment-css/core
24+
npm install --save-dev @pigment-css/nextjs-plugin
25+
```
26+
27+
<!-- Replace this with the documentation link once it is available. -->
28+
29+
For more information and getting started guide, check the [repository README.md](https://github.com/mui/pigment-css).

‎packages/pigment-css-core/exports/css.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Object.defineProperty(exports, '__esModule', {
2+
value: true,
3+
});
4+
5+
exports.default = require('../processors/css').CssProcessor;

‎packages/pigment-css-core/exports/keyframes.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Object.defineProperty(exports, '__esModule', {
2+
value: true,
3+
});
4+
5+
exports.default = require('../processors/keyframes').KeyframesProcessor;

‎packages/pigment-css-core/package.json‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
{
2+
"name": "@pigment-css/core",
3+
"version": "0.0.27",
4+
"main": "build/index.js",
5+
"module": "build/index.mjs",
6+
"types": "build/index.d.ts",
7+
"author": "MUI Team",
8+
"description": "A zero-runtime CSS-in-JS library.",
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/mui/pigment-css.git",
12+
"directory": "packages/pigment-css-core"
13+
},
14+
"license": "MIT",
15+
"bugs": {
16+
"url": "https://github.com/mui/pigment-css/issues"
17+
},
18+
"homepage": "https://github.com/mui/pigment-css/tree/master/README.md",
19+
"funding": {
20+
"type": "opencollective",
21+
"url": "https://opencollective.com/mui-org"
22+
},
23+
"scripts": {
24+
"clean": "rimraf build",
25+
"watch": "tsup --watch --clean false",
26+
"copy-license": "node ../../scripts/pigment-license.mjs",
27+
"build": "tsup",
28+
"test": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/pigment-css-core/**/*.test.{js,ts,tsx}'",
29+
"test:update": "cd ../../ && cross-env NODE_ENV=test UPDATE_FIXTURES=true mocha 'packages/pigment-css-core/**/*.test.{js,ts,tsx}'",
30+
"test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-css-core mocha 'packages/pigment-css-core/**/*.test.{js,ts,tsx}'",
31+
"typescript": "tsc --noEmit -p ."
32+
},
33+
"dependencies": {
34+
"@babel/types": "^7.25.8",
35+
"@pigment-css/utils": "workspace:*",
36+
"@pigment-css/theme": "workspace:^",
37+
"@wyw-in-js/processor-utils": "^0.5.5",
38+
"@wyw-in-js/shared": "^0.5.5",
39+
"@wyw-in-js/transform": "^0.5.5",
40+
"csstype": "^3.1.3"
41+
},
42+
"devDependencies": {
43+
"@types/chai": "^4.3.14",
44+
"chai": "^4.4.1",
45+
"prettier": "^3.3.3"
46+
},
47+
"sideEffects": false,
48+
"publishConfig": {
49+
"access": "public"
50+
},
51+
"wyw-in-js": {
52+
"tags": {
53+
"keyframes": "./exports/keyframes.js",
54+
"css": "./exports/css.js"
55+
}
56+
},
57+
"files": [
58+
"src",
59+
"build",
60+
"exports",
61+
"processors",
62+
"runtime",
63+
"package.json",
64+
"styles.css",
65+
"LICENSE"
66+
],
67+
"exports": {
68+
".": {
69+
"require": {
70+
"types": "./build/index.d.ts",
71+
"default": "./build/index.js"
72+
},
73+
"import": {
74+
"types": "./build/index.d.mts",
75+
"default": "./build/index.mjs"
76+
}
77+
},
78+
"./package.json": "./package.json",
79+
"./styles.css": "./styles.css",
80+
"./processors/css": {
81+
"require": {
82+
"types": "./processors/css.d.ts",
83+
"default": "./processors/css.js"
84+
},
85+
"import": {
86+
"types": "./processors/css.d.mts",
87+
"default": "./processors/css.mjs"
88+
}
89+
},
90+
"./processors/keyframes": {
91+
"require": {
92+
"types": "./processors/keyframes.d.ts",
93+
"default": "./processors/keyframes.js"
94+
},
95+
"import": {
96+
"types": "./processors/keyframes.d.mts",
97+
"default": "./processors/keyframes.mjs"
98+
}
99+
},
100+
"./exports/*": {
101+
"require": "./exports/*.js",
102+
"default": "./exports/*.js"
103+
},
104+
"./runtime": {
105+
"require": {
106+
"types": "./runtime/index.d.ts",
107+
"default": "./runtime/index.js"
108+
},
109+
"import": {
110+
"types": "./runtime/index.d.mts",
111+
"default": "./runtime/index.mjs"
112+
}
113+
}
114+
},
115+
"nx": {
116+
"targets": {
117+
"test": {
118+
"cache": false,
119+
"dependsOn": [
120+
"build"
121+
]
122+
},
123+
"test:update": {
124+
"cache": false,
125+
"dependsOn": [
126+
"build"
127+
]
128+
},
129+
"test:ci": {
130+
"cache": false,
131+
"dependsOn": [
132+
"build"
133+
]
134+
},
135+
"build": {
136+
"outputs": [
137+
"{projectRoot}/build"
138+
],
139+
"dependsOn": [
140+
"^build"
141+
]
142+
}
143+
}
144+
}
145+
}

‎packages/pigment-css-core/src/base.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import type * as CSS from 'csstype';
2+
import { Theme, ThemeKey } from '@pigment-css/theme';
3+
4+
export type CSSProperties = CSS.PropertiesFallback<number | string> & {
5+
[index: `--${string}`]: string;
6+
[index: `$${string}`]: string;
7+
};
8+
9+
type CSSPropertiesBase = {
10+
[K in keyof CSSProperties]: CSSProperties[K];
11+
};
12+
13+
export type CSSPropertiesMultiValue = {
14+
[K in keyof CSSProperties]:
15+
| ThemeKey
16+
| CSSProperties[K]
17+
| Array<Extract<CSSProperties[K], string>>;
18+
};
19+
20+
export type CSSPseudosNoCallback = { [K in CSS.Pseudos]?: CSSObjectNoCallback };
21+
22+
export interface CSSOthersObjectNoCallback {
23+
[selector: string]: CSSObjectNoCallback;
24+
}
25+
26+
export type CSSObjectNoCallback =
27+
| CSSPropertiesMultiValue
28+
| CSSPseudosNoCallback
29+
| CSSOthersObjectNoCallback;
30+
31+
export type CSSPropertiesMultiValueWithProps<Props extends object> = {
32+
[K in keyof CSSPropertiesMultiValue]:
33+
| CSSPropertiesMultiValue[K]
34+
| ((props: Props) => CSSPropertiesBase[K]);
35+
};
36+
37+
export type CSSPseudos<Props extends object> = { [K in CSS.Pseudos]?: CSSObject<Props> };
38+
39+
export interface CSSOthersObject<Props extends object> {
40+
[selector: string]: CSSObject<Props>;
41+
}
42+
43+
export type CSSObject<Props extends object> =
44+
| CSSPropertiesMultiValueWithProps<Props>
45+
| CSSPseudos<Props>
46+
| CSSOthersObject<Props>;
47+
48+
export type ThemeArgs = {
49+
theme: Theme;
50+
};
51+
export type Primitive = string | String | null | undefined | boolean | number;

‎packages/pigment-css-core/src/css.ts‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { generateErrorMessage } from './utils';
2+
3+
import { CSSObjectNoCallback, CSSProperties, Primitive, ThemeArgs } from './base';
4+
5+
export type CssFn<Props extends object> = (props: Props) => string | number;
6+
7+
export type Variants = {
8+
[VariantGroup: string]: {
9+
[VariantName: string]: CSSObjectNoCallback;
10+
};
11+
};
12+
13+
export type VariantNames<T extends Variants> = {
14+
[K in keyof T]?: keyof T[K];
15+
};
16+
17+
export type CompoundVariant<T extends Variants> = VariantNames<T> & {
18+
css: CSSProperties;
19+
};
20+
21+
type CVAConfig<V extends Variants> = {
22+
variants?: V;
23+
compoundVariants?: CompoundVariant<V>[];
24+
defaultVariants?: VariantNames<V>;
25+
};
26+
27+
export type ClassNameOptions =
28+
| {
29+
variantName: string;
30+
variantValue: string;
31+
}
32+
| {
33+
isCv: true;
34+
};
35+
36+
export interface BaseInterface {
37+
/**
38+
* Corresponds to css class name for `css` or `styled` function calls and keyframe name for `keyframes` function call.
39+
*/
40+
className?: string | ((opts?: ClassNameOptions) => string);
41+
}
42+
43+
type TemplateLiteralItems = Primitive | CSSProperties;
44+
45+
type CSSWithVariants<V extends Variants> = CSSObjectNoCallback & CVAConfig<V>;
46+
47+
type CssValue<V extends Variants> = CSSWithVariants<V> | string;
48+
49+
export type CssArg<V extends Variants> = ((themeArgs: ThemeArgs) => CssValue<V>) | CssValue<V>;
50+
51+
type CssReturn = {
52+
className: string;
53+
style?: CSSProperties;
54+
};
55+
56+
type CssReturnFn<Props extends {}> = (props?: Props) => CssReturn;
57+
58+
interface CssNoOption {
59+
(
60+
arg: TemplateStringsArray,
61+
...templateArgs: (TemplateLiteralItems | CssFn<{}>)[]
62+
): CssReturnFn<{}>;
63+
64+
<V extends Variants>(...args: CssArg<V>[]): CssReturnFn<VariantNames<V>>;
65+
}
66+
67+
interface CssWithOption {
68+
<M extends BaseInterface>(metadata: M): CssNoOption;
69+
}
70+
71+
const css: CssNoOption & CssWithOption = () => {
72+
throw new Error(generateErrorMessage('css'));
73+
};
74+
75+
export default css;

‎packages/pigment-css-core/src/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export * from '@pigment-css/theme';
2+
export * from './base';
3+
export { default as css } from './css';
4+
export type { Variants, VariantNames, BaseInterface, CssArg } from './css';
5+
export { default as keyframes } from './keyframes';
6+
export * from './utils';

0 commit comments

Comments
 (0)