From e6cb4a16ad455b59299aabb0a0290e3bcc3df870 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 28 May 2024 11:29:41 -0400 Subject: [PATCH 1/5] add createExtendSxProp --- .../exports/createExtendSxProp.js | 5 +++ packages/pigment-css-react/package.json | 3 +- .../src/createExtendSxProp.d.ts | 1 + .../src/createExtendSxProp.js | 12 +++++++ packages/pigment-css-react/src/index.ts | 1 + .../src/processors/createExtendSxProp.ts | 35 +++++++++++++++++++ packages/pigment-css-react/tsup.config.ts | 10 +++++- 7 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 packages/pigment-css-react/exports/createExtendSxProp.js create mode 100644 packages/pigment-css-react/src/createExtendSxProp.d.ts create mode 100644 packages/pigment-css-react/src/createExtendSxProp.js create mode 100644 packages/pigment-css-react/src/processors/createExtendSxProp.ts diff --git a/packages/pigment-css-react/exports/createExtendSxProp.js b/packages/pigment-css-react/exports/createExtendSxProp.js new file mode 100644 index 00000000..b459d9d7 --- /dev/null +++ b/packages/pigment-css-react/exports/createExtendSxProp.js @@ -0,0 +1,5 @@ +Object.defineProperty(exports, '__esModule', { + value: true, +}); + +exports.default = require('../processors/createExtendSxProp').CreateExtendSxPropProcessor; diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json index 4c5b47ed..f6dde337 100644 --- a/packages/pigment-css-react/package.json +++ b/packages/pigment-css-react/package.json @@ -85,7 +85,8 @@ "keyframes": "./exports/keyframes.js", "generateAtomics": "./exports/generateAtomics.js", "css": "./exports/css.js", - "createUseThemeProps": "./exports/createUseThemeProps.js" + "createUseThemeProps": "./exports/createUseThemeProps.js", + "createExtendSxProp": "./exports/createExtendSxProp.js" } }, "files": [ diff --git a/packages/pigment-css-react/src/createExtendSxProp.d.ts b/packages/pigment-css-react/src/createExtendSxProp.d.ts new file mode 100644 index 00000000..11c2b7ff --- /dev/null +++ b/packages/pigment-css-react/src/createExtendSxProp.d.ts @@ -0,0 +1 @@ +export default function createExtendSxProp(): >(props: T) => T; diff --git a/packages/pigment-css-react/src/createExtendSxProp.js b/packages/pigment-css-react/src/createExtendSxProp.js new file mode 100644 index 00000000..eefca5b3 --- /dev/null +++ b/packages/pigment-css-react/src/createExtendSxProp.js @@ -0,0 +1,12 @@ +/** + * Runtime function for creating `extendSxProp`. + * + * This is a placeholder for the runtime function for replacing the `extendSxProp` in Material UI + * to reduce bundle size only. DO NOT use it in your codebase. + */ +function extendSxProp(props) { + return props; +} +export default function createExtendSxProp() { + return extendSxProp; +} diff --git a/packages/pigment-css-react/src/index.ts b/packages/pigment-css-react/src/index.ts index 2b27d96f..b2766401 100644 --- a/packages/pigment-css-react/src/index.ts +++ b/packages/pigment-css-react/src/index.ts @@ -4,4 +4,5 @@ export { default as keyframes } from './keyframes'; export { generateAtomics, atomics } from './generateAtomics'; export { default as css } from './css'; export { default as createUseThemeProps } from './createUseThemeProps'; +export { default as createExtendSxProp } from './createExtendSxProp'; export { default as Box } from './Box'; diff --git a/packages/pigment-css-react/src/processors/createExtendSxProp.ts b/packages/pigment-css-react/src/processors/createExtendSxProp.ts new file mode 100644 index 00000000..9767bf12 --- /dev/null +++ b/packages/pigment-css-react/src/processors/createExtendSxProp.ts @@ -0,0 +1,35 @@ +import type { Expression, Params, TailProcessorParams } from '@wyw-in-js/processor-utils'; +import BaseProcessor from './base-processor'; + +export class CreateExtendSxPropProcessor extends BaseProcessor { + constructor(params: Params, ...args: TailProcessorParams) { + super([params[0]], ...args); + } + + // eslint-disable-next-line class-methods-use-this + build(): void {} + + doEvaltimeReplacement(): void { + this.replacer(this.value, false); + } + + get value(): Expression { + return this.astService.nullLiteral(); + } + + doRuntimeReplacement(): void { + const t = this.astService; + + const extendSxPropImportIdentifier = t.addNamedImport( + this.tagSource.imported, + process.env.PACKAGE_NAME as string, + ); + + this.replacer(t.callExpression(extendSxPropImportIdentifier, []), true); + } + + public override get asSelector(): string { + // For completeness, this is not intended to be used. + return `.${this.className}`; + } +} diff --git a/packages/pigment-css-react/tsup.config.ts b/packages/pigment-css-react/tsup.config.ts index 5fd52716..272fbc45 100644 --- a/packages/pigment-css-react/tsup.config.ts +++ b/packages/pigment-css-react/tsup.config.ts @@ -1,7 +1,15 @@ import { Options, defineConfig } from 'tsup'; import config from '../../tsup.config'; -const processors = ['styled', 'sx', 'keyframes', 'generateAtomics', 'css', 'createUseThemeProps']; +const processors = [ + 'styled', + 'sx', + 'keyframes', + 'generateAtomics', + 'css', + 'createUseThemeProps', + 'createExtendSxProp', +]; const external = ['react', 'react-is', 'prop-types']; const baseConfig: Options = { From b62581f150ba8d747d0343f56f2474f7484f14d2 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 31 May 2024 09:25:17 -0400 Subject: [PATCH 2/5] add tests --- .../src/processors/createExtendSxProp.ts | 8 ++++++- .../createExtendSxProp.test.ts | 21 +++++++++++++++++++ .../fixtures/extendSxProp.input.js | 8 +++++++ .../fixtures/extendSxProp.output.css | 0 .../fixtures/extendSxProp.output.js | 6 ++++++ packages/pigment-css-react/tests/testUtils.ts | 2 +- 6 files changed, 43 insertions(+), 2 deletions(-) create mode 100644 packages/pigment-css-react/tests/createExtendSxProp/createExtendSxProp.test.ts create mode 100644 packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.input.js create mode 100644 packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.output.css create mode 100644 packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.output.js diff --git a/packages/pigment-css-react/src/processors/createExtendSxProp.ts b/packages/pigment-css-react/src/processors/createExtendSxProp.ts index 9767bf12..5b068460 100644 --- a/packages/pigment-css-react/src/processors/createExtendSxProp.ts +++ b/packages/pigment-css-react/src/processors/createExtendSxProp.ts @@ -1,9 +1,15 @@ -import type { Expression, Params, TailProcessorParams } from '@wyw-in-js/processor-utils'; +import { + validateParams, + type Expression, + type Params, + type TailProcessorParams, +} from '@wyw-in-js/processor-utils'; import BaseProcessor from './base-processor'; export class CreateExtendSxPropProcessor extends BaseProcessor { constructor(params: Params, ...args: TailProcessorParams) { super([params[0]], ...args); + validateParams(params, ['callee', ['call']], `Invalid use of ${this.tagSource.imported} tag.`); } // eslint-disable-next-line class-methods-use-this diff --git a/packages/pigment-css-react/tests/createExtendSxProp/createExtendSxProp.test.ts b/packages/pigment-css-react/tests/createExtendSxProp/createExtendSxProp.test.ts new file mode 100644 index 00000000..d2210258 --- /dev/null +++ b/packages/pigment-css-react/tests/createExtendSxProp/createExtendSxProp.test.ts @@ -0,0 +1,21 @@ +import path from 'node:path'; +import { expect } from 'chai'; +import { createExtendSxProp } from '@pigment-css/react'; +import { runTransformation } from '../testUtils'; + +describe('Pigment CSS - createExtendSxProp', () => { + it('replaced correctly', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/extendSxProp.input.js'), + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); + + it('return the new copy of input', () => { + const original = { color: 'red' }; + expect(createExtendSxProp()(original)).to.not.equal(original); + expect(createExtendSxProp()(original)).to.deep.equal({ color: 'red' }); + }); +}); diff --git a/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.input.js b/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.input.js new file mode 100644 index 00000000..d81968df --- /dev/null +++ b/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.input.js @@ -0,0 +1,8 @@ +import { createExtendSxProp } from '../zero-styled'; + +const extendSxProp = createExtendSxProp(); + +export default function Typography(inProps) { + const props = extendSxProp(inProps); + return
; +} diff --git a/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.output.css b/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.output.css new file mode 100644 index 00000000..e69de29b diff --git a/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.output.js b/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.output.js new file mode 100644 index 00000000..a26cfff2 --- /dev/null +++ b/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.output.js @@ -0,0 +1,6 @@ +import { createExtendSxProp as _createExtendSxProp } from '@pigment-css/react'; +const extendSxProp = /*#__PURE__*/ _createExtendSxProp(); +export default function Typography(inProps) { + const props = extendSxProp(inProps); + return
; +} diff --git a/packages/pigment-css-react/tests/testUtils.ts b/packages/pigment-css-react/tests/testUtils.ts index fd7db17c..b7bd555e 100644 --- a/packages/pigment-css-react/tests/testUtils.ts +++ b/packages/pigment-css-react/tests/testUtils.ts @@ -52,7 +52,7 @@ export async function runTransformation( plugins: ['@babel/plugin-syntax-jsx'], }, tagResolver(source: string, tag: string) { - if (source !== '@pigment-css/react') { + if (source !== '@pigment-css/react' && !source.endsWith('/zero-styled')) { return null; } return require.resolve(`../exports/${tag}`); From e8131b42c02c34729ce9cc1bfdcbbca8838002ea Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sat, 1 Jun 2024 12:11:53 -0400 Subject: [PATCH 3/5] fix tests --- .../createExtendSxProp/createExtendSxProp.test.ts | 7 ------- .../runtime-createExtendSxProp.test.js | 11 +++++++++++ 2 files changed, 11 insertions(+), 7 deletions(-) create mode 100644 packages/pigment-css-react/tests/createExtendSxProp/runtime-createExtendSxProp.test.js diff --git a/packages/pigment-css-react/tests/createExtendSxProp/createExtendSxProp.test.ts b/packages/pigment-css-react/tests/createExtendSxProp/createExtendSxProp.test.ts index d2210258..0f392327 100644 --- a/packages/pigment-css-react/tests/createExtendSxProp/createExtendSxProp.test.ts +++ b/packages/pigment-css-react/tests/createExtendSxProp/createExtendSxProp.test.ts @@ -1,6 +1,5 @@ import path from 'node:path'; import { expect } from 'chai'; -import { createExtendSxProp } from '@pigment-css/react'; import { runTransformation } from '../testUtils'; describe('Pigment CSS - createExtendSxProp', () => { @@ -12,10 +11,4 @@ describe('Pigment CSS - createExtendSxProp', () => { expect(output.js).to.equal(fixture.js); expect(output.css).to.equal(fixture.css); }); - - it('return the new copy of input', () => { - const original = { color: 'red' }; - expect(createExtendSxProp()(original)).to.not.equal(original); - expect(createExtendSxProp()(original)).to.deep.equal({ color: 'red' }); - }); }); diff --git a/packages/pigment-css-react/tests/createExtendSxProp/runtime-createExtendSxProp.test.js b/packages/pigment-css-react/tests/createExtendSxProp/runtime-createExtendSxProp.test.js new file mode 100644 index 00000000..ba39ccf7 --- /dev/null +++ b/packages/pigment-css-react/tests/createExtendSxProp/runtime-createExtendSxProp.test.js @@ -0,0 +1,11 @@ +import { describe } from 'yargs'; +import { expect } from 'chai'; +import { createExtendSxProp } from '@pigment-css/react'; + +describe('createExtendSxProp', () => { + it('return the new copy of input', () => { + const original = { color: 'red' }; + expect(createExtendSxProp()(original)).to.not.equal(original); + expect(createExtendSxProp()(original)).to.deep.equal({ color: 'red' }); + }); +}); From 2683aba31fe39c9a7a4c7e680c206b280be3e6fb Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sat, 1 Jun 2024 12:28:08 -0400 Subject: [PATCH 4/5] fix test --- .../tests/createExtendSxProp/runtime-createExtendSxProp.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pigment-css-react/tests/createExtendSxProp/runtime-createExtendSxProp.test.js b/packages/pigment-css-react/tests/createExtendSxProp/runtime-createExtendSxProp.test.js index ba39ccf7..86d3b61a 100644 --- a/packages/pigment-css-react/tests/createExtendSxProp/runtime-createExtendSxProp.test.js +++ b/packages/pigment-css-react/tests/createExtendSxProp/runtime-createExtendSxProp.test.js @@ -1,6 +1,6 @@ import { describe } from 'yargs'; import { expect } from 'chai'; -import { createExtendSxProp } from '@pigment-css/react'; +import createExtendSxProp from '../../src/createExtendSxProp'; describe('createExtendSxProp', () => { it('return the new copy of input', () => { From 3982a4d347844584dc417fed183b4a0a73198c17 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sat, 1 Jun 2024 12:37:36 -0400 Subject: [PATCH 5/5] add internal prefix --- .../{createExtendSxProp.js => internal_createExtendSxProp.js} | 0 packages/pigment-css-react/package.json | 2 +- packages/pigment-css-react/src/index.ts | 2 +- .../tests/createExtendSxProp/fixtures/extendSxProp.input.js | 4 ++-- .../tests/createExtendSxProp/fixtures/extendSxProp.output.js | 4 ++-- 5 files changed, 6 insertions(+), 6 deletions(-) rename packages/pigment-css-react/exports/{createExtendSxProp.js => internal_createExtendSxProp.js} (100%) diff --git a/packages/pigment-css-react/exports/createExtendSxProp.js b/packages/pigment-css-react/exports/internal_createExtendSxProp.js similarity index 100% rename from packages/pigment-css-react/exports/createExtendSxProp.js rename to packages/pigment-css-react/exports/internal_createExtendSxProp.js diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json index f6dde337..d1bd6ce8 100644 --- a/packages/pigment-css-react/package.json +++ b/packages/pigment-css-react/package.json @@ -86,7 +86,7 @@ "generateAtomics": "./exports/generateAtomics.js", "css": "./exports/css.js", "createUseThemeProps": "./exports/createUseThemeProps.js", - "createExtendSxProp": "./exports/createExtendSxProp.js" + "internal_createExtendSxProp": "./exports/internal_createExtendSxProp.js" } }, "files": [ diff --git a/packages/pigment-css-react/src/index.ts b/packages/pigment-css-react/src/index.ts index b2766401..ea4bf75d 100644 --- a/packages/pigment-css-react/src/index.ts +++ b/packages/pigment-css-react/src/index.ts @@ -4,5 +4,5 @@ export { default as keyframes } from './keyframes'; export { generateAtomics, atomics } from './generateAtomics'; export { default as css } from './css'; export { default as createUseThemeProps } from './createUseThemeProps'; -export { default as createExtendSxProp } from './createExtendSxProp'; +export { default as internal_createExtendSxProp } from './createExtendSxProp'; export { default as Box } from './Box'; diff --git a/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.input.js b/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.input.js index d81968df..dd08f68b 100644 --- a/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.input.js +++ b/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.input.js @@ -1,6 +1,6 @@ -import { createExtendSxProp } from '../zero-styled'; +import { internal_createExtendSxProp } from '../zero-styled'; -const extendSxProp = createExtendSxProp(); +const extendSxProp = internal_createExtendSxProp(); export default function Typography(inProps) { const props = extendSxProp(inProps); diff --git a/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.output.js b/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.output.js index a26cfff2..41a02d2a 100644 --- a/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.output.js +++ b/packages/pigment-css-react/tests/createExtendSxProp/fixtures/extendSxProp.output.js @@ -1,5 +1,5 @@ -import { createExtendSxProp as _createExtendSxProp } from '@pigment-css/react'; -const extendSxProp = /*#__PURE__*/ _createExtendSxProp(); +import { internal_createExtendSxProp as _internal_createExtendSxProp } from '@pigment-css/react'; +const extendSxProp = /*#__PURE__*/ _internal_createExtendSxProp(); export default function Typography(inProps) { const props = extendSxProp(inProps); return
;