Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/mui/pigment-css into feat…
Browse files Browse the repository at this point in the history
…/global-styles
  • Loading branch information
siriwatknp committed May 28, 2024
2 parents af389a8 + 698f036 commit 454bd21
Show file tree
Hide file tree
Showing 97 changed files with 1,909 additions and 3,091 deletions.
28 changes: 3 additions & 25 deletions .stylelintrc.js
Original file line number Diff line number Diff line change
@@ -1,27 +1,5 @@
const baseline = require('@mui/monorepo/.stylelintrc');

module.exports = {
extends: 'stylelint-config-standard',
ignoreFiles: [
// TypeScript declaration files contain no styles.
// Stylelint is also reporting parseError on `docs/types/react-docgen.d.ts`.
'**/*.d.ts',
],
rules: {
'alpha-value-notation': null,
'custom-property-pattern': null,
'declaration-colon-newline-after': null,
'function-parentheses-newline-inside': null, // not compatible with prettier
'media-feature-range-notation': null,
'no-empty-source': null,
'no-missing-end-of-source-newline': null,
'selector-class-pattern': null,
'string-no-newline': null, // not compatible with prettier
'value-keyword-case': null,
'value-list-comma-newline-after': null, // not compatible with prettier
},
overrides: [
{
files: ['**/*.js', '**/*.cjs', '**/*.mjs', '**/*.jsx', '**/*.ts', '**/*.tsx'],
customSyntax: 'postcss-styled-syntax',
},
],
...baseline,
};
41 changes: 41 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,46 @@
# [Versions](https://mui.com/versions/)

## v0.0.11

_May 8, 2024_

A big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:

