[examples] Add pigment-css-nextjs-ts starter project

[siriwatknp]

The starter project demonstrates the usage of css, keyframes and styled APIs.

Support dark mode via prefers-color-scheme media query (built-in support).

Screen.Recording.2567-03-08.at.13.13.48.mov

---

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

[mui-bot]

Netlify deploy preview

https://deploy-preview-41105--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against bcd0182

[brijeshb42]

Just an FYI, These variables will be random during the build time. In the browser, it'll still be static.

[siriwatknp]

Yes, that's the intention.

[siriwatknp]

I think it's worth mentioning this behavior between emotion/zero-runtime:

{[…Array(10)].map((_, index) => (
    <Bubble
      key={index}
      className={css`
        ${generateBubbleVars()}
      `
    />
)}

Zero-runtime: generate just one set of variables (all instances will have the same styles).
Emotion: generate 10 random set of styles.

[brijeshb42]

Zero-runtime: generate just one set of variables that'll only change when you rebuild the app. And for each build, it'll not change with page refresh.

Emotion: generate 10 random set of styles that'll also change with each page refresh.

[mnajdova]

@siriwatknp overall it looks good. Let's wait for the first alpha release of the zero-runtime, and do a final review.

[danilo-leal]

Just a few writing tweaks so we're consistent with how we refer to "zero-runtime"! I'm not being able to run the example, though, I see this error after running it with either npm or pnpm (and I've also tried running pnpm install on the whole repo before, but nothing...):

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@mui%2fzero-next-plugin - Not found
npm ERR! 404 
npm ERR! 404  '@mui/zero-next-plugin@latest' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git URL.

[siriwatknp]

Just a few writing tweaks so we're consistent with how we refer to "zero-runtime"! I'm not being able to run the example, though, I see this error after running it with either npm or pnpm (and I've also tried running pnpm install on the whole repo before, but nothing...):

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@mui%2fzero-next-plugin - Not found
npm ERR! 404 
npm ERR! 404  '@mui/zero-next-plugin@latest' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git URL.

It's because we haven't released @mui/zero-runtime yet. Will ping you again when it's working.

[brijeshb42]

Got this error while building

   Creating an optimized production build ...
 ⨯ Failed to find font override values for font `Kalnia`
 ⨯ Failed to find font override values for font `Kalnia`
 ✓ Compiled successfully
   Linting and checking validity of types  ..Failed to compile.

./src/app/page.tsx:164:13
Type error: No overload matches this call.
  Overload 2 of 2, '(arg: TemplateStringsArray, ...templateArgs: (Primitve | CssFn)[]): string', gave the following error.
    Object literal may only specify known properties, and 'letterSpacing' does not exist in type 'TemplateStringsArray'.

  162 |           ${josefin.className}
  163 |           ${css({
> 164 |             letterSpacing: "2px",
      |             ^
  165 |             fontSize: "clamp(0.75rem, 0.5885rem + 0.6891vw, 1.25rem)",
  166 |             textTransform: "uppercase",
  167 |             fontWeight: 500,

[mnajdova]

Same as the other PR should we use pigment-css instead of zero?

[danilo-leal]

We'll need to wait the package to be published to review these examples, right?

[siriwatknp]

We'll need to wait the package to be published to review these examples, right?

Yes. This PR can be merged after the release.

[siriwatknp]

Tested. It works.

curl https://codeload.github.com/siriwatknp/material-ui/tar.gz/zero-runtime-starter | tar -xz --strip=2  material-ui-zero-runtime-starter/examples/pigment-css-nextjs-ts
cd pigment-css-nextjs-ts

[brijeshb42]

Yay