[pigment] Rename scope to @pigment-css (#41354)

.codesandbox/ci.json

@@ -49,10 +49,10 @@
     "@mui/types": "packages/mui-types/build",
     "@mui/utils": "packages/mui-utils/build",
     "@mui-internal/docs-utils": "packages/docs-utils",
-    "@pigmentcss/react": "packages/pigment-react",
-    "@pigmentcss/unplugin": "packages/pigment-unplugin",
-    "@pigmentcss/vite-plugin": "packages/pigment-vite-plugin",
-    "@pigmentcss/nextjs-plugin": "packages/pigment-nextjs-plugin"
+    "@pigment-css/react": "packages/pigment-react",
+    "@pigment-css/unplugin": "packages/pigment-unplugin",
+    "@pigment-css/vite-plugin": "packages/pigment-vite-plugin",
+    "@pigment-css/nextjs-plugin": "packages/pigment-nextjs-plugin"
   },
   "sandboxes": [
     "/examples/material-ui-cra-ts",

CHANGELOG.md

@@ -1193,7 +1193,7 @@ A big thanks to the 17 contributors who made this release possible.
 
 - &#8203;<!-- 09 -->Update peer dep of @mui/material (#39398) @brijeshb42
 
-### `@pigmentcss/[email protected]`
+### `@pigment-css/[email protected]`
 
 - &#8203;<!-- 06 -->Implement typings for public runtime API (#39215) @brijeshb42
 
@@ -1794,7 +1794,7 @@ A big thanks to the 11 contributors who made this release possible. This release
 
 - [useButton][base-ui] Accept arbitrary props in getRootProps and forward them (#38475) @DiegoAndai
 
-### `@pigmentcss/[email protected]`
+### `@pigment-css/[email protected]`
 
 - [system][zero][tag] Add support for sx prop (#38535) @brijeshb42
 
@@ -1857,7 +1857,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som
 - [ButtonBase] Add ButtonBase component (#38319) @DiegoAndai
 - [Input] Add InputBase component (#38392) @mj12albert
 
-### `@pigmentcss/[email protected]`
+### `@pigment-css/[email protected]`
 
 - Implementation of styled tag processor for linaria (#38378) @brijeshb42
 

apps/local-ui-lib/index.js

@@ -1,4 +1,4 @@
-import { keyframes, styled } from '@pigmentcss/react';
+import { keyframes, styled } from '@pigment-css/react';
 
 export const bounceAnim = keyframes({
   'from, 20%, 53%, 80%, to': {

apps/local-ui-lib/package.json

@@ -3,6 +3,6 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@pigmentcss/react": "file:../../packages/pigment-react"
+    "@pigment-css/react": "file:../../packages/pigment-react"
   }
 }

apps/pigment-next-app/README.md

@@ -20,7 +20,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-If you see and error like package `@pigmentcss/react` not found, add it as a peer-dependency in `@mui/material`'s `package.json` file and run `pnpm build` and `pnpm install` again. Make sure to not push this change to git.
+If you see and error like package `@pigment-css/react` not found, add it as a peer-dependency in `@mui/material`'s `package.json` file and run `pnpm build` and `pnpm install` again. Make sure to not push this change to git.
 
 ### Note
 

apps/pigment-next-app/next.config.js

@@ -1,10 +1,10 @@
 /* eslint-env node */
 // eslint-ignore-next-line import/no-unresolved
-const { withPigment } = require('@pigmentcss/nextjs-plugin');
+const { withPigment } = require('@pigment-css/nextjs-plugin');
 const { experimental_extendTheme: extendTheme } = require('@mui/material/styles');
 
 /**
- * @typedef {import('@pigmentcss/nextjs-plugin').PigmentOptions} PigmentOptions
+ * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions
  */
 
 const theme = extendTheme({

apps/pigment-next-app/package.json

@@ -9,7 +9,7 @@
     "clean": "rimraf .next"
   },
   "dependencies": {
-    "@pigmentcss/react": "file:../../packages/pigment-react",
+    "@pigment-css/react": "file:../../packages/pigment-react",
     "@mui/utils": "file:../../packages/mui-utils/build",
     "@mui/base": "file:../../packages/mui-base/build",
     "@mui/material": "file:../../packages/mui-material/build",
@@ -23,8 +23,8 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@pigmentcss/unplugin": "file:../../packages/pigment-unplugin",
-    "@pigmentcss/nextjs-plugin": "file:../../packages/pigment-nextjs-plugin",
+    "@pigment-css/unplugin": "file:../../packages/pigment-unplugin",
+    "@pigment-css/nextjs-plugin": "file:../../packages/pigment-nextjs-plugin",
     "@types/node": "^20.5.7",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",

apps/pigment-next-app/src/app/box/page.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable material-ui/no-empty-box */
 
-import { styled } from '@pigmentcss/react';
+import { styled } from '@pigment-css/react';
 import * as React from 'react';
 import { Box as MuiBox } from '../../components/Box';
 

apps/pigment-next-app/src/app/layout.tsx

@@ -3,7 +3,7 @@ import { Inter } from 'next/font/google';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import '@pigmentcss/react/styles.css';
+import '@pigment-css/react/styles.css';
 import theme from './theme';
 
 import './globals.css';

apps/pigment-next-app/src/app/material-ui/layout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@pigmentcss/react';
+import { styled } from '@pigment-css/react';
 
 const Main = styled('div')(({ theme }) => ({
   display: 'flex',

apps/pigment-next-app/src/app/material-ui/page.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import Link from 'next/link';
 import fs from 'fs/promises';
 import path from 'path';
-import { css } from '@pigmentcss/react';
+import { css } from '@pigment-css/react';
 
 export default async function MaterialUIPage() {
   const rootPaths = await fs.readdir(path.join(process.cwd(), `src/app/material-ui`));

apps/pigment-next-app/src/app/page.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { styled, css } from '@pigmentcss/react';
+import { styled, css } from '@pigment-css/react';
 import styles from './page.module.css';
 
 const visuallyHidden = css({

apps/pigment-next-app/src/app/slider/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { styled } from '@pigmentcss/react';
+import { styled } from '@pigment-css/react';
 import { Button } from 'local-ui-lib';
 import Slider from '@/components/Slider/ZeroSlider';
 

apps/pigment-next-app/src/augment.d.ts

@@ -1,6 +1,6 @@
-import type { ExtendTheme } from '@pigmentcss/react';
+import type { ExtendTheme } from '@pigment-css/react';
 
-declare module '@pigmentcss/react/theme' {
+declare module '@pigment-css/react/theme' {
   interface ThemeTokens {
     'max-width': string;
     'border-radius': string;

apps/pigment-next-app/src/components/Box.jsx

@@ -1,4 +1,4 @@
-import { generateAtomics } from '@pigmentcss/react';
+import { generateAtomics } from '@pigment-css/react';
 
 const atomics = generateAtomics(({ theme }) => ({
   conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {

apps/pigment-next-app/src/components/Slider/ZeroSlider.tsx

@@ -8,7 +8,7 @@ import {
   getSliderUtilityClass,
 } from '@mui/material/Slider';
 import { isHostComponent, useSlotProps } from '@mui/base/utils';
-import { styled } from '@pigmentcss/react';
+import { styled } from '@pigment-css/react';
 import { capitalize } from '@mui/material/utils';
 import SliderValueLabel from '@mui/material/Slider/SliderValueLabel';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';

apps/pigment-vite-app/README.md

@@ -7,8 +7,8 @@ This project is not part of the workspace yet.
 
 You can either run `pnpm build` command to build all the packages, or you need to build, the the minimum -
 
-1. `@pigmentcss/react`
-2. `@pigmentcss/vite-plugin`
+1. `@pigment-css/react`
+2. `@pigment-css/vite-plugin`
 
 Make sure you have also run `pnpm release:build` at least once because we also use `@mui/material` and `@mui/system` packages. On subsequent runs, you can only build the above packages using -
 
@@ -24,4 +24,4 @@ After building, you can run the project by changing into the directory and then
 
 Optionally, before running the dev server, you can run `pnpm vite optimize --force` if it logged some error during `pnpm vite`.
 
-If you see and error like package `@pigmentcss/react` not found, add it as a peer-dependency in `@mui/material`'s `package.json` file and run `pnpm build` and `pnpm install` again. Make sure to not push this change to git.
+If you see and error like package `@pigment-css/react` not found, add it as a peer-dependency in `@mui/material`'s `package.json` file and run `pnpm build` and `pnpm install` again. Make sure to not push this change to git.

apps/pigment-vite-app/package.json

@@ -9,7 +9,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@pigmentcss/react": "file:../../packages/pigment-react",
+    "@pigment-css/react": "file:../../packages/pigment-react",
     "@mui/utils": "file:../../packages/mui-utils/build",
     "@mui/base": "file:../../packages/mui-base/build",
     "@mui/material": "file:../../packages/mui-material/build",
@@ -26,7 +26,7 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@pigmentcss/vite-plugin": "file:../../packages/pigment-vite-plugin",
+    "@pigment-css/vite-plugin": "file:../../packages/pigment-vite-plugin",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.2.1",

apps/pigment-vite-app/src/App.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled, generateAtomics } from '@pigmentcss/react';
+import { styled, generateAtomics } from '@pigment-css/react';
 import type { Breakpoint } from '@mui/system';
 import { Button, bounceAnim } from 'local-ui-lib';
 import Slider from './Slider/ZeroSlider';

apps/pigment-vite-app/src/Box.jsx

@@ -1,4 +1,4 @@
-import { generateAtomics } from '@pigmentcss/react';
+import { generateAtomics } from '@pigment-css/react';
 
 const atomics = generateAtomics(({ theme }) => ({
   conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {

apps/pigment-vite-app/src/Layout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@pigmentcss/react';
+import { styled } from '@pigment-css/react';
 
 const Main = styled('div')(({ theme }) => ({
   display: 'flex',

apps/pigment-vite-app/src/Slider/ZeroSlider.tsx

@@ -8,7 +8,7 @@ import {
   getSliderUtilityClass,
 } from '@mui/material/Slider';
 import { isHostComponent, useSlotProps } from '@mui/base/utils';
-import { styled } from '@pigmentcss/react';
+import { styled } from '@pigment-css/react';
 import { capitalize } from '@mui/material/utils';
 import SliderValueLabel from '@mui/material/Slider/SliderValueLabel';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';

apps/pigment-vite-app/src/augment.ts

@@ -1,7 +1,7 @@
 import type { experimental_extendTheme } from '@mui/material/styles';
-import '@pigmentcss/react/theme';
+import '@pigment-css/react/theme';
 
-declare module '@pigmentcss/react/theme' {
+declare module '@pigment-css/react/theme' {
   export interface ThemeArgs {
     theme: ReturnType<typeof experimental_extendTheme> & {
       applyDarkStyles<T>(obj: T): Record<string, T>;

apps/pigment-vite-app/src/component.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@pigmentcss/react';
+import { styled } from '@pigment-css/react';
 
 export function Component() {
   return null;

apps/pigment-vite-app/src/extend-zero.ts

@@ -1,6 +1,6 @@
 import type { experimental_extendTheme } from '@mui/material/styles';
 
-declare module '@pigmentcss/react/theme' {
+declare module '@pigment-css/react/theme' {
   interface ThemeArgs {
     theme: ReturnType<typeof experimental_extendTheme> & {
       applyDarkStyles<T>(obj: T): Record<string, T>;

apps/pigment-vite-app/src/main.tsx

@@ -4,7 +4,7 @@ import { BrowserRouter as Router, useRoutes } from 'react-router-dom';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import routes from '~react-pages';
-import '@pigmentcss/react/styles.css';
+import '@pigment-css/react/styles.css';
 
 function App() {
   return <React.Suspense fallback={<p>Loading...</p>}>{useRoutes(routes)}</React.Suspense>;

apps/pigment-vite-app/vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import Pages from 'vite-plugin-pages';
-import { pigment } from '@pigmentcss/vite-plugin';
+import { pigment } from '@pigment-css/vite-plugin';
 import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
 
 const theme = extendTheme();