[pigment-core] React implementation for the new Pigment CSS API #367

brijeshb42 · 2025-01-14T14:23:57Z

I have followed (at least) the PR section of the contributing guide.

brijeshb42 · 2025-02-27T14:43:00Z

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

@@ -119,6 +119,99 @@ export type CssTailProcessorParams = BaseCssProcessorConstructorParams extends [
  ? T
  : never;

+function handleTemplateElementOrSimilar(


This is the test for the change in implementation.

brijeshb42 · 2025-02-27T14:44:48Z

packages/pigment-css-react-new/src/sx.d.ts

I'll add the implementation for sx in a separate PR. At the current stage, the new package doesn't support sx prop.

dsonet · 2025-03-21T07:45:58Z

packages/pigment-css-react-new/package.json

@@ -0,0 +1,152 @@
+{
+  "name": "@pigment-css/react-new",


Hey there. Thanks for your work. A question about this package name, are we going to remove the -new before it is released?

Yes. Its temporary right now. Before release, this'll become @pigment-css/react and old one will be renamed.

Janpot · 2025-03-24T09:42:06Z

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

+  const { themeArgs = {}, pigmentFeatures: { useLayer = true } = {} } =
+    processor.options as TransformedInternalConfig;
+  // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array.
+  const templateStrs: string[] = [];


const x: TemplateStringsArray = Object.assign([], { raw: [] })

Janpot · 2025-03-24T09:53:25Z

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

+
+  isMaybeTransformedTemplateLiteral(values: ValueCache): boolean {
+    const [, firstArg, ...restArgs] = this.callParam;
+    if (!('kind' in firstArg) || firstArg.kind === ValueType.CONST) {


I don't think I've used the in operator in over a decade 😄
It's purely stylistic in this instance, .hasOwnProperty feels more predictable to me.

I think in makes TS happy too, not sure about .hasOwnProperty.

Correct. in narrows the types to the expected ones.

Janpot · 2025-03-24T09:54:30Z

packages/pigment-css-react-new/README.md

@@ -0,0 +1,29 @@
+# Pigment CSS


Content like this would be useful on the docs. Like a landing page with a bit more information.

Do you mean something in addition to the styling guide ?
Like something similar to the plugin doc.

siriwatknp · 2025-03-28T08:27:36Z

packages/pigment-css-utils/src/utils/processStyle.ts

@@ -157,7 +157,7 @@ function getCss(
  delete style.defaultVariants;

  const { result: baseObj, variables } = processStyle(style, { getVariableName });
-  const cssText = serializeStyles([baseObj as any]).styles;
+  const { styles: cssText } = serializeStyles([baseObj as any]);


Casting type to serializeStyles's input argument would be better than any.

brijeshb42 added the React label Jan 14, 2025

brijeshb42 force-pushed the v1/react-package branch 2 times, most recently from 493fe2c to 534e9c4 Compare January 14, 2025 14:56

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 20, 2025

brijeshb42 force-pushed the v1/react-package branch from 534e9c4 to eb5c3c5 Compare January 21, 2025 03:56

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 21, 2025

brijeshb42 force-pushed the v1/react-package branch 3 times, most recently from b6cb7ee to 9d6424d Compare January 21, 2025 04:51

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 21, 2025

brijeshb42 force-pushed the v1/react-package branch from 9d6424d to 0c8a1c0 Compare January 21, 2025 06:23

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 21, 2025

brijeshb42 force-pushed the v1/react-package branch 6 times, most recently from 6e259a9 to a0d632c Compare February 3, 2025 05:47

brijeshb42 force-pushed the v1/react-package branch from 77a085d to 155b9ef Compare February 8, 2025 05:56

brijeshb42 force-pushed the v1/react-package branch 5 times, most recently from f55bf27 to 7eecf99 Compare February 27, 2025 13:08

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 27, 2025

brijeshb42 force-pushed the v1/react-package branch from 7eecf99 to 2f1a12d Compare February 27, 2025 13:52

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 27, 2025

brijeshb42 marked this pull request as ready for review February 27, 2025 13:54

brijeshb42 requested review from mnajdova and siriwatknp February 27, 2025 13:58

brijeshb42 requested a review from Janpot February 27, 2025 13:58

brijeshb42 changed the title ~~v1/react package~~ [pigment-core] React implementation for the new Pigment CSS API Feb 27, 2025

brijeshb42 force-pushed the v1/react-package branch from 2f1a12d to b900094 Compare February 27, 2025 14:41

brijeshb42 commented Feb 27, 2025

View reviewed changes

brijeshb42 mentioned this pull request Mar 10, 2025

Inquiry About the Future Development of the Project #388

Open

brijeshb42 mentioned this pull request Mar 17, 2025

[docs] All the docs actual content #390

Draft

1 task

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 20, 2025

brijeshb42 force-pushed the v1/react-package branch from 60368c1 to 5a8e8c8 Compare March 20, 2025 12:54

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 20, 2025

dsonet reviewed Mar 21, 2025

View reviewed changes

Brijesh Bittu added 11 commits March 21, 2025 15:25

First working version of pigment-css/react@v1

4ab2422

Implement styled runtime

841238d

Implement runtime and add tests

8275455

Propagate className from prop to the target component

2dc2085

Allow react components in tagged template

074a182

Handle pre-transformed tagged-template literal by swc

f30fca7

Make the package exports work with node10 resolution

04d8b61

Throw error instead of warning when transform fails

8e9c8ec

Consolidate exports to single ts file

fdf6245

Update nx build outputs

4261fc9

Fix argument processing for constant string css

5e57953

brijeshb42 force-pushed the v1/react-package branch from 5a8e8c8 to 5e57953 Compare March 21, 2025 09:55

Janpot reviewed Mar 24, 2025

View reviewed changes

Add docs links

205f055

siriwatknp reviewed Mar 28, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[pigment-core] React implementation for the new Pigment CSS API #367

[pigment-core] React implementation for the new Pigment CSS API #367

brijeshb42 commented Jan 14, 2025

brijeshb42 Feb 27, 2025

brijeshb42 Feb 27, 2025

dsonet Mar 21, 2025

brijeshb42 Mar 21, 2025

Janpot Mar 24, 2025 •

edited

Loading

Janpot Mar 24, 2025

siriwatknp Mar 28, 2025 •

edited

Loading

brijeshb42 Mar 28, 2025

Janpot Mar 24, 2025 •

edited

Loading

brijeshb42 Mar 28, 2025 •

edited

Loading

siriwatknp Mar 28, 2025

[pigment-core] React implementation for the new Pigment CSS API #367

Are you sure you want to change the base?

[pigment-core] React implementation for the new Pigment CSS API #367

Conversation

brijeshb42 commented Jan 14, 2025

brijeshb42 Feb 27, 2025

Choose a reason for hiding this comment

brijeshb42 Feb 27, 2025

Choose a reason for hiding this comment

dsonet Mar 21, 2025

Choose a reason for hiding this comment

brijeshb42 Mar 21, 2025

Choose a reason for hiding this comment

Janpot Mar 24, 2025 • edited Loading

Choose a reason for hiding this comment

Janpot Mar 24, 2025

Choose a reason for hiding this comment

siriwatknp Mar 28, 2025 • edited Loading

Choose a reason for hiding this comment

brijeshb42 Mar 28, 2025

Choose a reason for hiding this comment

Janpot Mar 24, 2025 • edited Loading

Choose a reason for hiding this comment

brijeshb42 Mar 28, 2025 • edited Loading

Choose a reason for hiding this comment

siriwatknp Mar 28, 2025

Choose a reason for hiding this comment

Janpot Mar 24, 2025 •

edited

Loading

siriwatknp Mar 28, 2025 •

edited

Loading

Janpot Mar 24, 2025 •

edited

Loading

brijeshb42 Mar 28, 2025 •

edited

Loading