-`sx` prop is now working on any components (#37) @siriwatknp

### `@pigment-css/[email protected]`

- Support array for `sx` prop (#52) @siriwatknp
- Replace `sx` callback object param with `theme` (#51) @siriwatknp
- Enable `sx` prop on any components (#37) @siriwatknp
- Replace lowercase with lowerFirst (#54) @siriwatknp
- Reorder the css generation order for styled calls (#56) @brijeshb42

### Core

- Set root version to 0.0.10 (#44) @siriwatknp

All contributors of this release in alphabetical order: @@brijeshb42, @siriwatknp

## v0.0.10

<!-- generated comparing v0.0.9..master -->

_May 1, 2024_

A big thanks to the 2 contributors who made this release possible.

### `@pigment-css/[email protected]`

- Fix styled inheritance (#40) @siriwatknp
- Fix prop forwarding when `as` component is provided to HTML styled component (#43) @siriwatknp

### `@pigment-css/[email protected]`

- Transform `!important` CSS to an intermediate representation (#38) @brijeshb42

All contributors of this release in alphabetical order: @brijeshb42, @siriwatknp

## v0.0.9

<!-- generated comparing v0.0.8..master -->
Expand Down
2 changes: 1 addition & 1 deletion HOW_PIGMENT_CSS_WORKS.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Pigment CSS is a zero-runtime CSS-in-JS library. This means it does not have ac

Pigment CSS uses the [WyW-in-JS](https://wyw-in-js.dev/) library that also powers [Linaria](https://linaria.dev/). It features a [processor](https://wyw-in-js.dev/how-to/custom-tagged-template#creating-a-processor) which makes it possible to create custom logic that's triggered by the presence of different imports from the library. The processor looks through the source code for `styled()`, `css()`, and other function calls and extracts the arguments to be evaluated. These values are then handed back to Pigment CSS for additional parsing and evaluation.

For example, here's a simple implementation of the `css()` function:
For example, here's a simple usage of the `css()` function:

```js
// app.js
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling to
Use the following commands to quickly create a new Next.js project with Pigment CSS set up:

```bash
curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2 pigment-css/examples/pigment-css-nextjs-ts
curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2 pigment-css-master/examples/pigment-css-nextjs-ts
cd pigment-css-nextjs-ts
```

Expand Down
10 changes: 0 additions & 10 deletions SECURITY.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,5 @@
# Security policy

## Supported versions

The versions of the project that are currently supported with security updates.

| Version | Supported |
| ------: | :----------------- |
| 5.x | :white_check_mark: |
| 4.x | :white_check_mark: |
| < 4.0 | :x: |

## Reporting a vulnerability

You can report a vulnerability by contacting us via email at [[email protected]](mailto:[email protected]).
5 changes: 3 additions & 2 deletions apps/pigment-css-next-app/.eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"rules": {
"import/prefer-default-export": "off",
"import/extensions": "off",
"import/no-unresolved": "off"
}
"import/no-unresolved": "off",
"react/no-unknown-property": ["error", { "ignore": ["sx"] }],
},
}
2 changes: 1 addition & 1 deletion apps/pigment-css-next-app/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ theme.getColorSchemeSelector = (colorScheme) => {
*/
const pigmentOptions = {
theme,
transformLibraries: ['local-ui-lib'],
transformLibraries: ['local-ui-lib', '@mui/material'],
sourceMap: true,
displayName: true,
};
Expand Down
40 changes: 37 additions & 3 deletions apps/pigment-css-next-app/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,17 @@
import Image from 'next/image';
import { styled, css } from '@pigment-css/react';
import Chip from '@mui/material/Chip';
import styles from './page.module.css';

declare global {
namespace React {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface HTMLAttributes<T> {
sx?: any;
}
}
}

const visuallyHidden = css({
border: 0,
clip: 'rect(0 0 0 0)',
Expand Down Expand Up @@ -93,8 +103,16 @@ export default function Home() {
return (
<Main>
<div className={visuallyHidden}>I am invisible</div>
<Description>
<p>
<Description
sx={{
'&::before': {
content: '"🚀"',
display: 'inline-block',
border: '1px solid',
},
}}
>
<p sx={{ boxShadow: '0 0 4px 0 rgba(0 0 0 / 0.12)' }}>
Get started by editing&nbsp;
<code className={styles.code}>src/app/page.tsx</code>
</p>
Expand All @@ -117,7 +135,12 @@ export default function Home() {
</div>
</Description>

<div className={styles.center}>
<div
className={styles.center}
sx={{
border: '1px solid',
}}
>
<Image
className={styles.logo}
src="/next.svg"
Expand Down Expand Up @@ -176,6 +199,17 @@ export default function Home() {
</h2>
<p>Instantly deploy your Next.js site to a shareable URL with Vercel.</p>
</a>
<Chip
sx={{
color: 'red',
backgroundColor: 'blue',
'&:hover': {
color: 'blue',
backgroundColor: 'red',
},
}}
label="Hello"
/>
</div>
</Main>
);
Expand Down
9 changes: 0 additions & 9 deletions apps/pigment-css-next-app/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,6 @@
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"],
"references": [
{
"path": "../../packages/mui-system/tsconfig.build.json"
},
{
"path": "../../packages/mui-base/tsconfig.build.json"
},
{
"path": "../../packages/mui-material/tsconfig.build.json"
},
{
"path": "../../packages/pigment-css-react/tsconfig.json"
}
Expand Down
55 changes: 1 addition & 54 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,27 +1,15 @@
const path = require('path');

const errorCodesPath = path.resolve(__dirname, './docs/public/static/error-codes.json');
const missingError = process.env.MUI_EXTRACT_ERROR_CODES === 'true' ? 'write' : 'annotate';

function resolveAliasPath(relativeToBabelConf) {
const resolvedPath = path.relative(process.cwd(), path.resolve(__dirname, relativeToBabelConf));
return `./${resolvedPath.replace('\\', '/')}`;
}

const productionPlugins = [
['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
];

module.exports = function getBabelConfig(api) {
const useESModules = api.env(['regressions', 'legacy', 'modern', 'stable', 'rollup']);

const defaultAlias = {
'@pigment-css/react': resolveAliasPath('./packages/pigment-css-react/src'),
docs: resolveAliasPath('./docs'),
test: resolveAliasPath('./test'),
'@mui-internal/api-docs-builder': resolveAliasPath(
'./node_modules/@mui/monorepo/packages/api-docs-builder',
),
};

const presets = [
Expand All @@ -44,42 +32,8 @@ module.exports = function getBabelConfig(api) {
'@babel/preset-typescript',
];

const plugins = [
[
'babel-plugin-macros',
{
muiError: {
errorCodesPath,
missingError,
},
},
],
'babel-plugin-optimize-clsx',
// Need the following 3 proposals for all targets in .browserslistrc.
// With our usage the transpiled loose mode is equivalent to spec mode.
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-private-methods', { loose: true }],
['@babel/plugin-proposal-private-property-in-object', { loose: true }],
['@babel/plugin-proposal-object-rest-spread', { loose: true }],
[
'@babel/plugin-transform-runtime',
{
useESModules,
// any package needs to declare 7.4.4 as a runtime dependency. default is ^7.0.0
version: '^7.4.4',
},
],
[
'babel-plugin-transform-react-remove-prop-types',
{
mode: 'unsafe-wrap',
},
],
];
const plugins = [];

if (process.env.NODE_ENV === 'production') {
plugins.push(...productionPlugins);
}
if (process.env.NODE_ENV === 'test') {
plugins.push([
'babel-plugin-module-resolver',
Expand Down Expand Up @@ -140,12 +94,6 @@ module.exports = function getBabelConfig(api) {
],
],
},
legacy: {
plugins: [
// IE11 support
'@babel/plugin-transform-object-assign',
],
},
test: {
sourceMaps: 'both',
plugins: [
Expand All @@ -160,7 +108,6 @@ module.exports = function getBabelConfig(api) {
},
benchmark: {
plugins: [
...productionPlugins,
[
'babel-plugin-module-resolver',
{
Expand Down
1 change: 0 additions & 1 deletion dangerfile.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// inspire by reacts dangerfile
// danger has to be the first thing required!
import { danger, markdown } from 'danger';
import { exec } from 'child_process';
Expand Down
2 changes: 1 addition & 1 deletion examples/pigment-css-nextjs-ts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Download the example [or clone the repo](https://github.com/mui/pigment-css):
<!-- #default-branch-switch -->

```bash
curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2 pigment-css/examples/pigment-css-nextjs-ts
curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2 pigment-css-master/examples/pigment-css-nextjs-ts
cd pigment-css-nextjs-ts
```

Expand Down
2 changes: 1 addition & 1 deletion examples/pigment-css-nextjs-ts/src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ export default function Home() {
</Link>
<Link
outlined
href="https://github.com/orgs/mui/projects/27/views/1"
href="https://github.com/orgs/mui/projects/27/views/3"
target="_blank"
rel="noopener noreferrer"
>
Expand Down
2 changes: 1 addition & 1 deletion examples/pigment-css-remix-ts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/pigment-css):
<!-- #default-branch-switch -->

```bash
curl https://codeload.github.com/mui/pigment-css/tar.gz/next | tar -xz --strip=2 pigment-css/examples/pigment-css-remix-ts
curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2 pigment-css-master/examples/pigment-css-remix-ts
cd pigment-css-remix-ts
```

Expand Down
2 changes: 1 addition & 1 deletion examples/pigment-css-remix-ts/app/routes/_index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ export default function Index() {
</Link>
<Link
outlined
href="https://github.com/orgs/mui/projects/27/views/1"
href="https://github.com/orgs/mui/projects/27/views/3"
target="_blank"
rel="noopener noreferrer"
>
Expand Down
2 changes: 1 addition & 1 deletion examples/pigment-css-vite-ts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Download the example [or clone the repo](https://github.com/mui/pigment-css):
<!-- #default-branch-switch -->

```bash
curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2 pigment-css/examples/pigment-css-vite-ts
curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2 pigment-css-master/examples/pigment-css-vite-ts
cd pigment-css-vite-ts
```

Expand Down
2 changes: 1 addition & 1 deletion examples/pigment-css-vite-ts/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ export default function Home() {
</Link>
<Link
outlined
href="https://github.com/orgs/mui/projects/27/views/1"
href="https://github.com/orgs/mui/projects/27/views/3"
target="_blank"
rel="noopener noreferrer"
>
Expand Down
Loading

0 comments on commit 454bd21

Please sign in to comment.