From d2552333b872ac3fa3b1496d92831ec6642511fe Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Thu, 26 Dec 2024 16:00:37 +0530 Subject: [PATCH 01/42] Add runtime path replacement config --- newStyled.temp | 85 ++++++++++++++++++++++++ packages/pigment-css-utils/src/config.ts | 1 + 2 files changed, 86 insertions(+) create mode 100644 newStyled.temp diff --git a/newStyled.temp b/newStyled.temp new file mode 100644 index 00000000..791137c2 --- /dev/null +++ b/newStyled.temp @@ -0,0 +1,85 @@ +import { CSSProperties } from '@pigment-css/core'; +import * as CSS from 'csstype'; + +type CSSPropertiesWithCallback = { + [K in keyof CSSProperties]: + | CSSProperties[K] + | Array> + | ((props: Props) => CSSProperties[K]); +}; + +type CSSPseudos = { + [K in CSS.Pseudos]?: CSSObject; +}; + +interface CSSOthersObject { + [selector: string]: CSSObject; +} + +export type CSSObject = + | CSSPropertiesWithCallback + | CSSPseudos + | CSSOthersObject; + +type PolymorphicProps = React.PropsWithChildren< + React.ComponentPropsWithoutRef & { + as?: E; + } +>; + +type Variants = { + [VariantGroup: string]: { + [VariantName: string]: CSSObject; + }; +}; + +type VariantNames> = { + [K in keyof T]?: keyof T[K]; +}; + +type CompoundVariant> = VariantNames & { + css: CSSObject; +}; + +export function styled< + Component extends React.ElementType, + ComponentProps extends { className?: string } = React.ComponentPropsWithoutRef, +>(c: Component, opts?: unknown) { + function css, VarProps = VariantNames>( + style: CSSObject & { + variants?: T; + compoundVariants?: CompoundVariant; + }, + ) { + console.log(opts, style); + function Comp< + AsTarget extends React.ElementType = Component, + Props extends object = PolymorphicProps, + >({ as: asProp, ...rest }: Props & VarProps) { + const Component = asProp ?? c; + return ; + } + return Comp; + } + return css; +} + +export const Button = styled('button')({ + color: 'red', + backgroundColor: (props) => { + if (props.type === 'button') { + return 'blue'; + } + return 'red'; + }, + variants: { + hue: { + primary: { + color: 'red', + backgroundColor: 'blue', + }, + }, + }, +}); + +; diff --git a/packages/pigment-css-utils/src/config.ts b/packages/pigment-css-utils/src/config.ts index 1dcf9880..54894eb6 100644 --- a/packages/pigment-css-utils/src/config.ts +++ b/packages/pigment-css-utils/src/config.ts @@ -40,6 +40,7 @@ type PigmentFeatures = { export type PigmentConfig = Omit, 'features'> & { wywFeatures?: PluginOptions['features']; features?: PigmentFeatures; + generateClassName?: (data: GenerateClassData) => string; themeArgs?: { theme: Theme; }; From f049617226dd8d2b6aa9ce7572b645ba030f4695 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Thu, 5 Dec 2024 15:29:46 +0530 Subject: [PATCH 02/42] feat: Create utils package to share logic across runtime and bundler packages --- .../src/utils/parseExpression.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 packages/pigment-css-utils/src/utils/parseExpression.ts diff --git a/packages/pigment-css-utils/src/utils/parseExpression.ts b/packages/pigment-css-utils/src/utils/parseExpression.ts new file mode 100644 index 00000000..6297d7d3 --- /dev/null +++ b/packages/pigment-css-utils/src/utils/parseExpression.ts @@ -0,0 +1,16 @@ +import { parseExpression, ParserOptions } from '@babel/parser'; +import { ArrayExpression } from '@babel/types'; + +/** + * Parses array expression string to AST for locating sourcemap points. + */ +export function parseArray( + expressionStr: string, + opts: Pick, +): ArrayExpression | null { + const expr = parseExpression(expressionStr, opts); + if (expr.type === 'ArrayExpression') { + return expr; + } + return null; +} From 3ae7a3b1a5694f349b5096fde091be2c919fcbf1 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Mon, 9 Dec 2024 20:10:29 +0530 Subject: [PATCH 03/42] feat: create UI library independent core package --- newStyled.temp | 85 ---- packages/pigment-css-core/LICENSE | 21 + packages/pigment-css-core/README.md | 29 ++ packages/pigment-css-core/exports/css.js | 5 + .../pigment-css-core/exports/keyframes.js | 5 + packages/pigment-css-core/package.json | 122 ++++++ packages/pigment-css-core/src/base.ts | 27 ++ packages/pigment-css-core/src/css.d.ts | 34 ++ packages/pigment-css-core/src/css.js | 5 + packages/pigment-css-core/src/index.ts | 4 + packages/pigment-css-core/src/keyframes.d.ts | 26 ++ packages/pigment-css-core/src/keyframes.js | 10 + .../pigment-css-core/src/processors/css.ts | 409 ++++++++++++++++++ .../src/processors/keyframes.ts | 161 +++++++ packages/pigment-css-core/src/runtime/css.ts | 46 ++ .../pigment-css-core/src/runtime/index.ts | 1 + packages/pigment-css-core/src/utils.ts | 7 + packages/pigment-css-core/styles.css | 3 + .../tests/css/css-runtime.test.ts | 35 ++ .../pigment-css-core/tests/css/css.spec.ts | 66 +++ .../pigment-css-core/tests/css/css.test.ts | 31 ++ .../tests/css/fixtures/css.input.js | 122 ++++++ .../tests/css/fixtures/css.output.css | 19 + .../tests/css/fixtures/css.output.js | 81 ++++ .../fixtures/keyframes-theme.input.js | 44 ++ .../fixtures/keyframes-theme.output.css | 4 + .../fixtures/keyframes-theme.output.js | 18 + .../keyframes/fixtures/keyframes.input.js | 20 + .../keyframes/fixtures/keyframes.output.css | 3 + .../keyframes/fixtures/keyframes.output.js | 2 + .../tests/keyframes/keyframes.test.ts | 36 ++ packages/pigment-css-core/tests/testUtils.ts | 124 ++++++ packages/pigment-css-core/tsconfig.build.json | 7 + packages/pigment-css-core/tsconfig.json | 12 + packages/pigment-css-core/tsup.config.ts | 29 ++ pnpm-lock.yaml | 40 ++ 36 files changed, 1608 insertions(+), 85 deletions(-) delete mode 100644 newStyled.temp create mode 100644 packages/pigment-css-core/LICENSE create mode 100644 packages/pigment-css-core/README.md create mode 100644 packages/pigment-css-core/exports/css.js create mode 100644 packages/pigment-css-core/exports/keyframes.js create mode 100644 packages/pigment-css-core/package.json create mode 100644 packages/pigment-css-core/src/base.ts create mode 100644 packages/pigment-css-core/src/css.d.ts create mode 100644 packages/pigment-css-core/src/css.js create mode 100644 packages/pigment-css-core/src/index.ts create mode 100644 packages/pigment-css-core/src/keyframes.d.ts create mode 100644 packages/pigment-css-core/src/keyframes.js create mode 100644 packages/pigment-css-core/src/processors/css.ts create mode 100644 packages/pigment-css-core/src/processors/keyframes.ts create mode 100644 packages/pigment-css-core/src/runtime/css.ts create mode 100644 packages/pigment-css-core/src/runtime/index.ts create mode 100644 packages/pigment-css-core/src/utils.ts create mode 100644 packages/pigment-css-core/styles.css create mode 100644 packages/pigment-css-core/tests/css/css-runtime.test.ts create mode 100644 packages/pigment-css-core/tests/css/css.spec.ts create mode 100644 packages/pigment-css-core/tests/css/css.test.ts create mode 100644 packages/pigment-css-core/tests/css/fixtures/css.input.js create mode 100644 packages/pigment-css-core/tests/css/fixtures/css.output.css create mode 100644 packages/pigment-css-core/tests/css/fixtures/css.output.js create mode 100644 packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.input.js create mode 100644 packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css create mode 100644 packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.js create mode 100644 packages/pigment-css-core/tests/keyframes/fixtures/keyframes.input.js create mode 100644 packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css create mode 100644 packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.js create mode 100644 packages/pigment-css-core/tests/keyframes/keyframes.test.ts create mode 100644 packages/pigment-css-core/tests/testUtils.ts create mode 100644 packages/pigment-css-core/tsconfig.build.json create mode 100644 packages/pigment-css-core/tsconfig.json create mode 100644 packages/pigment-css-core/tsup.config.ts diff --git a/newStyled.temp b/newStyled.temp deleted file mode 100644 index 791137c2..00000000 --- a/newStyled.temp +++ /dev/null @@ -1,85 +0,0 @@ -import { CSSProperties } from '@pigment-css/core'; -import * as CSS from 'csstype'; - -type CSSPropertiesWithCallback = { - [K in keyof CSSProperties]: - | CSSProperties[K] - | Array> - | ((props: Props) => CSSProperties[K]); -}; - -type CSSPseudos = { - [K in CSS.Pseudos]?: CSSObject; -}; - -interface CSSOthersObject { - [selector: string]: CSSObject; -} - -export type CSSObject = - | CSSPropertiesWithCallback - | CSSPseudos - | CSSOthersObject; - -type PolymorphicProps = React.PropsWithChildren< - React.ComponentPropsWithoutRef & { - as?: E; - } ->; - -type Variants = { - [VariantGroup: string]: { - [VariantName: string]: CSSObject; - }; -}; - -type VariantNames> = { - [K in keyof T]?: keyof T[K]; -}; - -type CompoundVariant> = VariantNames & { - css: CSSObject; -}; - -export function styled< - Component extends React.ElementType, - ComponentProps extends { className?: string } = React.ComponentPropsWithoutRef, ->(c: Component, opts?: unknown) { - function css, VarProps = VariantNames>( - style: CSSObject & { - variants?: T; - compoundVariants?: CompoundVariant; - }, - ) { - console.log(opts, style); - function Comp< - AsTarget extends React.ElementType = Component, - Props extends object = PolymorphicProps, - >({ as: asProp, ...rest }: Props & VarProps) { - const Component = asProp ?? c; - return ; - } - return Comp; - } - return css; -} - -export const Button = styled('button')({ - color: 'red', - backgroundColor: (props) => { - if (props.type === 'button') { - return 'blue'; - } - return 'red'; - }, - variants: { - hue: { - primary: { - color: 'red', - backgroundColor: 'blue', - }, - }, - }, -}); - -; diff --git a/packages/pigment-css-core/LICENSE b/packages/pigment-css-core/LICENSE new file mode 100644 index 00000000..5bf5f45b --- /dev/null +++ b/packages/pigment-css-core/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2023 Material-UI SAS + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/pigment-css-core/README.md b/packages/pigment-css-core/README.md new file mode 100644 index 00000000..f00cca52 --- /dev/null +++ b/packages/pigment-css-core/README.md @@ -0,0 +1,29 @@ +# Pigment CSS + +Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time. + +## Getting started + +Pigment CSS supports Next.js and Vite with support for more bundlers in the future. + +### Why choose Pigment CSS + +Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "traditional" CSS-in-JS solutions that process styles at runtime are no longer required for unlocking features like color transformations and theme variables which are necessary for maintaining a sophisticated design system. + +Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components. + +Compared to its predecessors, Pigment CSS offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components. +Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment CSS in v6. + +### Installation + + + +```bash +npm install @pigment-css/core +npm install --save-dev @pigment-css/nextjs-plugin +``` + + + +For more information and getting started guide, check the [repository README.md](https://github.com/mui/pigment-css). diff --git a/packages/pigment-css-core/exports/css.js b/packages/pigment-css-core/exports/css.js new file mode 100644 index 00000000..c05f89eb --- /dev/null +++ b/packages/pigment-css-core/exports/css.js @@ -0,0 +1,5 @@ +Object.defineProperty(exports, '__esModule', { + value: true, +}); + +exports.default = require('../build/processors/css').CssProcessor; diff --git a/packages/pigment-css-core/exports/keyframes.js b/packages/pigment-css-core/exports/keyframes.js new file mode 100644 index 00000000..0d40c043 --- /dev/null +++ b/packages/pigment-css-core/exports/keyframes.js @@ -0,0 +1,5 @@ +Object.defineProperty(exports, '__esModule', { + value: true, +}); + +exports.default = require('../build/processors/keyframes').KeyframesProcessor; diff --git a/packages/pigment-css-core/package.json b/packages/pigment-css-core/package.json new file mode 100644 index 00000000..beb3b230 --- /dev/null +++ b/packages/pigment-css-core/package.json @@ -0,0 +1,122 @@ +{ + "name": "@pigment-css/core", + "version": "0.0.27", + "main": "build/index.js", + "module": "build/index.mjs", + "types": "build/index.d.ts", + "author": "MUI Team", + "description": "A zero-runtime CSS-in-JS library.", + "repository": { + "type": "git", + "url": "git+https://github.com/mui/pigment-css.git", + "directory": "packages/pigment-css-core" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/mui/pigment-css/issues" + }, + "homepage": "https://github.com/mui/pigment-css/tree/master/README.md", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "scripts": { + "clean": "rimraf build", + "watch": "tsup --watch --clean false", + "copy-license": "node ../../scripts/pigment-license.mjs", + "build": "tsup", + "test": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/pigment-css-core/**/*.test.{js,ts,tsx}'", + "test:update": "cd ../../ && cross-env NODE_ENV=test UPDATE_FIXTURES=true mocha 'packages/pigment-css-core/**/*.test.{js,ts,tsx}'", + "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-css-core mocha 'packages/pigment-css-core/**/*.test.{js,ts,tsx}'", + "typescript": "tsc --noEmit -p ." + }, + "dependencies": { + "@babel/types": "^7.25.8", + "@emotion/css": "^11.13.4", + "@pigment-css/utils": "workspace:*", + "@pigment-css/theme": "workspace:^", + "@wyw-in-js/processor-utils": "^0.5.5", + "@wyw-in-js/shared": "^0.5.5", + "@wyw-in-js/transform": "^0.5.5", + "csstype": "^3.1.3", + "lodash": "^4.17.21" + }, + "devDependencies": { + "@types/chai": "^4.3.14", + "chai": "^4.4.1", + "prettier": "^3.3.3" + }, + "sideEffects": false, + "publishConfig": { + "access": "public" + }, + "wyw-in-js": { + "tags": { + "keyframes": "./exports/keyframes.js", + "generateAtomics": "./exports/generateAtomics.js", + "css": "./exports/css.js" + } + }, + "files": [ + "src", + "build", + "exports", + "package.json", + "styles.css", + "LICENSE" + ], + "exports": { + ".": { + "types": "./build/index.d.ts", + "import": { + "types": "./build/index.d.mts", + "default": "./build/index.mjs" + }, + "require": "./build/index.js", + "default": "./build/index.js" + }, + "./package.json": "./package.json", + "./styles.css": "./styles.css", + "./processors/*": { + "default": "./build/processors/*.js" + }, + "./exports/*": { + "default": "./exports/*.js" + }, + "./runtime": { + "import": "./build/runtime/index.mjs", + "require": "./build/runtime/index.js", + "default": "./build/runtime/index.js" + } + }, + "nx": { + "targets": { + "test": { + "cache": false, + "dependsOn": [ + "build" + ] + }, + "test:update": { + "cache": false, + "dependsOn": [ + "build" + ] + }, + "test:ci": { + "cache": false, + "dependsOn": [ + "build" + ] + }, + "build": { + "outputs": [ + "{projectRoot}/build" + ], + "dependsOn": [ + "^build" + ] + } + } + } +} diff --git a/packages/pigment-css-core/src/base.ts b/packages/pigment-css-core/src/base.ts new file mode 100644 index 00000000..1436ae0b --- /dev/null +++ b/packages/pigment-css-core/src/base.ts @@ -0,0 +1,27 @@ +import type * as CSS from 'csstype'; +import { Theme, ThemeKey } from '@pigment-css/theme'; + +export type CSSProperties = CSS.PropertiesFallback; + +export type CSSPropertiesMultiValue = { + [K in keyof CSSProperties]: + | ThemeKey + | CSSProperties[K] + | Array>; +}; + +export type CSSPseudosNoCallback = { [K in CSS.Pseudos]?: CSSObjectNoCallback }; + +export interface CSSOthersObjectNoCallback { + [selector: string]: CSSObjectNoCallback; +} + +export type CSSObjectNoCallback = + | CSSPropertiesMultiValue + | CSSPseudosNoCallback + | CSSOthersObjectNoCallback; + +export type ThemeArgs = { + theme: Theme; +}; +export type Primitve = string | null | undefined | boolean | number; diff --git a/packages/pigment-css-core/src/css.d.ts b/packages/pigment-css-core/src/css.d.ts new file mode 100644 index 00000000..aa9eff9b --- /dev/null +++ b/packages/pigment-css-core/src/css.d.ts @@ -0,0 +1,34 @@ +import { CSSObjectNoCallback, Primitve, ThemeArgs } from './base'; + +type IVariant = { + variants?: Record>; +}; + +type CssObj = CSSObjectNoCallback & IVariant; + +type CssArg = ((themeArgs: ThemeArgs) => CssObj | string) | CssObj | string; +type CssFn = (themeArgs: ThemeArgs) => string | number; + +interface BaseInterface { + className: string; +} + +interface Css { + /** + * @returns {string} The generated css class name to be referenced. + */ + (arg: TemplateStringsArray, ...templateArgs: (Primitve | CssFn)[]): string; + ( + metadata: M, + ): (arg: TemplateStringsArray, ...templateArgs: (Primitve | CssFn)[]) => string; + + /** + * @returns {string} The generated css class name to be referenced. + */ + (...args: CssArg[]): () => string; + (metadata: M, args: CssArg | CssArg[]): string; +} + +declare const css: Css; + +export default css; diff --git a/packages/pigment-css-core/src/css.js b/packages/pigment-css-core/src/css.js new file mode 100644 index 00000000..7ca40e27 --- /dev/null +++ b/packages/pigment-css-core/src/css.js @@ -0,0 +1,5 @@ +import { generateErrorMessage } from './utils'; + +export default function css() { + console.error(generateErrorMessage('css')); +} diff --git a/packages/pigment-css-core/src/index.ts b/packages/pigment-css-core/src/index.ts new file mode 100644 index 00000000..fe74fe3e --- /dev/null +++ b/packages/pigment-css-core/src/index.ts @@ -0,0 +1,4 @@ +export * from '@pigment-css/theme'; +export * from './base'; +export { default as css } from './css'; +export { default as keyframes } from './keyframes'; diff --git a/packages/pigment-css-core/src/keyframes.d.ts b/packages/pigment-css-core/src/keyframes.d.ts new file mode 100644 index 00000000..3bbfa34e --- /dev/null +++ b/packages/pigment-css-core/src/keyframes.d.ts @@ -0,0 +1,26 @@ +import type { CSSProperties, ThemeArgs } from './base'; + +export type Primitve = string | null | undefined | boolean | number; + +interface KeyframesObject { + [key: string]: { + [K in keyof CSSProperties]: CSSProperties[K] | Array; + }; +} + +type KeyframesArg = ((themeArgs: ThemeArgs) => KeyframesObject) | KeyframesObject; + +interface Keyframes { + /** + * @returns {string} The generated keyframe name to be referenced. + */ + (arg: TemplateStringsArray, ...templateArgs: Primitve[]): string; + /** + * @returns {string} The generated keyframe name to be referenced. + */ + (arg: KeyframesArg): string; +} + +declare const keyframes: Keyframes; + +export default keyframes; diff --git a/packages/pigment-css-core/src/keyframes.js b/packages/pigment-css-core/src/keyframes.js new file mode 100644 index 00000000..2cfde01d --- /dev/null +++ b/packages/pigment-css-core/src/keyframes.js @@ -0,0 +1,10 @@ +import { generateErrorMessage } from './utils'; + +/** + * `__wyw_dynamic_import` is a special global var that is set during the evaluation phase by wyw. + * So during eval phase, it can happen that some code is calling the runtime function. + * We do not want to throw error in that case as we want the evaluation to happen. + */ +export default function keyframes() { + console.error(generateErrorMessage('keyframes')); +} diff --git a/packages/pigment-css-core/src/processors/css.ts b/packages/pigment-css-core/src/processors/css.ts new file mode 100644 index 00000000..bd62a53f --- /dev/null +++ b/packages/pigment-css-core/src/processors/css.ts @@ -0,0 +1,409 @@ +/** + * This processor for `css` calls handles a lot of the scenarios. + * There is `CssProcessor` which is actually called by wyw. In its + * initialization, it checks for the type of parameters and depending + * on whether any one of the params is a template type, it + * internally creates `CssTaggedTemplateProcessor` or `CssObjectProcessor` + * if the css is called with object values. + * These both processors internally handle their own relevant logic. + * They implement a common interface which is what is called by the main + * CssProcessor. + */ + +import { SourceLocation, TemplateElement } from '@babel/types'; +import { + type PigmentConfig, + BaseProcessor, + parseArray, + processStyleObjects, + serializeStyles, + StyleObjectReturn, + valueToLiteral, +} from '@pigment-css/utils'; +import { + type Expression, + type Params, + type TailProcessorParams, + type ValueCache, + validateParams, +} from '@wyw-in-js/processor-utils'; +import { + Artifact, + ExpressionValue, + FunctionValue, + LazyValue, + Replacements, + Rules, + ValueType, +} from '@wyw-in-js/shared'; +import { ThemeArgs } from '../base'; + +export type Primitive = string | number | boolean | null | undefined; +export type TemplateCallback = (params: Record | undefined) => string | number; + +type GetClassName = () => string; + +abstract class BaseCssProcessor { + public tempMetaClass = (Math.random() + 1).toString(36).substring(10); + + readonly artifacts: Artifact[] = []; + + readonly classNames: string[] = []; + + constructor( + public readonly params: Params, + public readonly getClassName: GetClassName, + public readonly tagSource: TailProcessorParams[0], + public readonly astService: TailProcessorParams[1], + public readonly location: TailProcessorParams[2], + public readonly replacer: TailProcessorParams[3], + public readonly displayName: TailProcessorParams[4], + public readonly isReferenced: TailProcessorParams[5], + public readonly idx: TailProcessorParams[6], + public readonly options: TailProcessorParams[7], + public readonly context: TailProcessorParams[8], + ) {} + + abstract getDependencies(): ExpressionValue[]; + + abstract build(values: ValueCache): void; + + doRuntimeReplacement() { + this.replacer(this.astService.stringLiteral(this.classNames.join(' ')), false); + } + + getBaseClass(): string | undefined { + if (!this.tempMetaClass) { + return this.getClassName(); + } + return this.tempMetaClass; + } +} + +/** + * Only deals with css`` or css(metadata)`` calls. + */ +class CssTaggedTemplateProcessor extends BaseCssProcessor { + constructor(params: Params, getClassName: GetClassName, ...args: TailProcessorParams) { + super(params, getClassName, ...args); + + const [, callOrTemplate] = this.params; + if (callOrTemplate[0] === 'template') { + this.tempMetaClass = ''; + } + } + + getDependencies(): ExpressionValue[] { + const [, callOrTemplate, template] = this.params; + const deps: ExpressionValue[] = []; + if (callOrTemplate[0] === 'call') { + deps.push(callOrTemplate[1]); + } else if (callOrTemplate[0] === 'template') { + deps.push( + ...callOrTemplate[1].filter( + (arg): arg is ExpressionValue => 'kind' in arg && arg.kind !== ValueType.CONST, + ), + ); + } + if (template?.[0] === 'template') { + deps.push( + ...template[1].filter( + (arg): arg is ExpressionValue => 'kind' in arg && arg.kind !== ValueType.CONST, + ), + ); + } + return deps; + } + + build(values: ValueCache): void { + const { themeArgs, features: { useLayer = true } = {} } = this.options as PigmentConfig; + const [, callOrTemplate, template] = this.params; + // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. + const templateStrs: string[] = []; + // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. + templateStrs.raw = []; + const templateExpressions: Primitive[] = []; + const templateParams = (callOrTemplate[0] === 'call' ? template[1] : callOrTemplate[1]) as ( + | ExpressionValue + | TemplateElement + )[]; + templateParams.forEach((param) => { + if ('kind' in param) { + switch (param.kind) { + case ValueType.FUNCTION: { + const value = values.get(param.ex.name) as TemplateCallback; + templateExpressions.push(value(themeArgs)); + break; + } + case ValueType.CONST: { + templateExpressions.push(param.value); + break; + } + case ValueType.LAZY: { + const evaluatedValue = values.get(param.ex.name); + if (typeof evaluatedValue === 'function') { + templateExpressions.push(evaluatedValue(themeArgs)); + } else { + templateExpressions.push(evaluatedValue as Primitive); + } + break; + } + default: + break; + } + } else if ('type' in param && param.type === 'TemplateElement') { + templateStrs.push(param.value.cooked as string); + // @ts-ignore + templateStrs.raw.push(param.value.raw); + } + }); + const { styles } = serializeStyles( + templateExpressions.length > 0 ? [templateStrs, ...templateExpressions] : [templateStrs], + ); + + const cssText = useLayer ? `@layer pigment.base{${styles}}` : styles; + const className = this.getClassName(); + const rules: Rules = { + [`.${className}`]: { + className, + cssText, + displayName: this.displayName, + start: this.location?.start ?? null, + }, + }; + const location = this.location; + const sourceMapReplacements: Replacements = [ + { + length: cssText.length, + original: { + start: { + column: location?.start.column ?? 0, + line: location?.start.line ?? 0, + }, + end: { + column: location?.end.column ?? 0, + line: location?.end.line ?? 0, + }, + }, + }, + ]; + this.classNames.push(className); + this.artifacts.push(['css', [rules, sourceMapReplacements]]); + } + + doRuntimeReplacement() { + const baseClasses = this.astService.stringLiteral(this.classNames.join(' ')); + const cssCallId = this.astService.addNamedImport('css', '@pigment-css/core/runtime'); + const args = this.astService.objectExpression([ + this.astService.objectProperty(this.astService.identifier('classes'), baseClasses), + ]); + this.replacer(this.astService.callExpression(cssCallId, [args]), true); + } +} + +/** + * Only deals with css(...styleObjects) or or css(styleObject) css(metadata, [...styleObjects]) calls. + */ +class CssObjectProcessor extends BaseCssProcessor { + variants: { $$cls: string; props: Record }[] = []; + + getDependencies(): ExpressionValue[] { + const [, [, ...callParams]] = this.params; + return callParams as ExpressionValue[]; + } + + build(values: ValueCache): void { + const [, [, ...callParams]] = this.params; + const { themeArgs, features: { useLayer = true } = {} } = this.options as PigmentConfig; + + const evaluatedValues = (callParams as (LazyValue | FunctionValue)[]).map((param) => + values.get(param.ex.name), + ); + let stylesList: (object | Function)[]; + // let metadata: any; + // check for css(metadata, [styles]) or css(metadata, style) call + const locations: (SourceLocation | null | undefined)[] = []; + if ( + evaluatedValues.length === 2 && + evaluatedValues[0] && + typeof evaluatedValues[0] === 'object' && + 'className' in evaluatedValues[0] + ) { + // metadata = evaluatedValues[0]; + const param = callParams[1] as LazyValue | FunctionValue; + if (Array.isArray(evaluatedValues[1])) { + stylesList = evaluatedValues[1]; + // Parse the expression AST to track the exact locations of each parameter + const arrayItemsAst = parseArray((callParams[1] as ExpressionValue).source, { + startLine: param.ex.loc?.start.line, + startIndex: param.ex.loc?.start.index, + startColumn: param.ex.loc?.start.column, + }); + if (arrayItemsAst) { + locations.push(...arrayItemsAst.elements.map((item) => item?.loc)); + } + } else { + stylesList = [evaluatedValues[1] as (typeof stylesList)[number]]; + locations.push((callParams[1] as unknown as ExpressionValue).ex.loc); + } + } else { + // This is for css(...styles) call + stylesList = evaluatedValues as typeof stylesList; + locations.push(...(callParams as ExpressionValue[]).map((p) => p.ex.loc)); + } + + const styles = stylesList.map((item) => + typeof item === 'function' ? item(themeArgs as unknown as ThemeArgs) : item, + ); + let count = 0; + const result = processStyleObjects(styles, { + getClassName: (variantName: string | undefined, variantValue: string | undefined) => { + if (!variantName) { + return this.getClassName(); + } + return `${this.getClassName()}-${variantName}-${variantValue}`; + }, + getVariableName: () => { + count += 1; + return `${this.getClassName()}-${count}`; + }, + }); + + const addStyles = (s: StyleObjectReturn[], layer?: string) => { + const rules: Rules = {}; + s.forEach((style, index) => { + const location = locations[index] ?? locations[0]; + const cssText = + layer && useLayer ? `@layer pigment.${layer} {${style.cssText}}` : style.cssText; + rules[`.${style.className}`] = { + className: style.className, + cssText, + displayName: this.displayName, + start: location?.start ?? null, + }; + + const sourceMapReplacements: Replacements = + layer === 'base' + ? [ + { + length: cssText.length, + original: { + start: { + column: location?.start.column ?? 0, + line: location?.start.line ?? 0, + }, + end: { + column: location?.end.column ?? 0, + line: location?.end.line ?? 0, + }, + }, + }, + ] + : []; + + if (Object.keys(style.serializables).length > 0) { + this.variants.push({ + $$cls: style.className, + props: style.serializables, + }); + } + + this.artifacts.push(['css', [rules, sourceMapReplacements]]); + }); + }; + this.classNames.push(...result.base.map((item) => item.className)); + addStyles(result.base, 'base'); + addStyles(result.variants, 'variants'); + addStyles(result.compoundVariants, 'compoundvariants'); + } + + doRuntimeReplacement() { + const baseClasses = this.astService.stringLiteral(this.classNames.join(' ')); + const cssCallId = this.astService.addNamedImport('css', '@pigment-css/core/runtime'); + const [, [, ...callParams]] = this.params; + const args = this.astService.objectExpression([ + this.astService.objectProperty(this.astService.identifier('classes'), baseClasses), + ]); + if (this.variants.length > 0) { + args.properties.push( + this.astService.objectProperty( + this.astService.identifier('variants'), + valueToLiteral(this.variants, callParams[1] as ExpressionValue), + ), + ); + } + this.replacer(this.astService.callExpression(cssCallId, [args]), true); + } +} + +/** + * Scoped css class generation similar to css from emotion. + * + * @example + * ```ts + * import { css } from '@pigment-css/react'; + * + * const class1 = css(({theme}) => ({ + * color: (theme.vars || theme).palette.primary.main, + * })) + * ``` + * + * + */ +export class CssProcessor extends BaseProcessor { + processor: BaseCssProcessor; + + constructor(params: Params, ...args: TailProcessorParams) { + super([params[0]], ...args); + validateParams(params, ['callee', '...'], BaseProcessor.SKIP); + + if (params.length === 3) { + validateParams( + params, + ['callee', 'call', 'template'], + `Invalid use of ${this.tagSource.imported} function.`, + ); + } else { + validateParams( + params, + ['callee', ['call', 'template']], + `Invalid use of ${this.tagSource.imported} function.`, + ); + } + + const getClassName = () => this.getBaseClass(); + const [calleeParam, callParams, maybeTemplate] = params; + if (callParams[0] === 'template' || maybeTemplate?.[0] === 'template') { + this.processor = new CssTaggedTemplateProcessor(params, getClassName, ...args); + } else { + this.processor = new CssObjectProcessor([calleeParam, callParams], getClassName, ...args); + } + + this.dependencies.push(...this.processor.getDependencies()); + } + + build(values: ValueCache) { + this.processor.build(values); + this.artifacts.push(...this.processor.artifacts); + } + + getBaseClass(): string { + return this.className; + } + + get asSelector(): string { + return this.getBaseClass(); + } + + get value(): Expression { + return this.astService.stringLiteral(this.getBaseClass()); + } + + doEvaltimeReplacement(): void { + this.replacer(this.value, false); + } + + doRuntimeReplacement(): void { + this.processor.doRuntimeReplacement(); + } +} diff --git a/packages/pigment-css-core/src/processors/keyframes.ts b/packages/pigment-css-core/src/processors/keyframes.ts new file mode 100644 index 00000000..a90c079d --- /dev/null +++ b/packages/pigment-css-core/src/processors/keyframes.ts @@ -0,0 +1,161 @@ +import type { Expression } from '@babel/types'; +import type { + CallParam, + TemplateParam, + Params, + TailProcessorParams, + ValueCache, +} from '@wyw-in-js/processor-utils'; +import { type Replacements, type Rules, ValueType } from '@wyw-in-js/shared'; +import { BaseProcessor, validateParams } from '@wyw-in-js/processor-utils'; +import { PigmentConfig, serializeStyles, processStyle } from '@pigment-css/utils'; + +export type Primitive = string | number | boolean | null | undefined; + +export type TemplateCallback = (params: Record | undefined) => string | number; + +export class KeyframesProcessor extends BaseProcessor { + callParam: CallParam | TemplateParam; + + constructor(params: Params, ...args: TailProcessorParams) { + super([params[0]], ...args); + if (params.length < 2) { + throw BaseProcessor.SKIP; + } + validateParams( + params, + ['callee', ['call', 'template']], + `Invalid use of ${this.tagSource.imported} tag.`, + ); + + const [, callParams] = params; + if (callParams[0] === 'call') { + this.dependencies.push(callParams[1]); + } else if (callParams[0] === 'template') { + callParams[1].forEach((element) => { + if ('kind' in element && element.kind !== ValueType.CONST) { + this.dependencies.push(element); + } + }); + } + this.callParam = callParams; + } + + build(values: ValueCache) { + if (this.artifacts.length > 0) { + throw new Error(`MUI: "${this.tagSource.imported}" is already built`); + } + + const [callType] = this.callParam; + + if (callType === 'template') { + this.handleTemplate(this.callParam, values); + } else { + this.handleCall(this.callParam, values); + } + } + + private handleTemplate([, callArgs]: TemplateParam, values: ValueCache) { + const templateStrs: string[] = []; + // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. + templateStrs.raw = []; + const templateExpressions: Primitive[] = []; + const { themeArgs } = this.options as PigmentConfig; + + callArgs.forEach((item) => { + if ('kind' in item) { + switch (item.kind) { + case ValueType.FUNCTION: { + const value = values.get(item.ex.name) as TemplateCallback; + templateExpressions.push(value(themeArgs)); + break; + } + case ValueType.CONST: + templateExpressions.push(item.value); + break; + case ValueType.LAZY: { + const evaluatedValue = values.get(item.ex.name); + if (typeof evaluatedValue === 'function') { + templateExpressions.push(evaluatedValue(themeArgs)); + } else { + templateExpressions.push(evaluatedValue as Primitive); + } + break; + } + default: + break; + } + } else if (item.type === 'TemplateElement') { + templateStrs.push(item.value.cooked as string); + // @ts-ignore + templateStrs.raw.push(item.value.raw); + } + }); + this.generateArtifacts(templateStrs, ...templateExpressions); + } + + generateArtifacts(styleObjOrTagged: string[], ...args: Primitive[]) { + const { styles } = serializeStyles( + args.length > 0 ? [styleObjOrTagged, ...args] : [styleObjOrTagged], + ); + const cssText = `@keyframes {${styles}}`; + + const rules: Rules = { + [this.asSelector]: { + className: this.className, + cssText, + displayName: this.displayName, + start: this.location?.start ?? null, + }, + }; + const sourceMapReplacements: Replacements = [ + { + length: cssText.length, + original: { + start: { + column: this.location?.start.column ?? 0, + line: this.location?.start.line ?? 0, + }, + end: { + column: this.location?.end.column ?? 0, + line: this.location?.end.line ?? 0, + }, + }, + }, + ]; + this.artifacts.push(['css', [rules, sourceMapReplacements]]); + } + + private handleCall([, callArg]: CallParam, values: ValueCache) { + if (callArg.kind === ValueType.LAZY || callArg.kind === ValueType.FUNCTION) { + const value = values.get(callArg.ex.name); + const { themeArgs } = this.options as PigmentConfig; + const styleObj = typeof value === 'function' ? value(themeArgs) : value; + if (styleObj) { + let count = 0; + // Won't actually be used since keyframes call doesn't allow function values + const getVariableName = () => { + count += 1; + return `${this.className}-${count}`; + }; + this.generateArtifacts(processStyle(styleObj, { getVariableName }).result); + } + } + } + + doEvaltimeReplacement() { + this.replacer(this.value, false); + } + + doRuntimeReplacement() { + this.doEvaltimeReplacement(); + } + + get asSelector() { + return this.className; + } + + get value(): Expression { + return this.astService.stringLiteral(this.className); + } +} diff --git a/packages/pigment-css-core/src/runtime/css.ts b/packages/pigment-css-core/src/runtime/css.ts new file mode 100644 index 00000000..53a34f8b --- /dev/null +++ b/packages/pigment-css-core/src/runtime/css.ts @@ -0,0 +1,46 @@ +/** + * This module is not supposed to be imported by users. + */ +type Props = Record; + +type VariantInfo = { + $$cls: string; + props: Props; +}; + +type ClassInfo = { + classes: string; + variants?: VariantInfo[]; +}; + +function isVariantMatching(props: Props, variantProps: Props) { + // eslint-disable-next-line no-restricted-syntax + for (const key in variantProps) { + if (!variantProps.hasOwnProperty(key)) { + continue; + } + if (variantProps[key] !== props[key]) { + return false; + } + } + return true; +} + +export function css({ classes, variants = [] }: ClassInfo) { + return (props?: Props) => { + if (!props || !variants.length) { + return classes; + } + const newClasses = []; + for (let i = 0; i < variants.length; i += 1) { + const variant = variants[i]; + if (isVariantMatching(props, variant.props)) { + newClasses.push(variant.$$cls); + } + } + if (!newClasses.length) { + return classes; + } + return `${classes} ${newClasses.join(' ')}`; + }; +} diff --git a/packages/pigment-css-core/src/runtime/index.ts b/packages/pigment-css-core/src/runtime/index.ts new file mode 100644 index 00000000..5be79f04 --- /dev/null +++ b/packages/pigment-css-core/src/runtime/index.ts @@ -0,0 +1 @@ +export * from './css'; diff --git a/packages/pigment-css-core/src/utils.ts b/packages/pigment-css-core/src/utils.ts new file mode 100644 index 00000000..36beb33e --- /dev/null +++ b/packages/pigment-css-core/src/utils.ts @@ -0,0 +1,7 @@ +const BUNDLER_MESSAGE = + 'Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.'; + +// eslint-disable-next-line import/prefer-default-export +export function generateErrorMessage(fnName: string) { + return `${process.env.PACKAGE_NAME}: You were trying to call "${fnName}" function without configuring your bundler. ${BUNDLER_MESSAGE}`; +} diff --git a/packages/pigment-css-core/styles.css b/packages/pigment-css-core/styles.css new file mode 100644 index 00000000..87774e54 --- /dev/null +++ b/packages/pigment-css-core/styles.css @@ -0,0 +1,3 @@ +/** + * Placeholder css file where theme contents will be injected by the bundler + */ diff --git a/packages/pigment-css-core/tests/css/css-runtime.test.ts b/packages/pigment-css-core/tests/css/css-runtime.test.ts new file mode 100644 index 00000000..88d82610 --- /dev/null +++ b/packages/pigment-css-core/tests/css/css-runtime.test.ts @@ -0,0 +1,35 @@ +import { expect } from 'chai'; + +import { css } from '../../src/runtime'; + +describe('css - runtime', () => { + it('should return base classes when there are no variants or runtime props', async () => { + const cssFn = css({ + classes: 'hello world', + }); + expect(cssFn()).to.equal('hello world'); + expect(cssFn({ color: 'primary' })).to.equal('hello world'); + }); + + it('should return all classes that match the props', () => { + const cssFn = css({ + classes: 'hello world', + variants: [ + { + props: { color: 'primary' }, + $$cls: 'c-primary', + }, + { + props: { color: 'secondary', size: 'medium' }, + $$cls: 'c-secondary-s-medium', + }, + ], + }); + expect(cssFn()).to.equal('hello world'); + expect(cssFn({ color: 'primary' })).to.equal('hello world c-primary'); + expect(cssFn({ color: 'secondary' })).to.equal('hello world'); + expect(cssFn({ color: 'secondary', size: 'medium' })).to.equal( + 'hello world c-secondary-s-medium', + ); + }); +}); diff --git a/packages/pigment-css-core/tests/css/css.spec.ts b/packages/pigment-css-core/tests/css/css.spec.ts new file mode 100644 index 00000000..4754e75e --- /dev/null +++ b/packages/pigment-css-core/tests/css/css.spec.ts @@ -0,0 +1,66 @@ +import { t } from '@pigment-css/theme'; +import css from '../../src/css'; + +const cls1 = css({ + color: 'red', + WebkitAlignContent: '-moz-initial', +}); + +declare module '@pigment-css/theme' { + interface Theme { + palette: { + main: string; + }; + } +} + +const cls2 = css(({ theme }) => ({ + color: '$palette.main', + // @ts-expect-error main1 does not exists in theme.palette + backgroundColor: theme.palette.main1, + border: `1px solid ${t('$palette.main')}`, +})); + +const cls2WithMetadata = css( + { + className: 'Test1', + }, + ({ theme }) => ({ + color: '$palette.main', + // @ts-expect-error main1 does not exists in theme.palette + backgroundColor: theme.palette.main1, + border: `1px solid ${t('$palette.main')}`, + }), +); + +export const cls3WithMetadata = css( + { + className: 'Test1', + }, + [ + ({ theme }) => ({ + color: '$palette.main', + // @ts-expect-error main1 does not exists in theme.palette + backgroundColor: theme.palette.main1, + border: `1px solid ${t('$palette.main')}`, + }), + ({ theme }) => ({ + color: '$palette.main', + // @ts-expect-error main1 does not exists in theme.palette + backgroundColor: theme.palette.main1, + border: `1px solid ${t('$palette.main')}`, + }), + ], +); + +const cls3 = css` + color: red; + background-color: ${t('$palette.main')}; +`; + +const cls4WithMetadata = css({ + className: 'Test', +})` + color: red; + background-color: ${t('$palette.main')}; +`; diff --git a/packages/pigment-css-core/tests/css/css.test.ts b/packages/pigment-css-core/tests/css/css.test.ts new file mode 100644 index 00000000..58e3e1a1 --- /dev/null +++ b/packages/pigment-css-core/tests/css/css.test.ts @@ -0,0 +1,31 @@ +import path from 'node:path'; +import { runTransformation, expect } from '../testUtils'; + +const theme = { + palette: { + primary: { + main: 'red', + }, + }, + size: { + font: { + h1: '3rem', + }, + }, +}; + +describe('Pigment CSS - css', () => { + it('basics', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/css.input.js'), + { + themeArgs: { + theme, + }, + }, + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); +}); diff --git a/packages/pigment-css-core/tests/css/fixtures/css.input.js b/packages/pigment-css-core/tests/css/fixtures/css.input.js new file mode 100644 index 00000000..66250d90 --- /dev/null +++ b/packages/pigment-css-core/tests/css/fixtures/css.input.js @@ -0,0 +1,122 @@ +import { css } from '@pigment-css/core'; +import { t } from '@pigment-css/theme'; + +const ab = 'aliceblue'; + +export const cls1 = css` + ---flex: 1; + color: ${({ theme }) => theme.palette.primary.main}; + font-size: ${({ theme }) => theme.size.font.h1}; + background-color: ${ab}; +`; + +export const cls2 = css( + { + $$flex: 21, + $$testVar: 'red', + border: '1px solid $$testVar', + }, + { + $$flex: 22, + $$testVar1: 'red', + border: '1px solid $$testVar1', + }, +); + +export const cls3 = css({ + className: 'Test-class', +})` + ---flex: 3; + color: ${({ theme }) => theme.palette.primary.main}; + font-size: ${({ theme }) => theme.size.font.h1}; + background-color: ${ab}; +`; + +export const cls4 = css({ className: 'Test-class2' }, [ + { + $$flex: 41, + $$testVar: 'red', + backgroundColor: '$$testVar', + border: `1px solid ${t('$palette.primary.main')}`, + }, + ({ theme }) => ({ + $$flex: 42, + color: theme.palette.primary.main, + fontSize: theme.size.font.h1, + backgroundColor: ab, + variants: { + size: { + small: { + $$flex: 421, + padding: 0, + margin: 0, + borderColor: theme.palette.primary.main, + }, + medium: { + $$flex: 422, + padding: 5, + }, + large: { + $$flex: 423, + padding: 10, + }, + }, + }, + }), + ({ theme }) => ` + ---flex: 43; + color: ${theme.palette.primary.main}; + font-size: ${theme.size.font.h1}; + background-color: ${ab}; + `, + ` + ---flex: 44; + color: red; + font-size: 1rem; + background-color: ${ab}; + `, +]); + +export const cls5 = css({ className: 'Test-class3' }, ({ theme }) => ({ + $$flex: 51, + $$testVar: 'red', + backgroundColor: '$$testVar', + border: `1px solid ${t('$palette.primary.main')}`, + variants: { + size: { + small: { + $$flex: 52, + padding: 0, + margin: 0, + borderColor: theme.palette.primary.main, + }, + medium: { + $$flex: 53, + padding: 5, + }, + large: { + $$flex: 54, + padding: 10, + }, + }, + color: { + primary: { + $$flex: 55, + color: 'green', + }, + secondary: { + $$flex: 56, + color: 'blue', + }, + }, + }, + compoundVariants: [ + { + size: 'small', + color: 'primary', + css: { + borderRadius: '100%', + }, + }, + ], +})); diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.css b/packages/pigment-css-core/tests/css/fixtures/css.output.css new file mode 100644 index 00000000..910f28c7 --- /dev/null +++ b/packages/pigment-css-core/tests/css/fixtures/css.output.css @@ -0,0 +1,19 @@ +@layer pigment.base{.cqvc3we{---flex:1;color:red;font-size:3rem;background-color:aliceblue;}} +@layer pigment.base{.cx3ztpe{---flex:21;---testVar:red;border:1px solid var(---testVar);}} +@layer pigment.base{.cx3ztpe-1{---flex:22;---testVar1:red;border:1px solid var(---testVar1);}} +@layer pigment.base{.c1aq99o6{---flex:3;color:red;font-size:3rem;background-color:aliceblue;}} +@layer pigment.base{.cuccxpq{---flex:41;---testVar:red;background-color:var(---testVar);border:1px solid var(--palette-primary-main);}} +@layer pigment.base{.cuccxpq-1{---flex:42;color:red;font-size:3rem;background-color:aliceblue;}} +@layer pigment.base{.cuccxpq-2{---flex:43;color:red;font-size:3rem;background-color:aliceblue;}} +@layer pigment.base{.cuccxpq-3{---flex:44;color:red;font-size:1rem;background-color:aliceblue;}} +@layer pigment.variants{.cuccxpq-size-small-1{---flex:421;padding:0;margin:0;border-color:red;}} +@layer pigment.variants{.cuccxpq-size-medium-1{---flex:422;padding:5px;}} +@layer pigment.variants{.cuccxpq-size-large-1{---flex:423;padding:10px;}} +@layer pigment.base{.c1v5vhpp{---flex:51;---testVar:red;background-color:var(---testVar);border:1px solid var(--palette-primary-main);}} +@layer pigment.variants{.c1v5vhpp-size-small{---flex:52;padding:0;margin:0;border-color:red;}} +@layer pigment.variants{.c1v5vhpp-size-medium{---flex:53;padding:5px;}} +@layer pigment.variants{.c1v5vhpp-size-large{---flex:54;padding:10px;}} +@layer pigment.variants{.c1v5vhpp-color-primary{---flex:55;color:green;}} +@layer pigment.variants{.c1v5vhpp-color-secondary{---flex:56;color:blue;}} +@layer pigment.compoundvariants{.c1v5vhpp-cv{border-radius:100%;}} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmNxdmMzd2UiLCIuY3gzenRwZSIsIi5jeDN6dHBlLTEiLCIuYzFhcTk5bzYiLCIuY3VjY3hwcSIsIi5jdWNjeHBxLTEiLCIuY3VjY3hwcS0yIiwiLmN1Y2N4cHEtMyIsIi5jdWNjeHBxLXNpemUtc21hbGwtMSIsIi5jdWNjeHBxLXNpemUtbWVkaXVtLTEiLCIuY3VjY3hwcS1zaXplLWxhcmdlLTEiLCIuYzF2NXZocHAiLCIuYzF2NXZocHAtc2l6ZS1zbWFsbCIsIi5jMXY1dmhwcC1zaXplLW1lZGl1bSIsIi5jMXY1dmhwcC1zaXplLWxhcmdlIiwiLmMxdjV2aHBwLWNvbG9yLXByaW1hcnkiLCIuYzF2NXZocHAtY29sb3Itc2Vjb25kYXJ5IiwiLmMxdjV2aHBwLWN2Il0sIm1hcHBpbmdzIjoiQUFLb0JBO0FBUWxCQztBQUtBQztBQU9rQkM7QUFVbEJDO0FBTUFDO0FBd0JBQztBQU1BQztBQXBDQUM7QUFNQUM7QUF3QkFDO0FBY29EQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQUFBQyIsImZpbGUiOiIvVXNlcnMvYnJpamVzaC9wcm9qZWN0cy9tdWkvcGlnbWVudC1jc3MvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9jc3MvZml4dHVyZXMvY3NzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9jb3JlJztcbmltcG9ydCB7IHQgfSBmcm9tICdAcGlnbWVudC1jc3MvdGhlbWUnO1xuXG5jb25zdCBhYiA9ICdhbGljZWJsdWUnO1xuXG5leHBvcnQgY29uc3QgY2xzMSA9IGNzc2BcbiAgLS0tZmxleDogMTtcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG5gO1xuXG5leHBvcnQgY29uc3QgY2xzMiA9IGNzcyhcbiAge1xuICAgICQkZmxleDogMjEsXG4gICAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgICBib3JkZXI6ICcxcHggc29saWQgJCR0ZXN0VmFyJyxcbiAgfSxcbiAge1xuICAgICQkZmxleDogMjIsXG4gICAgJCR0ZXN0VmFyMTogJ3JlZCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkICQkdGVzdFZhcjEnLFxuICB9LFxuKTtcblxuZXhwb3J0IGNvbnN0IGNsczMgPSBjc3Moe1xuICBjbGFzc05hbWU6ICdUZXN0LWNsYXNzJyxcbn0pYFxuICAtLS1mbGV4OiAzO1xuICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbn07XG4gIGZvbnQtc2l6ZTogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zaXplLmZvbnQuaDF9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbmA7XG5cbmV4cG9ydCBjb25zdCBjbHM0ID0gY3NzKHsgY2xhc3NOYW1lOiAnVGVzdC1jbGFzczInIH0sIFtcbiAge1xuICAgICQkZmxleDogNDEsXG4gICAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6ICckJHRlc3RWYXInLFxuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIH0sXG4gICh7IHRoZW1lIH0pID0+ICh7XG4gICAgJCRmbGV4OiA0MixcbiAgICBjb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgZm9udFNpemU6IHRoZW1lLnNpemUuZm9udC5oMSxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGFiLFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBzaXplOiB7XG4gICAgICAgIHNtYWxsOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjEsXG4gICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgICAgICB9LFxuICAgICAgICBtZWRpdW06IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMixcbiAgICAgICAgICBwYWRkaW5nOiA1LFxuICAgICAgICB9LFxuICAgICAgICBsYXJnZToge1xuICAgICAgICAgICQkZmxleDogNDIzLFxuICAgICAgICAgIHBhZGRpbmc6IDEwLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICB9KSxcbiAgKHsgdGhlbWUgfSkgPT4gYFxuICAgIC0tLWZsZXg6IDQzO1xuICAgIGNvbG9yOiAke3RoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgICBmb250LXNpemU6ICR7dGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbiAgYCxcbiAgYFxuICAgIC0tLWZsZXg6IDQ0O1xuICAgIGNvbG9yOiByZWQ7XG4gICAgZm9udC1zaXplOiAxcmVtO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuICBgLFxuXSk7XG5cbmV4cG9ydCBjb25zdCBjbHM1ID0gY3NzKHsgY2xhc3NOYW1lOiAnVGVzdC1jbGFzczMnIH0sICh7IHRoZW1lIH0pID0+ICh7XG4gICQkZmxleDogNTEsXG4gICQkdGVzdFZhcjogJ3JlZCcsXG4gIGJhY2tncm91bmRDb2xvcjogJyQkdGVzdFZhcicsXG4gIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIHZhcmlhbnRzOiB7XG4gICAgc2l6ZToge1xuICAgICAgc21hbGw6IHtcbiAgICAgICAgJCRmbGV4OiA1MixcbiAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICBib3JkZXJDb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgICB9LFxuICAgICAgbWVkaXVtOiB7XG4gICAgICAgICQkZmxleDogNTMsXG4gICAgICAgIHBhZGRpbmc6IDUsXG4gICAgICB9LFxuICAgICAgbGFyZ2U6IHtcbiAgICAgICAgJCRmbGV4OiA1NCxcbiAgICAgICAgcGFkZGluZzogMTAsXG4gICAgICB9LFxuICAgIH0sXG4gICAgY29sb3I6IHtcbiAgICAgIHByaW1hcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NSxcbiAgICAgICAgY29sb3I6ICdncmVlbicsXG4gICAgICB9LFxuICAgICAgc2Vjb25kYXJ5OiB7XG4gICAgICAgICQkZmxleDogNTYsXG4gICAgICAgIGNvbG9yOiAnYmx1ZScsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG4gIGNvbXBvdW5kVmFyaWFudHM6IFtcbiAgICB7XG4gICAgICBzaXplOiAnc21hbGwnLFxuICAgICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICAgIGNzczoge1xuICAgICAgICBib3JkZXJSYWRpdXM6ICcxMDAlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgXSxcbn0pKTtcbiJdfQ==*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.js b/packages/pigment-css-core/tests/css/fixtures/css.output.js new file mode 100644 index 00000000..e2caa3d4 --- /dev/null +++ b/packages/pigment-css-core/tests/css/fixtures/css.output.js @@ -0,0 +1,81 @@ +import { + css as _css, + css as _css2, + css as _css3, + css as _css4, + css as _css5, +} from '@pigment-css/core/runtime'; +export const cls1 = /*#__PURE__*/ _css({ + classes: 'cqvc3we', +}); +export const cls2 = /*#__PURE__*/ _css2({ + classes: 'cx3ztpe cx3ztpe-1', +}); +export const cls3 = /*#__PURE__*/ _css3({ + classes: 'c1aq99o6', +}); +export const cls4 = /*#__PURE__*/ _css4({ + classes: 'cuccxpq cuccxpq-1 cuccxpq-2 cuccxpq-3', + variants: [ + { + $$cls: 'cuccxpq-size-small-1', + props: { + size: 'small', + }, + }, + { + $$cls: 'cuccxpq-size-medium-1', + props: { + size: 'medium', + }, + }, + { + $$cls: 'cuccxpq-size-large-1', + props: { + size: 'large', + }, + }, + ], +}); +export const cls5 = /*#__PURE__*/ _css5({ + classes: 'c1v5vhpp', + variants: [ + { + $$cls: 'c1v5vhpp-size-small', + props: { + size: 'small', + }, + }, + { + $$cls: 'c1v5vhpp-size-medium', + props: { + size: 'medium', + }, + }, + { + $$cls: 'c1v5vhpp-size-large', + props: { + size: 'large', + }, + }, + { + $$cls: 'c1v5vhpp-color-primary', + props: { + color: 'primary', + }, + }, + { + $$cls: 'c1v5vhpp-color-secondary', + props: { + color: 'secondary', + }, + }, + { + $$cls: 'c1v5vhpp-cv', + props: { + size: 'small', + color: 'primary', + }, + }, + ], +}); diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.input.js b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.input.js new file mode 100644 index 00000000..6912e149 --- /dev/null +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.input.js @@ -0,0 +1,44 @@ +import { keyframes } from '@pigment-css/core'; + +const green = 'green'; + +const gradientKeyframe = keyframes(({ theme }) => ({ + '0%': { + background: theme.palette.primary.main, + }, + '50%': { + background: green, + }, + '100%': { + background: theme.palette.secondary.main, + }, +})); + +const gradientKeyframe2 = keyframes` + 0% { + background: ${({ theme }) => theme.palette.primary.main}; + } + + 50% { + background: ${green}; + } + + 100% { + background: ${({ theme }) => theme.palette.secondary.main}; + } +`; + +// simulate CssBaseline transpiled by Next.js +export const styles = (theme) => ({ + '0%': { + background: theme.palette.primary.main, + }, + '50%': { + background: green, + }, + '100%': { + background: theme.palette.secondary.main, + }, +}); +const gradientKeyframe3 = keyframes((_c = ({ theme }) => styles(theme))); +var _c; diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css new file mode 100644 index 00000000..80f9145f --- /dev/null +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css @@ -0,0 +1,4 @@ +@-webkit-keyframes{0%{background:red;}50%{background:green;}100%{background:blue;}}@keyframes{0%{background:red;}50%{background:green;}100%{background:blue;}} +@-webkit-keyframes{0%{background:red;}50%{background:green;}100%{background:blue;}}@keyframes{0%{background:red;}50%{background:green;}100%{background:blue;}} +@-webkit-keyframes{0%{background:red;}50%{background:green;}100%{background:blue;}}@keyframes{0%{background:red;}50%{background:green;}100%{background:blue;}} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMtdGhlbWUuaW5wdXQuanMiXSwibmFtZXMiOlsiZzVnOTVuZCIsImd0MmZ1YWIiLCJnMTYxMXRpMyJdLCJtYXBwaW5ncyI6IkFBSXlCQTtBQVlDQztBQTBCQUMiLCJmaWxlIjoiL1VzZXJzL2JyaWplc2gvcHJvamVjdHMvbXVpL3BpZ21lbnQtY3NzL3BhY2thZ2VzL3BpZ21lbnQtY3NzLWNvcmUvdGVzdHMva2V5ZnJhbWVzL2ZpeHR1cmVzL2tleWZyYW1lcy10aGVtZS5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAcGlnbWVudC1jc3MvY29yZSc7XG5cbmNvbnN0IGdyZWVuID0gJ2dyZWVuJztcblxuY29uc3QgZ3JhZGllbnRLZXlmcmFtZSA9IGtleWZyYW1lcygoeyB0aGVtZSB9KSA9PiAoe1xuICAnMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gIH0sXG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW4sXG4gIH0sXG4gICcxMDAlJzoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLnBhbGV0dGUuc2Vjb25kYXJ5Lm1haW4sXG4gIH0sXG59KSk7XG5cbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUyID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbn07XG4gIH1cblxuICA1MCUge1xuICAgIGJhY2tncm91bmQ6ICR7Z3JlZW59O1xuICB9XG5cbiAgMTAwJSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLnNlY29uZGFyeS5tYWlufTtcbiAgfVxuYDtcblxuLy8gc2ltdWxhdGUgQ3NzQmFzZWxpbmUgdHJhbnNwaWxlZCBieSBOZXh0LmpzXG5leHBvcnQgY29uc3Qgc3R5bGVzID0gKHRoZW1lKSA9PiAoe1xuICAnMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gIH0sXG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW4sXG4gIH0sXG4gICcxMDAlJzoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLnBhbGV0dGUuc2Vjb25kYXJ5Lm1haW4sXG4gIH0sXG59KTtcbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUzID0ga2V5ZnJhbWVzKChfYyA9ICh7IHRoZW1lIH0pID0+IHN0eWxlcyh0aGVtZSkpKTtcbnZhciBfYztcbiJdfQ==*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.js b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.js new file mode 100644 index 00000000..bc431f46 --- /dev/null +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.js @@ -0,0 +1,18 @@ +const green = 'green'; +const gradientKeyframe = 'g5g95nd'; +const gradientKeyframe2 = 'gt2fuab'; + +// simulate CssBaseline transpiled by Next.js +export const styles = (theme) => ({ + '0%': { + background: theme.palette.primary.main, + }, + '50%': { + background: green, + }, + '100%': { + background: theme.palette.secondary.main, + }, +}); +const gradientKeyframe3 = 'g1611ti3'; +var _c; diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.input.js b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.input.js new file mode 100644 index 00000000..7f7332a8 --- /dev/null +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.input.js @@ -0,0 +1,20 @@ +import { keyframes } from '@pigment-css/core'; + +const rotateKeyframe = keyframes({ + from: { + transform: 'rotate(360deg)', + }, + to: { + transform: 'rotate(0deg)', + }, +}); + +const rotateKeyframe2 = keyframes` + from { + transform: rotate(360deg); + } + + to { + transform: rotate(0deg); + } +`; diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css new file mode 100644 index 00000000..94f32e8a --- /dev/null +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css @@ -0,0 +1,3 @@ +@-webkit-keyframes{from{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}to{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}}@keyframes{from{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}to{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}} +@-webkit-keyframes{from{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}to{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}}@keyframes{from{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}to{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMuaW5wdXQuanMiXSwibmFtZXMiOlsicnJ0ZncxMSIsInJ3Mnl4ZTciXSwibWFwcGluZ3MiOiJBQUV1QkE7QUFTQ0MiLCJmaWxlIjoiL1VzZXJzL2JyaWplc2gvcHJvamVjdHMvbXVpL3BpZ21lbnQtY3NzL3BhY2thZ2VzL3BpZ21lbnQtY3NzLWNvcmUvdGVzdHMva2V5ZnJhbWVzL2ZpeHR1cmVzL2tleWZyYW1lcy5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAcGlnbWVudC1jc3MvY29yZSc7XG5cbmNvbnN0IHJvdGF0ZUtleWZyYW1lID0ga2V5ZnJhbWVzKHtcbiAgZnJvbToge1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgzNjBkZWcpJyxcbiAgfSxcbiAgdG86IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMGRlZyknLFxuICB9LFxufSk7XG5cbmNvbnN0IHJvdGF0ZUtleWZyYW1lMiA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcbiAgfVxuXG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgfVxuYDtcbiJdfQ==*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.js b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.js new file mode 100644 index 00000000..f6b6d157 --- /dev/null +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.js @@ -0,0 +1,2 @@ +const rotateKeyframe = 'rrtfw11'; +const rotateKeyframe2 = 'rw2yxe7'; diff --git a/packages/pigment-css-core/tests/keyframes/keyframes.test.ts b/packages/pigment-css-core/tests/keyframes/keyframes.test.ts new file mode 100644 index 00000000..87f956f4 --- /dev/null +++ b/packages/pigment-css-core/tests/keyframes/keyframes.test.ts @@ -0,0 +1,36 @@ +import path from 'node:path'; +import { runTransformation, expect } from '../testUtils'; + +describe('Pigment CSS - keyframes', () => { + it('basics', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/keyframes.input.js'), + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); + + it('should transform correctly with theme', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/keyframes-theme.input.js'), + { + themeArgs: { + theme: { + palette: { + primary: { + main: 'red', + }, + secondary: { + main: 'blue', + }, + }, + }, + }, + }, + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); +}); diff --git a/packages/pigment-css-core/tests/testUtils.ts b/packages/pigment-css-core/tests/testUtils.ts new file mode 100644 index 00000000..f85d8caa --- /dev/null +++ b/packages/pigment-css-core/tests/testUtils.ts @@ -0,0 +1,124 @@ +import * as fs from 'node:fs'; +import * as path from 'node:path'; +import { expect as chaiExpect } from 'chai'; +import { Theme } from '@pigment-css/theme'; +import { asyncResolveFallback } from '@wyw-in-js/shared'; +import { TransformCacheCollection, createFileReporter, transform } from '@wyw-in-js/transform'; +import * as prettier from 'prettier'; + +import pkgJson from '../package.json'; + +type TransformOptions = { + outputDir?: string; + /** + * Object to pass as parameter to the styled css callback functions. + */ + themeArgs?: { + theme?: Theme; + }; +}; + +const shouldUpdateOutput = process.env.UPDATE_FIXTURES === 'true'; + +export async function runTransformation(absolutePath: string, options?: TransformOptions) { + const cache = new TransformCacheCollection(); + const { emitter: eventEmitter } = createFileReporter(false); + const inputFilePath = absolutePath; + const { outputDir, ...restOptions } = options ?? {}; + let outputFilePath = ( + outputDir ? path.join(outputDir, inputFilePath.split(path.sep).pop() as string) : absolutePath + ).replace('.input.', '.output.'); + let outputCssFilePath = ( + outputDir ? path.join(outputDir, inputFilePath.split(path.sep).pop() as string) : absolutePath + ) + .replace('.input.js', '.output.css') + .replace('.input.jsx', '.output.css'); + + if (!outputFilePath.includes('output')) { + outputFilePath = outputFilePath.replace(path.extname(outputFilePath), '.output.js'); + } + + if (!outputCssFilePath.includes('output')) { + outputCssFilePath = outputCssFilePath.replace(path.extname(outputCssFilePath), '.output.css'); + } + + const inputContent = fs.readFileSync(inputFilePath, 'utf8'); + let outputContent = fs.existsSync(outputFilePath) ? fs.readFileSync(outputFilePath, 'utf8') : ''; + let outputCssContent = fs.existsSync(outputCssFilePath) + ? fs.readFileSync(outputCssFilePath, 'utf8') + : ''; + + const pluginOptions = { + babelOptions: { + configFile: false, + babelrc: false, + }, + tagResolver(source: string, tag: string) { + if (source !== '@pigment-css/core') { + return null; + } + return require.resolve(`../${pkgJson['wyw-in-js'].tags[tag]}`); + }, + ...restOptions, + }; + + const result = await transform( + { + options: { + filename: inputFilePath, + // preprocessor: (selector, css) => preprocessor(selector, css, options?.css), + pluginOptions, + }, + cache, + eventEmitter, + }, + inputContent, + asyncResolveFallback, + ); + + const prettierConfig = await prettier.resolveConfig( + path.join(process.cwd(), 'prettier.config.js'), + ); + const formattedJs = await prettier.format(result.code, { + ...prettierConfig, + parser: 'babel', + }); + // let formattedCss = await prettier.format(result.cssText ?? '', { + // ...prettierConfig, + // parser: 'css', + // }); + const formattedCss = + (result.cssText ?? '') + + (result.cssSourceMapText + ? `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(result.cssSourceMapText).toString('base64')}*/` + : ''); + + if (!outputContent || shouldUpdateOutput) { + fs.mkdirSync(path.dirname(outputFilePath), { recursive: true }); + fs.writeFileSync(outputFilePath, formattedJs, 'utf-8'); + outputContent = formattedJs; + } + + if (!outputCssContent || shouldUpdateOutput) { + fs.mkdirSync(path.dirname(outputCssFilePath), { recursive: true }); + fs.writeFileSync(outputCssFilePath, formattedCss, 'utf-8'); + outputCssContent = formattedCss; + } + + return { + output: { + js: formattedJs, + css: formattedCss, + }, + fixture: { + js: outputContent, + css: outputCssContent, + }, + }; +} + +export function expect(val: any): ReturnType { + const CUSTOM_ERROR = + 'The file contents have changed. Run "test:update" command to update the file if this is expected.'; + return chaiExpect(val, CUSTOM_ERROR); +} diff --git a/packages/pigment-css-core/tsconfig.build.json b/packages/pigment-css-core/tsconfig.build.json new file mode 100644 index 00000000..2639ca1b --- /dev/null +++ b/packages/pigment-css-core/tsconfig.build.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "composite": false + }, + "exclude": ["./tsup.config.ts", "src/**/*.d.ts"] +} diff --git a/packages/pigment-css-core/tsconfig.json b/packages/pigment-css-core/tsconfig.json new file mode 100644 index 00000000..e851de14 --- /dev/null +++ b/packages/pigment-css-core/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../../tsconfig.json", + "include": [ + "src/**/*.tsx", + "src/**/*.js", + "src/**/*.ts", + "tests/**/*.spec.ts", + "tests/**/*.spec.tsx", + "src/exports/css.cjs" + ], + "exclude": ["./tsup.config.ts"] +} diff --git a/packages/pigment-css-core/tsup.config.ts b/packages/pigment-css-core/tsup.config.ts new file mode 100644 index 00000000..7f878d7f --- /dev/null +++ b/packages/pigment-css-core/tsup.config.ts @@ -0,0 +1,29 @@ +import { Options, defineConfig } from 'tsup'; +import config from '../../tsup.config'; + +const processors = ['css', 'keyframes']; + +const baseConfig: Options = { + ...(config as Options), + tsconfig: './tsconfig.build.json', +}; + +const BASE_FILES = ['index.ts']; + +export default defineConfig([ + { + ...baseConfig, + entry: BASE_FILES.map((file) => `./src/${file}`), + }, + { + ...baseConfig, + entry: ['./src/runtime/index.ts'], + outDir: 'build/runtime', + }, + { + ...baseConfig, + entry: processors.map((file) => `./src/processors/${file}.ts`), + outDir: 'build/processors', + cjsInterop: true, + }, +]); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 763146bf..a14fc6ce 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -451,6 +451,46 @@ importers: specifier: ^7.5.0 version: 7.6.0(eslint@8.57.0)(typescript@5.6.3) + packages/pigment-css-core: + dependencies: + '@babel/types': + specifier: ^7.26.0 + version: 7.26.0 + '@emotion/css': + specifier: ^11.13.4 + version: 11.13.4 + '@pigment-css/theme': + specifier: workspace:^ + version: link:../pigment-css-theme + '@pigment-css/utils': + specifier: workspace:* + version: link:../pigment-css-utils + '@wyw-in-js/processor-utils': + specifier: ^0.5.5 + version: 0.5.5 + '@wyw-in-js/shared': + specifier: ^0.5.5 + version: 0.5.5 + '@wyw-in-js/transform': + specifier: ^0.5.5 + version: 0.5.5(typescript@5.6.3) + csstype: + specifier: ^3.1.3 + version: 3.1.3 + lodash: + specifier: ^4.17.21 + version: 4.17.21 + devDependencies: + '@types/chai': + specifier: ^4.3.14 + version: 4.3.14 + chai: + specifier: ^4.4.1 + version: 4.5.0 + prettier: + specifier: ^3.3.3 + version: 3.3.3 + packages/pigment-css-nextjs-plugin: dependencies: '@pigment-css/unplugin': From e815a3464762151a9677e53889dbb2553a3fdceb Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Mon, 16 Dec 2024 10:57:28 +0530 Subject: [PATCH 04/42] keyframe new api --- .eslintignore | 1 + packages/pigment-css-core/package.json | 1 - packages/pigment-css-core/src/css.d.ts | 7 +- packages/pigment-css-core/src/keyframes.d.ts | 11 +- .../pigment-css-core/src/processors/css.ts | 2 +- .../src/processors/keyframes.ts | 367 +++++++++++++----- packages/pigment-css-core/src/utils.ts | 1 - .../tests/css/fixtures/css.input.js | 9 +- .../tests/css/fixtures/css.output.css | 39 +- .../tests/css/fixtures/css.output.js | 28 +- .../fixtures/keyframes-theme.input.js | 43 ++ .../fixtures/keyframes-theme.output.css | 11 +- .../fixtures/keyframes-theme.output.js | 3 + .../keyframes/fixtures/keyframes.output.css | 6 +- .../tests/keyframes/keyframes.spec.ts | 68 ++++ packages/pigment-css-core/tests/testUtils.ts | 2 + packages/pigment-css-utils/package.json | 4 +- packages/pigment-css-utils/src/utils/index.ts | 1 + .../src/utils/parseExpression.ts | 16 - .../src/utils/preprocessor.ts | 48 +++ pnpm-lock.yaml | 11 + pnpm.patch | 252 ++++++++++++ 22 files changed, 777 insertions(+), 154 deletions(-) create mode 100644 packages/pigment-css-core/tests/keyframes/keyframes.spec.ts delete mode 100644 packages/pigment-css-utils/src/utils/parseExpression.ts create mode 100644 packages/pigment-css-utils/src/utils/preprocessor.ts create mode 100644 pnpm.patch diff --git a/.eslintignore b/.eslintignore index e18ab254..a9382ec8 100644 --- a/.eslintignore +++ b/.eslintignore @@ -9,6 +9,7 @@ /packages/pigment-css-react/exports/ /packages/pigment-css-react/theme/ /packages/pigment-css-react/tests/**/fixtures +/packages/pigment-css-core/tests/**/fixtures /packages/pigment-css-nextjs-plugin/loader.js # Ignore fixtures /packages-internal/scripts/typescript-to-proptypes/test/*/* diff --git a/packages/pigment-css-core/package.json b/packages/pigment-css-core/package.json index beb3b230..349272d3 100644 --- a/packages/pigment-css-core/package.json +++ b/packages/pigment-css-core/package.json @@ -53,7 +53,6 @@ "wyw-in-js": { "tags": { "keyframes": "./exports/keyframes.js", - "generateAtomics": "./exports/generateAtomics.js", "css": "./exports/css.js" } }, diff --git a/packages/pigment-css-core/src/css.d.ts b/packages/pigment-css-core/src/css.d.ts index aa9eff9b..47d77818 100644 --- a/packages/pigment-css-core/src/css.d.ts +++ b/packages/pigment-css-core/src/css.d.ts @@ -7,9 +7,12 @@ type IVariant = { type CssObj = CSSObjectNoCallback & IVariant; type CssArg = ((themeArgs: ThemeArgs) => CssObj | string) | CssObj | string; -type CssFn = (themeArgs: ThemeArgs) => string | number; +export type CssFn = (themeArgs: ThemeArgs) => string | number; -interface BaseInterface { +export interface BaseInterface { + /** + * Corresponds to css class name for `css` function call and keyframe name when passed to `keyframes` + */ className: string; } diff --git a/packages/pigment-css-core/src/keyframes.d.ts b/packages/pigment-css-core/src/keyframes.d.ts index 3bbfa34e..9bae6552 100644 --- a/packages/pigment-css-core/src/keyframes.d.ts +++ b/packages/pigment-css-core/src/keyframes.d.ts @@ -1,6 +1,5 @@ -import type { CSSProperties, ThemeArgs } from './base'; - -export type Primitve = string | null | undefined | boolean | number; +import type { CSSProperties, Primitve, ThemeArgs } from './base'; +import { BaseInterface, CssFn } from './css'; interface KeyframesObject { [key: string]: { @@ -14,11 +13,15 @@ interface Keyframes { /** * @returns {string} The generated keyframe name to be referenced. */ - (arg: TemplateStringsArray, ...templateArgs: Primitve[]): string; + (arg: TemplateStringsArray, ...templateArgs: (Primitve | CssFn)[]): string; + ( + metadata: M, + ): (arg: TemplateStringsArray, ...templateArgs: (Primitve | CssFn)[]) => string; /** * @returns {string} The generated keyframe name to be referenced. */ (arg: KeyframesArg): string; + (metadata: M, args: KeyframesArg): string; } declare const keyframes: Keyframes; diff --git a/packages/pigment-css-core/src/processors/css.ts b/packages/pigment-css-core/src/processors/css.ts index bd62a53f..330ec94e 100644 --- a/packages/pigment-css-core/src/processors/css.ts +++ b/packages/pigment-css-core/src/processors/css.ts @@ -43,7 +43,7 @@ export type TemplateCallback = (params: Record | undefined) => type GetClassName = () => string; -abstract class BaseCssProcessor { +export abstract class BaseCssProcessor { public tempMetaClass = (Math.random() + 1).toString(36).substring(10); readonly artifacts: Artifact[] = []; diff --git a/packages/pigment-css-core/src/processors/keyframes.ts b/packages/pigment-css-core/src/processors/keyframes.ts index a90c079d..56e5489d 100644 --- a/packages/pigment-css-core/src/processors/keyframes.ts +++ b/packages/pigment-css-core/src/processors/keyframes.ts @@ -1,80 +1,115 @@ -import type { Expression } from '@babel/types'; -import type { - CallParam, - TemplateParam, - Params, - TailProcessorParams, - ValueCache, +/** + * This processor for `keyframes` calls handles a lot of the scenarios. + * There is `KeyframesProcessor` which is actually called by wyw. In its + * initialization, it checks for the type of parameters and depending + * on whether any one of the params is a template type, it + * internally creates `KeyframesTaggedTemplateProcessor` or `KeyframesObjectProcessor` + * if the css is called with object values. + * These both processors internally handle their own relevant logic. + * They implement a common interface which is what is called by the main + * KeyframesProcessor. + */ + +import { SourceLocation, TemplateElement } from '@babel/types'; +import { + type PigmentConfig, + BaseProcessor, + parseArray, + processStyleObjects, + serializeStyles, + StyleObjectReturn, + valueToLiteral, +} from '@pigment-css/utils'; +import { + type Expression, + type Params, + type TailProcessorParams, + type ValueCache, + validateParams, } from '@wyw-in-js/processor-utils'; -import { type Replacements, type Rules, ValueType } from '@wyw-in-js/shared'; -import { BaseProcessor, validateParams } from '@wyw-in-js/processor-utils'; -import { PigmentConfig, serializeStyles, processStyle } from '@pigment-css/utils'; +import { + ExpressionValue, + FunctionValue, + LazyValue, + Replacements, + Rules, + ValueType, +} from '@wyw-in-js/shared'; +import { ThemeArgs } from '../base'; +import { BaseCssProcessor } from './css'; export type Primitive = string | number | boolean | null | undefined; - export type TemplateCallback = (params: Record | undefined) => string | number; -export class KeyframesProcessor extends BaseProcessor { - callParam: CallParam | TemplateParam; +type GetClassName = () => string; - constructor(params: Params, ...args: TailProcessorParams) { - super([params[0]], ...args); - if (params.length < 2) { - throw BaseProcessor.SKIP; - } - validateParams( - params, - ['callee', ['call', 'template']], - `Invalid use of ${this.tagSource.imported} tag.`, - ); +abstract class BaseKeyframesProcessor extends BaseCssProcessor { + doEvaltimeReplacement() { + this.replacer(this.astService.stringLiteral(this.getClassName()), false); + } +} - const [, callParams] = params; - if (callParams[0] === 'call') { - this.dependencies.push(callParams[1]); - } else if (callParams[0] === 'template') { - callParams[1].forEach((element) => { - if ('kind' in element && element.kind !== ValueType.CONST) { - this.dependencies.push(element); - } - }); +/** + * Only deals with css`` or css(metadata)`` calls. + */ +class KeyframesTaggedTemplateProcessor extends BaseKeyframesProcessor { + constructor(params: Params, getClassName: GetClassName, ...args: TailProcessorParams) { + super(params, getClassName, ...args); + + const [, callOrTemplate] = this.params; + if (callOrTemplate[0] === 'template') { + this.tempMetaClass = ''; } - this.callParam = callParams; } - build(values: ValueCache) { - if (this.artifacts.length > 0) { - throw new Error(`MUI: "${this.tagSource.imported}" is already built`); + getDependencies(): ExpressionValue[] { + const [, callOrTemplate, template] = this.params; + const deps: ExpressionValue[] = []; + if (callOrTemplate[0] === 'call') { + deps.push(callOrTemplate[1]); + } else if (callOrTemplate[0] === 'template') { + deps.push( + ...callOrTemplate[1].filter( + (arg): arg is ExpressionValue => 'kind' in arg && arg.kind !== ValueType.CONST, + ), + ); } - - const [callType] = this.callParam; - - if (callType === 'template') { - this.handleTemplate(this.callParam, values); - } else { - this.handleCall(this.callParam, values); + if (template?.[0] === 'template') { + deps.push( + ...template[1].filter( + (arg): arg is ExpressionValue => 'kind' in arg && arg.kind !== ValueType.CONST, + ), + ); } + return deps; } - private handleTemplate([, callArgs]: TemplateParam, values: ValueCache) { + build(values: ValueCache): void { + const { themeArgs, features: { useLayer = true } = {} } = this.options as PigmentConfig; + const [, callOrTemplate, template] = this.params; + // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. const templateStrs: string[] = []; // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. templateStrs.raw = []; const templateExpressions: Primitive[] = []; - const { themeArgs } = this.options as PigmentConfig; - - callArgs.forEach((item) => { - if ('kind' in item) { - switch (item.kind) { + const templateParams = (callOrTemplate[0] === 'call' ? template[1] : callOrTemplate[1]) as ( + | ExpressionValue + | TemplateElement + )[]; + templateParams.forEach((param) => { + if ('kind' in param) { + switch (param.kind) { case ValueType.FUNCTION: { - const value = values.get(item.ex.name) as TemplateCallback; + const value = values.get(param.ex.name) as TemplateCallback; templateExpressions.push(value(themeArgs)); break; } - case ValueType.CONST: - templateExpressions.push(item.value); + case ValueType.CONST: { + templateExpressions.push(param.value); break; + } case ValueType.LAZY: { - const evaluatedValue = values.get(item.ex.name); + const evaluatedValue = values.get(param.ex.name); if (typeof evaluatedValue === 'function') { templateExpressions.push(evaluatedValue(themeArgs)); } else { @@ -85,77 +120,235 @@ export class KeyframesProcessor extends BaseProcessor { default: break; } - } else if (item.type === 'TemplateElement') { - templateStrs.push(item.value.cooked as string); + } else if ('type' in param && param.type === 'TemplateElement') { + templateStrs.push(param.value.cooked as string); // @ts-ignore - templateStrs.raw.push(item.value.raw); + templateStrs.raw.push(param.value.raw); } }); - this.generateArtifacts(templateStrs, ...templateExpressions); - } - - generateArtifacts(styleObjOrTagged: string[], ...args: Primitive[]) { const { styles } = serializeStyles( - args.length > 0 ? [styleObjOrTagged, ...args] : [styleObjOrTagged], + templateExpressions.length > 0 ? [templateStrs, ...templateExpressions] : [templateStrs], ); - const cssText = `@keyframes {${styles}}`; + const keyframe = `@keyframes ${this.getClassName()} {${styles}}`; + const cssText = useLayer ? `@layer pigment.base{${keyframe}}` : keyframe; + const className = this.getClassName(); const rules: Rules = { - [this.asSelector]: { - className: this.className, + [`.${className}`]: { + className, cssText, displayName: this.displayName, start: this.location?.start ?? null, }, }; + const location = this.location; const sourceMapReplacements: Replacements = [ { length: cssText.length, original: { start: { - column: this.location?.start.column ?? 0, - line: this.location?.start.line ?? 0, + column: location?.start.column ?? 0, + line: location?.start.line ?? 0, }, end: { - column: this.location?.end.column ?? 0, - line: this.location?.end.line ?? 0, + column: location?.end.column ?? 0, + line: location?.end.line ?? 0, }, }, }, ]; + this.classNames.push(className); this.artifacts.push(['css', [rules, sourceMapReplacements]]); } +} - private handleCall([, callArg]: CallParam, values: ValueCache) { - if (callArg.kind === ValueType.LAZY || callArg.kind === ValueType.FUNCTION) { - const value = values.get(callArg.ex.name); - const { themeArgs } = this.options as PigmentConfig; - const styleObj = typeof value === 'function' ? value(themeArgs) : value; - if (styleObj) { - let count = 0; - // Won't actually be used since keyframes call doesn't allow function values - const getVariableName = () => { - count += 1; - return `${this.className}-${count}`; - }; - this.generateArtifacts(processStyle(styleObj, { getVariableName }).result); +/** + * Only deals with css(...styleObjects) or or css(styleObject) css(metadata, [...styleObjects]) calls. + */ +class KeyframesObjectProcessor extends BaseKeyframesProcessor { + variants: { $$cls: string; props: Record }[] = []; + + getDependencies(): ExpressionValue[] { + const [, [, ...callParams]] = this.params; + return callParams as ExpressionValue[]; + } + + build(values: ValueCache): void { + const [, [, ...callParams]] = this.params; + const { themeArgs, features: { useLayer = true } = {} } = this.options as PigmentConfig; + + const evaluatedValues = (callParams as (LazyValue | FunctionValue)[]).map((param) => + values.get(param.ex.name), + ); + let stylesList: (object | Function)[]; + // let metadata: any; + // check for css(metadata, [styles]) or css(metadata, style) call + const locations: (SourceLocation | null | undefined)[] = []; + if ( + evaluatedValues.length === 2 && + evaluatedValues[0] && + typeof evaluatedValues[0] === 'object' && + 'className' in evaluatedValues[0] + ) { + // metadata = evaluatedValues[0]; + const param = callParams[1] as LazyValue | FunctionValue; + if (Array.isArray(evaluatedValues[1])) { + stylesList = evaluatedValues[1]; + // Parse the expression AST to track the exact locations of each parameter + const arrayItemsAst = parseArray((callParams[1] as ExpressionValue).source, { + startLine: param.ex.loc?.start.line, + startIndex: param.ex.loc?.start.index, + startColumn: param.ex.loc?.start.column, + }); + if (arrayItemsAst) { + locations.push(...arrayItemsAst.elements.map((item) => item?.loc)); + } + } else { + stylesList = [evaluatedValues[1] as (typeof stylesList)[number]]; + locations.push((callParams[1] as unknown as ExpressionValue).ex.loc); } + } else { + // This is for css(...styles) call + stylesList = evaluatedValues as typeof stylesList; + locations.push(...(callParams as ExpressionValue[]).map((p) => p.ex.loc)); } + + const styles = stylesList.map((item) => + typeof item === 'function' ? item(themeArgs as unknown as ThemeArgs) : item, + ); + let count = 0; + const result = processStyleObjects(styles, { + getClassName: (variantName: string | undefined, variantValue: string | undefined) => { + if (!variantName) { + return this.getClassName(); + } + return `${this.getClassName()}-${variantName}-${variantValue}`; + }, + getVariableName: () => { + count += 1; + return `${this.getClassName()}-${count}`; + }, + }); + + const addStyles = (s: StyleObjectReturn[], layer?: string) => { + const rules: Rules = {}; + s.forEach((style, index) => { + const location = locations[index] ?? locations[0]; + const keyframe = `@keyframes ${this.getClassName()} {${style.cssText}}`; + const cssText = layer && useLayer ? `@layer pigment.${layer} {${keyframe}}` : keyframe; + rules[`.${style.className}`] = { + className: style.className, + cssText, + displayName: this.displayName, + start: location?.start ?? null, + }; + + const sourceMapReplacements: Replacements = + layer === 'base' + ? [ + { + length: cssText.length, + original: { + start: { + column: location?.start.column ?? 0, + line: location?.start.line ?? 0, + }, + end: { + column: location?.end.column ?? 0, + line: location?.end.line ?? 0, + }, + }, + }, + ] + : []; + + if (Object.keys(style.serializables).length > 0) { + this.variants.push({ + $$cls: style.className, + props: style.serializables, + }); + } + + this.artifacts.push(['css', [rules, sourceMapReplacements]]); + }); + }; + this.classNames.push(...result.base.map((item) => item.className)); + addStyles(result.base, 'base'); } +} - doEvaltimeReplacement() { - this.replacer(this.value, false); +/** + * Scoped css class generation similar to css from emotion. + * + * @example + * ```ts + * import { css } from '@pigment-css/react'; + * + * const class1 = css(({theme}) => ({ + * color: (theme.vars || theme).palette.primary.main, + * })) + * ``` + * + * + */ +export class KeyframesProcessor extends BaseProcessor { + processor: BaseKeyframesProcessor; + + constructor(params: Params, ...args: TailProcessorParams) { + super([params[0]], ...args); + validateParams(params, ['callee', '...'], BaseProcessor.SKIP); + + if (params.length === 3) { + validateParams( + params, + ['callee', 'call', 'template'], + `Invalid use of ${this.tagSource.imported} function.`, + ); + } else { + validateParams( + params, + ['callee', ['call', 'template']], + `Invalid use of ${this.tagSource.imported} function.`, + ); + } + + const getClassName = () => this.getBaseClass(); + const [calleeParam, callParams, maybeTemplate] = params; + if (callParams[0] === 'template' || maybeTemplate?.[0] === 'template') { + this.processor = new KeyframesTaggedTemplateProcessor(params, getClassName, ...args); + } else { + this.processor = new KeyframesObjectProcessor( + [calleeParam, callParams], + getClassName, + ...args, + ); + } + + this.dependencies.push(...this.processor.getDependencies()); } - doRuntimeReplacement() { - this.doEvaltimeReplacement(); + build(values: ValueCache) { + this.processor.build(values); + this.artifacts.push(...this.processor.artifacts); } - get asSelector() { + getBaseClass(): string { return this.className; } + get asSelector(): string { + return this.getBaseClass(); + } + get value(): Expression { - return this.astService.stringLiteral(this.className); + return this.astService.stringLiteral(this.getBaseClass()); + } + + doEvaltimeReplacement(): void { + this.processor.doEvaltimeReplacement(); + } + + doRuntimeReplacement(): void { + this.processor.doRuntimeReplacement(); } } diff --git a/packages/pigment-css-core/src/utils.ts b/packages/pigment-css-core/src/utils.ts index 36beb33e..10899e57 100644 --- a/packages/pigment-css-core/src/utils.ts +++ b/packages/pigment-css-core/src/utils.ts @@ -1,7 +1,6 @@ const BUNDLER_MESSAGE = 'Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.'; -// eslint-disable-next-line import/prefer-default-export export function generateErrorMessage(fnName: string) { return `${process.env.PACKAGE_NAME}: You were trying to call "${fnName}" function without configuring your bundler. ${BUNDLER_MESSAGE}`; } diff --git a/packages/pigment-css-core/tests/css/fixtures/css.input.js b/packages/pigment-css-core/tests/css/fixtures/css.input.js index 66250d90..e72023ac 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.input.js +++ b/packages/pigment-css-core/tests/css/fixtures/css.input.js @@ -1,12 +1,19 @@ -import { css } from '@pigment-css/core'; +import { css, keyframes } from '@pigment-css/core'; import { t } from '@pigment-css/theme'; const ab = 'aliceblue'; +const gradientKeyframe = keyframes(({ theme }) => ({ + '50%': { + background: 'green', + }, +})); + export const cls1 = css` ---flex: 1; color: ${({ theme }) => theme.palette.primary.main}; font-size: ${({ theme }) => theme.size.font.h1}; + animation-name: ${gradientKeyframe}; background-color: ${ab}; `; diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.css b/packages/pigment-css-core/tests/css/fixtures/css.output.css index 910f28c7..4c2ec2ed 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.output.css +++ b/packages/pigment-css-core/tests/css/fixtures/css.output.css @@ -1,19 +1,20 @@ -@layer pigment.base{.cqvc3we{---flex:1;color:red;font-size:3rem;background-color:aliceblue;}} -@layer pigment.base{.cx3ztpe{---flex:21;---testVar:red;border:1px solid var(---testVar);}} -@layer pigment.base{.cx3ztpe-1{---flex:22;---testVar1:red;border:1px solid var(---testVar1);}} -@layer pigment.base{.c1aq99o6{---flex:3;color:red;font-size:3rem;background-color:aliceblue;}} -@layer pigment.base{.cuccxpq{---flex:41;---testVar:red;background-color:var(---testVar);border:1px solid var(--palette-primary-main);}} -@layer pigment.base{.cuccxpq-1{---flex:42;color:red;font-size:3rem;background-color:aliceblue;}} -@layer pigment.base{.cuccxpq-2{---flex:43;color:red;font-size:3rem;background-color:aliceblue;}} -@layer pigment.base{.cuccxpq-3{---flex:44;color:red;font-size:1rem;background-color:aliceblue;}} -@layer pigment.variants{.cuccxpq-size-small-1{---flex:421;padding:0;margin:0;border-color:red;}} -@layer pigment.variants{.cuccxpq-size-medium-1{---flex:422;padding:5px;}} -@layer pigment.variants{.cuccxpq-size-large-1{---flex:423;padding:10px;}} -@layer pigment.base{.c1v5vhpp{---flex:51;---testVar:red;background-color:var(---testVar);border:1px solid var(--palette-primary-main);}} -@layer pigment.variants{.c1v5vhpp-size-small{---flex:52;padding:0;margin:0;border-color:red;}} -@layer pigment.variants{.c1v5vhpp-size-medium{---flex:53;padding:5px;}} -@layer pigment.variants{.c1v5vhpp-size-large{---flex:54;padding:10px;}} -@layer pigment.variants{.c1v5vhpp-color-primary{---flex:55;color:green;}} -@layer pigment.variants{.c1v5vhpp-color-secondary{---flex:56;color:blue;}} -@layer pigment.compoundvariants{.c1v5vhpp-cv{border-radius:100%;}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmNxdmMzd2UiLCIuY3gzenRwZSIsIi5jeDN6dHBlLTEiLCIuYzFhcTk5bzYiLCIuY3VjY3hwcSIsIi5jdWNjeHBxLTEiLCIuY3VjY3hwcS0yIiwiLmN1Y2N4cHEtMyIsIi5jdWNjeHBxLXNpemUtc21hbGwtMSIsIi5jdWNjeHBxLXNpemUtbWVkaXVtLTEiLCIuY3VjY3hwcS1zaXplLWxhcmdlLTEiLCIuYzF2NXZocHAiLCIuYzF2NXZocHAtc2l6ZS1zbWFsbCIsIi5jMXY1dmhwcC1zaXplLW1lZGl1bSIsIi5jMXY1dmhwcC1zaXplLWxhcmdlIiwiLmMxdjV2aHBwLWNvbG9yLXByaW1hcnkiLCIuYzF2NXZocHAtY29sb3Itc2Vjb25kYXJ5IiwiLmMxdjV2aHBwLWN2Il0sIm1hcHBpbmdzIjoiQUFLb0JBO0FBUWxCQztBQUtBQztBQU9rQkM7QUFVbEJDO0FBTUFDO0FBd0JBQztBQU1BQztBQXBDQUM7QUFNQUM7QUF3QkFDO0FBY29EQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQUFBQyIsImZpbGUiOiIvVXNlcnMvYnJpamVzaC9wcm9qZWN0cy9tdWkvcGlnbWVudC1jc3MvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9jc3MvZml4dHVyZXMvY3NzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9jb3JlJztcbmltcG9ydCB7IHQgfSBmcm9tICdAcGlnbWVudC1jc3MvdGhlbWUnO1xuXG5jb25zdCBhYiA9ICdhbGljZWJsdWUnO1xuXG5leHBvcnQgY29uc3QgY2xzMSA9IGNzc2BcbiAgLS0tZmxleDogMTtcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG5gO1xuXG5leHBvcnQgY29uc3QgY2xzMiA9IGNzcyhcbiAge1xuICAgICQkZmxleDogMjEsXG4gICAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgICBib3JkZXI6ICcxcHggc29saWQgJCR0ZXN0VmFyJyxcbiAgfSxcbiAge1xuICAgICQkZmxleDogMjIsXG4gICAgJCR0ZXN0VmFyMTogJ3JlZCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkICQkdGVzdFZhcjEnLFxuICB9LFxuKTtcblxuZXhwb3J0IGNvbnN0IGNsczMgPSBjc3Moe1xuICBjbGFzc05hbWU6ICdUZXN0LWNsYXNzJyxcbn0pYFxuICAtLS1mbGV4OiAzO1xuICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbn07XG4gIGZvbnQtc2l6ZTogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zaXplLmZvbnQuaDF9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbmA7XG5cbmV4cG9ydCBjb25zdCBjbHM0ID0gY3NzKHsgY2xhc3NOYW1lOiAnVGVzdC1jbGFzczInIH0sIFtcbiAge1xuICAgICQkZmxleDogNDEsXG4gICAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6ICckJHRlc3RWYXInLFxuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIH0sXG4gICh7IHRoZW1lIH0pID0+ICh7XG4gICAgJCRmbGV4OiA0MixcbiAgICBjb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgZm9udFNpemU6IHRoZW1lLnNpemUuZm9udC5oMSxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGFiLFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBzaXplOiB7XG4gICAgICAgIHNtYWxsOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjEsXG4gICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgICAgICB9LFxuICAgICAgICBtZWRpdW06IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMixcbiAgICAgICAgICBwYWRkaW5nOiA1LFxuICAgICAgICB9LFxuICAgICAgICBsYXJnZToge1xuICAgICAgICAgICQkZmxleDogNDIzLFxuICAgICAgICAgIHBhZGRpbmc6IDEwLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICB9KSxcbiAgKHsgdGhlbWUgfSkgPT4gYFxuICAgIC0tLWZsZXg6IDQzO1xuICAgIGNvbG9yOiAke3RoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgICBmb250LXNpemU6ICR7dGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbiAgYCxcbiAgYFxuICAgIC0tLWZsZXg6IDQ0O1xuICAgIGNvbG9yOiByZWQ7XG4gICAgZm9udC1zaXplOiAxcmVtO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuICBgLFxuXSk7XG5cbmV4cG9ydCBjb25zdCBjbHM1ID0gY3NzKHsgY2xhc3NOYW1lOiAnVGVzdC1jbGFzczMnIH0sICh7IHRoZW1lIH0pID0+ICh7XG4gICQkZmxleDogNTEsXG4gICQkdGVzdFZhcjogJ3JlZCcsXG4gIGJhY2tncm91bmRDb2xvcjogJyQkdGVzdFZhcicsXG4gIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIHZhcmlhbnRzOiB7XG4gICAgc2l6ZToge1xuICAgICAgc21hbGw6IHtcbiAgICAgICAgJCRmbGV4OiA1MixcbiAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICBib3JkZXJDb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgICB9LFxuICAgICAgbWVkaXVtOiB7XG4gICAgICAgICQkZmxleDogNTMsXG4gICAgICAgIHBhZGRpbmc6IDUsXG4gICAgICB9LFxuICAgICAgbGFyZ2U6IHtcbiAgICAgICAgJCRmbGV4OiA1NCxcbiAgICAgICAgcGFkZGluZzogMTAsXG4gICAgICB9LFxuICAgIH0sXG4gICAgY29sb3I6IHtcbiAgICAgIHByaW1hcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NSxcbiAgICAgICAgY29sb3I6ICdncmVlbicsXG4gICAgICB9LFxuICAgICAgc2Vjb25kYXJ5OiB7XG4gICAgICAgICQkZmxleDogNTYsXG4gICAgICAgIGNvbG9yOiAnYmx1ZScsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG4gIGNvbXBvdW5kVmFyaWFudHM6IFtcbiAgICB7XG4gICAgICBzaXplOiAnc21hbGwnLFxuICAgICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICAgIGNzczoge1xuICAgICAgICBib3JkZXJSYWRpdXM6ICcxMDAlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgXSxcbn0pKTtcbiJdfQ==*/ \ No newline at end of file +@layer pigment.base{@keyframes gqvc3we{50%{background:green;}}} +@layer pigment.base{.cx3ztpe{---flex:1;color:red;font-size:3rem;animation-name:gqvc3we;background-color:aliceblue;}} +@layer pigment.base{.c1aq99o6{---flex:21;---testVar:red;border:1px solid var(---testVar);}} +@layer pigment.base{.c1aq99o6-1{---flex:22;---testVar1:red;border:1px solid var(---testVar1);}} +@layer pigment.base{.cuccxpq{---flex:3;color:red;font-size:3rem;background-color:aliceblue;}} +@layer pigment.base{.c1v5vhpp{---flex:41;---testVar:red;background-color:var(---testVar);border:1px solid var(--palette-primary-main);}} +@layer pigment.base{.c1v5vhpp-1{---flex:42;color:red;font-size:3rem;background-color:aliceblue;}} +@layer pigment.base{.c1v5vhpp-2{---flex:43;color:red;font-size:3rem;background-color:aliceblue;}} +@layer pigment.base{.c1v5vhpp-3{---flex:44;color:red;font-size:1rem;background-color:aliceblue;}} +@layer pigment.variants{.c1v5vhpp-size-small-1{---flex:421;padding:0;margin:0;border-color:red;}} +@layer pigment.variants{.c1v5vhpp-size-medium-1{---flex:422;padding:5px;}} +@layer pigment.variants{.c1v5vhpp-size-large-1{---flex:423;padding:10px;}} +@layer pigment.base{.c1vz5z87{---flex:51;---testVar:red;background-color:var(---testVar);border:1px solid var(--palette-primary-main);}} +@layer pigment.variants{.c1vz5z87-size-small{---flex:52;padding:0;margin:0;border-color:red;}} +@layer pigment.variants{.c1vz5z87-size-medium{---flex:53;padding:5px;}} +@layer pigment.variants{.c1vz5z87-size-large{---flex:54;padding:10px;}} +@layer pigment.variants{.c1vz5z87-color-primary{---flex:55;color:green;}} +@layer pigment.variants{.c1vz5z87-color-secondary{---flex:56;color:blue;}} +@layer pigment.compoundvariants{.c1vz5z87-cv{border-radius:100%;}} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmdxdmMzd2UiLCIuY3gzenRwZSIsIi5jMWFxOTlvNiIsIi5jMWFxOTlvNi0xIiwiLmN1Y2N4cHEiLCIuYzF2NXZocHAiLCIuYzF2NXZocHAtMSIsIi5jMXY1dmhwcC0yIiwiLmMxdjV2aHBwLTMiLCIuYzF2NXZocHAtc2l6ZS1zbWFsbC0xIiwiLmMxdjV2aHBwLXNpemUtbWVkaXVtLTEiLCIuYzF2NXZocHAtc2l6ZS1sYXJnZS0xIiwiLmMxdno1ejg3IiwiLmMxdno1ejg3LXNpemUtc21hbGwiLCIuYzF2ejV6ODctc2l6ZS1tZWRpdW0iLCIuYzF2ejV6ODctc2l6ZS1sYXJnZSIsIi5jMXZ6NXo4Ny1jb2xvci1wcmltYXJ5IiwiLmMxdno1ejg3LWNvbG9yLXNlY29uZGFyeSIsIi5jMXZ6NXo4Ny1jdiJdLCJtYXBwaW5ncyI6IkFBS21DQTtBQU1mQztBQVNsQkM7QUFLQUM7QUFPa0JDO0FBVWxCQztBQU1BQztBQXdCQUM7QUFNQUM7QUFwQ0FDO0FBTUFDO0FBd0JBQztBQWNvREM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUMiLCJmaWxlIjoiL1VzZXJzL2JyaWplc2gvcHJvamVjdHMvbXVpL3BpZ21lbnQtY3NzL3BhY2thZ2VzL3BpZ21lbnQtY3NzLWNvcmUvdGVzdHMvY3NzL2ZpeHR1cmVzL2Nzcy5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9jb3JlJztcbmltcG9ydCB7IHQgfSBmcm9tICdAcGlnbWVudC1jc3MvdGhlbWUnO1xuXG5jb25zdCBhYiA9ICdhbGljZWJsdWUnO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogJ2dyZWVuJyxcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IGNsczEgPSBjc3NgXG4gIC0tLWZsZXg6IDE7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGFuaW1hdGlvbi1uYW1lOiAke2dyYWRpZW50S2V5ZnJhbWV9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbmA7XG5cbmV4cG9ydCBjb25zdCBjbHMyID0gY3NzKFxuICB7XG4gICAgJCRmbGV4OiAyMSxcbiAgICAkJHRlc3RWYXI6ICdyZWQnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAkJHRlc3RWYXInLFxuICB9LFxuICB7XG4gICAgJCRmbGV4OiAyMixcbiAgICAkJHRlc3RWYXIxOiAncmVkJyxcbiAgICBib3JkZXI6ICcxcHggc29saWQgJCR0ZXN0VmFyMScsXG4gIH0sXG4pO1xuXG5leHBvcnQgY29uc3QgY2xzMyA9IGNzcyh7XG4gIGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MnLFxufSlgXG4gIC0tLWZsZXg6IDM7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGNsczQgPSBjc3MoeyBjbGFzc05hbWU6ICdUZXN0LWNsYXNzMicgfSwgW1xuICB7XG4gICAgJCRmbGV4OiA0MSxcbiAgICAkJHRlc3RWYXI6ICdyZWQnLFxuICAgIGJhY2tncm91bmRDb2xvcjogJyQkdGVzdFZhcicsXG4gICAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUucHJpbWFyeS5tYWluJyl9YCxcbiAgfSxcbiAgKHsgdGhlbWUgfSkgPT4gKHtcbiAgICAkJGZsZXg6IDQyLFxuICAgIGNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgICBmb250U2l6ZTogdGhlbWUuc2l6ZS5mb250LmgxLFxuICAgIGJhY2tncm91bmRDb2xvcjogYWIsXG4gICAgdmFyaWFudHM6IHtcbiAgICAgIHNpemU6IHtcbiAgICAgICAgc21hbGw6IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMSxcbiAgICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICAgIG1hcmdpbjogMCxcbiAgICAgICAgICBib3JkZXJDb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgICAgIH0sXG4gICAgICAgIG1lZGl1bToge1xuICAgICAgICAgICQkZmxleDogNDIyLFxuICAgICAgICAgIHBhZGRpbmc6IDUsXG4gICAgICAgIH0sXG4gICAgICAgIGxhcmdlOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjMsXG4gICAgICAgICAgcGFkZGluZzogMTAsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH0sXG4gIH0pLFxuICAoeyB0aGVtZSB9KSA9PiBgXG4gICAgLS0tZmxleDogNDM7XG4gICAgY29sb3I6ICR7dGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5zaXplLmZvbnQuaDF9O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuICBgLFxuICBgXG4gICAgLS0tZmxleDogNDQ7XG4gICAgY29sb3I6IHJlZDtcbiAgICBmb250LXNpemU6IDFyZW07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG4gIGAsXG5dKTtcblxuZXhwb3J0IGNvbnN0IGNsczUgPSBjc3MoeyBjbGFzc05hbWU6ICdUZXN0LWNsYXNzMycgfSwgKHsgdGhlbWUgfSkgPT4gKHtcbiAgJCRmbGV4OiA1MSxcbiAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgYmFja2dyb3VuZENvbG9yOiAnJCR0ZXN0VmFyJyxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUucHJpbWFyeS5tYWluJyl9YCxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGZsZXg6IDUyLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRmbGV4OiA1MyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGZsZXg6IDU0LFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBjb2xvcjoge1xuICAgICAgcHJpbWFyeToge1xuICAgICAgICAkJGZsZXg6IDU1LFxuICAgICAgICBjb2xvcjogJ2dyZWVuJyxcbiAgICAgIH0sXG4gICAgICBzZWNvbmRhcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NixcbiAgICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgY29tcG91bmRWYXJpYW50czogW1xuICAgIHtcbiAgICAgIHNpemU6ICdzbWFsbCcsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSkpO1xuIl19*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.js b/packages/pigment-css-core/tests/css/fixtures/css.output.js index e2caa3d4..09e12d8d 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.output.js +++ b/packages/pigment-css-core/tests/css/fixtures/css.output.js @@ -6,31 +6,31 @@ import { css as _css5, } from '@pigment-css/core/runtime'; export const cls1 = /*#__PURE__*/ _css({ - classes: 'cqvc3we', + classes: 'cx3ztpe', }); export const cls2 = /*#__PURE__*/ _css2({ - classes: 'cx3ztpe cx3ztpe-1', + classes: 'c1aq99o6 c1aq99o6-1', }); export const cls3 = /*#__PURE__*/ _css3({ - classes: 'c1aq99o6', + classes: 'cuccxpq', }); export const cls4 = /*#__PURE__*/ _css4({ - classes: 'cuccxpq cuccxpq-1 cuccxpq-2 cuccxpq-3', + classes: 'c1v5vhpp c1v5vhpp-1 c1v5vhpp-2 c1v5vhpp-3', variants: [ { - $$cls: 'cuccxpq-size-small-1', + $$cls: 'c1v5vhpp-size-small-1', props: { size: 'small', }, }, { - $$cls: 'cuccxpq-size-medium-1', + $$cls: 'c1v5vhpp-size-medium-1', props: { size: 'medium', }, }, { - $$cls: 'cuccxpq-size-large-1', + $$cls: 'c1v5vhpp-size-large-1', props: { size: 'large', }, @@ -38,40 +38,40 @@ export const cls4 = /*#__PURE__*/ _css4({ ], }); export const cls5 = /*#__PURE__*/ _css5({ - classes: 'c1v5vhpp', + classes: 'c1vz5z87', variants: [ { - $$cls: 'c1v5vhpp-size-small', + $$cls: 'c1vz5z87-size-small', props: { size: 'small', }, }, { - $$cls: 'c1v5vhpp-size-medium', + $$cls: 'c1vz5z87-size-medium', props: { size: 'medium', }, }, { - $$cls: 'c1v5vhpp-size-large', + $$cls: 'c1vz5z87-size-large', props: { size: 'large', }, }, { - $$cls: 'c1v5vhpp-color-primary', + $$cls: 'c1vz5z87-color-primary', props: { color: 'primary', }, }, { - $$cls: 'c1v5vhpp-color-secondary', + $$cls: 'c1vz5z87-color-secondary', props: { color: 'secondary', }, }, { - $$cls: 'c1v5vhpp-cv', + $$cls: 'c1vz5z87-cv', props: { size: 'small', color: 'primary', diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.input.js b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.input.js index 6912e149..ffaae3b6 100644 --- a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.input.js +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.input.js @@ -42,3 +42,46 @@ export const styles = (theme) => ({ }); const gradientKeyframe3 = keyframes((_c = ({ theme }) => styles(theme))); var _c; + +const key1 = keyframes` + 0% { + background: ${({ theme }) => theme.palette.main}; + } + + 50% { + background: green; + } + + 100% { + background: ${({ theme }) => { + // @ts-expect-error secondary does not exist on theme. + return theme.palette.secondary.main; + }}; + } +`; + +const key2 = keyframes({ + className: 'loop', +})` + 0% { + background: ${({ theme }) => theme.palette.main}; + } + + 50% { + background: green; + } +`; + +const key3 = keyframes( + { + className: 'loop1', + }, + ({ theme }) => ({ + '0%': { + background: theme.palette.main, + }, + '50%': { + background: 'green', + }, + }), +); diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css index 80f9145f..b8880f1e 100644 --- a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css @@ -1,4 +1,7 @@ -@-webkit-keyframes{0%{background:red;}50%{background:green;}100%{background:blue;}}@keyframes{0%{background:red;}50%{background:green;}100%{background:blue;}} -@-webkit-keyframes{0%{background:red;}50%{background:green;}100%{background:blue;}}@keyframes{0%{background:red;}50%{background:green;}100%{background:blue;}} -@-webkit-keyframes{0%{background:red;}50%{background:green;}100%{background:blue;}}@keyframes{0%{background:red;}50%{background:green;}100%{background:blue;}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMtdGhlbWUuaW5wdXQuanMiXSwibmFtZXMiOlsiZzVnOTVuZCIsImd0MmZ1YWIiLCJnMTYxMXRpMyJdLCJtYXBwaW5ncyI6IkFBSXlCQTtBQVlDQztBQTBCQUMiLCJmaWxlIjoiL1VzZXJzL2JyaWplc2gvcHJvamVjdHMvbXVpL3BpZ21lbnQtY3NzL3BhY2thZ2VzL3BpZ21lbnQtY3NzLWNvcmUvdGVzdHMva2V5ZnJhbWVzL2ZpeHR1cmVzL2tleWZyYW1lcy10aGVtZS5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAcGlnbWVudC1jc3MvY29yZSc7XG5cbmNvbnN0IGdyZWVuID0gJ2dyZWVuJztcblxuY29uc3QgZ3JhZGllbnRLZXlmcmFtZSA9IGtleWZyYW1lcygoeyB0aGVtZSB9KSA9PiAoe1xuICAnMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gIH0sXG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW4sXG4gIH0sXG4gICcxMDAlJzoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLnBhbGV0dGUuc2Vjb25kYXJ5Lm1haW4sXG4gIH0sXG59KSk7XG5cbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUyID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbn07XG4gIH1cblxuICA1MCUge1xuICAgIGJhY2tncm91bmQ6ICR7Z3JlZW59O1xuICB9XG5cbiAgMTAwJSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLnNlY29uZGFyeS5tYWlufTtcbiAgfVxuYDtcblxuLy8gc2ltdWxhdGUgQ3NzQmFzZWxpbmUgdHJhbnNwaWxlZCBieSBOZXh0LmpzXG5leHBvcnQgY29uc3Qgc3R5bGVzID0gKHRoZW1lKSA9PiAoe1xuICAnMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gIH0sXG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW4sXG4gIH0sXG4gICcxMDAlJzoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLnBhbGV0dGUuc2Vjb25kYXJ5Lm1haW4sXG4gIH0sXG59KTtcbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUzID0ga2V5ZnJhbWVzKChfYyA9ICh7IHRoZW1lIH0pID0+IHN0eWxlcyh0aGVtZSkpKTtcbnZhciBfYztcbiJdfQ==*/ \ No newline at end of file +@layer pigment.base{@keyframes g5g95nd{0%{background:red;}50%{background:green;}100%{background:blue;}}} +@layer pigment.base{@keyframes gt2fuab{0%{background:red;}50%{background:green;}100%{background:blue;}}} +@layer pigment.base{@keyframes g1611ti3{0%{background:red;}50%{background:green;}100%{background:blue;}}} +@layer pigment.base{@keyframes k1gqc21d{50%{background:green;}100%{background:blue;}}} +@layer pigment.base{@keyframes k1tlnvmz{50%{background:green;}}} +@layer pigment.base{@keyframes k1jjo2js{50%{background:green;}}} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMtdGhlbWUuaW5wdXQuanMiXSwibmFtZXMiOlsiLmc1Zzk1bmQiLCIuZ3QyZnVhYiIsIi5nMTYxMXRpMyIsIi5rMWdxYzIxZCIsIi5rMXRsbnZteiIsIi5rMWpqbzJqcyJdLCJtYXBwaW5ncyI6IkFBSW1DQTtBQVlUQztBQTBCV0M7QUFHeEJDO0FBaUJBQztBQWdCWEMiLCJmaWxlIjoiL1VzZXJzL2JyaWplc2gvcHJvamVjdHMvbXVpL3BpZ21lbnQtY3NzL3BhY2thZ2VzL3BpZ21lbnQtY3NzLWNvcmUvdGVzdHMva2V5ZnJhbWVzL2ZpeHR1cmVzL2tleWZyYW1lcy10aGVtZS5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAcGlnbWVudC1jc3MvY29yZSc7XG5cbmNvbnN0IGdyZWVuID0gJ2dyZWVuJztcblxuY29uc3QgZ3JhZGllbnRLZXlmcmFtZSA9IGtleWZyYW1lcygoeyB0aGVtZSB9KSA9PiAoe1xuICAnMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gIH0sXG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW4sXG4gIH0sXG4gICcxMDAlJzoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLnBhbGV0dGUuc2Vjb25kYXJ5Lm1haW4sXG4gIH0sXG59KSk7XG5cbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUyID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbn07XG4gIH1cblxuICA1MCUge1xuICAgIGJhY2tncm91bmQ6ICR7Z3JlZW59O1xuICB9XG5cbiAgMTAwJSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLnNlY29uZGFyeS5tYWlufTtcbiAgfVxuYDtcblxuLy8gc2ltdWxhdGUgQ3NzQmFzZWxpbmUgdHJhbnNwaWxlZCBieSBOZXh0LmpzXG5leHBvcnQgY29uc3Qgc3R5bGVzID0gKHRoZW1lKSA9PiAoe1xuICAnMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gIH0sXG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW4sXG4gIH0sXG4gICcxMDAlJzoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLnBhbGV0dGUuc2Vjb25kYXJ5Lm1haW4sXG4gIH0sXG59KTtcbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUzID0ga2V5ZnJhbWVzKChfYyA9ICh7IHRoZW1lIH0pID0+IHN0eWxlcyh0aGVtZSkpKTtcbnZhciBfYztcblxuY29uc3Qga2V5MSA9IGtleWZyYW1lc2BcbiAgMCUge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5tYWlufTtcbiAgfVxuXG4gIDUwJSB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cblxuICAxMDAlIHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHtcbiAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3Igc2Vjb25kYXJ5IGRvZXMgbm90IGV4aXN0IG9uIHRoZW1lLlxuICAgICAgcmV0dXJuIHRoZW1lLnBhbGV0dGUuc2Vjb25kYXJ5Lm1haW47XG4gICAgfX07XG4gIH1cbmA7XG5cbmNvbnN0IGtleTIgPSBrZXlmcmFtZXMoe1xuICBjbGFzc05hbWU6ICdsb29wJyxcbn0pYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLm1haW59O1xuICB9XG5cbiAgNTAlIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuYDtcblxuY29uc3Qga2V5MyA9IGtleWZyYW1lcyhcbiAge1xuICAgIGNsYXNzTmFtZTogJ2xvb3AxJyxcbiAgfSxcbiAgKHsgdGhlbWUgfSkgPT4gKHtcbiAgICAnMCUnOiB7XG4gICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5wYWxldHRlLm1haW4sXG4gICAgfSxcbiAgICAnNTAlJzoge1xuICAgICAgYmFja2dyb3VuZDogJ2dyZWVuJyxcbiAgICB9LFxuICB9KSxcbik7XG4iXX0=*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.js b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.js index bc431f46..bddb81ed 100644 --- a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.js +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.js @@ -16,3 +16,6 @@ export const styles = (theme) => ({ }); const gradientKeyframe3 = 'g1611ti3'; var _c; +const key1 = 'k1gqc21d'; +const key2 = 'k1tlnvmz'; +const key3 = 'k1jjo2js'; diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css index 94f32e8a..3848962a 100644 --- a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css @@ -1,3 +1,3 @@ -@-webkit-keyframes{from{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}to{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}}@keyframes{from{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}to{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}} -@-webkit-keyframes{from{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}to{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}}@keyframes{from{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}to{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMuaW5wdXQuanMiXSwibmFtZXMiOlsicnJ0ZncxMSIsInJ3Mnl4ZTciXSwibWFwcGluZ3MiOiJBQUV1QkE7QUFTQ0MiLCJmaWxlIjoiL1VzZXJzL2JyaWplc2gvcHJvamVjdHMvbXVpL3BpZ21lbnQtY3NzL3BhY2thZ2VzL3BpZ21lbnQtY3NzLWNvcmUvdGVzdHMva2V5ZnJhbWVzL2ZpeHR1cmVzL2tleWZyYW1lcy5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAcGlnbWVudC1jc3MvY29yZSc7XG5cbmNvbnN0IHJvdGF0ZUtleWZyYW1lID0ga2V5ZnJhbWVzKHtcbiAgZnJvbToge1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgzNjBkZWcpJyxcbiAgfSxcbiAgdG86IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMGRlZyknLFxuICB9LFxufSk7XG5cbmNvbnN0IHJvdGF0ZUtleWZyYW1lMiA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcbiAgfVxuXG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgfVxuYDtcbiJdfQ==*/ \ No newline at end of file +@layer pigment.base{@keyframes rrtfw11{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}} +@layer pigment.base{@keyframes rw2yxe7{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMuaW5wdXQuanMiXSwibmFtZXMiOlsiLnJydGZ3MTEiLCIucncyeXhlNyJdLCJtYXBwaW5ncyI6IkFBRWlDQTtBQVNUQyIsImZpbGUiOiIvVXNlcnMvYnJpamVzaC9wcm9qZWN0cy9tdWkvcGlnbWVudC1jc3MvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9rZXlmcmFtZXMvZml4dHVyZXMva2V5ZnJhbWVzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9jb3JlJztcblxuY29uc3Qgcm90YXRlS2V5ZnJhbWUgPSBrZXlmcmFtZXMoe1xuICBmcm9tOiB7XG4gICAgdHJhbnNmb3JtOiAncm90YXRlKDM2MGRlZyknLFxuICB9LFxuICB0bzoge1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgwZGVnKScsXG4gIH0sXG59KTtcblxuY29uc3Qgcm90YXRlS2V5ZnJhbWUyID0ga2V5ZnJhbWVzYFxuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG5gO1xuIl19*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/keyframes/keyframes.spec.ts b/packages/pigment-css-core/tests/keyframes/keyframes.spec.ts new file mode 100644 index 00000000..0d52dde7 --- /dev/null +++ b/packages/pigment-css-core/tests/keyframes/keyframes.spec.ts @@ -0,0 +1,68 @@ +import { keyframes } from '../../src'; + +keyframes` + 0% { + background: ${({ theme }) => theme.palette.main}; + } + + 50% { + background: green; + } + + 100% { + background: ${({ theme }) => { + // @ts-expect-error secondary does not exist on theme. + return theme.palette.secondary.main; + }}; + } +`; + +keyframes({ + className: 'loop', +})` + 0% { + background: ${({ theme }) => theme.palette.main}; + } + + 50% { + background: green; + } + + 100% { + background: ${({ theme }) => { + // @ts-expect-error secondary does not exist on theme. + return theme.palette.secondary.main; + }}; + } +`; + +keyframes( + { + className: 'loop', + }, + ({ theme }) => ({ + '0%': { + background: theme.palette.main, + }, + '50%': { + background: 'green', + }, + '100%': { + // @ts-expect-error secondary does not exist on theme. + background: theme.palette.secondary.main, + }, + }), +); + +keyframes(({ theme }) => ({ + '0%': { + background: theme.palette.main, + }, + '50%': { + background: 'green', + }, + '100%': { + // @ts-expect-error secondary does not exist on theme. + background: theme.palette.secondary.main, + }, +})); diff --git a/packages/pigment-css-core/tests/testUtils.ts b/packages/pigment-css-core/tests/testUtils.ts index f85d8caa..4c4d0ced 100644 --- a/packages/pigment-css-core/tests/testUtils.ts +++ b/packages/pigment-css-core/tests/testUtils.ts @@ -5,6 +5,7 @@ import { Theme } from '@pigment-css/theme'; import { asyncResolveFallback } from '@wyw-in-js/shared'; import { TransformCacheCollection, createFileReporter, transform } from '@wyw-in-js/transform'; import * as prettier from 'prettier'; +import { preprocessor } from '@pigment-css/utils'; import pkgJson from '../package.json'; @@ -67,6 +68,7 @@ export async function runTransformation(absolutePath: string, options?: Transfor options: { filename: inputFilePath, // preprocessor: (selector, css) => preprocessor(selector, css, options?.css), + preprocessor, pluginOptions, }, cache, diff --git a/packages/pigment-css-utils/package.json b/packages/pigment-css-utils/package.json index 1a3339c6..dd681fb8 100644 --- a/packages/pigment-css-utils/package.json +++ b/packages/pigment-css-utils/package.json @@ -40,10 +40,12 @@ "@wyw-in-js/shared": "^0.5.5", "@wyw-in-js/transform": "^0.5.5", "cssesc": "^3.0.0", - "lodash": "4.17.21" + "lodash": "4.17.21", + "stylis": "^4.3.4" }, "devDependencies": { "@types/cssesc": "3.0.2", + "@types/stylis": "^4.2.7", "chai": "^4.4.1" }, "sideEffects": false, diff --git a/packages/pigment-css-utils/src/utils/index.ts b/packages/pigment-css-utils/src/utils/index.ts index e1c3f79d..c10ac726 100644 --- a/packages/pigment-css-utils/src/utils/index.ts +++ b/packages/pigment-css-utils/src/utils/index.ts @@ -2,3 +2,4 @@ export * from './processStyle'; export * from './valueToLiteral'; export * from './parseExpressions'; export * from './evaluateExpresions'; +export * from './preprocessor'; diff --git a/packages/pigment-css-utils/src/utils/parseExpression.ts b/packages/pigment-css-utils/src/utils/parseExpression.ts deleted file mode 100644 index 6297d7d3..00000000 --- a/packages/pigment-css-utils/src/utils/parseExpression.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { parseExpression, ParserOptions } from '@babel/parser'; -import { ArrayExpression } from '@babel/types'; - -/** - * Parses array expression string to AST for locating sourcemap points. - */ -export function parseArray( - expressionStr: string, - opts: Pick, -): ArrayExpression | null { - const expr = parseExpression(expressionStr, opts); - if (expr.type === 'ArrayExpression') { - return expr; - } - return null; -} diff --git a/packages/pigment-css-utils/src/utils/preprocessor.ts b/packages/pigment-css-utils/src/utils/preprocessor.ts new file mode 100644 index 00000000..ad103191 --- /dev/null +++ b/packages/pigment-css-utils/src/utils/preprocessor.ts @@ -0,0 +1,48 @@ +import type { Element } from 'stylis'; +import { serialize, compile, stringify, middleware } from 'stylis'; + +function globalSelector(element: Element) { + switch (element.type) { + case 'rule': + element.props = (element.props as string[]).map((value) => { + if (value.match(/(:where|:is)\(/)) { + value = value.replace(/\.[^:]+(:where|:is)/, '$1'); + return value; + } + return value; + }); + break; + default: + break; + } +} + +function getSerializer() { + return middleware([globalSelector, stringify]); +} + +const serializer = getSerializer(); + +const stylis = (css: string, serializerParam = serializer) => + serialize(compile(css), serializerParam); + +export function getGlobalSelector(asSelector: string) { + return `$$GLOBAL-${asSelector}`; +} + +export function preprocessor(selector: string, cssText: string) { + let css = ''; + const isGlobal = selector.startsWith(getGlobalSelector('')); + + if (!isGlobal && cssText.startsWith('@keyframes')) { + css += stylis(cssText.replace('@keyframes', `@keyframes ${selector}`)); + return css; + } + css += stylis(!isGlobal ? `${selector}{${cssText}}` : cssText); + + return css; +} + +export function matchAdapterPath(path: string) { + return path.includes('zero-styled'); +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a14fc6ce..18ddfe5d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -706,10 +706,16 @@ importers: lodash: specifier: 4.17.21 version: 4.17.21 + stylis: + specifier: ^4.3.4 + version: 4.3.4 devDependencies: '@types/cssesc': specifier: 3.0.2 version: 3.0.2 + '@types/stylis': + specifier: ^4.2.7 + version: 4.2.7 chai: specifier: ^4.4.1 version: 4.5.0 @@ -3153,6 +3159,9 @@ packages: '@types/stylis@4.2.5': resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==} + '@types/stylis@4.2.7': + resolution: {integrity: sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA==} + '@types/unist@2.0.10': resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==} @@ -11857,6 +11866,8 @@ snapshots: '@types/stylis@4.2.5': {} + '@types/stylis@4.2.7': {} + '@types/unist@2.0.10': {} '@types/unist@3.0.3': {} diff --git a/pnpm.patch b/pnpm.patch new file mode 100644 index 00000000..33c2b40f --- /dev/null +++ b/pnpm.patch @@ -0,0 +1,252 @@ +diff --git a/package.json b/package.json +index 7f48d2e..5f032ea 100644 +--- a/package.json ++++ b/package.json +@@ -122,9 +122,9 @@ + "unist-util-visit": "^2.0.3", + "yargs": "^17.7.2" + }, +- "packageManager": "pnpm@9.7.1", ++ "packageManager": "pnpm@9.15.1", + "engines": { +- "pnpm": "9.7.1" ++ "pnpm": "9.15.1" + }, + "resolutions": { + "@babel/core": "^7.26.0", +diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml +index 17677f4..a9e6313 100644 +--- a/pnpm-lock.yaml ++++ b/pnpm-lock.yaml +@@ -143,13 +143,13 @@ importers: + version: 8.57.0 + eslint-config-airbnb: + specifier: ^19.0.4 +- version: 19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.2(eslint@8.57.0))(eslint@8.57.0) ++ version: 19.0.4(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.2(eslint@8.57.0))(eslint@8.57.0) + eslint-config-airbnb-base: + specifier: ^15.0.0 +- version: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint@8.57.0) ++ version: 15.0.0(eslint-plugin-import@2.31.0)(eslint@8.57.0) + eslint-config-airbnb-typescript: + specifier: ^18.0.0 +- version: 18.0.0(@typescript-eslint/eslint-plugin@7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint@8.57.0) ++ version: 18.0.0(@typescript-eslint/eslint-plugin@7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@8.57.0) + eslint-config-prettier: + specifier: ^9.1.0 + version: 9.1.0(eslint@8.57.0) +@@ -164,7 +164,7 @@ importers: + version: 1.3.2(eslint@8.57.0) + eslint-plugin-import: + specifier: ^2.29.1 +- version: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) ++ version: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) + eslint-plugin-jsx-a11y: + specifier: ^6.8.0 + version: 6.10.2(eslint@8.57.0) +@@ -455,7 +455,7 @@ importers: + version: 18.3.1 + eslint-config-next: + specifier: 15.0.2 +- version: 15.0.2(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0)(typescript@5.6.3) ++ version: 15.0.2(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0)(typescript@5.6.3) + serve: + specifier: 14.2.4 + version: 14.2.4 +@@ -626,7 +626,7 @@ importers: + version: 18.3.12 + '@types/stylis': + specifier: ^4.2.5 +- version: 4.2.5 ++ version: 4.2.7 + chai: + specifier: ^4.4.1 + version: 4.5.0 +@@ -1434,6 +1434,7 @@ packages: + '@base_ui/react@1.0.0-alpha.3': + resolution: {integrity: sha512-3k3zlFDjYPrwb8IWShBHrZLM0Rs0c2W2VFKWTF9XdqkijvI0PFBTqEGBpG+cASsjPoNiJ9WKYYsPICEn40UCgg==} + engines: {node: '>=12.0.0'} ++ deprecated: Base UI npm package name changed. It's now published under @base-ui-components/react. + peerDependencies: + '@types/react': ^18.3.12 + react: 18.3.1 +@@ -3133,9 +3134,6 @@ packages: + '@types/serve-static@1.15.7': + resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==} + +- '@types/stylis@4.2.5': +- resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==} +- + '@types/stylis@4.2.7': + resolution: {integrity: sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA==} + +@@ -11703,8 +11701,6 @@ snapshots: + '@types/node': 18.19.63 + '@types/send': 0.17.4 + +- '@types/stylis@4.2.5': {} +- + '@types/stylis@4.2.7': {} + + '@types/unist@2.0.10': {} +@@ -12746,7 +12742,7 @@ snapshots: + + compressible@2.0.18: + dependencies: +- mime-db: 1.52.0 ++ mime-db: 1.53.0 + + compression@1.7.4: + dependencies: +@@ -13464,36 +13460,36 @@ snapshots: + + escape-string-regexp@5.0.0: {} + +- eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint@8.57.0): ++ eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.31.0)(eslint@8.57.0): + dependencies: + confusing-browser-globals: 1.0.11 + eslint: 8.57.0 +- eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) ++ eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) + object.assign: 4.1.5 + object.entries: 1.1.8 + semver: 6.3.1 + +- eslint-config-airbnb-typescript@18.0.0(@typescript-eslint/eslint-plugin@7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint@8.57.0): ++ eslint-config-airbnb-typescript@18.0.0(@typescript-eslint/eslint-plugin@7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@8.57.0): + dependencies: + '@typescript-eslint/eslint-plugin': 7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3) + '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3) + eslint: 8.57.0 +- eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint@8.57.0) ++ eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0)(eslint@8.57.0) + transitivePeerDependencies: + - eslint-plugin-import + +- eslint-config-airbnb@19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.2(eslint@8.57.0))(eslint@8.57.0): ++ eslint-config-airbnb@19.0.4(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.2(eslint@8.57.0))(eslint@8.57.0): + dependencies: + eslint: 8.57.0 +- eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint@8.57.0) +- eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) ++ eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0)(eslint@8.57.0) ++ eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) + eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0) + eslint-plugin-react: 7.37.2(eslint@8.57.0) + eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) + object.assign: 4.1.5 + object.entries: 1.1.8 + +- eslint-config-next@15.0.2(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0)(typescript@5.6.3): ++ eslint-config-next@15.0.2(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0)(typescript@5.6.3): + dependencies: + '@next/eslint-plugin-next': 15.0.2 + '@rushstack/eslint-patch': 1.10.4 +@@ -13501,8 +13497,8 @@ snapshots: + '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3) + eslint: 8.57.0 + eslint-import-resolver-node: 0.3.9 +- eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0) +- eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) ++ eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8)(eslint-plugin-import@2.31.0)(eslint@8.57.0) ++ eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) + eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0) + eslint-plugin-react: 7.37.2(eslint@8.57.0) + eslint-plugin-react-hooks: 5.0.0(eslint@8.57.0) +@@ -13525,19 +13521,19 @@ snapshots: + transitivePeerDependencies: + - supports-color + +- eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0): ++ eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8)(eslint-plugin-import@2.31.0)(eslint@8.57.0): + dependencies: + '@nolyfill/is-core-module': 1.0.39 + debug: 4.3.7(supports-color@8.1.1) + enhanced-resolve: 5.16.0 + eslint: 8.57.0 +- eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) ++ eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) + fast-glob: 3.3.2 + get-tsconfig: 4.8.1 + is-bun-module: 1.2.1 + is-glob: 4.0.3 + optionalDependencies: +- eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) ++ eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) + transitivePeerDependencies: + - '@typescript-eslint/parser' + - eslint-import-resolver-node +@@ -13549,7 +13545,7 @@ snapshots: + array.prototype.find: 2.2.3 + debug: 3.2.7 + enhanced-resolve: 0.9.1 +- eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) ++ eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) + find-root: 1.1.0 + hasown: 2.0.2 + interpret: 1.4.0 +@@ -13562,14 +13558,14 @@ snapshots: + transitivePeerDependencies: + - supports-color + +- eslint-module-utils@2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0): ++ eslint-module-utils@2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0): + dependencies: + debug: 3.2.7 + optionalDependencies: + '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3) + eslint: 8.57.0 + eslint-import-resolver-node: 0.3.9 +- eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0) ++ eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8)(eslint-plugin-import@2.31.0)(eslint@8.57.0) + eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)) + transitivePeerDependencies: + - supports-color +@@ -13587,36 +13583,7 @@ snapshots: + lodash.snakecase: 4.1.1 + lodash.upperfirst: 4.3.1 + +- eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0): +- dependencies: +- '@rtsao/scc': 1.1.0 +- array-includes: 3.1.8 +- array.prototype.findlastindex: 1.2.5 +- array.prototype.flat: 1.3.2 +- array.prototype.flatmap: 1.3.2 +- debug: 3.2.7 +- doctrine: 2.1.0 +- eslint: 8.57.0 +- eslint-import-resolver-node: 0.3.9 +- eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) +- hasown: 2.0.2 +- is-core-module: 2.15.1 +- is-glob: 4.0.3 +- minimatch: 3.1.2 +- object.fromentries: 2.0.8 +- object.groupby: 1.0.3 +- object.values: 1.2.0 +- semver: 6.3.1 +- string.prototype.trimend: 1.0.8 +- tsconfig-paths: 3.15.0 +- optionalDependencies: +- '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3) +- transitivePeerDependencies: +- - eslint-import-resolver-typescript +- - eslint-import-resolver-webpack +- - supports-color +- +- eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0): ++ eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0): + dependencies: + '@rtsao/scc': 1.1.0 + array-includes: 3.1.8 +@@ -13627,7 +13594,7 @@ snapshots: + doctrine: 2.1.0 + eslint: 8.57.0 + eslint-import-resolver-node: 0.3.9 +- eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) ++ eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) + hasown: 2.0.2 + is-core-module: 2.15.1 + is-glob: 4.0.3 From f9199ce533f8cc77c5676c7e0cc7e558ac6970f1 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Wed, 25 Dec 2024 11:37:31 +0530 Subject: [PATCH 05/42] remove unused packages --- packages/pigment-css-core/package.json | 4 +- packages/pigment-css-core/src/base.ts | 2 +- packages/pigment-css-core/src/css.d.ts | 6 +- packages/pigment-css-core/src/keyframes.d.ts | 6 +- .../src/processors/keyframes.ts | 4 +- .../pigment-css-react-new/exports/styled.js | 5 + .../src/processors/styled.ts | 408 ++++++++++++++++++ packages/pigment-css-react-new/src/styled.js | 1 + pnpm-lock.yaml | 6 - 9 files changed, 423 insertions(+), 19 deletions(-) create mode 100644 packages/pigment-css-react-new/exports/styled.js create mode 100644 packages/pigment-css-react-new/src/processors/styled.ts create mode 100644 packages/pigment-css-react-new/src/styled.js diff --git a/packages/pigment-css-core/package.json b/packages/pigment-css-core/package.json index 349272d3..30f3dd30 100644 --- a/packages/pigment-css-core/package.json +++ b/packages/pigment-css-core/package.json @@ -32,14 +32,12 @@ }, "dependencies": { "@babel/types": "^7.25.8", - "@emotion/css": "^11.13.4", "@pigment-css/utils": "workspace:*", "@pigment-css/theme": "workspace:^", "@wyw-in-js/processor-utils": "^0.5.5", "@wyw-in-js/shared": "^0.5.5", "@wyw-in-js/transform": "^0.5.5", - "csstype": "^3.1.3", - "lodash": "^4.17.21" + "csstype": "^3.1.3" }, "devDependencies": { "@types/chai": "^4.3.14", diff --git a/packages/pigment-css-core/src/base.ts b/packages/pigment-css-core/src/base.ts index 1436ae0b..27774355 100644 --- a/packages/pigment-css-core/src/base.ts +++ b/packages/pigment-css-core/src/base.ts @@ -24,4 +24,4 @@ export type CSSObjectNoCallback = export type ThemeArgs = { theme: Theme; }; -export type Primitve = string | null | undefined | boolean | number; +export type Primitive = string | null | undefined | boolean | number; diff --git a/packages/pigment-css-core/src/css.d.ts b/packages/pigment-css-core/src/css.d.ts index 47d77818..bc4420d7 100644 --- a/packages/pigment-css-core/src/css.d.ts +++ b/packages/pigment-css-core/src/css.d.ts @@ -1,4 +1,4 @@ -import { CSSObjectNoCallback, Primitve, ThemeArgs } from './base'; +import { CSSObjectNoCallback, Primitive, ThemeArgs } from './base'; type IVariant = { variants?: Record>; @@ -20,10 +20,10 @@ interface Css { /** * @returns {string} The generated css class name to be referenced. */ - (arg: TemplateStringsArray, ...templateArgs: (Primitve | CssFn)[]): string; + (arg: TemplateStringsArray, ...templateArgs: (Primitive | CssFn)[]): string; ( metadata: M, - ): (arg: TemplateStringsArray, ...templateArgs: (Primitve | CssFn)[]) => string; + ): (arg: TemplateStringsArray, ...templateArgs: (Primitive | CssFn)[]) => string; /** * @returns {string} The generated css class name to be referenced. diff --git a/packages/pigment-css-core/src/keyframes.d.ts b/packages/pigment-css-core/src/keyframes.d.ts index 9bae6552..26e8e442 100644 --- a/packages/pigment-css-core/src/keyframes.d.ts +++ b/packages/pigment-css-core/src/keyframes.d.ts @@ -1,4 +1,4 @@ -import type { CSSProperties, Primitve, ThemeArgs } from './base'; +import type { CSSProperties, Primitive, ThemeArgs } from './base'; import { BaseInterface, CssFn } from './css'; interface KeyframesObject { @@ -13,10 +13,10 @@ interface Keyframes { /** * @returns {string} The generated keyframe name to be referenced. */ - (arg: TemplateStringsArray, ...templateArgs: (Primitve | CssFn)[]): string; + (arg: TemplateStringsArray, ...templateArgs: (Primitive | CssFn)[]): string; ( metadata: M, - ): (arg: TemplateStringsArray, ...templateArgs: (Primitve | CssFn)[]) => string; + ): (arg: TemplateStringsArray, ...templateArgs: (Primitive | CssFn)[]) => string; /** * @returns {string} The generated keyframe name to be referenced. */ diff --git a/packages/pigment-css-core/src/processors/keyframes.ts b/packages/pigment-css-core/src/processors/keyframes.ts index 56e5489d..00a8724c 100644 --- a/packages/pigment-css-core/src/processors/keyframes.ts +++ b/packages/pigment-css-core/src/processors/keyframes.ts @@ -18,7 +18,6 @@ import { processStyleObjects, serializeStyles, StyleObjectReturn, - valueToLiteral, } from '@pigment-css/utils'; import { type Expression, @@ -35,10 +34,9 @@ import { Rules, ValueType, } from '@wyw-in-js/shared'; -import { ThemeArgs } from '../base'; +import { Primitive, ThemeArgs } from '../base'; import { BaseCssProcessor } from './css'; -export type Primitive = string | number | boolean | null | undefined; export type TemplateCallback = (params: Record | undefined) => string | number; type GetClassName = () => string; diff --git a/packages/pigment-css-react-new/exports/styled.js b/packages/pigment-css-react-new/exports/styled.js new file mode 100644 index 00000000..88af3fd0 --- /dev/null +++ b/packages/pigment-css-react-new/exports/styled.js @@ -0,0 +1,5 @@ +Object.defineProperty(exports, '__esModule', { + value: true, +}); + +exports.default = require('../build/processors/styled').StyledProcessor; diff --git a/packages/pigment-css-react-new/src/processors/styled.ts b/packages/pigment-css-react-new/src/processors/styled.ts new file mode 100644 index 00000000..1e1c200f --- /dev/null +++ b/packages/pigment-css-react-new/src/processors/styled.ts @@ -0,0 +1,408 @@ +/** + * This processor for `css` calls handles a lot of the scenarios. + * There is `CssProcessor` which is actually called by wyw. In its + * initialization, it checks for the type of parameters and depending + * on whether any one of the params is a template type, it + * internally creates `StyledTaggedTemplateProcessor` or `StyledObjectProcessor` + * if the css is called with object values. + * These both processors internally handle their own relevant logic. + * They implement a common interface which is what is called by the main + * CssProcessor. + */ + +import { SourceLocation, TemplateElement } from '@babel/types'; +import { + type PigmentConfig, + BaseProcessor, + parseArray, + processStyleObjects, + serializeStyles, + StyleObjectReturn, + valueToLiteral, +} from '@pigment-css/utils'; +import { + type Expression, + type Params, + type TailProcessorParams, + type ValueCache, + validateParams, +} from '@wyw-in-js/processor-utils'; +import { + Artifact, + ExpressionValue, + FunctionValue, + LazyValue, + Replacements, + Rules, + ValueType, +} from '@wyw-in-js/shared'; +import { ThemeArgs, Primitive } from '@pigment-css/core'; + +export type TemplateCallback = (params: Record | undefined) => string | number; + +type GetClassName = () => string; + +export abstract class BaseStyledProcessor { + public tempMetaClass = (Math.random() + 1).toString(36).substring(10); + + readonly artifacts: Artifact[] = []; + + readonly classNames: string[] = []; + + constructor( + public readonly params: Params, + public readonly getClassName: GetClassName, + public readonly tagSource: TailProcessorParams[0], + public readonly astService: TailProcessorParams[1], + public readonly location: TailProcessorParams[2], + public readonly replacer: TailProcessorParams[3], + public readonly displayName: TailProcessorParams[4], + public readonly isReferenced: TailProcessorParams[5], + public readonly idx: TailProcessorParams[6], + public readonly options: TailProcessorParams[7], + public readonly context: TailProcessorParams[8], + ) {} + + abstract getDependencies(): ExpressionValue[]; + + abstract build(values: ValueCache): void; + + doRuntimeReplacement() { + this.replacer(this.astService.stringLiteral(this.classNames.join(' ')), false); + } + + getBaseClass(): string | undefined { + if (!this.tempMetaClass) { + return this.getClassName(); + } + return this.tempMetaClass; + } +} + +/** + * Only deals with styled.div`` or styled('div', metadata)`` calls. + */ +class StyledTaggedTemplateProcessor extends BaseStyledProcessor { + constructor(params: Params, getClassName: GetClassName, ...args: TailProcessorParams) { + super(params, getClassName, ...args); + + const [, callOrTemplate] = this.params; + if (callOrTemplate[0] === 'template') { + this.tempMetaClass = ''; + } + } + + getDependencies(): ExpressionValue[] { + const [, callOrTemplate, template] = this.params; + const deps: ExpressionValue[] = []; + if (callOrTemplate[0] === 'call') { + deps.push(callOrTemplate[1]); + } else if (callOrTemplate[0] === 'template') { + deps.push( + ...callOrTemplate[1].filter( + (arg): arg is ExpressionValue => 'kind' in arg && arg.kind !== ValueType.CONST, + ), + ); + } + if (template?.[0] === 'template') { + deps.push( + ...template[1].filter( + (arg): arg is ExpressionValue => 'kind' in arg && arg.kind !== ValueType.CONST, + ), + ); + } + return deps; + } + + build(values: ValueCache): void { + const { themeArgs, features: { useLayer = true } = {} } = this.options as PigmentConfig; + const [, callOrTemplate, template] = this.params; + // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. + const templateStrs: string[] = []; + // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. + templateStrs.raw = []; + const templateExpressions: Primitive[] = []; + const templateParams = (callOrTemplate[0] === 'call' ? template[1] : callOrTemplate[1]) as ( + | ExpressionValue + | TemplateElement + )[]; + templateParams.forEach((param) => { + if ('kind' in param) { + switch (param.kind) { + case ValueType.FUNCTION: { + const value = values.get(param.ex.name) as TemplateCallback; + templateExpressions.push(value(themeArgs)); + break; + } + case ValueType.CONST: { + templateExpressions.push(param.value); + break; + } + case ValueType.LAZY: { + const evaluatedValue = values.get(param.ex.name); + if (typeof evaluatedValue === 'function') { + templateExpressions.push(evaluatedValue(themeArgs)); + } else { + templateExpressions.push(evaluatedValue as Primitive); + } + break; + } + default: + break; + } + } else if ('type' in param && param.type === 'TemplateElement') { + templateStrs.push(param.value.cooked as string); + // @ts-ignore + templateStrs.raw.push(param.value.raw); + } + }); + const { styles } = serializeStyles( + templateExpressions.length > 0 ? [templateStrs, ...templateExpressions] : [templateStrs], + ); + + const cssText = useLayer ? `@layer pigment.base{${styles}}` : styles; + const className = this.getClassName(); + const rules: Rules = { + [`.${className}`]: { + className, + cssText, + displayName: this.displayName, + start: this.location?.start ?? null, + }, + }; + const location = this.location; + const sourceMapReplacements: Replacements = [ + { + length: cssText.length, + original: { + start: { + column: location?.start.column ?? 0, + line: location?.start.line ?? 0, + }, + end: { + column: location?.end.column ?? 0, + line: location?.end.line ?? 0, + }, + }, + }, + ]; + this.classNames.push(className); + this.artifacts.push(['css', [rules, sourceMapReplacements]]); + } + + doRuntimeReplacement() { + const baseClasses = this.astService.stringLiteral(this.classNames.join(' ')); + const cssCallId = this.astService.addNamedImport('css', '@pigment-css/core/runtime'); + const args = this.astService.objectExpression([ + this.astService.objectProperty(this.astService.identifier('classes'), baseClasses), + ]); + this.replacer(this.astService.callExpression(cssCallId, [args]), true); + } +} + +/** + * Only deals with styled.div(...styleObjects) or or styled('div')(styleObject) calls. + */ +class StyledObjectProcessor extends BaseStyledProcessor { + variants: { $$cls: string; props: Record }[] = []; + + getDependencies(): ExpressionValue[] { + const [, [, ...callParams]] = this.params; + return callParams as ExpressionValue[]; + } + + build(values: ValueCache): void { + const [, [, ...callParams]] = this.params; + const { themeArgs, features: { useLayer = true } = {} } = this.options as PigmentConfig; + + const evaluatedValues = (callParams as (LazyValue | FunctionValue)[]).map((param) => + values.get(param.ex.name), + ); + let stylesList: (object | Function)[]; + // let metadata: any; + // check for css(metadata, [styles]) or css(metadata, style) call + const locations: (SourceLocation | null | undefined)[] = []; + if ( + evaluatedValues.length === 2 && + evaluatedValues[0] && + typeof evaluatedValues[0] === 'object' && + 'className' in evaluatedValues[0] + ) { + // metadata = evaluatedValues[0]; + const param = callParams[1] as LazyValue | FunctionValue; + if (Array.isArray(evaluatedValues[1])) { + stylesList = evaluatedValues[1]; + // Parse the expression AST to track the exact locations of each parameter + const arrayItemsAst = parseArray((callParams[1] as ExpressionValue).source, { + startLine: param.ex.loc?.start.line, + startIndex: param.ex.loc?.start.index, + startColumn: param.ex.loc?.start.column, + }); + if (arrayItemsAst) { + locations.push(...arrayItemsAst.elements.map((item) => item?.loc)); + } + } else { + stylesList = [evaluatedValues[1] as (typeof stylesList)[number]]; + locations.push((callParams[1] as unknown as ExpressionValue).ex.loc); + } + } else { + // This is for css(...styles) call + stylesList = evaluatedValues as typeof stylesList; + locations.push(...(callParams as ExpressionValue[]).map((p) => p.ex.loc)); + } + + const styles = stylesList.map((item) => + typeof item === 'function' ? item(themeArgs as unknown as ThemeArgs) : item, + ); + let count = 0; + const result = processStyleObjects(styles, { + getClassName: (variantName: string | undefined, variantValue: string | undefined) => { + if (!variantName) { + return this.getClassName(); + } + return `${this.getClassName()}-${variantName}-${variantValue}`; + }, + getVariableName: () => { + count += 1; + return `${this.getClassName()}-${count}`; + }, + }); + + const addStyles = (s: StyleObjectReturn[], layer?: string) => { + const rules: Rules = {}; + s.forEach((style, index) => { + const location = locations[index] ?? locations[0]; + const cssText = + layer && useLayer ? `@layer pigment.${layer} {${style.cssText}}` : style.cssText; + rules[`.${style.className}`] = { + className: style.className, + cssText, + displayName: this.displayName, + start: location?.start ?? null, + }; + + const sourceMapReplacements: Replacements = + layer === 'base' + ? [ + { + length: cssText.length, + original: { + start: { + column: location?.start.column ?? 0, + line: location?.start.line ?? 0, + }, + end: { + column: location?.end.column ?? 0, + line: location?.end.line ?? 0, + }, + }, + }, + ] + : []; + + if (Object.keys(style.serializables).length > 0) { + this.variants.push({ + $$cls: style.className, + props: style.serializables, + }); + } + + this.artifacts.push(['css', [rules, sourceMapReplacements]]); + }); + }; + this.classNames.push(...result.base.map((item) => item.className)); + addStyles(result.base, 'base'); + addStyles(result.variants, 'variants'); + addStyles(result.compoundVariants, 'compoundvariants'); + } + + doRuntimeReplacement() { + const baseClasses = this.astService.stringLiteral(this.classNames.join(' ')); + const cssCallId = this.astService.addNamedImport('css', '@pigment-css/core/runtime'); + const [, [, ...callParams]] = this.params; + const args = this.astService.objectExpression([ + this.astService.objectProperty(this.astService.identifier('classes'), baseClasses), + ]); + if (this.variants.length > 0) { + args.properties.push( + this.astService.objectProperty( + this.astService.identifier('variants'), + valueToLiteral(this.variants, callParams[1] as ExpressionValue), + ), + ); + } + this.replacer(this.astService.callExpression(cssCallId, [args]), true); + } +} + +/** + * Scoped css class generation similar to css from emotion. + * + * @example + * ```ts + * import { css } from '@pigment-css/react'; + * + * const class1 = css(({theme}) => ({ + * color: (theme.vars || theme).palette.primary.main, + * })) + * ``` + * + * + */ +export class StyledProcessor extends BaseProcessor { + processor: BaseStyledProcessor; + + constructor(params: Params, ...args: TailProcessorParams) { + super([params[0]], ...args); + validateParams(params, ['callee', '...'], BaseProcessor.SKIP); + + if (params.length === 3) { + validateParams( + params, + ['callee', 'call', 'template'], + `Invalid use of ${this.tagSource.imported} function.`, + ); + } else { + validateParams( + params, + ['callee', ['call', 'template']], + `Invalid use of ${this.tagSource.imported} function.`, + ); + } + + const getClassName = () => this.getBaseClass(); + const [calleeParam, callParams, maybeTemplate] = params; + if (callParams[0] === 'template' || maybeTemplate?.[0] === 'template') { + this.processor = new StyledTaggedTemplateProcessor(params, getClassName, ...args); + } else { + this.processor = new StyledObjectProcessor([calleeParam, callParams], getClassName, ...args); + } + + this.dependencies.push(...this.processor.getDependencies()); + } + + build(values: ValueCache) { + this.processor.build(values); + this.artifacts.push(...this.processor.artifacts); + } + + getBaseClass(): string { + return this.className; + } + + get asSelector(): string { + return this.getBaseClass(); + } + + get value(): Expression { + return this.astService.stringLiteral(`.${this.getBaseClass()}`); + } + + doEvaltimeReplacement(): void { + this.replacer(this.value, false); + } + + doRuntimeReplacement(): void { + this.processor.doRuntimeReplacement(); + } +} diff --git a/packages/pigment-css-react-new/src/styled.js b/packages/pigment-css-react-new/src/styled.js new file mode 100644 index 00000000..e88488b6 --- /dev/null +++ b/packages/pigment-css-react-new/src/styled.js @@ -0,0 +1 @@ +export function styled() {} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 18ddfe5d..51672668 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -456,9 +456,6 @@ importers: '@babel/types': specifier: ^7.26.0 version: 7.26.0 - '@emotion/css': - specifier: ^11.13.4 - version: 11.13.4 '@pigment-css/theme': specifier: workspace:^ version: link:../pigment-css-theme @@ -477,9 +474,6 @@ importers: csstype: specifier: ^3.1.3 version: 3.1.3 - lodash: - specifier: ^4.17.21 - version: 4.17.21 devDependencies: '@types/chai': specifier: ^4.3.14 From 3e6244a9113c3506bdeb496afaccb3d73e7c1f07 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Thu, 26 Dec 2024 16:19:54 +0530 Subject: [PATCH 06/42] Handle runtime path replacement logic --- .../pigment-css-core/src/processors/css.ts | 44 ++++++++++++------- .../pigment-css-core/tests/css/css.test.ts | 19 ++++++++ .../fixtures/css-replacement-import.input.js | 17 +++++++ .../css-replacement-import.output.css | 3 ++ .../fixtures/css-replacement-import.output.js | 4 ++ packages/pigment-css-core/tests/testUtils.ts | 13 ++---- 6 files changed, 75 insertions(+), 25 deletions(-) create mode 100644 packages/pigment-css-core/tests/css/fixtures/css-replacement-import.input.js create mode 100644 packages/pigment-css-core/tests/css/fixtures/css-replacement-import.output.css create mode 100644 packages/pigment-css-core/tests/css/fixtures/css-replacement-import.output.js diff --git a/packages/pigment-css-core/src/processors/css.ts b/packages/pigment-css-core/src/processors/css.ts index 330ec94e..745c9239 100644 --- a/packages/pigment-css-core/src/processors/css.ts +++ b/packages/pigment-css-core/src/processors/css.ts @@ -12,7 +12,7 @@ import { SourceLocation, TemplateElement } from '@babel/types'; import { - type PigmentConfig, + type TransformedInternalConfig, BaseProcessor, parseArray, processStyleObjects, @@ -44,6 +44,8 @@ export type TemplateCallback = (params: Record | undefined) => type GetClassName = () => string; export abstract class BaseCssProcessor { + public variants: { $$cls: string; props: Record }[] = []; + public tempMetaClass = (Math.random() + 1).toString(36).substring(10); readonly artifacts: Artifact[] = []; @@ -116,7 +118,8 @@ class CssTaggedTemplateProcessor extends BaseCssProcessor { } build(values: ValueCache): void { - const { themeArgs, features: { useLayer = true } = {} } = this.options as PigmentConfig; + const { themeArgs, pigmentFeatures: { useLayer = true } = {} } = this + .options as TransformedInternalConfig; const [, callOrTemplate, template] = this.params; // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. const templateStrs: string[] = []; @@ -190,23 +193,12 @@ class CssTaggedTemplateProcessor extends BaseCssProcessor { this.classNames.push(className); this.artifacts.push(['css', [rules, sourceMapReplacements]]); } - - doRuntimeReplacement() { - const baseClasses = this.astService.stringLiteral(this.classNames.join(' ')); - const cssCallId = this.astService.addNamedImport('css', '@pigment-css/core/runtime'); - const args = this.astService.objectExpression([ - this.astService.objectProperty(this.astService.identifier('classes'), baseClasses), - ]); - this.replacer(this.astService.callExpression(cssCallId, [args]), true); - } } /** * Only deals with css(...styleObjects) or or css(styleObject) css(metadata, [...styleObjects]) calls. */ class CssObjectProcessor extends BaseCssProcessor { - variants: { $$cls: string; props: Record }[] = []; - getDependencies(): ExpressionValue[] { const [, [, ...callParams]] = this.params; return callParams as ExpressionValue[]; @@ -214,7 +206,8 @@ class CssObjectProcessor extends BaseCssProcessor { build(values: ValueCache): void { const [, [, ...callParams]] = this.params; - const { themeArgs, features: { useLayer = true } = {} } = this.options as PigmentConfig; + const { themeArgs, pigmentFeatures: { useLayer = true } = {} } = this + .options as TransformedInternalConfig; const evaluatedValues = (callParams as (LazyValue | FunctionValue)[]).map((param) => values.get(param.ex.name), @@ -353,8 +346,12 @@ class CssObjectProcessor extends BaseCssProcessor { export class CssProcessor extends BaseProcessor { processor: BaseCssProcessor; + params: Params; + constructor(params: Params, ...args: TailProcessorParams) { super([params[0]], ...args); + + this.params = params; validateParams(params, ['callee', '...'], BaseProcessor.SKIP); if (params.length === 3) { @@ -404,6 +401,23 @@ export class CssProcessor extends BaseProcessor { } doRuntimeReplacement(): void { - this.processor.doRuntimeReplacement(); + const t = this.astService; + const options = this.options as TransformedInternalConfig; + const baseClasses = t.stringLiteral(this.processor.classNames.join(' ')); + const importPath = + options.runtimeReplacementPath?.(this.tagSource.imported, this.tagSource.source) ?? + `${process.env.PACKAGE_NAME}/runtime`; + const callId = t.addNamedImport('css', importPath); + const [, [, ...callParams]] = this.params; + const args = t.objectExpression([t.objectProperty(t.identifier('classes'), baseClasses)]); + if (this.processor.variants.length > 0) { + args.properties.push( + t.objectProperty( + t.identifier('variants'), + valueToLiteral(this.processor.variants, callParams[1] as ExpressionValue), + ), + ); + } + this.replacer(t.callExpression(callId, [args]), true); } } diff --git a/packages/pigment-css-core/tests/css/css.test.ts b/packages/pigment-css-core/tests/css/css.test.ts index 58e3e1a1..9dd101bc 100644 --- a/packages/pigment-css-core/tests/css/css.test.ts +++ b/packages/pigment-css-core/tests/css/css.test.ts @@ -28,4 +28,23 @@ describe('Pigment CSS - css', () => { expect(output.js).to.equal(fixture.js); expect(output.css).to.equal(fixture.css); }); + + it('should use the replacement import paths if provided', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/css-replacement-import.input.js'), + { + themeArgs: { + theme, + }, + runtimeReplacementPath(tag) { + if (tag === 'css') { + return '@my-lib/core/css'; + } + return null; + }, + }, + ); + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); }); diff --git a/packages/pigment-css-core/tests/css/fixtures/css-replacement-import.input.js b/packages/pigment-css-core/tests/css/fixtures/css-replacement-import.input.js new file mode 100644 index 00000000..89ab8301 --- /dev/null +++ b/packages/pigment-css-core/tests/css/fixtures/css-replacement-import.input.js @@ -0,0 +1,17 @@ +import { css, keyframes } from '@pigment-css/core'; + +const ab = 'aliceblue'; + +const gradientKeyframe = keyframes(({ theme }) => ({ + '50%': { + background: 'green', + }, +})); + +export const cls1 = css` + ---flex: 1; + color: ${({ theme }) => theme.palette.primary.main}; + font-size: ${({ theme }) => theme.size.font.h1}; + animation-name: ${gradientKeyframe}; + background-color: ${ab}; +`; diff --git a/packages/pigment-css-core/tests/css/fixtures/css-replacement-import.output.css b/packages/pigment-css-core/tests/css/fixtures/css-replacement-import.output.css new file mode 100644 index 00000000..385b3705 --- /dev/null +++ b/packages/pigment-css-core/tests/css/fixtures/css-replacement-import.output.css @@ -0,0 +1,3 @@ +@layer pigment.base{@keyframes gasf547{50%{background:green;}}} +@layer pigment.base{.c1pxk10v{---flex:1;color:red;font-size:3rem;animation-name:gasf547;background-color:aliceblue;}} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MtcmVwbGFjZW1lbnQtaW1wb3J0LmlucHV0LmpzIl0sIm5hbWVzIjpbIi5nYXNmNTQ3IiwiLmMxcHhrMTB2Il0sIm1hcHBpbmdzIjoiQUFJbUNBO0FBTWZDIiwiZmlsZSI6Ii9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MtcmVwbGFjZW1lbnQtaW1wb3J0LmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuXG5jb25zdCBhYiA9ICdhbGljZWJsdWUnO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogJ2dyZWVuJyxcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IGNsczEgPSBjc3NgXG4gIC0tLWZsZXg6IDE7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGFuaW1hdGlvbi1uYW1lOiAke2dyYWRpZW50S2V5ZnJhbWV9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbmA7XG4iXX0=*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/css/fixtures/css-replacement-import.output.js b/packages/pigment-css-core/tests/css/fixtures/css-replacement-import.output.js new file mode 100644 index 00000000..0e4b0ad1 --- /dev/null +++ b/packages/pigment-css-core/tests/css/fixtures/css-replacement-import.output.js @@ -0,0 +1,4 @@ +import { css as _css } from '@my-lib/core/css'; +export const cls1 = /*#__PURE__*/ _css({ + classes: 'c1pxk10v', +}); diff --git a/packages/pigment-css-core/tests/testUtils.ts b/packages/pigment-css-core/tests/testUtils.ts index 4c4d0ced..cbeae60e 100644 --- a/packages/pigment-css-core/tests/testUtils.ts +++ b/packages/pigment-css-core/tests/testUtils.ts @@ -1,23 +1,16 @@ import * as fs from 'node:fs'; import * as path from 'node:path'; import { expect as chaiExpect } from 'chai'; -import { Theme } from '@pigment-css/theme'; import { asyncResolveFallback } from '@wyw-in-js/shared'; import { TransformCacheCollection, createFileReporter, transform } from '@wyw-in-js/transform'; import * as prettier from 'prettier'; -import { preprocessor } from '@pigment-css/utils'; +import { PigmentConfig, preprocessor } from '@pigment-css/utils'; import pkgJson from '../package.json'; type TransformOptions = { outputDir?: string; - /** - * Object to pass as parameter to the styled css callback functions. - */ - themeArgs?: { - theme?: Theme; - }; -}; +} & PigmentConfig; const shouldUpdateOutput = process.env.UPDATE_FIXTURES === 'true'; @@ -25,7 +18,7 @@ export async function runTransformation(absolutePath: string, options?: Transfor const cache = new TransformCacheCollection(); const { emitter: eventEmitter } = createFileReporter(false); const inputFilePath = absolutePath; - const { outputDir, ...restOptions } = options ?? {}; + const { outputDir, features, ...restOptions } = options ?? {}; let outputFilePath = ( outputDir ? path.join(outputDir, inputFilePath.split(path.sep).pop() as string) : absolutePath ).replace('.input.', '.output.'); From 8b43da4e4c1fcbac0ed28b5fd4328ed42b986053 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Thu, 26 Dec 2024 17:36:01 +0530 Subject: [PATCH 07/42] Add test for useLayer feature --- .../src/processors/keyframes.ts | 8 +++++--- packages/pigment-css-core/tests/css/css.test.ts | 16 ++++++++++++++++ .../tests/css/fixtures/css-no-layers.input.js | 17 +++++++++++++++++ .../tests/css/fixtures/css-no-layers.output.css | 3 +++ .../tests/css/fixtures/css-no-layers.output.js | 4 ++++ packages/pigment-css-core/tests/testUtils.ts | 8 ++++---- .../pigment-css-utils/src/utils/preprocessor.ts | 4 ++-- 7 files changed, 51 insertions(+), 9 deletions(-) create mode 100644 packages/pigment-css-core/tests/css/fixtures/css-no-layers.input.js create mode 100644 packages/pigment-css-core/tests/css/fixtures/css-no-layers.output.css create mode 100644 packages/pigment-css-core/tests/css/fixtures/css-no-layers.output.js diff --git a/packages/pigment-css-core/src/processors/keyframes.ts b/packages/pigment-css-core/src/processors/keyframes.ts index 00a8724c..9444d829 100644 --- a/packages/pigment-css-core/src/processors/keyframes.ts +++ b/packages/pigment-css-core/src/processors/keyframes.ts @@ -12,7 +12,7 @@ import { SourceLocation, TemplateElement } from '@babel/types'; import { - type PigmentConfig, + type TransformedInternalConfig, BaseProcessor, parseArray, processStyleObjects, @@ -83,7 +83,8 @@ class KeyframesTaggedTemplateProcessor extends BaseKeyframesProcessor { } build(values: ValueCache): void { - const { themeArgs, features: { useLayer = true } = {} } = this.options as PigmentConfig; + const { themeArgs, pigmentFeatures: { useLayer = true } = {} } = this + .options as TransformedInternalConfig; const [, callOrTemplate, template] = this.params; // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. const templateStrs: string[] = []; @@ -173,7 +174,8 @@ class KeyframesObjectProcessor extends BaseKeyframesProcessor { build(values: ValueCache): void { const [, [, ...callParams]] = this.params; - const { themeArgs, features: { useLayer = true } = {} } = this.options as PigmentConfig; + const { themeArgs, pigmentFeatures: { useLayer = true } = {} } = this + .options as TransformedInternalConfig; const evaluatedValues = (callParams as (LazyValue | FunctionValue)[]).map((param) => values.get(param.ex.name), diff --git a/packages/pigment-css-core/tests/css/css.test.ts b/packages/pigment-css-core/tests/css/css.test.ts index 9dd101bc..8b5bbb84 100644 --- a/packages/pigment-css-core/tests/css/css.test.ts +++ b/packages/pigment-css-core/tests/css/css.test.ts @@ -47,4 +47,20 @@ describe('Pigment CSS - css', () => { expect(output.js).to.equal(fixture.js); expect(output.css).to.equal(fixture.css); }); + + it('should not use css layers if the feature is disabled', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/css-no-layers.input.js'), + { + themeArgs: { + theme, + }, + features: { + useLayer: false, + }, + }, + ); + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); }); diff --git a/packages/pigment-css-core/tests/css/fixtures/css-no-layers.input.js b/packages/pigment-css-core/tests/css/fixtures/css-no-layers.input.js new file mode 100644 index 00000000..89ab8301 --- /dev/null +++ b/packages/pigment-css-core/tests/css/fixtures/css-no-layers.input.js @@ -0,0 +1,17 @@ +import { css, keyframes } from '@pigment-css/core'; + +const ab = 'aliceblue'; + +const gradientKeyframe = keyframes(({ theme }) => ({ + '50%': { + background: 'green', + }, +})); + +export const cls1 = css` + ---flex: 1; + color: ${({ theme }) => theme.palette.primary.main}; + font-size: ${({ theme }) => theme.size.font.h1}; + animation-name: ${gradientKeyframe}; + background-color: ${ab}; +`; diff --git a/packages/pigment-css-core/tests/css/fixtures/css-no-layers.output.css b/packages/pigment-css-core/tests/css/fixtures/css-no-layers.output.css new file mode 100644 index 00000000..05cea33f --- /dev/null +++ b/packages/pigment-css-core/tests/css/fixtures/css-no-layers.output.css @@ -0,0 +1,3 @@ +@keyframes ggmdnc6 {50%{background:green;}} +.c12ez28n{---flex:1;color:red;font-size:3rem;animation-name:ggmdnc6;background-color:aliceblue;} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3Mtbm8tbGF5ZXJzLmlucHV0LmpzIl0sIm5hbWVzIjpbIi5nZ21kbmM2IiwiLmMxMmV6MjhuIl0sIm1hcHBpbmdzIjoiQUFJbUNBO0FBTWZDIiwiZmlsZSI6Ii9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3Mtbm8tbGF5ZXJzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuXG5jb25zdCBhYiA9ICdhbGljZWJsdWUnO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogJ2dyZWVuJyxcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IGNsczEgPSBjc3NgXG4gIC0tLWZsZXg6IDE7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGFuaW1hdGlvbi1uYW1lOiAke2dyYWRpZW50S2V5ZnJhbWV9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbmA7XG4iXX0=*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/css/fixtures/css-no-layers.output.js b/packages/pigment-css-core/tests/css/fixtures/css-no-layers.output.js new file mode 100644 index 00000000..f93d153b --- /dev/null +++ b/packages/pigment-css-core/tests/css/fixtures/css-no-layers.output.js @@ -0,0 +1,4 @@ +import { css as _css } from '@pigment-css/core/runtime'; +export const cls1 = /*#__PURE__*/ _css({ + classes: 'c12ez28n', +}); diff --git a/packages/pigment-css-core/tests/testUtils.ts b/packages/pigment-css-core/tests/testUtils.ts index cbeae60e..9467cf15 100644 --- a/packages/pigment-css-core/tests/testUtils.ts +++ b/packages/pigment-css-core/tests/testUtils.ts @@ -4,7 +4,7 @@ import { expect as chaiExpect } from 'chai'; import { asyncResolveFallback } from '@wyw-in-js/shared'; import { TransformCacheCollection, createFileReporter, transform } from '@wyw-in-js/transform'; import * as prettier from 'prettier'; -import { PigmentConfig, preprocessor } from '@pigment-css/utils'; +import { PigmentConfig, preprocessor, transformPigmentConfig } from '@pigment-css/utils'; import pkgJson from '../package.json'; @@ -18,7 +18,7 @@ export async function runTransformation(absolutePath: string, options?: Transfor const cache = new TransformCacheCollection(); const { emitter: eventEmitter } = createFileReporter(false); const inputFilePath = absolutePath; - const { outputDir, features, ...restOptions } = options ?? {}; + const { outputDir, ...restOptions } = options ?? {}; let outputFilePath = ( outputDir ? path.join(outputDir, inputFilePath.split(path.sep).pop() as string) : absolutePath ).replace('.input.', '.output.'); @@ -42,7 +42,7 @@ export async function runTransformation(absolutePath: string, options?: Transfor ? fs.readFileSync(outputCssFilePath, 'utf8') : ''; - const pluginOptions = { + const pluginOptions = transformPigmentConfig({ babelOptions: { configFile: false, babelrc: false, @@ -54,7 +54,7 @@ export async function runTransformation(absolutePath: string, options?: Transfor return require.resolve(`../${pkgJson['wyw-in-js'].tags[tag]}`); }, ...restOptions, - }; + }); const result = await transform( { diff --git a/packages/pigment-css-utils/src/utils/preprocessor.ts b/packages/pigment-css-utils/src/utils/preprocessor.ts index ad103191..0bcace10 100644 --- a/packages/pigment-css-utils/src/utils/preprocessor.ts +++ b/packages/pigment-css-utils/src/utils/preprocessor.ts @@ -35,8 +35,8 @@ export function preprocessor(selector: string, cssText: string) { const isGlobal = selector.startsWith(getGlobalSelector('')); if (!isGlobal && cssText.startsWith('@keyframes')) { - css += stylis(cssText.replace('@keyframes', `@keyframes ${selector}`)); - return css; + // Keyframes are already pre-processed. + return cssText; } css += stylis(!isGlobal ? `${selector}{${cssText}}` : cssText); From d4dcda93c236512c856c1368fe0a6c52db6269dd Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Fri, 27 Dec 2024 10:30:28 +0530 Subject: [PATCH 08/42] Use className if provided --- packages/pigment-css-core/src/base.ts | 5 +- packages/pigment-css-core/src/css.d.ts | 39 +- packages/pigment-css-core/src/css.js | 25 ++ .../pigment-css-core/src/processors/css.ts | 217 +++++++----- .../src/processors/keyframes.ts | 335 ++---------------- .../pigment-css-core/tests/css/css.spec.ts | 42 +-- .../tests/css/fixtures/css.input.js | 6 +- .../tests/css/fixtures/css.output.css | 32 +- .../tests/css/fixtures/css.output.js | 24 +- .../fixtures/keyframes-theme.output.css | 4 +- .../fixtures/keyframes-theme.output.js | 2 +- .../keyframes/fixtures/keyframes.input.js | 2 +- .../keyframes/fixtures/keyframes.output.css | 4 +- .../keyframes/fixtures/keyframes.output.js | 2 +- 14 files changed, 251 insertions(+), 488 deletions(-) diff --git a/packages/pigment-css-core/src/base.ts b/packages/pigment-css-core/src/base.ts index 27774355..3047db5c 100644 --- a/packages/pigment-css-core/src/base.ts +++ b/packages/pigment-css-core/src/base.ts @@ -1,7 +1,10 @@ import type * as CSS from 'csstype'; import { Theme, ThemeKey } from '@pigment-css/theme'; -export type CSSProperties = CSS.PropertiesFallback; +export type CSSProperties = CSS.PropertiesFallback & { + [index: `--${string}`]: string; + [index: `$${string}`]: string; +}; export type CSSPropertiesMultiValue = { [K in keyof CSSProperties]: diff --git a/packages/pigment-css-core/src/css.d.ts b/packages/pigment-css-core/src/css.d.ts index bc4420d7..b785bc1d 100644 --- a/packages/pigment-css-core/src/css.d.ts +++ b/packages/pigment-css-core/src/css.d.ts @@ -1,4 +1,5 @@ -import { CSSObjectNoCallback, Primitive, ThemeArgs } from './base'; +import { ClassNameOptions } from '@pigment-css/utils'; +import { CSSObjectNoCallback, CSSProperties, Primitive, ThemeArgs } from './base'; type IVariant = { variants?: Record>; @@ -13,25 +14,31 @@ export interface BaseInterface { /** * Corresponds to css class name for `css` function call and keyframe name when passed to `keyframes` */ - className: string; + className?: string | ((opts?: ClassNameOptions) => string); } -interface Css { - /** - * @returns {string} The generated css class name to be referenced. - */ - (arg: TemplateStringsArray, ...templateArgs: (Primitive | CssFn)[]): string; - ( - metadata: M, - ): (arg: TemplateStringsArray, ...templateArgs: (Primitive | CssFn)[]) => string; +/** + * New CSS + */ - /** - * @returns {string} The generated css class name to be referenced. - */ - (...args: CssArg[]): () => string; - (metadata: M, args: CssArg | CssArg[]): string; +type CssReturn = { + className: string; + style?: CSSProperties; +}; + +interface CssNoOption { + (arg: TemplateStringsArray, ...templateArgs: (Primitive | CssFn)[]): CssReturn; + (...args: CssArg[]): CssReturn; } -declare const css: Css; +interface CssFunction { + (arg: TemplateStringsArray, ...templateArgs: (Primitive | CssFn)[]): CssReturn; + (...args: CssArg[]): CssReturn; +} + +interface CssWithOption { + (metadata: M): CssFunction; +} +declare const css: CssNoOption & CssWithOption; export default css; diff --git a/packages/pigment-css-core/src/css.js b/packages/pigment-css-core/src/css.js index 7ca40e27..623486b0 100644 --- a/packages/pigment-css-core/src/css.js +++ b/packages/pigment-css-core/src/css.js @@ -3,3 +3,28 @@ import { generateErrorMessage } from './utils'; export default function css() { console.error(generateErrorMessage('css')); } + +/** +const cls1 = css({ + className() { + return 'class-name', + }, +})({ + color: 'red', + backgroundColor: (props) => props.isRed ? 'red' : 'blue', + variants: { + size: { + small: { + padding: 2, + } + } + }, + compoundVariants: [], + defaultVariants: {}, +}); + +const {className, style} = cls1({ + isRed: true, + size: 'small', +}); + */ diff --git a/packages/pigment-css-core/src/processors/css.ts b/packages/pigment-css-core/src/processors/css.ts index 745c9239..57d45006 100644 --- a/packages/pigment-css-core/src/processors/css.ts +++ b/packages/pigment-css-core/src/processors/css.ts @@ -10,20 +10,24 @@ * CssProcessor. */ -import { SourceLocation, TemplateElement } from '@babel/types'; +import { SourceLocation } from '@babel/types'; import { type TransformedInternalConfig, + type StyleObjectReturn, + type ClassNameOptions, BaseProcessor, parseArray, processStyleObjects, serializeStyles, - StyleObjectReturn, valueToLiteral, + evaluateClassNameArg, } from '@pigment-css/utils'; import { + CallParam, type Expression, type Params, type TailProcessorParams, + TemplateParam, type ValueCache, validateParams, } from '@wyw-in-js/processor-utils'; @@ -37,24 +41,26 @@ import { ValueType, } from '@wyw-in-js/shared'; import { ThemeArgs } from '../base'; +import { BaseInterface } from '../css'; export type Primitive = string | number | boolean | null | undefined; export type TemplateCallback = (params: Record | undefined) => string | number; -type GetClassName = () => string; - export abstract class BaseCssProcessor { public variants: { $$cls: string; props: Record }[] = []; - public tempMetaClass = (Math.random() + 1).toString(36).substring(10); + public variables: StyleObjectReturn['variables'] = {}; readonly artifacts: Artifact[] = []; readonly classNames: string[] = []; + public staticClass: BaseInterface | null = null; + constructor( public readonly params: Params, - public readonly getClassName: GetClassName, + public readonly slugClass: string, + public readonly wrapStyle: (style: string, selector: string) => string, public readonly tagSource: TailProcessorParams[0], public readonly astService: TailProcessorParams[1], public readonly location: TailProcessorParams[2], @@ -70,66 +76,70 @@ export abstract class BaseCssProcessor { abstract build(values: ValueCache): void; + doEvaltimeReplacement(): void { + this.replacer(this.astService.stringLiteral(this.getBaseClass()), false); + } + doRuntimeReplacement() { this.replacer(this.astService.stringLiteral(this.classNames.join(' ')), false); } - getBaseClass(): string | undefined { - if (!this.tempMetaClass) { - return this.getClassName(); + getBaseClass() { + if (this.staticClass?.className) { + if (typeof this.staticClass.className === 'string') { + return this.staticClass.className; + } + return this.staticClass.className(); + } + return this.slugClass; + } + + getClassName(opts?: ClassNameOptions): string { + const baseClass = this.getBaseClass(); + if (!opts) { + return baseClass; } - return this.tempMetaClass; + if ('variantName' in opts) { + return typeof this.staticClass?.className === 'function' + ? this.staticClass.className(opts) + : `${baseClass}-${opts.variantName}-${opts.variantValue}`; + } + return baseClass; } } +type BaseCssProcessorConstructorParams = ConstructorParameters; +export type CssTailProcessorParams = BaseCssProcessorConstructorParams extends [Params, ...infer T] + ? T + : never; + /** * Only deals with css`` or css(metadata)`` calls. */ -class CssTaggedTemplateProcessor extends BaseCssProcessor { - constructor(params: Params, getClassName: GetClassName, ...args: TailProcessorParams) { - super(params, getClassName, ...args); +export class CssTaggedTemplateProcessor extends BaseCssProcessor { + templateParam: TemplateParam; - const [, callOrTemplate] = this.params; - if (callOrTemplate[0] === 'template') { - this.tempMetaClass = ''; - } + constructor(params: [TemplateParam], ...args: CssTailProcessorParams) { + super(params, ...args); + this.templateParam = params[0]; } getDependencies(): ExpressionValue[] { - const [, callOrTemplate, template] = this.params; - const deps: ExpressionValue[] = []; - if (callOrTemplate[0] === 'call') { - deps.push(callOrTemplate[1]); - } else if (callOrTemplate[0] === 'template') { - deps.push( - ...callOrTemplate[1].filter( - (arg): arg is ExpressionValue => 'kind' in arg && arg.kind !== ValueType.CONST, - ), - ); - } - if (template?.[0] === 'template') { - deps.push( - ...template[1].filter( - (arg): arg is ExpressionValue => 'kind' in arg && arg.kind !== ValueType.CONST, - ), - ); - } - return deps; + const [, elementOrExpression] = this.templateParam; + return elementOrExpression.filter( + (arg): arg is ExpressionValue => 'kind' in arg && arg.kind !== ValueType.CONST, + ); } build(values: ValueCache): void { const { themeArgs, pigmentFeatures: { useLayer = true } = {} } = this .options as TransformedInternalConfig; - const [, callOrTemplate, template] = this.params; + const [, templateParams] = this.templateParam; // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. const templateStrs: string[] = []; // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. templateStrs.raw = []; const templateExpressions: Primitive[] = []; - const templateParams = (callOrTemplate[0] === 'call' ? template[1] : callOrTemplate[1]) as ( - | ExpressionValue - | TemplateElement - )[]; templateParams.forEach((param) => { if ('kind' in param) { switch (param.kind) { @@ -164,7 +174,9 @@ class CssTaggedTemplateProcessor extends BaseCssProcessor { templateExpressions.length > 0 ? [templateStrs, ...templateExpressions] : [templateStrs], ); - const cssText = useLayer ? `@layer pigment.base{${styles}}` : styles; + const cssText = useLayer + ? `@layer pigment.base{${this.wrapStyle(styles, '')}}` + : this.wrapStyle(styles, ''); const className = this.getClassName(); const rules: Rules = { [`.${className}`]: { @@ -198,14 +210,21 @@ class CssTaggedTemplateProcessor extends BaseCssProcessor { /** * Only deals with css(...styleObjects) or or css(styleObject) css(metadata, [...styleObjects]) calls. */ -class CssObjectProcessor extends BaseCssProcessor { +export class CssObjectProcessor extends BaseCssProcessor { + callParam: CallParam; + + constructor(params: [CallParam], ...args: CssTailProcessorParams) { + super(params, ...args); + this.callParam = params[0]; + } + getDependencies(): ExpressionValue[] { - const [, [, ...callParams]] = this.params; - return callParams as ExpressionValue[]; + const [, ...params] = this.callParam; + return params; } build(values: ValueCache): void { - const [, [, ...callParams]] = this.params; + const [, ...callParams] = this.callParam; const { themeArgs, pigmentFeatures: { useLayer = true } = {} } = this .options as TransformedInternalConfig; @@ -250,11 +269,8 @@ class CssObjectProcessor extends BaseCssProcessor { ); let count = 0; const result = processStyleObjects(styles, { - getClassName: (variantName: string | undefined, variantValue: string | undefined) => { - if (!variantName) { - return this.getClassName(); - } - return `${this.getClassName()}-${variantName}-${variantValue}`; + getClassName: (opts?: ClassNameOptions) => { + return this.getClassName(opts); }, getVariableName: () => { count += 1; @@ -267,7 +283,9 @@ class CssObjectProcessor extends BaseCssProcessor { s.forEach((style, index) => { const location = locations[index] ?? locations[0]; const cssText = - layer && useLayer ? `@layer pigment.${layer} {${style.cssText}}` : style.cssText; + layer && useLayer + ? `@layer pigment.${layer} {${this.wrapStyle(style.cssText, '')}}` + : this.wrapStyle(style.cssText, ''); rules[`.${style.className}`] = { className: style.className, cssText, @@ -309,24 +327,6 @@ class CssObjectProcessor extends BaseCssProcessor { addStyles(result.variants, 'variants'); addStyles(result.compoundVariants, 'compoundvariants'); } - - doRuntimeReplacement() { - const baseClasses = this.astService.stringLiteral(this.classNames.join(' ')); - const cssCallId = this.astService.addNamedImport('css', '@pigment-css/core/runtime'); - const [, [, ...callParams]] = this.params; - const args = this.astService.objectExpression([ - this.astService.objectProperty(this.astService.identifier('classes'), baseClasses), - ]); - if (this.variants.length > 0) { - args.properties.push( - this.astService.objectProperty( - this.astService.identifier('variants'), - valueToLiteral(this.variants, callParams[1] as ExpressionValue), - ), - ); - } - this.replacer(this.astService.callExpression(cssCallId, [args]), true); - } } /** @@ -346,34 +346,69 @@ class CssObjectProcessor extends BaseCssProcessor { export class CssProcessor extends BaseProcessor { processor: BaseCssProcessor; - params: Params; + // eslint-disable-next-line class-methods-use-this + wrapStyle(style: string) { + return style; + } + + get asSelector(): string { + return this.processor.getBaseClass(); + } constructor(params: Params, ...args: TailProcessorParams) { super([params[0]], ...args); - this.params = params; validateParams(params, ['callee', '...'], BaseProcessor.SKIP); - if (params.length === 3) { + const wrapStyle = this.wrapStyle.bind(this); + if (params.length === 2) { validateParams( params, - ['callee', 'call', 'template'], + ['callee', ['call', 'template']], `Invalid use of ${this.tagSource.imported} function.`, ); - } else { + const [, callOrTemplate] = params; + if (callOrTemplate[0] === 'template') { + this.processor = new CssTaggedTemplateProcessor( + [callOrTemplate], + this.className, + wrapStyle, + ...args, + ); + } else { + this.processor = new CssObjectProcessor( + [callOrTemplate], + this.className, + wrapStyle, + ...args, + ); + } + } else if (params.length === 3) { validateParams( params, - ['callee', ['call', 'template']], + ['callee', ['call'], ['call', 'template']], `Invalid use of ${this.tagSource.imported} function.`, ); - } - const getClassName = () => this.getBaseClass(); - const [calleeParam, callParams, maybeTemplate] = params; - if (callParams[0] === 'template' || maybeTemplate?.[0] === 'template') { - this.processor = new CssTaggedTemplateProcessor(params, getClassName, ...args); + const [, [, callOpt], callOrTemplate] = params; + if (callOrTemplate[0] === 'template') { + this.processor = new CssTaggedTemplateProcessor( + [callOrTemplate], + this.className, + wrapStyle, + ...args, + ); + } else { + this.processor = new CssObjectProcessor( + [callOrTemplate], + this.className, + wrapStyle, + ...args, + ); + } + this.processor.staticClass = evaluateClassNameArg(callOpt.source) as BaseInterface; } else { - this.processor = new CssObjectProcessor([calleeParam, callParams], getClassName, ...args); + throw new Error('Invalid call to `css` function.'); } this.dependencies.push(...this.processor.getDependencies()); @@ -384,16 +419,8 @@ export class CssProcessor extends BaseProcessor { this.artifacts.push(...this.processor.artifacts); } - getBaseClass(): string { - return this.className; - } - - get asSelector(): string { - return this.getBaseClass(); - } - get value(): Expression { - return this.astService.stringLiteral(this.getBaseClass()); + return this.astService.stringLiteral(this.processor.getBaseClass()); } doEvaltimeReplacement(): void { @@ -402,19 +429,19 @@ export class CssProcessor extends BaseProcessor { doRuntimeReplacement(): void { const t = this.astService; - const options = this.options as TransformedInternalConfig; + const { runtimeReplacementPath } = this.options as TransformedInternalConfig; const baseClasses = t.stringLiteral(this.processor.classNames.join(' ')); const importPath = - options.runtimeReplacementPath?.(this.tagSource.imported, this.tagSource.source) ?? + runtimeReplacementPath?.(this.tagSource.imported, this.tagSource.source) ?? `${process.env.PACKAGE_NAME}/runtime`; const callId = t.addNamedImport('css', importPath); - const [, [, ...callParams]] = this.params; + // const [, [, ...callParams]] = this.params; const args = t.objectExpression([t.objectProperty(t.identifier('classes'), baseClasses)]); if (this.processor.variants.length > 0) { args.properties.push( t.objectProperty( t.identifier('variants'), - valueToLiteral(this.processor.variants, callParams[1] as ExpressionValue), + valueToLiteral(this.processor.variants), // , callParams[1] as ExpressionValue), ), ); } diff --git a/packages/pigment-css-core/src/processors/keyframes.ts b/packages/pigment-css-core/src/processors/keyframes.ts index 9444d829..e657978a 100644 --- a/packages/pigment-css-core/src/processors/keyframes.ts +++ b/packages/pigment-css-core/src/processors/keyframes.ts @@ -10,338 +10,45 @@ * KeyframesProcessor. */ -import { SourceLocation, TemplateElement } from '@babel/types'; -import { - type TransformedInternalConfig, - BaseProcessor, - parseArray, - processStyleObjects, - serializeStyles, - StyleObjectReturn, -} from '@pigment-css/utils'; -import { - type Expression, - type Params, - type TailProcessorParams, - type ValueCache, - validateParams, -} from '@wyw-in-js/processor-utils'; -import { - ExpressionValue, - FunctionValue, - LazyValue, - Replacements, - Rules, - ValueType, -} from '@wyw-in-js/shared'; -import { Primitive, ThemeArgs } from '../base'; -import { BaseCssProcessor } from './css'; +import { Params, TailProcessorParams, validateParams } from '@wyw-in-js/processor-utils'; +import { evaluateClassNameArg } from '@pigment-css/utils'; +import { CssProcessor } from './css'; +import { BaseInterface } from '../css'; export type TemplateCallback = (params: Record | undefined) => string | number; -type GetClassName = () => string; - -abstract class BaseKeyframesProcessor extends BaseCssProcessor { - doEvaltimeReplacement() { - this.replacer(this.astService.stringLiteral(this.getClassName()), false); - } -} - -/** - * Only deals with css`` or css(metadata)`` calls. - */ -class KeyframesTaggedTemplateProcessor extends BaseKeyframesProcessor { - constructor(params: Params, getClassName: GetClassName, ...args: TailProcessorParams) { - super(params, getClassName, ...args); - - const [, callOrTemplate] = this.params; - if (callOrTemplate[0] === 'template') { - this.tempMetaClass = ''; - } - } - - getDependencies(): ExpressionValue[] { - const [, callOrTemplate, template] = this.params; - const deps: ExpressionValue[] = []; - if (callOrTemplate[0] === 'call') { - deps.push(callOrTemplate[1]); - } else if (callOrTemplate[0] === 'template') { - deps.push( - ...callOrTemplate[1].filter( - (arg): arg is ExpressionValue => 'kind' in arg && arg.kind !== ValueType.CONST, - ), - ); - } - if (template?.[0] === 'template') { - deps.push( - ...template[1].filter( - (arg): arg is ExpressionValue => 'kind' in arg && arg.kind !== ValueType.CONST, - ), - ); - } - return deps; - } - - build(values: ValueCache): void { - const { themeArgs, pigmentFeatures: { useLayer = true } = {} } = this - .options as TransformedInternalConfig; - const [, callOrTemplate, template] = this.params; - // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. - const templateStrs: string[] = []; - // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. - templateStrs.raw = []; - const templateExpressions: Primitive[] = []; - const templateParams = (callOrTemplate[0] === 'call' ? template[1] : callOrTemplate[1]) as ( - | ExpressionValue - | TemplateElement - )[]; - templateParams.forEach((param) => { - if ('kind' in param) { - switch (param.kind) { - case ValueType.FUNCTION: { - const value = values.get(param.ex.name) as TemplateCallback; - templateExpressions.push(value(themeArgs)); - break; - } - case ValueType.CONST: { - templateExpressions.push(param.value); - break; - } - case ValueType.LAZY: { - const evaluatedValue = values.get(param.ex.name); - if (typeof evaluatedValue === 'function') { - templateExpressions.push(evaluatedValue(themeArgs)); - } else { - templateExpressions.push(evaluatedValue as Primitive); - } - break; - } - default: - break; - } - } else if ('type' in param && param.type === 'TemplateElement') { - templateStrs.push(param.value.cooked as string); - // @ts-ignore - templateStrs.raw.push(param.value.raw); - } - }); - const { styles } = serializeStyles( - templateExpressions.length > 0 ? [templateStrs, ...templateExpressions] : [templateStrs], - ); - const keyframe = `@keyframes ${this.getClassName()} {${styles}}`; - - const cssText = useLayer ? `@layer pigment.base{${keyframe}}` : keyframe; - const className = this.getClassName(); - const rules: Rules = { - [`.${className}`]: { - className, - cssText, - displayName: this.displayName, - start: this.location?.start ?? null, - }, - }; - const location = this.location; - const sourceMapReplacements: Replacements = [ - { - length: cssText.length, - original: { - start: { - column: location?.start.column ?? 0, - line: location?.start.line ?? 0, - }, - end: { - column: location?.end.column ?? 0, - line: location?.end.line ?? 0, - }, - }, - }, - ]; - this.classNames.push(className); - this.artifacts.push(['css', [rules, sourceMapReplacements]]); - } -} - /** - * Only deals with css(...styleObjects) or or css(styleObject) css(metadata, [...styleObjects]) calls. + * Scoped keyframes class generation. */ -class KeyframesObjectProcessor extends BaseKeyframesProcessor { - variants: { $$cls: string; props: Record }[] = []; - - getDependencies(): ExpressionValue[] { - const [, [, ...callParams]] = this.params; - return callParams as ExpressionValue[]; - } - - build(values: ValueCache): void { - const [, [, ...callParams]] = this.params; - const { themeArgs, pigmentFeatures: { useLayer = true } = {} } = this - .options as TransformedInternalConfig; +export class KeyframesProcessor extends CssProcessor { + private staticClass: BaseInterface | null = null; - const evaluatedValues = (callParams as (LazyValue | FunctionValue)[]).map((param) => - values.get(param.ex.name), - ); - let stylesList: (object | Function)[]; - // let metadata: any; - // check for css(metadata, [styles]) or css(metadata, style) call - const locations: (SourceLocation | null | undefined)[] = []; - if ( - evaluatedValues.length === 2 && - evaluatedValues[0] && - typeof evaluatedValues[0] === 'object' && - 'className' in evaluatedValues[0] - ) { - // metadata = evaluatedValues[0]; - const param = callParams[1] as LazyValue | FunctionValue; - if (Array.isArray(evaluatedValues[1])) { - stylesList = evaluatedValues[1]; - // Parse the expression AST to track the exact locations of each parameter - const arrayItemsAst = parseArray((callParams[1] as ExpressionValue).source, { - startLine: param.ex.loc?.start.line, - startIndex: param.ex.loc?.start.index, - startColumn: param.ex.loc?.start.column, - }); - if (arrayItemsAst) { - locations.push(...arrayItemsAst.elements.map((item) => item?.loc)); - } - } else { - stylesList = [evaluatedValues[1] as (typeof stylesList)[number]]; - locations.push((callParams[1] as unknown as ExpressionValue).ex.loc); + getClassName() { + if (this.staticClass?.className) { + if (typeof this.staticClass.className === 'string') { + return this.staticClass.className; } - } else { - // This is for css(...styles) call - stylesList = evaluatedValues as typeof stylesList; - locations.push(...(callParams as ExpressionValue[]).map((p) => p.ex.loc)); + return this.staticClass.className(); } - - const styles = stylesList.map((item) => - typeof item === 'function' ? item(themeArgs as unknown as ThemeArgs) : item, - ); - let count = 0; - const result = processStyleObjects(styles, { - getClassName: (variantName: string | undefined, variantValue: string | undefined) => { - if (!variantName) { - return this.getClassName(); - } - return `${this.getClassName()}-${variantName}-${variantValue}`; - }, - getVariableName: () => { - count += 1; - return `${this.getClassName()}-${count}`; - }, - }); - - const addStyles = (s: StyleObjectReturn[], layer?: string) => { - const rules: Rules = {}; - s.forEach((style, index) => { - const location = locations[index] ?? locations[0]; - const keyframe = `@keyframes ${this.getClassName()} {${style.cssText}}`; - const cssText = layer && useLayer ? `@layer pigment.${layer} {${keyframe}}` : keyframe; - rules[`.${style.className}`] = { - className: style.className, - cssText, - displayName: this.displayName, - start: location?.start ?? null, - }; - - const sourceMapReplacements: Replacements = - layer === 'base' - ? [ - { - length: cssText.length, - original: { - start: { - column: location?.start.column ?? 0, - line: location?.start.line ?? 0, - }, - end: { - column: location?.end.column ?? 0, - line: location?.end.line ?? 0, - }, - }, - }, - ] - : []; - - if (Object.keys(style.serializables).length > 0) { - this.variants.push({ - $$cls: style.className, - props: style.serializables, - }); - } - - this.artifacts.push(['css', [rules, sourceMapReplacements]]); - }); - }; - this.classNames.push(...result.base.map((item) => item.className)); - addStyles(result.base, 'base'); + return this.className; } -} - -/** - * Scoped css class generation similar to css from emotion. - * - * @example - * ```ts - * import { css } from '@pigment-css/react'; - * - * const class1 = css(({theme}) => ({ - * color: (theme.vars || theme).palette.primary.main, - * })) - * ``` - * - * - */ -export class KeyframesProcessor extends BaseProcessor { - processor: BaseKeyframesProcessor; constructor(params: Params, ...args: TailProcessorParams) { - super([params[0]], ...args); - validateParams(params, ['callee', '...'], BaseProcessor.SKIP); + super(params, ...args); if (params.length === 3) { validateParams( params, - ['callee', 'call', 'template'], - `Invalid use of ${this.tagSource.imported} function.`, - ); - } else { - validateParams( - params, - ['callee', ['call', 'template']], - `Invalid use of ${this.tagSource.imported} function.`, - ); - } - - const getClassName = () => this.getBaseClass(); - const [calleeParam, callParams, maybeTemplate] = params; - if (callParams[0] === 'template' || maybeTemplate?.[0] === 'template') { - this.processor = new KeyframesTaggedTemplateProcessor(params, getClassName, ...args); - } else { - this.processor = new KeyframesObjectProcessor( - [calleeParam, callParams], - getClassName, - ...args, + ['callee', ['call'], ['call', 'template']], + `Invalid usage of ${this.tagSource.imported}.`, ); + const [, [, callOpt]] = params; + this.staticClass = evaluateClassNameArg(callOpt.source) as BaseInterface; } - - this.dependencies.push(...this.processor.getDependencies()); - } - - build(values: ValueCache) { - this.processor.build(values); - this.artifacts.push(...this.processor.artifacts); - } - - getBaseClass(): string { - return this.className; - } - - get asSelector(): string { - return this.getBaseClass(); } - get value(): Expression { - return this.astService.stringLiteral(this.getBaseClass()); + wrapStyle(style: string): string { + return `@keyframes ${this.getClassName()} {${style}}`; } doEvaltimeReplacement(): void { @@ -349,6 +56,6 @@ export class KeyframesProcessor extends BaseProcessor { } doRuntimeReplacement(): void { - this.processor.doRuntimeReplacement(); + this.doEvaltimeReplacement(); } } diff --git a/packages/pigment-css-core/tests/css/css.spec.ts b/packages/pigment-css-core/tests/css/css.spec.ts index 4754e75e..8a2c52d2 100644 --- a/packages/pigment-css-core/tests/css/css.spec.ts +++ b/packages/pigment-css-core/tests/css/css.spec.ts @@ -21,36 +21,30 @@ const cls2 = css(({ theme }) => ({ border: `1px solid ${t('$palette.main')}`, })); -const cls2WithMetadata = css( - { - className: 'Test1', - }, +const cls2WithMetadata = css({ + className: 'Test1', +})(({ theme }) => ({ + color: '$palette.main', + // @ts-expect-error main1 does not exists in theme.palette + backgroundColor: theme.palette.main1, + border: `1px solid ${t('$palette.main')}`, +})); + +export const cls3WithMetadata = css({ + className: 'Test1', +})( + ({ theme }) => ({ + color: '$palette.main', + // @ts-expect-error main1 does not exists in theme.palette + backgroundColor: theme.palette.main1, + border: `1px solid ${t('$palette.main')}`, + }), ({ theme }) => ({ color: '$palette.main', // @ts-expect-error main1 does not exists in theme.palette backgroundColor: theme.palette.main1, border: `1px solid ${t('$palette.main')}`, }), -); - -export const cls3WithMetadata = css( - { - className: 'Test1', - }, - [ - ({ theme }) => ({ - color: '$palette.main', - // @ts-expect-error main1 does not exists in theme.palette - backgroundColor: theme.palette.main1, - border: `1px solid ${t('$palette.main')}`, - }), - ({ theme }) => ({ - color: '$palette.main', - // @ts-expect-error main1 does not exists in theme.palette - backgroundColor: theme.palette.main1, - border: `1px solid ${t('$palette.main')}`, - }), - ], ); const cls3 = css` diff --git a/packages/pigment-css-core/tests/css/fixtures/css.input.js b/packages/pigment-css-core/tests/css/fixtures/css.input.js index e72023ac..f147ec75 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.input.js +++ b/packages/pigment-css-core/tests/css/fixtures/css.input.js @@ -39,7 +39,7 @@ export const cls3 = css({ background-color: ${ab}; `; -export const cls4 = css({ className: 'Test-class2' }, [ +export const cls4 = css({ className: 'Test-class2' })( { $$flex: 41, $$testVar: 'red', @@ -82,9 +82,9 @@ export const cls4 = css({ className: 'Test-class2' }, [ font-size: 1rem; background-color: ${ab}; `, -]); +); -export const cls5 = css({ className: 'Test-class3' }, ({ theme }) => ({ +export const cls5 = css({ className: 'Test-class3' })(({ theme }) => ({ $$flex: 51, $$testVar: 'red', backgroundColor: '$$testVar', diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.css b/packages/pigment-css-core/tests/css/fixtures/css.output.css index 4c2ec2ed..363eb0bf 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.output.css +++ b/packages/pigment-css-core/tests/css/fixtures/css.output.css @@ -2,19 +2,19 @@ @layer pigment.base{.cx3ztpe{---flex:1;color:red;font-size:3rem;animation-name:gqvc3we;background-color:aliceblue;}} @layer pigment.base{.c1aq99o6{---flex:21;---testVar:red;border:1px solid var(---testVar);}} @layer pigment.base{.c1aq99o6-1{---flex:22;---testVar1:red;border:1px solid var(---testVar1);}} -@layer pigment.base{.cuccxpq{---flex:3;color:red;font-size:3rem;background-color:aliceblue;}} -@layer pigment.base{.c1v5vhpp{---flex:41;---testVar:red;background-color:var(---testVar);border:1px solid var(--palette-primary-main);}} -@layer pigment.base{.c1v5vhpp-1{---flex:42;color:red;font-size:3rem;background-color:aliceblue;}} -@layer pigment.base{.c1v5vhpp-2{---flex:43;color:red;font-size:3rem;background-color:aliceblue;}} -@layer pigment.base{.c1v5vhpp-3{---flex:44;color:red;font-size:1rem;background-color:aliceblue;}} -@layer pigment.variants{.c1v5vhpp-size-small-1{---flex:421;padding:0;margin:0;border-color:red;}} -@layer pigment.variants{.c1v5vhpp-size-medium-1{---flex:422;padding:5px;}} -@layer pigment.variants{.c1v5vhpp-size-large-1{---flex:423;padding:10px;}} -@layer pigment.base{.c1vz5z87{---flex:51;---testVar:red;background-color:var(---testVar);border:1px solid var(--palette-primary-main);}} -@layer pigment.variants{.c1vz5z87-size-small{---flex:52;padding:0;margin:0;border-color:red;}} -@layer pigment.variants{.c1vz5z87-size-medium{---flex:53;padding:5px;}} -@layer pigment.variants{.c1vz5z87-size-large{---flex:54;padding:10px;}} -@layer pigment.variants{.c1vz5z87-color-primary{---flex:55;color:green;}} -@layer pigment.variants{.c1vz5z87-color-secondary{---flex:56;color:blue;}} -@layer pigment.compoundvariants{.c1vz5z87-cv{border-radius:100%;}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmdxdmMzd2UiLCIuY3gzenRwZSIsIi5jMWFxOTlvNiIsIi5jMWFxOTlvNi0xIiwiLmN1Y2N4cHEiLCIuYzF2NXZocHAiLCIuYzF2NXZocHAtMSIsIi5jMXY1dmhwcC0yIiwiLmMxdjV2aHBwLTMiLCIuYzF2NXZocHAtc2l6ZS1zbWFsbC0xIiwiLmMxdjV2aHBwLXNpemUtbWVkaXVtLTEiLCIuYzF2NXZocHAtc2l6ZS1sYXJnZS0xIiwiLmMxdno1ejg3IiwiLmMxdno1ejg3LXNpemUtc21hbGwiLCIuYzF2ejV6ODctc2l6ZS1tZWRpdW0iLCIuYzF2ejV6ODctc2l6ZS1sYXJnZSIsIi5jMXZ6NXo4Ny1jb2xvci1wcmltYXJ5IiwiLmMxdno1ejg3LWNvbG9yLXNlY29uZGFyeSIsIi5jMXZ6NXo4Ny1jdiJdLCJtYXBwaW5ncyI6IkFBS21DQTtBQU1mQztBQVNsQkM7QUFLQUM7QUFPa0JDO0FBVWxCQztBQU1BQztBQXdCQUM7QUFNQUM7QUFwQ0FDO0FBTUFDO0FBd0JBQztBQWNvREM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUMiLCJmaWxlIjoiL1VzZXJzL2JyaWplc2gvcHJvamVjdHMvbXVpL3BpZ21lbnQtY3NzL3BhY2thZ2VzL3BpZ21lbnQtY3NzLWNvcmUvdGVzdHMvY3NzL2ZpeHR1cmVzL2Nzcy5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9jb3JlJztcbmltcG9ydCB7IHQgfSBmcm9tICdAcGlnbWVudC1jc3MvdGhlbWUnO1xuXG5jb25zdCBhYiA9ICdhbGljZWJsdWUnO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogJ2dyZWVuJyxcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IGNsczEgPSBjc3NgXG4gIC0tLWZsZXg6IDE7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGFuaW1hdGlvbi1uYW1lOiAke2dyYWRpZW50S2V5ZnJhbWV9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbmA7XG5cbmV4cG9ydCBjb25zdCBjbHMyID0gY3NzKFxuICB7XG4gICAgJCRmbGV4OiAyMSxcbiAgICAkJHRlc3RWYXI6ICdyZWQnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAkJHRlc3RWYXInLFxuICB9LFxuICB7XG4gICAgJCRmbGV4OiAyMixcbiAgICAkJHRlc3RWYXIxOiAncmVkJyxcbiAgICBib3JkZXI6ICcxcHggc29saWQgJCR0ZXN0VmFyMScsXG4gIH0sXG4pO1xuXG5leHBvcnQgY29uc3QgY2xzMyA9IGNzcyh7XG4gIGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MnLFxufSlgXG4gIC0tLWZsZXg6IDM7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGNsczQgPSBjc3MoeyBjbGFzc05hbWU6ICdUZXN0LWNsYXNzMicgfSwgW1xuICB7XG4gICAgJCRmbGV4OiA0MSxcbiAgICAkJHRlc3RWYXI6ICdyZWQnLFxuICAgIGJhY2tncm91bmRDb2xvcjogJyQkdGVzdFZhcicsXG4gICAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUucHJpbWFyeS5tYWluJyl9YCxcbiAgfSxcbiAgKHsgdGhlbWUgfSkgPT4gKHtcbiAgICAkJGZsZXg6IDQyLFxuICAgIGNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgICBmb250U2l6ZTogdGhlbWUuc2l6ZS5mb250LmgxLFxuICAgIGJhY2tncm91bmRDb2xvcjogYWIsXG4gICAgdmFyaWFudHM6IHtcbiAgICAgIHNpemU6IHtcbiAgICAgICAgc21hbGw6IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMSxcbiAgICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICAgIG1hcmdpbjogMCxcbiAgICAgICAgICBib3JkZXJDb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgICAgIH0sXG4gICAgICAgIG1lZGl1bToge1xuICAgICAgICAgICQkZmxleDogNDIyLFxuICAgICAgICAgIHBhZGRpbmc6IDUsXG4gICAgICAgIH0sXG4gICAgICAgIGxhcmdlOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjMsXG4gICAgICAgICAgcGFkZGluZzogMTAsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH0sXG4gIH0pLFxuICAoeyB0aGVtZSB9KSA9PiBgXG4gICAgLS0tZmxleDogNDM7XG4gICAgY29sb3I6ICR7dGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5zaXplLmZvbnQuaDF9O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuICBgLFxuICBgXG4gICAgLS0tZmxleDogNDQ7XG4gICAgY29sb3I6IHJlZDtcbiAgICBmb250LXNpemU6IDFyZW07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG4gIGAsXG5dKTtcblxuZXhwb3J0IGNvbnN0IGNsczUgPSBjc3MoeyBjbGFzc05hbWU6ICdUZXN0LWNsYXNzMycgfSwgKHsgdGhlbWUgfSkgPT4gKHtcbiAgJCRmbGV4OiA1MSxcbiAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgYmFja2dyb3VuZENvbG9yOiAnJCR0ZXN0VmFyJyxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUucHJpbWFyeS5tYWluJyl9YCxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGZsZXg6IDUyLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRmbGV4OiA1MyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGZsZXg6IDU0LFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBjb2xvcjoge1xuICAgICAgcHJpbWFyeToge1xuICAgICAgICAkJGZsZXg6IDU1LFxuICAgICAgICBjb2xvcjogJ2dyZWVuJyxcbiAgICAgIH0sXG4gICAgICBzZWNvbmRhcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NixcbiAgICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgY29tcG91bmRWYXJpYW50czogW1xuICAgIHtcbiAgICAgIHNpemU6ICdzbWFsbCcsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSkpO1xuIl19*/ \ No newline at end of file +@layer pigment.base{.Test-class{---flex:3;color:red;font-size:3rem;background-color:aliceblue;}} +@layer pigment.base{.Test-class2{---flex:41;---testVar:red;background-color:var(---testVar);border:1px solid var(--palette-primary-main);}} +@layer pigment.base{.Test-class2-1{---flex:42;color:red;font-size:3rem;background-color:aliceblue;}} +@layer pigment.base{.Test-class2-2{---flex:43;color:red;font-size:3rem;background-color:aliceblue;}} +@layer pigment.base{.Test-class2-3{---flex:44;color:red;font-size:1rem;background-color:aliceblue;}} +@layer pigment.variants{.Test-class2-size-small-1{---flex:421;padding:0;margin:0;border-color:red;}} +@layer pigment.variants{.Test-class2-size-medium-1{---flex:422;padding:5px;}} +@layer pigment.variants{.Test-class2-size-large-1{---flex:423;padding:10px;}} +@layer pigment.base{.Test-class3{---flex:51;---testVar:red;background-color:var(---testVar);border:1px solid var(--palette-primary-main);}} +@layer pigment.variants{.Test-class3-size-small{---flex:52;padding:0;margin:0;border-color:red;}} +@layer pigment.variants{.Test-class3-size-medium{---flex:53;padding:5px;}} +@layer pigment.variants{.Test-class3-size-large{---flex:54;padding:10px;}} +@layer pigment.variants{.Test-class3-color-primary{---flex:55;color:green;}} +@layer pigment.variants{.Test-class3-color-secondary{---flex:56;color:blue;}} +@layer pigment.compoundvariants{.Test-class3-cv{border-radius:100%;}} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmdxdmMzd2UiLCIuY3gzenRwZSIsIi5jMWFxOTlvNiIsIi5jMWFxOTlvNi0xIiwiLlRlc3QtY2xhc3MiLCIuVGVzdC1jbGFzczIiLCIuVGVzdC1jbGFzczItMSIsIi5UZXN0LWNsYXNzMi0yIiwiLlRlc3QtY2xhc3MyLTMiLCIuVGVzdC1jbGFzczItc2l6ZS1zbWFsbC0xIiwiLlRlc3QtY2xhc3MyLXNpemUtbWVkaXVtLTEiLCIuVGVzdC1jbGFzczItc2l6ZS1sYXJnZS0xIiwiLlRlc3QtY2xhc3MzIiwiLlRlc3QtY2xhc3MzLXNpemUtc21hbGwiLCIuVGVzdC1jbGFzczMtc2l6ZS1tZWRpdW0iLCIuVGVzdC1jbGFzczMtc2l6ZS1sYXJnZSIsIi5UZXN0LWNsYXNzMy1jb2xvci1wcmltYXJ5IiwiLlRlc3QtY2xhc3MzLWNvbG9yLXNlY29uZGFyeSIsIi5UZXN0LWNsYXNzMy1jdiJdLCJtYXBwaW5ncyI6IkFBS21DQTtBQU1mQztBQVNsQkM7QUFLQUM7QUFPa0JDO0FBVWxCQztBQU1BQztBQXdCQUM7QUFNQUM7QUFwQ0FDO0FBTUFDO0FBd0JBQztBQWNvREM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUMiLCJmaWxlIjoiL1VzZXJzL2JyaWplc2gvcHJvamVjdHMvbXVpL3BpZ21lbnQtY3NzL3BhY2thZ2VzL3BpZ21lbnQtY3NzLWNvcmUvdGVzdHMvY3NzL2ZpeHR1cmVzL2Nzcy5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9jb3JlJztcbmltcG9ydCB7IHQgfSBmcm9tICdAcGlnbWVudC1jc3MvdGhlbWUnO1xuXG5jb25zdCBhYiA9ICdhbGljZWJsdWUnO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogJ2dyZWVuJyxcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IGNsczEgPSBjc3NgXG4gIC0tLWZsZXg6IDE7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGFuaW1hdGlvbi1uYW1lOiAke2dyYWRpZW50S2V5ZnJhbWV9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbmA7XG5cbmV4cG9ydCBjb25zdCBjbHMyID0gY3NzKFxuICB7XG4gICAgJCRmbGV4OiAyMSxcbiAgICAkJHRlc3RWYXI6ICdyZWQnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAkJHRlc3RWYXInLFxuICB9LFxuICB7XG4gICAgJCRmbGV4OiAyMixcbiAgICAkJHRlc3RWYXIxOiAncmVkJyxcbiAgICBib3JkZXI6ICcxcHggc29saWQgJCR0ZXN0VmFyMScsXG4gIH0sXG4pO1xuXG5leHBvcnQgY29uc3QgY2xzMyA9IGNzcyh7XG4gIGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MnLFxufSlgXG4gIC0tLWZsZXg6IDM7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGNsczQgPSBjc3MoeyBjbGFzc05hbWU6ICdUZXN0LWNsYXNzMicgfSkoXG4gIHtcbiAgICAkJGZsZXg6IDQxLFxuICAgICQkdGVzdFZhcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZENvbG9yOiAnJCR0ZXN0VmFyJyxcbiAgICBib3JkZXI6IGAxcHggc29saWQgJHt0KCckcGFsZXR0ZS5wcmltYXJ5Lm1haW4nKX1gLFxuICB9LFxuICAoeyB0aGVtZSB9KSA9PiAoe1xuICAgICQkZmxleDogNDIsXG4gICAgY29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgIGZvbnRTaXplOiB0aGVtZS5zaXplLmZvbnQuaDEsXG4gICAgYmFja2dyb3VuZENvbG9yOiBhYixcbiAgICB2YXJpYW50czoge1xuICAgICAgc2l6ZToge1xuICAgICAgICBzbWFsbDoge1xuICAgICAgICAgICQkZmxleDogNDIxLFxuICAgICAgICAgIHBhZGRpbmc6IDAsXG4gICAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgICAgICAgfSxcbiAgICAgICAgbWVkaXVtOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjIsXG4gICAgICAgICAgcGFkZGluZzogNSxcbiAgICAgICAgfSxcbiAgICAgICAgbGFyZ2U6IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMyxcbiAgICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSksXG4gICh7IHRoZW1lIH0pID0+IGBcbiAgICAtLS1mbGV4OiA0MztcbiAgICBjb2xvcjogJHt0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbn07XG4gICAgZm9udC1zaXplOiAke3RoZW1lLnNpemUuZm9udC5oMX07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG4gIGAsXG4gIGBcbiAgICAtLS1mbGV4OiA0NDtcbiAgICBjb2xvcjogcmVkO1xuICAgIGZvbnQtc2l6ZTogMXJlbTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbiAgYCxcbik7XG5cbmV4cG9ydCBjb25zdCBjbHM1ID0gY3NzKHsgY2xhc3NOYW1lOiAnVGVzdC1jbGFzczMnIH0pKCh7IHRoZW1lIH0pID0+ICh7XG4gICQkZmxleDogNTEsXG4gICQkdGVzdFZhcjogJ3JlZCcsXG4gIGJhY2tncm91bmRDb2xvcjogJyQkdGVzdFZhcicsXG4gIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIHZhcmlhbnRzOiB7XG4gICAgc2l6ZToge1xuICAgICAgc21hbGw6IHtcbiAgICAgICAgJCRmbGV4OiA1MixcbiAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICBib3JkZXJDb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgICB9LFxuICAgICAgbWVkaXVtOiB7XG4gICAgICAgICQkZmxleDogNTMsXG4gICAgICAgIHBhZGRpbmc6IDUsXG4gICAgICB9LFxuICAgICAgbGFyZ2U6IHtcbiAgICAgICAgJCRmbGV4OiA1NCxcbiAgICAgICAgcGFkZGluZzogMTAsXG4gICAgICB9LFxuICAgIH0sXG4gICAgY29sb3I6IHtcbiAgICAgIHByaW1hcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NSxcbiAgICAgICAgY29sb3I6ICdncmVlbicsXG4gICAgICB9LFxuICAgICAgc2Vjb25kYXJ5OiB7XG4gICAgICAgICQkZmxleDogNTYsXG4gICAgICAgIGNvbG9yOiAnYmx1ZScsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG4gIGNvbXBvdW5kVmFyaWFudHM6IFtcbiAgICB7XG4gICAgICBzaXplOiAnc21hbGwnLFxuICAgICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICAgIGNzczoge1xuICAgICAgICBib3JkZXJSYWRpdXM6ICcxMDAlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgXSxcbn0pKTtcbiJdfQ==*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.js b/packages/pigment-css-core/tests/css/fixtures/css.output.js index 09e12d8d..3d17e525 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.output.js +++ b/packages/pigment-css-core/tests/css/fixtures/css.output.js @@ -12,25 +12,25 @@ export const cls2 = /*#__PURE__*/ _css2({ classes: 'c1aq99o6 c1aq99o6-1', }); export const cls3 = /*#__PURE__*/ _css3({ - classes: 'cuccxpq', + classes: 'Test-class', }); export const cls4 = /*#__PURE__*/ _css4({ - classes: 'c1v5vhpp c1v5vhpp-1 c1v5vhpp-2 c1v5vhpp-3', + classes: 'Test-class2 Test-class2-1 Test-class2-2 Test-class2-3', variants: [ { - $$cls: 'c1v5vhpp-size-small-1', + $$cls: 'Test-class2-size-small-1', props: { size: 'small', }, }, { - $$cls: 'c1v5vhpp-size-medium-1', + $$cls: 'Test-class2-size-medium-1', props: { size: 'medium', }, }, { - $$cls: 'c1v5vhpp-size-large-1', + $$cls: 'Test-class2-size-large-1', props: { size: 'large', }, @@ -38,40 +38,40 @@ export const cls4 = /*#__PURE__*/ _css4({ ], }); export const cls5 = /*#__PURE__*/ _css5({ - classes: 'c1vz5z87', + classes: 'Test-class3', variants: [ { - $$cls: 'c1vz5z87-size-small', + $$cls: 'Test-class3-size-small', props: { size: 'small', }, }, { - $$cls: 'c1vz5z87-size-medium', + $$cls: 'Test-class3-size-medium', props: { size: 'medium', }, }, { - $$cls: 'c1vz5z87-size-large', + $$cls: 'Test-class3-size-large', props: { size: 'large', }, }, { - $$cls: 'c1vz5z87-color-primary', + $$cls: 'Test-class3-color-primary', props: { color: 'primary', }, }, { - $$cls: 'c1vz5z87-color-secondary', + $$cls: 'Test-class3-color-secondary', props: { color: 'secondary', }, }, { - $$cls: 'c1vz5z87-cv', + $$cls: 'Test-class3-cv', props: { size: 'small', color: 'primary', diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css index b8880f1e..204ddee1 100644 --- a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css @@ -2,6 +2,6 @@ @layer pigment.base{@keyframes gt2fuab{0%{background:red;}50%{background:green;}100%{background:blue;}}} @layer pigment.base{@keyframes g1611ti3{0%{background:red;}50%{background:green;}100%{background:blue;}}} @layer pigment.base{@keyframes k1gqc21d{50%{background:green;}100%{background:blue;}}} -@layer pigment.base{@keyframes k1tlnvmz{50%{background:green;}}} +@layer pigment.base{@keyframes loop{50%{background:green;}}} @layer pigment.base{@keyframes k1jjo2js{50%{background:green;}}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMtdGhlbWUuaW5wdXQuanMiXSwibmFtZXMiOlsiLmc1Zzk1bmQiLCIuZ3QyZnVhYiIsIi5nMTYxMXRpMyIsIi5rMWdxYzIxZCIsIi5rMXRsbnZteiIsIi5rMWpqbzJqcyJdLCJtYXBwaW5ncyI6IkFBSW1DQTtBQVlUQztBQTBCV0M7QUFHeEJDO0FBaUJBQztBQWdCWEMiLCJmaWxlIjoiL1VzZXJzL2JyaWplc2gvcHJvamVjdHMvbXVpL3BpZ21lbnQtY3NzL3BhY2thZ2VzL3BpZ21lbnQtY3NzLWNvcmUvdGVzdHMva2V5ZnJhbWVzL2ZpeHR1cmVzL2tleWZyYW1lcy10aGVtZS5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAcGlnbWVudC1jc3MvY29yZSc7XG5cbmNvbnN0IGdyZWVuID0gJ2dyZWVuJztcblxuY29uc3QgZ3JhZGllbnRLZXlmcmFtZSA9IGtleWZyYW1lcygoeyB0aGVtZSB9KSA9PiAoe1xuICAnMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gIH0sXG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW4sXG4gIH0sXG4gICcxMDAlJzoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLnBhbGV0dGUuc2Vjb25kYXJ5Lm1haW4sXG4gIH0sXG59KSk7XG5cbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUyID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbn07XG4gIH1cblxuICA1MCUge1xuICAgIGJhY2tncm91bmQ6ICR7Z3JlZW59O1xuICB9XG5cbiAgMTAwJSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLnNlY29uZGFyeS5tYWlufTtcbiAgfVxuYDtcblxuLy8gc2ltdWxhdGUgQ3NzQmFzZWxpbmUgdHJhbnNwaWxlZCBieSBOZXh0LmpzXG5leHBvcnQgY29uc3Qgc3R5bGVzID0gKHRoZW1lKSA9PiAoe1xuICAnMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gIH0sXG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW4sXG4gIH0sXG4gICcxMDAlJzoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLnBhbGV0dGUuc2Vjb25kYXJ5Lm1haW4sXG4gIH0sXG59KTtcbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUzID0ga2V5ZnJhbWVzKChfYyA9ICh7IHRoZW1lIH0pID0+IHN0eWxlcyh0aGVtZSkpKTtcbnZhciBfYztcblxuY29uc3Qga2V5MSA9IGtleWZyYW1lc2BcbiAgMCUge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5tYWlufTtcbiAgfVxuXG4gIDUwJSB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cblxuICAxMDAlIHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHtcbiAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3Igc2Vjb25kYXJ5IGRvZXMgbm90IGV4aXN0IG9uIHRoZW1lLlxuICAgICAgcmV0dXJuIHRoZW1lLnBhbGV0dGUuc2Vjb25kYXJ5Lm1haW47XG4gICAgfX07XG4gIH1cbmA7XG5cbmNvbnN0IGtleTIgPSBrZXlmcmFtZXMoe1xuICBjbGFzc05hbWU6ICdsb29wJyxcbn0pYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLm1haW59O1xuICB9XG5cbiAgNTAlIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuYDtcblxuY29uc3Qga2V5MyA9IGtleWZyYW1lcyhcbiAge1xuICAgIGNsYXNzTmFtZTogJ2xvb3AxJyxcbiAgfSxcbiAgKHsgdGhlbWUgfSkgPT4gKHtcbiAgICAnMCUnOiB7XG4gICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5wYWxldHRlLm1haW4sXG4gICAgfSxcbiAgICAnNTAlJzoge1xuICAgICAgYmFja2dyb3VuZDogJ2dyZWVuJyxcbiAgICB9LFxuICB9KSxcbik7XG4iXX0=*/ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMtdGhlbWUuaW5wdXQuanMiXSwibmFtZXMiOlsiLmc1Zzk1bmQiLCIuZ3QyZnVhYiIsIi5nMTYxMXRpMyIsIi5rMWdxYzIxZCIsIi5sb29wIiwiLmsxampvMmpzIl0sIm1hcHBpbmdzIjoiQUFJbUNBO0FBWVRDO0FBMEJXQztBQUd4QkM7QUFpQkFDO0FBZ0JYQyIsImZpbGUiOiIvVXNlcnMvYnJpamVzaC9wcm9qZWN0cy9tdWkvcGlnbWVudC1jc3MvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9rZXlmcmFtZXMvZml4dHVyZXMva2V5ZnJhbWVzLXRoZW1lLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9jb3JlJztcblxuY29uc3QgZ3JlZW4gPSAnZ3JlZW4nO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICcwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgfSxcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbixcbiAgfSxcbiAgJzEwMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5zZWNvbmRhcnkubWFpbixcbiAgfSxcbn0pKTtcblxuY29uc3QgZ3JhZGllbnRLZXlmcmFtZTIgPSBrZXlmcmFtZXNgXG4gIDAlIHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgfVxuXG4gIDUwJSB7XG4gICAgYmFja2dyb3VuZDogJHtncmVlbn07XG4gIH1cblxuICAxMDAlIHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUuc2Vjb25kYXJ5Lm1haW59O1xuICB9XG5gO1xuXG4vLyBzaW11bGF0ZSBDc3NCYXNlbGluZSB0cmFuc3BpbGVkIGJ5IE5leHQuanNcbmV4cG9ydCBjb25zdCBzdHlsZXMgPSAodGhlbWUpID0+ICh7XG4gICcwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgfSxcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbixcbiAgfSxcbiAgJzEwMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5zZWNvbmRhcnkubWFpbixcbiAgfSxcbn0pO1xuY29uc3QgZ3JhZGllbnRLZXlmcmFtZTMgPSBrZXlmcmFtZXMoKF9jID0gKHsgdGhlbWUgfSkgPT4gc3R5bGVzKHRoZW1lKSkpO1xudmFyIF9jO1xuXG5jb25zdCBrZXkxID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLm1haW59O1xuICB9XG5cbiAgNTAlIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuXG4gIDEwMCUge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4ge1xuICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvciBzZWNvbmRhcnkgZG9lcyBub3QgZXhpc3Qgb24gdGhlbWUuXG4gICAgICByZXR1cm4gdGhlbWUucGFsZXR0ZS5zZWNvbmRhcnkubWFpbjtcbiAgICB9fTtcbiAgfVxuYDtcblxuY29uc3Qga2V5MiA9IGtleWZyYW1lcyh7XG4gIGNsYXNzTmFtZTogJ2xvb3AnLFxufSlgXG4gIDAlIHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUubWFpbn07XG4gIH1cblxuICA1MCUge1xuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICB9XG5gO1xuXG5jb25zdCBrZXkzID0ga2V5ZnJhbWVzKFxuICB7XG4gICAgY2xhc3NOYW1lOiAnbG9vcDEnLFxuICB9LFxuICAoeyB0aGVtZSB9KSA9PiAoe1xuICAgICcwJSc6IHtcbiAgICAgIGJhY2tncm91bmQ6IHRoZW1lLnBhbGV0dGUubWFpbixcbiAgICB9LFxuICAgICc1MCUnOiB7XG4gICAgICBiYWNrZ3JvdW5kOiAnZ3JlZW4nLFxuICAgIH0sXG4gIH0pLFxuKTtcbiJdfQ==*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.js b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.js index bddb81ed..6ed019e4 100644 --- a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.js +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.js @@ -17,5 +17,5 @@ export const styles = (theme) => ({ const gradientKeyframe3 = 'g1611ti3'; var _c; const key1 = 'k1gqc21d'; -const key2 = 'k1tlnvmz'; +const key2 = 'loop'; const key3 = 'k1jjo2js'; diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.input.js b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.input.js index 7f7332a8..bf6abf07 100644 --- a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.input.js +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.input.js @@ -9,7 +9,7 @@ const rotateKeyframe = keyframes({ }, }); -const rotateKeyframe2 = keyframes` +const rotateKeyframe2 = keyframes({ className: 'rotate' })` from { transform: rotate(360deg); } diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css index 3848962a..657e080d 100644 --- a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css @@ -1,3 +1,3 @@ @layer pigment.base{@keyframes rrtfw11{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}} -@layer pigment.base{@keyframes rw2yxe7{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMuaW5wdXQuanMiXSwibmFtZXMiOlsiLnJydGZ3MTEiLCIucncyeXhlNyJdLCJtYXBwaW5ncyI6IkFBRWlDQTtBQVNUQyIsImZpbGUiOiIvVXNlcnMvYnJpamVzaC9wcm9qZWN0cy9tdWkvcGlnbWVudC1jc3MvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9rZXlmcmFtZXMvZml4dHVyZXMva2V5ZnJhbWVzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9jb3JlJztcblxuY29uc3Qgcm90YXRlS2V5ZnJhbWUgPSBrZXlmcmFtZXMoe1xuICBmcm9tOiB7XG4gICAgdHJhbnNmb3JtOiAncm90YXRlKDM2MGRlZyknLFxuICB9LFxuICB0bzoge1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgwZGVnKScsXG4gIH0sXG59KTtcblxuY29uc3Qgcm90YXRlS2V5ZnJhbWUyID0ga2V5ZnJhbWVzYFxuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG5gO1xuIl19*/ \ No newline at end of file +@layer pigment.base{@keyframes rotate{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMuaW5wdXQuanMiXSwibmFtZXMiOlsiLnJydGZ3MTEiLCIucm90YXRlIl0sIm1hcHBpbmdzIjoiQUFFaUNBO0FBU1RDIiwiZmlsZSI6Ii9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMuaW5wdXQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuXG5jb25zdCByb3RhdGVLZXlmcmFtZSA9IGtleWZyYW1lcyh7XG4gIGZyb206IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMzYwZGVnKScsXG4gIH0sXG4gIHRvOiB7XG4gICAgdHJhbnNmb3JtOiAncm90YXRlKDBkZWcpJyxcbiAgfSxcbn0pO1xuXG5jb25zdCByb3RhdGVLZXlmcmFtZTIgPSBrZXlmcmFtZXMoeyBjbGFzc05hbWU6ICdyb3RhdGUnIH0pYFxuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG5gO1xuIl19*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.js b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.js index f6b6d157..0a5244a6 100644 --- a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.js +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.js @@ -1,2 +1,2 @@ const rotateKeyframe = 'rrtfw11'; -const rotateKeyframe2 = 'rw2yxe7'; +const rotateKeyframe2 = 'rotate'; From 516b6611eb5faf450e3dc548067dc074920cc21c Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Fri, 27 Dec 2024 11:59:28 +0530 Subject: [PATCH 09/42] Fix tests --- packages/pigment-css-core/package.json | 11 +++++++++-- packages/pigment-css-core/src/processors/css.ts | 10 +++++++--- .../pigment-css-core/tests/css/fixtures/css.input.js | 9 +++++++++ .../tests/css/fixtures/css.output.css | 5 +++-- .../pigment-css-core/tests/css/fixtures/css.output.js | 7 +++++++ 5 files changed, 35 insertions(+), 7 deletions(-) diff --git a/packages/pigment-css-core/package.json b/packages/pigment-css-core/package.json index 30f3dd30..4d2dc926 100644 --- a/packages/pigment-css-core/package.json +++ b/packages/pigment-css-core/package.json @@ -74,8 +74,15 @@ }, "./package.json": "./package.json", "./styles.css": "./styles.css", - "./processors/*": { - "default": "./build/processors/*.js" + "./processors/css": { + "import": "./build/processors/css.mjs", + "require": "./build/processors/css.js", + "default": "./build/processors/css.js" + }, + "./processors/keyframes": { + "import": "./build/processors/keyframes.mjs", + "require": "./build/processors/keyframes.js", + "default": "./build/processors/keyframes.js" }, "./exports/*": { "default": "./exports/*.js" diff --git a/packages/pigment-css-core/src/processors/css.ts b/packages/pigment-css-core/src/processors/css.ts index 57d45006..52be62a1 100644 --- a/packages/pigment-css-core/src/processors/css.ts +++ b/packages/pigment-css-core/src/processors/css.ts @@ -104,6 +104,9 @@ export abstract class BaseCssProcessor { ? this.staticClass.className(opts) : `${baseClass}-${opts.variantName}-${opts.variantValue}`; } + if ('isCv' in opts) { + return `${baseClass}-cv`; + } return baseClass; } } @@ -346,6 +349,8 @@ export class CssObjectProcessor extends BaseCssProcessor { export class CssProcessor extends BaseProcessor { processor: BaseCssProcessor; + basePath = `${process.env.PACKAGE_NAME}/runtime`; + // eslint-disable-next-line class-methods-use-this wrapStyle(style: string) { return style; @@ -408,7 +413,7 @@ export class CssProcessor extends BaseProcessor { } this.processor.staticClass = evaluateClassNameArg(callOpt.source) as BaseInterface; } else { - throw new Error('Invalid call to `css` function.'); + throw new Error(`Invalid call to "${this.tagSource.imported}" function.`); } this.dependencies.push(...this.processor.getDependencies()); @@ -432,8 +437,7 @@ export class CssProcessor extends BaseProcessor { const { runtimeReplacementPath } = this.options as TransformedInternalConfig; const baseClasses = t.stringLiteral(this.processor.classNames.join(' ')); const importPath = - runtimeReplacementPath?.(this.tagSource.imported, this.tagSource.source) ?? - `${process.env.PACKAGE_NAME}/runtime`; + runtimeReplacementPath?.(this.tagSource.imported, this.tagSource.source) ?? this.basePath; const callId = t.addNamedImport('css', importPath); // const [, [, ...callParams]] = this.params; const args = t.objectExpression([t.objectProperty(t.identifier('classes'), baseClasses)]); diff --git a/packages/pigment-css-core/tests/css/fixtures/css.input.js b/packages/pigment-css-core/tests/css/fixtures/css.input.js index f147ec75..e420d0e9 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.input.js +++ b/packages/pigment-css-core/tests/css/fixtures/css.input.js @@ -122,6 +122,15 @@ export const cls5 = css({ className: 'Test-class3' })(({ theme }) => ({ size: 'small', color: 'primary', css: { + $$flex: 57, + borderRadius: '100%', + }, + }, + { + size: 'large', + color: 'primary', + css: { + $$flex: 58, borderRadius: '100%', }, }, diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.css b/packages/pigment-css-core/tests/css/fixtures/css.output.css index 363eb0bf..40f64480 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.output.css +++ b/packages/pigment-css-core/tests/css/fixtures/css.output.css @@ -16,5 +16,6 @@ @layer pigment.variants{.Test-class3-size-large{---flex:54;padding:10px;}} @layer pigment.variants{.Test-class3-color-primary{---flex:55;color:green;}} @layer pigment.variants{.Test-class3-color-secondary{---flex:56;color:blue;}} -@layer pigment.compoundvariants{.Test-class3-cv{border-radius:100%;}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmdxdmMzd2UiLCIuY3gzenRwZSIsIi5jMWFxOTlvNiIsIi5jMWFxOTlvNi0xIiwiLlRlc3QtY2xhc3MiLCIuVGVzdC1jbGFzczIiLCIuVGVzdC1jbGFzczItMSIsIi5UZXN0LWNsYXNzMi0yIiwiLlRlc3QtY2xhc3MyLTMiLCIuVGVzdC1jbGFzczItc2l6ZS1zbWFsbC0xIiwiLlRlc3QtY2xhc3MyLXNpemUtbWVkaXVtLTEiLCIuVGVzdC1jbGFzczItc2l6ZS1sYXJnZS0xIiwiLlRlc3QtY2xhc3MzIiwiLlRlc3QtY2xhc3MzLXNpemUtc21hbGwiLCIuVGVzdC1jbGFzczMtc2l6ZS1tZWRpdW0iLCIuVGVzdC1jbGFzczMtc2l6ZS1sYXJnZSIsIi5UZXN0LWNsYXNzMy1jb2xvci1wcmltYXJ5IiwiLlRlc3QtY2xhc3MzLWNvbG9yLXNlY29uZGFyeSIsIi5UZXN0LWNsYXNzMy1jdiJdLCJtYXBwaW5ncyI6IkFBS21DQTtBQU1mQztBQVNsQkM7QUFLQUM7QUFPa0JDO0FBVWxCQztBQU1BQztBQXdCQUM7QUFNQUM7QUFwQ0FDO0FBTUFDO0FBd0JBQztBQWNvREM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUMiLCJmaWxlIjoiL1VzZXJzL2JyaWplc2gvcHJvamVjdHMvbXVpL3BpZ21lbnQtY3NzL3BhY2thZ2VzL3BpZ21lbnQtY3NzLWNvcmUvdGVzdHMvY3NzL2ZpeHR1cmVzL2Nzcy5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9jb3JlJztcbmltcG9ydCB7IHQgfSBmcm9tICdAcGlnbWVudC1jc3MvdGhlbWUnO1xuXG5jb25zdCBhYiA9ICdhbGljZWJsdWUnO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogJ2dyZWVuJyxcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IGNsczEgPSBjc3NgXG4gIC0tLWZsZXg6IDE7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGFuaW1hdGlvbi1uYW1lOiAke2dyYWRpZW50S2V5ZnJhbWV9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbmA7XG5cbmV4cG9ydCBjb25zdCBjbHMyID0gY3NzKFxuICB7XG4gICAgJCRmbGV4OiAyMSxcbiAgICAkJHRlc3RWYXI6ICdyZWQnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAkJHRlc3RWYXInLFxuICB9LFxuICB7XG4gICAgJCRmbGV4OiAyMixcbiAgICAkJHRlc3RWYXIxOiAncmVkJyxcbiAgICBib3JkZXI6ICcxcHggc29saWQgJCR0ZXN0VmFyMScsXG4gIH0sXG4pO1xuXG5leHBvcnQgY29uc3QgY2xzMyA9IGNzcyh7XG4gIGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MnLFxufSlgXG4gIC0tLWZsZXg6IDM7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGNsczQgPSBjc3MoeyBjbGFzc05hbWU6ICdUZXN0LWNsYXNzMicgfSkoXG4gIHtcbiAgICAkJGZsZXg6IDQxLFxuICAgICQkdGVzdFZhcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZENvbG9yOiAnJCR0ZXN0VmFyJyxcbiAgICBib3JkZXI6IGAxcHggc29saWQgJHt0KCckcGFsZXR0ZS5wcmltYXJ5Lm1haW4nKX1gLFxuICB9LFxuICAoeyB0aGVtZSB9KSA9PiAoe1xuICAgICQkZmxleDogNDIsXG4gICAgY29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgIGZvbnRTaXplOiB0aGVtZS5zaXplLmZvbnQuaDEsXG4gICAgYmFja2dyb3VuZENvbG9yOiBhYixcbiAgICB2YXJpYW50czoge1xuICAgICAgc2l6ZToge1xuICAgICAgICBzbWFsbDoge1xuICAgICAgICAgICQkZmxleDogNDIxLFxuICAgICAgICAgIHBhZGRpbmc6IDAsXG4gICAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgICAgICAgfSxcbiAgICAgICAgbWVkaXVtOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjIsXG4gICAgICAgICAgcGFkZGluZzogNSxcbiAgICAgICAgfSxcbiAgICAgICAgbGFyZ2U6IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMyxcbiAgICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSksXG4gICh7IHRoZW1lIH0pID0+IGBcbiAgICAtLS1mbGV4OiA0MztcbiAgICBjb2xvcjogJHt0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbn07XG4gICAgZm9udC1zaXplOiAke3RoZW1lLnNpemUuZm9udC5oMX07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG4gIGAsXG4gIGBcbiAgICAtLS1mbGV4OiA0NDtcbiAgICBjb2xvcjogcmVkO1xuICAgIGZvbnQtc2l6ZTogMXJlbTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbiAgYCxcbik7XG5cbmV4cG9ydCBjb25zdCBjbHM1ID0gY3NzKHsgY2xhc3NOYW1lOiAnVGVzdC1jbGFzczMnIH0pKCh7IHRoZW1lIH0pID0+ICh7XG4gICQkZmxleDogNTEsXG4gICQkdGVzdFZhcjogJ3JlZCcsXG4gIGJhY2tncm91bmRDb2xvcjogJyQkdGVzdFZhcicsXG4gIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIHZhcmlhbnRzOiB7XG4gICAgc2l6ZToge1xuICAgICAgc21hbGw6IHtcbiAgICAgICAgJCRmbGV4OiA1MixcbiAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICBib3JkZXJDb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgICB9LFxuICAgICAgbWVkaXVtOiB7XG4gICAgICAgICQkZmxleDogNTMsXG4gICAgICAgIHBhZGRpbmc6IDUsXG4gICAgICB9LFxuICAgICAgbGFyZ2U6IHtcbiAgICAgICAgJCRmbGV4OiA1NCxcbiAgICAgICAgcGFkZGluZzogMTAsXG4gICAgICB9LFxuICAgIH0sXG4gICAgY29sb3I6IHtcbiAgICAgIHByaW1hcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NSxcbiAgICAgICAgY29sb3I6ICdncmVlbicsXG4gICAgICB9LFxuICAgICAgc2Vjb25kYXJ5OiB7XG4gICAgICAgICQkZmxleDogNTYsXG4gICAgICAgIGNvbG9yOiAnYmx1ZScsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG4gIGNvbXBvdW5kVmFyaWFudHM6IFtcbiAgICB7XG4gICAgICBzaXplOiAnc21hbGwnLFxuICAgICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICAgIGNzczoge1xuICAgICAgICBib3JkZXJSYWRpdXM6ICcxMDAlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgXSxcbn0pKTtcbiJdfQ==*/ \ No newline at end of file +@layer pigment.compoundvariants{.Test-class3-cv{---flex:57;border-radius:100%;}} +@layer pigment.compoundvariants{.Test-class3-cv-1{---flex:58;border-radius:100%;}} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmdxdmMzd2UiLCIuY3gzenRwZSIsIi5jMWFxOTlvNiIsIi5jMWFxOTlvNi0xIiwiLlRlc3QtY2xhc3MiLCIuVGVzdC1jbGFzczIiLCIuVGVzdC1jbGFzczItMSIsIi5UZXN0LWNsYXNzMi0yIiwiLlRlc3QtY2xhc3MyLTMiLCIuVGVzdC1jbGFzczItc2l6ZS1zbWFsbC0xIiwiLlRlc3QtY2xhc3MyLXNpemUtbWVkaXVtLTEiLCIuVGVzdC1jbGFzczItc2l6ZS1sYXJnZS0xIiwiLlRlc3QtY2xhc3MzIiwiLlRlc3QtY2xhc3MzLXNpemUtc21hbGwiLCIuVGVzdC1jbGFzczMtc2l6ZS1tZWRpdW0iLCIuVGVzdC1jbGFzczMtc2l6ZS1sYXJnZSIsIi5UZXN0LWNsYXNzMy1jb2xvci1wcmltYXJ5IiwiLlRlc3QtY2xhc3MzLWNvbG9yLXNlY29uZGFyeSIsIi5UZXN0LWNsYXNzMy1jdiIsIi5UZXN0LWNsYXNzMy1jdi0xIl0sIm1hcHBpbmdzIjoiQUFLbUNBO0FBTWZDO0FBU2xCQztBQUtBQztBQU9rQkM7QUFVbEJDO0FBTUFDO0FBd0JBQztBQU1BQztBQXBDQUM7QUFNQUM7QUF3QkFDO0FBY29EQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQUFBQyIsImZpbGUiOiIvVXNlcnMvYnJpamVzaC9wcm9qZWN0cy9tdWkvcGlnbWVudC1jc3MvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9jc3MvZml4dHVyZXMvY3NzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuaW1wb3J0IHsgdCB9IGZyb20gJ0BwaWdtZW50LWNzcy90aGVtZSc7XG5cbmNvbnN0IGFiID0gJ2FsaWNlYmx1ZSc7XG5cbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUgPSBrZXlmcmFtZXMoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiAnZ3JlZW4nLFxuICB9LFxufSkpO1xuXG5leHBvcnQgY29uc3QgY2xzMSA9IGNzc2BcbiAgLS0tZmxleDogMTtcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYW5pbWF0aW9uLW5hbWU6ICR7Z3JhZGllbnRLZXlmcmFtZX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGNsczIgPSBjc3MoXG4gIHtcbiAgICAkJGZsZXg6IDIxLFxuICAgICQkdGVzdFZhcjogJ3JlZCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkICQkdGVzdFZhcicsXG4gIH0sXG4gIHtcbiAgICAkJGZsZXg6IDIyLFxuICAgICQkdGVzdFZhcjE6ICdyZWQnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAkJHRlc3RWYXIxJyxcbiAgfSxcbik7XG5cbmV4cG9ydCBjb25zdCBjbHMzID0gY3NzKHtcbiAgY2xhc3NOYW1lOiAnVGVzdC1jbGFzcycsXG59KWBcbiAgLS0tZmxleDogMztcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG5gO1xuXG5leHBvcnQgY29uc3QgY2xzNCA9IGNzcyh7IGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MyJyB9KShcbiAge1xuICAgICQkZmxleDogNDEsXG4gICAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6ICckJHRlc3RWYXInLFxuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIH0sXG4gICh7IHRoZW1lIH0pID0+ICh7XG4gICAgJCRmbGV4OiA0MixcbiAgICBjb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgZm9udFNpemU6IHRoZW1lLnNpemUuZm9udC5oMSxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGFiLFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBzaXplOiB7XG4gICAgICAgIHNtYWxsOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjEsXG4gICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgICAgICB9LFxuICAgICAgICBtZWRpdW06IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMixcbiAgICAgICAgICBwYWRkaW5nOiA1LFxuICAgICAgICB9LFxuICAgICAgICBsYXJnZToge1xuICAgICAgICAgICQkZmxleDogNDIzLFxuICAgICAgICAgIHBhZGRpbmc6IDEwLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICB9KSxcbiAgKHsgdGhlbWUgfSkgPT4gYFxuICAgIC0tLWZsZXg6IDQzO1xuICAgIGNvbG9yOiAke3RoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgICBmb250LXNpemU6ICR7dGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbiAgYCxcbiAgYFxuICAgIC0tLWZsZXg6IDQ0O1xuICAgIGNvbG9yOiByZWQ7XG4gICAgZm9udC1zaXplOiAxcmVtO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuICBgLFxuKTtcblxuZXhwb3J0IGNvbnN0IGNsczUgPSBjc3MoeyBjbGFzc05hbWU6ICdUZXN0LWNsYXNzMycgfSkoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJCRmbGV4OiA1MSxcbiAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgYmFja2dyb3VuZENvbG9yOiAnJCR0ZXN0VmFyJyxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUucHJpbWFyeS5tYWluJyl9YCxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGZsZXg6IDUyLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRmbGV4OiA1MyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGZsZXg6IDU0LFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBjb2xvcjoge1xuICAgICAgcHJpbWFyeToge1xuICAgICAgICAkJGZsZXg6IDU1LFxuICAgICAgICBjb2xvcjogJ2dyZWVuJyxcbiAgICAgIH0sXG4gICAgICBzZWNvbmRhcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NixcbiAgICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgY29tcG91bmRWYXJpYW50czogW1xuICAgIHtcbiAgICAgIHNpemU6ICdzbWFsbCcsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgICQkZmxleDogNTcsXG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHNpemU6ICdsYXJnZScsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgICQkZmxleDogNTgsXG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSkpO1xuIl19*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.js b/packages/pigment-css-core/tests/css/fixtures/css.output.js index 3d17e525..ad2dea6c 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.output.js +++ b/packages/pigment-css-core/tests/css/fixtures/css.output.js @@ -77,5 +77,12 @@ export const cls5 = /*#__PURE__*/ _css5({ color: 'primary', }, }, + { + $$cls: 'Test-class3-cv-1', + props: { + size: 'large', + color: 'primary', + }, + }, ], }); From 5ffac9355d6d8a5426dd2b6c77475ebad8d741d4 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Sat, 28 Dec 2024 10:45:04 +0530 Subject: [PATCH 10/42] Add to codesandbox --- .codesandbox/ci.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index c0c0acd0..29b9c589 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -3,6 +3,7 @@ "installCommand": "install:codesandbox", "node": "18", "packages": [ + "packages/pigment-css-core", "packages/pigment-css-nextjs-plugin", "packages/pigment-css-react", "packages/pigment-css-theme", From 7719a57fdb284d938e42c7cf9c7a2366d4f29713 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Sat, 28 Dec 2024 13:16:42 +0530 Subject: [PATCH 11/42] add variables to generated js --- .../pigment-css-core/src/processors/css.ts | 52 ++++++++++++++----- 1 file changed, 40 insertions(+), 12 deletions(-) diff --git a/packages/pigment-css-core/src/processors/css.ts b/packages/pigment-css-core/src/processors/css.ts index 52be62a1..5f735508 100644 --- a/packages/pigment-css-core/src/processors/css.ts +++ b/packages/pigment-css-core/src/processors/css.ts @@ -223,7 +223,7 @@ export class CssObjectProcessor extends BaseCssProcessor { getDependencies(): ExpressionValue[] { const [, ...params] = this.callParam; - return params; + return params.flat().filter((param) => 'kind' in param); } build(values: ValueCache): void { @@ -322,6 +322,10 @@ export class CssObjectProcessor extends BaseCssProcessor { }); } + this.variables = { + ...this.variables, + ...style.variables, + }; this.artifacts.push(['css', [rules, sourceMapReplacements]]); }); }; @@ -349,7 +353,12 @@ export class CssObjectProcessor extends BaseCssProcessor { export class CssProcessor extends BaseProcessor { processor: BaseCssProcessor; - basePath = `${process.env.PACKAGE_NAME}/runtime`; + // eslint-disable-next-line class-methods-use-this + get packageName() { + return process.env.PACKAGE_NAME as string; + } + + basePath = `${this.packageName}/runtime`; // eslint-disable-next-line class-methods-use-this wrapStyle(style: string) { @@ -370,7 +379,7 @@ export class CssProcessor extends BaseProcessor { validateParams( params, ['callee', ['call', 'template']], - `Invalid use of ${this.tagSource.imported} function.`, + `${this.packageName}: Invalid use of ${this.tagSource.imported} function.`, ); const [, callOrTemplate] = params; if (callOrTemplate[0] === 'template') { @@ -392,7 +401,7 @@ export class CssProcessor extends BaseProcessor { validateParams( params, ['callee', ['call'], ['call', 'template']], - `Invalid use of ${this.tagSource.imported} function.`, + `${this.packageName}: Invalid use of ${this.tagSource.imported} function.`, ); const [, [, callOpt], callOrTemplate] = params; @@ -413,7 +422,9 @@ export class CssProcessor extends BaseProcessor { } this.processor.staticClass = evaluateClassNameArg(callOpt.source) as BaseInterface; } else { - throw new Error(`Invalid call to "${this.tagSource.imported}" function.`); + throw new Error( + `${this.packageName}: Invalid call to "${this.tagSource.imported}" function.`, + ); } this.dependencies.push(...this.processor.getDependencies()); @@ -432,14 +443,9 @@ export class CssProcessor extends BaseProcessor { this.replacer(this.value, false); } - doRuntimeReplacement(): void { + getStyleArgs() { const t = this.astService; - const { runtimeReplacementPath } = this.options as TransformedInternalConfig; const baseClasses = t.stringLiteral(this.processor.classNames.join(' ')); - const importPath = - runtimeReplacementPath?.(this.tagSource.imported, this.tagSource.source) ?? this.basePath; - const callId = t.addNamedImport('css', importPath); - // const [, [, ...callParams]] = this.params; const args = t.objectExpression([t.objectProperty(t.identifier('classes'), baseClasses)]); if (this.processor.variants.length > 0) { args.properties.push( @@ -449,6 +455,28 @@ export class CssProcessor extends BaseProcessor { ), ); } - this.replacer(t.callExpression(callId, [args]), true); + if (Object.keys(this.processor.variables).length > 0) { + args.properties.push( + t.objectProperty(t.identifier('vars'), valueToLiteral(this.processor.variables)), + ); + } + return args; + } + + getImportPath() { + const { runtimeReplacementPath } = this.options as TransformedInternalConfig; + const importPath = + runtimeReplacementPath?.(this.tagSource.imported, this.tagSource.source) ?? this.basePath; + return importPath; + } + + createReplacement() { + const t = this.astService; + const callId = t.addNamedImport('css', this.getImportPath()); + return t.callExpression(callId, [this.getStyleArgs()]); + } + + doRuntimeReplacement(): void { + this.replacer(this.createReplacement(), true); } } From 01ab20c2638030c2a932a088a67e829106850fe3 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Sat, 28 Dec 2024 14:04:25 +0530 Subject: [PATCH 12/42] Remove LICENSE --- packages/pigment-css-core/LICENSE | 21 --------------------- 1 file changed, 21 deletions(-) delete mode 100644 packages/pigment-css-core/LICENSE diff --git a/packages/pigment-css-core/LICENSE b/packages/pigment-css-core/LICENSE deleted file mode 100644 index 5bf5f45b..00000000 --- a/packages/pigment-css-core/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2023 Material-UI SAS - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. From f98c654f89afbee9d84172e975f120ed72691e7d Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Sat, 28 Dec 2024 14:06:08 +0530 Subject: [PATCH 13/42] remove unrelated files --- .../pigment-css-react-new/exports/styled.js | 5 - .../src/processors/styled.ts | 408 ------------------ packages/pigment-css-react-new/src/styled.js | 1 - pnpm.patch | 252 ----------- 4 files changed, 666 deletions(-) delete mode 100644 packages/pigment-css-react-new/exports/styled.js delete mode 100644 packages/pigment-css-react-new/src/processors/styled.ts delete mode 100644 packages/pigment-css-react-new/src/styled.js delete mode 100644 pnpm.patch diff --git a/packages/pigment-css-react-new/exports/styled.js b/packages/pigment-css-react-new/exports/styled.js deleted file mode 100644 index 88af3fd0..00000000 --- a/packages/pigment-css-react-new/exports/styled.js +++ /dev/null @@ -1,5 +0,0 @@ -Object.defineProperty(exports, '__esModule', { - value: true, -}); - -exports.default = require('../build/processors/styled').StyledProcessor; diff --git a/packages/pigment-css-react-new/src/processors/styled.ts b/packages/pigment-css-react-new/src/processors/styled.ts deleted file mode 100644 index 1e1c200f..00000000 --- a/packages/pigment-css-react-new/src/processors/styled.ts +++ /dev/null @@ -1,408 +0,0 @@ -/** - * This processor for `css` calls handles a lot of the scenarios. - * There is `CssProcessor` which is actually called by wyw. In its - * initialization, it checks for the type of parameters and depending - * on whether any one of the params is a template type, it - * internally creates `StyledTaggedTemplateProcessor` or `StyledObjectProcessor` - * if the css is called with object values. - * These both processors internally handle their own relevant logic. - * They implement a common interface which is what is called by the main - * CssProcessor. - */ - -import { SourceLocation, TemplateElement } from '@babel/types'; -import { - type PigmentConfig, - BaseProcessor, - parseArray, - processStyleObjects, - serializeStyles, - StyleObjectReturn, - valueToLiteral, -} from '@pigment-css/utils'; -import { - type Expression, - type Params, - type TailProcessorParams, - type ValueCache, - validateParams, -} from '@wyw-in-js/processor-utils'; -import { - Artifact, - ExpressionValue, - FunctionValue, - LazyValue, - Replacements, - Rules, - ValueType, -} from '@wyw-in-js/shared'; -import { ThemeArgs, Primitive } from '@pigment-css/core'; - -export type TemplateCallback = (params: Record | undefined) => string | number; - -type GetClassName = () => string; - -export abstract class BaseStyledProcessor { - public tempMetaClass = (Math.random() + 1).toString(36).substring(10); - - readonly artifacts: Artifact[] = []; - - readonly classNames: string[] = []; - - constructor( - public readonly params: Params, - public readonly getClassName: GetClassName, - public readonly tagSource: TailProcessorParams[0], - public readonly astService: TailProcessorParams[1], - public readonly location: TailProcessorParams[2], - public readonly replacer: TailProcessorParams[3], - public readonly displayName: TailProcessorParams[4], - public readonly isReferenced: TailProcessorParams[5], - public readonly idx: TailProcessorParams[6], - public readonly options: TailProcessorParams[7], - public readonly context: TailProcessorParams[8], - ) {} - - abstract getDependencies(): ExpressionValue[]; - - abstract build(values: ValueCache): void; - - doRuntimeReplacement() { - this.replacer(this.astService.stringLiteral(this.classNames.join(' ')), false); - } - - getBaseClass(): string | undefined { - if (!this.tempMetaClass) { - return this.getClassName(); - } - return this.tempMetaClass; - } -} - -/** - * Only deals with styled.div`` or styled('div', metadata)`` calls. - */ -class StyledTaggedTemplateProcessor extends BaseStyledProcessor { - constructor(params: Params, getClassName: GetClassName, ...args: TailProcessorParams) { - super(params, getClassName, ...args); - - const [, callOrTemplate] = this.params; - if (callOrTemplate[0] === 'template') { - this.tempMetaClass = ''; - } - } - - getDependencies(): ExpressionValue[] { - const [, callOrTemplate, template] = this.params; - const deps: ExpressionValue[] = []; - if (callOrTemplate[0] === 'call') { - deps.push(callOrTemplate[1]); - } else if (callOrTemplate[0] === 'template') { - deps.push( - ...callOrTemplate[1].filter( - (arg): arg is ExpressionValue => 'kind' in arg && arg.kind !== ValueType.CONST, - ), - ); - } - if (template?.[0] === 'template') { - deps.push( - ...template[1].filter( - (arg): arg is ExpressionValue => 'kind' in arg && arg.kind !== ValueType.CONST, - ), - ); - } - return deps; - } - - build(values: ValueCache): void { - const { themeArgs, features: { useLayer = true } = {} } = this.options as PigmentConfig; - const [, callOrTemplate, template] = this.params; - // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. - const templateStrs: string[] = []; - // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. - templateStrs.raw = []; - const templateExpressions: Primitive[] = []; - const templateParams = (callOrTemplate[0] === 'call' ? template[1] : callOrTemplate[1]) as ( - | ExpressionValue - | TemplateElement - )[]; - templateParams.forEach((param) => { - if ('kind' in param) { - switch (param.kind) { - case ValueType.FUNCTION: { - const value = values.get(param.ex.name) as TemplateCallback; - templateExpressions.push(value(themeArgs)); - break; - } - case ValueType.CONST: { - templateExpressions.push(param.value); - break; - } - case ValueType.LAZY: { - const evaluatedValue = values.get(param.ex.name); - if (typeof evaluatedValue === 'function') { - templateExpressions.push(evaluatedValue(themeArgs)); - } else { - templateExpressions.push(evaluatedValue as Primitive); - } - break; - } - default: - break; - } - } else if ('type' in param && param.type === 'TemplateElement') { - templateStrs.push(param.value.cooked as string); - // @ts-ignore - templateStrs.raw.push(param.value.raw); - } - }); - const { styles } = serializeStyles( - templateExpressions.length > 0 ? [templateStrs, ...templateExpressions] : [templateStrs], - ); - - const cssText = useLayer ? `@layer pigment.base{${styles}}` : styles; - const className = this.getClassName(); - const rules: Rules = { - [`.${className}`]: { - className, - cssText, - displayName: this.displayName, - start: this.location?.start ?? null, - }, - }; - const location = this.location; - const sourceMapReplacements: Replacements = [ - { - length: cssText.length, - original: { - start: { - column: location?.start.column ?? 0, - line: location?.start.line ?? 0, - }, - end: { - column: location?.end.column ?? 0, - line: location?.end.line ?? 0, - }, - }, - }, - ]; - this.classNames.push(className); - this.artifacts.push(['css', [rules, sourceMapReplacements]]); - } - - doRuntimeReplacement() { - const baseClasses = this.astService.stringLiteral(this.classNames.join(' ')); - const cssCallId = this.astService.addNamedImport('css', '@pigment-css/core/runtime'); - const args = this.astService.objectExpression([ - this.astService.objectProperty(this.astService.identifier('classes'), baseClasses), - ]); - this.replacer(this.astService.callExpression(cssCallId, [args]), true); - } -} - -/** - * Only deals with styled.div(...styleObjects) or or styled('div')(styleObject) calls. - */ -class StyledObjectProcessor extends BaseStyledProcessor { - variants: { $$cls: string; props: Record }[] = []; - - getDependencies(): ExpressionValue[] { - const [, [, ...callParams]] = this.params; - return callParams as ExpressionValue[]; - } - - build(values: ValueCache): void { - const [, [, ...callParams]] = this.params; - const { themeArgs, features: { useLayer = true } = {} } = this.options as PigmentConfig; - - const evaluatedValues = (callParams as (LazyValue | FunctionValue)[]).map((param) => - values.get(param.ex.name), - ); - let stylesList: (object | Function)[]; - // let metadata: any; - // check for css(metadata, [styles]) or css(metadata, style) call - const locations: (SourceLocation | null | undefined)[] = []; - if ( - evaluatedValues.length === 2 && - evaluatedValues[0] && - typeof evaluatedValues[0] === 'object' && - 'className' in evaluatedValues[0] - ) { - // metadata = evaluatedValues[0]; - const param = callParams[1] as LazyValue | FunctionValue; - if (Array.isArray(evaluatedValues[1])) { - stylesList = evaluatedValues[1]; - // Parse the expression AST to track the exact locations of each parameter - const arrayItemsAst = parseArray((callParams[1] as ExpressionValue).source, { - startLine: param.ex.loc?.start.line, - startIndex: param.ex.loc?.start.index, - startColumn: param.ex.loc?.start.column, - }); - if (arrayItemsAst) { - locations.push(...arrayItemsAst.elements.map((item) => item?.loc)); - } - } else { - stylesList = [evaluatedValues[1] as (typeof stylesList)[number]]; - locations.push((callParams[1] as unknown as ExpressionValue).ex.loc); - } - } else { - // This is for css(...styles) call - stylesList = evaluatedValues as typeof stylesList; - locations.push(...(callParams as ExpressionValue[]).map((p) => p.ex.loc)); - } - - const styles = stylesList.map((item) => - typeof item === 'function' ? item(themeArgs as unknown as ThemeArgs) : item, - ); - let count = 0; - const result = processStyleObjects(styles, { - getClassName: (variantName: string | undefined, variantValue: string | undefined) => { - if (!variantName) { - return this.getClassName(); - } - return `${this.getClassName()}-${variantName}-${variantValue}`; - }, - getVariableName: () => { - count += 1; - return `${this.getClassName()}-${count}`; - }, - }); - - const addStyles = (s: StyleObjectReturn[], layer?: string) => { - const rules: Rules = {}; - s.forEach((style, index) => { - const location = locations[index] ?? locations[0]; - const cssText = - layer && useLayer ? `@layer pigment.${layer} {${style.cssText}}` : style.cssText; - rules[`.${style.className}`] = { - className: style.className, - cssText, - displayName: this.displayName, - start: location?.start ?? null, - }; - - const sourceMapReplacements: Replacements = - layer === 'base' - ? [ - { - length: cssText.length, - original: { - start: { - column: location?.start.column ?? 0, - line: location?.start.line ?? 0, - }, - end: { - column: location?.end.column ?? 0, - line: location?.end.line ?? 0, - }, - }, - }, - ] - : []; - - if (Object.keys(style.serializables).length > 0) { - this.variants.push({ - $$cls: style.className, - props: style.serializables, - }); - } - - this.artifacts.push(['css', [rules, sourceMapReplacements]]); - }); - }; - this.classNames.push(...result.base.map((item) => item.className)); - addStyles(result.base, 'base'); - addStyles(result.variants, 'variants'); - addStyles(result.compoundVariants, 'compoundvariants'); - } - - doRuntimeReplacement() { - const baseClasses = this.astService.stringLiteral(this.classNames.join(' ')); - const cssCallId = this.astService.addNamedImport('css', '@pigment-css/core/runtime'); - const [, [, ...callParams]] = this.params; - const args = this.astService.objectExpression([ - this.astService.objectProperty(this.astService.identifier('classes'), baseClasses), - ]); - if (this.variants.length > 0) { - args.properties.push( - this.astService.objectProperty( - this.astService.identifier('variants'), - valueToLiteral(this.variants, callParams[1] as ExpressionValue), - ), - ); - } - this.replacer(this.astService.callExpression(cssCallId, [args]), true); - } -} - -/** - * Scoped css class generation similar to css from emotion. - * - * @example - * ```ts - * import { css } from '@pigment-css/react'; - * - * const class1 = css(({theme}) => ({ - * color: (theme.vars || theme).palette.primary.main, - * })) - * ``` - * - * - */ -export class StyledProcessor extends BaseProcessor { - processor: BaseStyledProcessor; - - constructor(params: Params, ...args: TailProcessorParams) { - super([params[0]], ...args); - validateParams(params, ['callee', '...'], BaseProcessor.SKIP); - - if (params.length === 3) { - validateParams( - params, - ['callee', 'call', 'template'], - `Invalid use of ${this.tagSource.imported} function.`, - ); - } else { - validateParams( - params, - ['callee', ['call', 'template']], - `Invalid use of ${this.tagSource.imported} function.`, - ); - } - - const getClassName = () => this.getBaseClass(); - const [calleeParam, callParams, maybeTemplate] = params; - if (callParams[0] === 'template' || maybeTemplate?.[0] === 'template') { - this.processor = new StyledTaggedTemplateProcessor(params, getClassName, ...args); - } else { - this.processor = new StyledObjectProcessor([calleeParam, callParams], getClassName, ...args); - } - - this.dependencies.push(...this.processor.getDependencies()); - } - - build(values: ValueCache) { - this.processor.build(values); - this.artifacts.push(...this.processor.artifacts); - } - - getBaseClass(): string { - return this.className; - } - - get asSelector(): string { - return this.getBaseClass(); - } - - get value(): Expression { - return this.astService.stringLiteral(`.${this.getBaseClass()}`); - } - - doEvaltimeReplacement(): void { - this.replacer(this.value, false); - } - - doRuntimeReplacement(): void { - this.processor.doRuntimeReplacement(); - } -} diff --git a/packages/pigment-css-react-new/src/styled.js b/packages/pigment-css-react-new/src/styled.js deleted file mode 100644 index e88488b6..00000000 --- a/packages/pigment-css-react-new/src/styled.js +++ /dev/null @@ -1 +0,0 @@ -export function styled() {} diff --git a/pnpm.patch b/pnpm.patch deleted file mode 100644 index 33c2b40f..00000000 --- a/pnpm.patch +++ /dev/null @@ -1,252 +0,0 @@ -diff --git a/package.json b/package.json -index 7f48d2e..5f032ea 100644 ---- a/package.json -+++ b/package.json -@@ -122,9 +122,9 @@ - "unist-util-visit": "^2.0.3", - "yargs": "^17.7.2" - }, -- "packageManager": "pnpm@9.7.1", -+ "packageManager": "pnpm@9.15.1", - "engines": { -- "pnpm": "9.7.1" -+ "pnpm": "9.15.1" - }, - "resolutions": { - "@babel/core": "^7.26.0", -diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml -index 17677f4..a9e6313 100644 ---- a/pnpm-lock.yaml -+++ b/pnpm-lock.yaml -@@ -143,13 +143,13 @@ importers: - version: 8.57.0 - eslint-config-airbnb: - specifier: ^19.0.4 -- version: 19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.2(eslint@8.57.0))(eslint@8.57.0) -+ version: 19.0.4(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.2(eslint@8.57.0))(eslint@8.57.0) - eslint-config-airbnb-base: - specifier: ^15.0.0 -- version: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint@8.57.0) -+ version: 15.0.0(eslint-plugin-import@2.31.0)(eslint@8.57.0) - eslint-config-airbnb-typescript: - specifier: ^18.0.0 -- version: 18.0.0(@typescript-eslint/eslint-plugin@7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint@8.57.0) -+ version: 18.0.0(@typescript-eslint/eslint-plugin@7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@8.57.0) - eslint-config-prettier: - specifier: ^9.1.0 - version: 9.1.0(eslint@8.57.0) -@@ -164,7 +164,7 @@ importers: - version: 1.3.2(eslint@8.57.0) - eslint-plugin-import: - specifier: ^2.29.1 -- version: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) -+ version: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) - eslint-plugin-jsx-a11y: - specifier: ^6.8.0 - version: 6.10.2(eslint@8.57.0) -@@ -455,7 +455,7 @@ importers: - version: 18.3.1 - eslint-config-next: - specifier: 15.0.2 -- version: 15.0.2(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0)(typescript@5.6.3) -+ version: 15.0.2(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0)(typescript@5.6.3) - serve: - specifier: 14.2.4 - version: 14.2.4 -@@ -626,7 +626,7 @@ importers: - version: 18.3.12 - '@types/stylis': - specifier: ^4.2.5 -- version: 4.2.5 -+ version: 4.2.7 - chai: - specifier: ^4.4.1 - version: 4.5.0 -@@ -1434,6 +1434,7 @@ packages: - '@base_ui/react@1.0.0-alpha.3': - resolution: {integrity: sha512-3k3zlFDjYPrwb8IWShBHrZLM0Rs0c2W2VFKWTF9XdqkijvI0PFBTqEGBpG+cASsjPoNiJ9WKYYsPICEn40UCgg==} - engines: {node: '>=12.0.0'} -+ deprecated: Base UI npm package name changed. It's now published under @base-ui-components/react. - peerDependencies: - '@types/react': ^18.3.12 - react: 18.3.1 -@@ -3133,9 +3134,6 @@ packages: - '@types/serve-static@1.15.7': - resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==} - -- '@types/stylis@4.2.5': -- resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==} -- - '@types/stylis@4.2.7': - resolution: {integrity: sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA==} - -@@ -11703,8 +11701,6 @@ snapshots: - '@types/node': 18.19.63 - '@types/send': 0.17.4 - -- '@types/stylis@4.2.5': {} -- - '@types/stylis@4.2.7': {} - - '@types/unist@2.0.10': {} -@@ -12746,7 +12742,7 @@ snapshots: - - compressible@2.0.18: - dependencies: -- mime-db: 1.52.0 -+ mime-db: 1.53.0 - - compression@1.7.4: - dependencies: -@@ -13464,36 +13460,36 @@ snapshots: - - escape-string-regexp@5.0.0: {} - -- eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint@8.57.0): -+ eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.31.0)(eslint@8.57.0): - dependencies: - confusing-browser-globals: 1.0.11 - eslint: 8.57.0 -- eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) -+ eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) - object.assign: 4.1.5 - object.entries: 1.1.8 - semver: 6.3.1 - -- eslint-config-airbnb-typescript@18.0.0(@typescript-eslint/eslint-plugin@7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint@8.57.0): -+ eslint-config-airbnb-typescript@18.0.0(@typescript-eslint/eslint-plugin@7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@8.57.0): - dependencies: - '@typescript-eslint/eslint-plugin': 7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3) - '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3) - eslint: 8.57.0 -- eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint@8.57.0) -+ eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0)(eslint@8.57.0) - transitivePeerDependencies: - - eslint-plugin-import - -- eslint-config-airbnb@19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.2(eslint@8.57.0))(eslint@8.57.0): -+ eslint-config-airbnb@19.0.4(eslint-plugin-import@2.31.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.2(eslint@8.57.0))(eslint@8.57.0): - dependencies: - eslint: 8.57.0 -- eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0))(eslint@8.57.0) -- eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) -+ eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0)(eslint@8.57.0) -+ eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) - eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0) - eslint-plugin-react: 7.37.2(eslint@8.57.0) - eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) - object.assign: 4.1.5 - object.entries: 1.1.8 - -- eslint-config-next@15.0.2(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0)(typescript@5.6.3): -+ eslint-config-next@15.0.2(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0)(typescript@5.6.3): - dependencies: - '@next/eslint-plugin-next': 15.0.2 - '@rushstack/eslint-patch': 1.10.4 -@@ -13501,8 +13497,8 @@ snapshots: - '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3) - eslint: 8.57.0 - eslint-import-resolver-node: 0.3.9 -- eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0) -- eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) -+ eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8)(eslint-plugin-import@2.31.0)(eslint@8.57.0) -+ eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) - eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0) - eslint-plugin-react: 7.37.2(eslint@8.57.0) - eslint-plugin-react-hooks: 5.0.0(eslint@8.57.0) -@@ -13525,19 +13521,19 @@ snapshots: - transitivePeerDependencies: - - supports-color - -- eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0): -+ eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8)(eslint-plugin-import@2.31.0)(eslint@8.57.0): - dependencies: - '@nolyfill/is-core-module': 1.0.39 - debug: 4.3.7(supports-color@8.1.1) - enhanced-resolve: 5.16.0 - eslint: 8.57.0 -- eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) -+ eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) - fast-glob: 3.3.2 - get-tsconfig: 4.8.1 - is-bun-module: 1.2.1 - is-glob: 4.0.3 - optionalDependencies: -- eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) -+ eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) - transitivePeerDependencies: - - '@typescript-eslint/parser' - - eslint-import-resolver-node -@@ -13549,7 +13545,7 @@ snapshots: - array.prototype.find: 2.2.3 - debug: 3.2.7 - enhanced-resolve: 0.9.1 -- eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) -+ eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) - find-root: 1.1.0 - hasown: 2.0.2 - interpret: 1.4.0 -@@ -13562,14 +13558,14 @@ snapshots: - transitivePeerDependencies: - - supports-color - -- eslint-module-utils@2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0): -+ eslint-module-utils@2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0): - dependencies: - debug: 3.2.7 - optionalDependencies: - '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3) - eslint: 8.57.0 - eslint-import-resolver-node: 0.3.9 -- eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0) -+ eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8)(eslint-plugin-import@2.31.0)(eslint@8.57.0) - eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)) - transitivePeerDependencies: - - supports-color -@@ -13587,36 +13583,7 @@ snapshots: - lodash.snakecase: 4.1.1 - lodash.upperfirst: 4.3.1 - -- eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0): -- dependencies: -- '@rtsao/scc': 1.1.0 -- array-includes: 3.1.8 -- array.prototype.findlastindex: 1.2.5 -- array.prototype.flat: 1.3.2 -- array.prototype.flatmap: 1.3.2 -- debug: 3.2.7 -- doctrine: 2.1.0 -- eslint: 8.57.0 -- eslint-import-resolver-node: 0.3.9 -- eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) -- hasown: 2.0.2 -- is-core-module: 2.15.1 -- is-glob: 4.0.3 -- minimatch: 3.1.2 -- object.fromentries: 2.0.8 -- object.groupby: 1.0.3 -- object.values: 1.2.0 -- semver: 6.3.1 -- string.prototype.trimend: 1.0.8 -- tsconfig-paths: 3.15.0 -- optionalDependencies: -- '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3) -- transitivePeerDependencies: -- - eslint-import-resolver-typescript -- - eslint-import-resolver-webpack -- - supports-color -- -- eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0): -+ eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0): - dependencies: - '@rtsao/scc': 1.1.0 - array-includes: 3.1.8 -@@ -13627,7 +13594,7 @@ snapshots: - doctrine: 2.1.0 - eslint: 8.57.0 - eslint-import-resolver-node: 0.3.9 -- eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) -+ eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) - hasown: 2.0.2 - is-core-module: 2.15.1 - is-glob: 4.0.3 From 80745a6f63445b19b9fb0c14c57a214f6b494598 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Sun, 29 Dec 2024 13:04:49 +0530 Subject: [PATCH 14/42] Variants for css call --- packages/pigment-css-core/src/base.ts | 21 ++++++ packages/pigment-css-core/src/css.d.ts | 60 +++++++++++----- packages/pigment-css-core/src/keyframes.d.ts | 31 ++++----- .../src/processors/keyframes.ts | 12 ---- .../pigment-css-core/tests/css/css.spec.ts | 30 +++++++- .../tests/css/fixtures/css.input.js | 27 ++++++++ .../tests/css/fixtures/css.output.css | 6 +- .../tests/css/fixtures/css.output.js | 24 +++++++ .../tests/keyframes/keyframes.spec.ts | 68 +++++++++++-------- 9 files changed, 202 insertions(+), 77 deletions(-) diff --git a/packages/pigment-css-core/src/base.ts b/packages/pigment-css-core/src/base.ts index 3047db5c..a269a40c 100644 --- a/packages/pigment-css-core/src/base.ts +++ b/packages/pigment-css-core/src/base.ts @@ -6,6 +6,10 @@ export type CSSProperties = CSS.PropertiesFallback & { [index: `$${string}`]: string; }; +type CSSPropertiesBase = { + [K in keyof CSSProperties]: CSSProperties[K]; +}; + export type CSSPropertiesMultiValue = { [K in keyof CSSProperties]: | ThemeKey @@ -24,6 +28,23 @@ export type CSSObjectNoCallback = | CSSPseudosNoCallback | CSSOthersObjectNoCallback; +export type CSSPropertiesMultiValueWithProps = { + [K in keyof CSSPropertiesMultiValue]: + | CSSPropertiesMultiValue[K] + | ((props: Props) => CSSPropertiesBase[K]); +}; + +export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject }; + +export interface CSSOthersObject { + [selector: string]: CSSObject; +} + +export type CSSObject = + | CSSPropertiesMultiValueWithProps + | CSSPseudos + | CSSOthersObject; + export type ThemeArgs = { theme: Theme; }; diff --git a/packages/pigment-css-core/src/css.d.ts b/packages/pigment-css-core/src/css.d.ts index b785bc1d..ec5038ec 100644 --- a/packages/pigment-css-core/src/css.d.ts +++ b/packages/pigment-css-core/src/css.d.ts @@ -1,43 +1,69 @@ -import { ClassNameOptions } from '@pigment-css/utils'; import { CSSObjectNoCallback, CSSProperties, Primitive, ThemeArgs } from './base'; -type IVariant = { - variants?: Record>; +export type CssFn = (props: Props) => string | number; + +type Variants = { + [VariantGroup: string]: { + [VariantName: string]: CSSObjectNoCallback; + }; +}; + +type VariantNames = { + [K in keyof T]?: keyof T[K]; }; -type CssObj = CSSObjectNoCallback & IVariant; +type CompoundVariant = VariantNames & { + css: CSSProperties; +}; + +type CVAConfig = { + variants?: V; + compoundVariants?: CompoundVariant[]; + defaultVariants?: VariantNames; +}; -type CssArg = ((themeArgs: ThemeArgs) => CssObj | string) | CssObj | string; -export type CssFn = (themeArgs: ThemeArgs) => string | number; +export type ClassNameOptions = + | { + variantName: string; + variantValue: string; + } + | { + isCv: true; + }; export interface BaseInterface { /** - * Corresponds to css class name for `css` function call and keyframe name when passed to `keyframes` + * Corresponds to css class name for `css` or `styled` function calls and keyframe name for `keyframes` function call. */ className?: string | ((opts?: ClassNameOptions) => string); } -/** - * New CSS - */ +type TemplateLiteralItems = Primitive | CSSProperties; + +type CSSWithVariants = CSSObjectNoCallback & CVAConfig; + +type CssValue = CSSWithVariants | string; + +type CssArg = ((themeArgs: ThemeArgs) => CssValue) | CssValue; type CssReturn = { className: string; style?: CSSProperties; }; +type CssReturnFn = (props: Props) => CssReturn; + interface CssNoOption { - (arg: TemplateStringsArray, ...templateArgs: (Primitive | CssFn)[]): CssReturn; - (...args: CssArg[]): CssReturn; -} + ( + arg: TemplateStringsArray, + ...templateArgs: (TemplateLiteralItems | CssFn<{}>)[] + ): CssReturnFn<{}>; -interface CssFunction { - (arg: TemplateStringsArray, ...templateArgs: (Primitive | CssFn)[]): CssReturn; - (...args: CssArg[]): CssReturn; + (...args: CssArg[]): CssReturnFn>; } interface CssWithOption { - (metadata: M): CssFunction; + (metadata: M): CssNoOption; } declare const css: CssNoOption & CssWithOption; diff --git a/packages/pigment-css-core/src/keyframes.d.ts b/packages/pigment-css-core/src/keyframes.d.ts index 26e8e442..83e5989d 100644 --- a/packages/pigment-css-core/src/keyframes.d.ts +++ b/packages/pigment-css-core/src/keyframes.d.ts @@ -1,29 +1,26 @@ -import type { CSSProperties, Primitive, ThemeArgs } from './base'; -import { BaseInterface, CssFn } from './css'; +import type { CSSPropertiesMultiValue, Primitive, ThemeArgs } from './base'; +import { BaseInterface } from './css'; interface KeyframesObject { [key: string]: { - [K in keyof CSSProperties]: CSSProperties[K] | Array; + [K in keyof CSSPropertiesMultiValue]: + | CSSPropertiesMultiValue[K] + | Array; }; } -type KeyframesArg = ((themeArgs: ThemeArgs) => KeyframesObject) | KeyframesObject; +type KeyframesFn = (themeArgs: ThemeArgs) => string; +type KeyframesArg = KeyframesObject | string | ((themeArgs: ThemeArgs) => KeyframesObject | string); -interface Keyframes { - /** - * @returns {string} The generated keyframe name to be referenced. - */ - (arg: TemplateStringsArray, ...templateArgs: (Primitive | CssFn)[]): string; - ( - metadata: M, - ): (arg: TemplateStringsArray, ...templateArgs: (Primitive | CssFn)[]) => string; - /** - * @returns {string} The generated keyframe name to be referenced. - */ +interface KeyframesNoOption { + (arg: TemplateStringsArray, ...templateArgs: (Primitive | KeyframesFn)[]): string; (arg: KeyframesArg): string; - (metadata: M, args: KeyframesArg): string; } -declare const keyframes: Keyframes; +interface KeyframesWithOption { + (metadata: M): KeyframesNoOption; +} + +declare const keyframes: KeyframesNoOption & KeyframesWithOption; export default keyframes; diff --git a/packages/pigment-css-core/src/processors/keyframes.ts b/packages/pigment-css-core/src/processors/keyframes.ts index e657978a..0b4c937b 100644 --- a/packages/pigment-css-core/src/processors/keyframes.ts +++ b/packages/pigment-css-core/src/processors/keyframes.ts @@ -1,15 +1,3 @@ -/** - * This processor for `keyframes` calls handles a lot of the scenarios. - * There is `KeyframesProcessor` which is actually called by wyw. In its - * initialization, it checks for the type of parameters and depending - * on whether any one of the params is a template type, it - * internally creates `KeyframesTaggedTemplateProcessor` or `KeyframesObjectProcessor` - * if the css is called with object values. - * These both processors internally handle their own relevant logic. - * They implement a common interface which is what is called by the main - * KeyframesProcessor. - */ - import { Params, TailProcessorParams, validateParams } from '@wyw-in-js/processor-utils'; import { evaluateClassNameArg } from '@pigment-css/utils'; import { CssProcessor } from './css'; diff --git a/packages/pigment-css-core/tests/css/css.spec.ts b/packages/pigment-css-core/tests/css/css.spec.ts index 8a2c52d2..6ebda1a7 100644 --- a/packages/pigment-css-core/tests/css/css.spec.ts +++ b/packages/pigment-css-core/tests/css/css.spec.ts @@ -19,6 +19,30 @@ const cls2 = css(({ theme }) => ({ // @ts-expect-error main1 does not exists in theme.palette backgroundColor: theme.palette.main1, border: `1px solid ${t('$palette.main')}`, + variants: { + palette: { + primary: { + color: 'red', + borderColor: 'pink', + }, + secondary: { + color: 'red', + borderColor: 'pink', + }, + }, + size: { + large: {}, + small: {}, + }, + }, + compoundVariants: [ + { + palette: 'secondary', + css: { + borderWidth: 1, + }, + }, + ], })); const cls2WithMetadata = css({ @@ -35,7 +59,7 @@ export const cls3WithMetadata = css({ })( ({ theme }) => ({ color: '$palette.main', - // @ts-expect-error main1 does not exists in theme.palette + // @ts-expect-error main1 does not exist in theme.palette backgroundColor: theme.palette.main1, border: `1px solid ${t('$palette.main')}`, }), @@ -57,4 +81,8 @@ const cls4WithMetadata = css({ })` color: red; background-color: ${t('$palette.main')}; + border-color: ${ + // @ts-expect-error main1 does not exists in theme.palette + t('$palette.main1') + }; `; diff --git a/packages/pigment-css-core/tests/css/fixtures/css.input.js b/packages/pigment-css-core/tests/css/fixtures/css.input.js index e420d0e9..2fb08379 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.input.js +++ b/packages/pigment-css-core/tests/css/fixtures/css.input.js @@ -136,3 +136,30 @@ export const cls5 = css({ className: 'Test-class3' })(({ theme }) => ({ }, ], })); + +export const cls6 = css(({ theme }) => ({ + color: '$palette.main', + // @ts-expect-error main1 does not exists in theme.palette + backgroundColor: theme.palette.main1, + border: `1px solid ${t('$palette.main')}`, + variants: { + palette: { + primary: { + color: 'red', + borderColor: 'pink', + }, + secondary: { + color: 'red', + borderColor: 'pink', + }, + }, + }, + compoundVariants: [ + { + palette: 'secondary', + css: { + borderWidth: 1, + }, + }, + ], +})); diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.css b/packages/pigment-css-core/tests/css/fixtures/css.output.css index 40f64480..13ae7542 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.output.css +++ b/packages/pigment-css-core/tests/css/fixtures/css.output.css @@ -18,4 +18,8 @@ @layer pigment.variants{.Test-class3-color-secondary{---flex:56;color:blue;}} @layer pigment.compoundvariants{.Test-class3-cv{---flex:57;border-radius:100%;}} @layer pigment.compoundvariants{.Test-class3-cv-1{---flex:58;border-radius:100%;}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmdxdmMzd2UiLCIuY3gzenRwZSIsIi5jMWFxOTlvNiIsIi5jMWFxOTlvNi0xIiwiLlRlc3QtY2xhc3MiLCIuVGVzdC1jbGFzczIiLCIuVGVzdC1jbGFzczItMSIsIi5UZXN0LWNsYXNzMi0yIiwiLlRlc3QtY2xhc3MyLTMiLCIuVGVzdC1jbGFzczItc2l6ZS1zbWFsbC0xIiwiLlRlc3QtY2xhc3MyLXNpemUtbWVkaXVtLTEiLCIuVGVzdC1jbGFzczItc2l6ZS1sYXJnZS0xIiwiLlRlc3QtY2xhc3MzIiwiLlRlc3QtY2xhc3MzLXNpemUtc21hbGwiLCIuVGVzdC1jbGFzczMtc2l6ZS1tZWRpdW0iLCIuVGVzdC1jbGFzczMtc2l6ZS1sYXJnZSIsIi5UZXN0LWNsYXNzMy1jb2xvci1wcmltYXJ5IiwiLlRlc3QtY2xhc3MzLWNvbG9yLXNlY29uZGFyeSIsIi5UZXN0LWNsYXNzMy1jdiIsIi5UZXN0LWNsYXNzMy1jdi0xIl0sIm1hcHBpbmdzIjoiQUFLbUNBO0FBTWZDO0FBU2xCQztBQUtBQztBQU9rQkM7QUFVbEJDO0FBTUFDO0FBd0JBQztBQU1BQztBQXBDQUM7QUFNQUM7QUF3QkFDO0FBY29EQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQUFBQyIsImZpbGUiOiIvVXNlcnMvYnJpamVzaC9wcm9qZWN0cy9tdWkvcGlnbWVudC1jc3MvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9jc3MvZml4dHVyZXMvY3NzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuaW1wb3J0IHsgdCB9IGZyb20gJ0BwaWdtZW50LWNzcy90aGVtZSc7XG5cbmNvbnN0IGFiID0gJ2FsaWNlYmx1ZSc7XG5cbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUgPSBrZXlmcmFtZXMoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiAnZ3JlZW4nLFxuICB9LFxufSkpO1xuXG5leHBvcnQgY29uc3QgY2xzMSA9IGNzc2BcbiAgLS0tZmxleDogMTtcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYW5pbWF0aW9uLW5hbWU6ICR7Z3JhZGllbnRLZXlmcmFtZX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGNsczIgPSBjc3MoXG4gIHtcbiAgICAkJGZsZXg6IDIxLFxuICAgICQkdGVzdFZhcjogJ3JlZCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkICQkdGVzdFZhcicsXG4gIH0sXG4gIHtcbiAgICAkJGZsZXg6IDIyLFxuICAgICQkdGVzdFZhcjE6ICdyZWQnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAkJHRlc3RWYXIxJyxcbiAgfSxcbik7XG5cbmV4cG9ydCBjb25zdCBjbHMzID0gY3NzKHtcbiAgY2xhc3NOYW1lOiAnVGVzdC1jbGFzcycsXG59KWBcbiAgLS0tZmxleDogMztcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG5gO1xuXG5leHBvcnQgY29uc3QgY2xzNCA9IGNzcyh7IGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MyJyB9KShcbiAge1xuICAgICQkZmxleDogNDEsXG4gICAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6ICckJHRlc3RWYXInLFxuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIH0sXG4gICh7IHRoZW1lIH0pID0+ICh7XG4gICAgJCRmbGV4OiA0MixcbiAgICBjb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgZm9udFNpemU6IHRoZW1lLnNpemUuZm9udC5oMSxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGFiLFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBzaXplOiB7XG4gICAgICAgIHNtYWxsOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjEsXG4gICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgICAgICB9LFxuICAgICAgICBtZWRpdW06IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMixcbiAgICAgICAgICBwYWRkaW5nOiA1LFxuICAgICAgICB9LFxuICAgICAgICBsYXJnZToge1xuICAgICAgICAgICQkZmxleDogNDIzLFxuICAgICAgICAgIHBhZGRpbmc6IDEwLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICB9KSxcbiAgKHsgdGhlbWUgfSkgPT4gYFxuICAgIC0tLWZsZXg6IDQzO1xuICAgIGNvbG9yOiAke3RoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgICBmb250LXNpemU6ICR7dGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbiAgYCxcbiAgYFxuICAgIC0tLWZsZXg6IDQ0O1xuICAgIGNvbG9yOiByZWQ7XG4gICAgZm9udC1zaXplOiAxcmVtO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuICBgLFxuKTtcblxuZXhwb3J0IGNvbnN0IGNsczUgPSBjc3MoeyBjbGFzc05hbWU6ICdUZXN0LWNsYXNzMycgfSkoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJCRmbGV4OiA1MSxcbiAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgYmFja2dyb3VuZENvbG9yOiAnJCR0ZXN0VmFyJyxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUucHJpbWFyeS5tYWluJyl9YCxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGZsZXg6IDUyLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRmbGV4OiA1MyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGZsZXg6IDU0LFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBjb2xvcjoge1xuICAgICAgcHJpbWFyeToge1xuICAgICAgICAkJGZsZXg6IDU1LFxuICAgICAgICBjb2xvcjogJ2dyZWVuJyxcbiAgICAgIH0sXG4gICAgICBzZWNvbmRhcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NixcbiAgICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgY29tcG91bmRWYXJpYW50czogW1xuICAgIHtcbiAgICAgIHNpemU6ICdzbWFsbCcsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgICQkZmxleDogNTcsXG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHNpemU6ICdsYXJnZScsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgICQkZmxleDogNTgsXG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSkpO1xuIl19*/ \ No newline at end of file +@layer pigment.base{.c1qxs0o9{color:var(--palette-main);border:1px solid var(--palette-main);}} +@layer pigment.variants{.c1qxs0o9-palette-primary{color:red;border-color:pink;}} +@layer pigment.variants{.c1qxs0o9-palette-secondary{color:red;border-color:pink;}} +@layer pigment.compoundvariants{.c1qxs0o9-cv{border-width:1px;}} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmdxdmMzd2UiLCIuY3gzenRwZSIsIi5jMWFxOTlvNiIsIi5jMWFxOTlvNi0xIiwiLlRlc3QtY2xhc3MiLCIuVGVzdC1jbGFzczIiLCIuVGVzdC1jbGFzczItMSIsIi5UZXN0LWNsYXNzMi0yIiwiLlRlc3QtY2xhc3MyLTMiLCIuVGVzdC1jbGFzczItc2l6ZS1zbWFsbC0xIiwiLlRlc3QtY2xhc3MyLXNpemUtbWVkaXVtLTEiLCIuVGVzdC1jbGFzczItc2l6ZS1sYXJnZS0xIiwiLlRlc3QtY2xhc3MzIiwiLlRlc3QtY2xhc3MzLXNpemUtc21hbGwiLCIuVGVzdC1jbGFzczMtc2l6ZS1tZWRpdW0iLCIuVGVzdC1jbGFzczMtc2l6ZS1sYXJnZSIsIi5UZXN0LWNsYXNzMy1jb2xvci1wcmltYXJ5IiwiLlRlc3QtY2xhc3MzLWNvbG9yLXNlY29uZGFyeSIsIi5UZXN0LWNsYXNzMy1jdiIsIi5UZXN0LWNsYXNzMy1jdi0xIiwiLmMxcXhzMG85IiwiLmMxcXhzMG85LXBhbGV0dGUtcHJpbWFyeSIsIi5jMXF4czBvOS1wYWxldHRlLXNlY29uZGFyeSIsIi5jMXF4czBvOS1jdiJdLCJtYXBwaW5ncyI6IkFBS21DQTtBQU1mQztBQVNsQkM7QUFLQUM7QUFPa0JDO0FBVWxCQztBQU1BQztBQXdCQUM7QUFNQUM7QUFwQ0FDO0FBTUFDO0FBd0JBQztBQWNvREM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFxRDlCQztBQUFBQztBQUFBQztBQUFBQyIsImZpbGUiOiIvVXNlcnMvYnJpamVzaC9wcm9qZWN0cy9tdWkvcGlnbWVudC1jc3MvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9jc3MvZml4dHVyZXMvY3NzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuaW1wb3J0IHsgdCB9IGZyb20gJ0BwaWdtZW50LWNzcy90aGVtZSc7XG5cbmNvbnN0IGFiID0gJ2FsaWNlYmx1ZSc7XG5cbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUgPSBrZXlmcmFtZXMoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiAnZ3JlZW4nLFxuICB9LFxufSkpO1xuXG5leHBvcnQgY29uc3QgY2xzMSA9IGNzc2BcbiAgLS0tZmxleDogMTtcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYW5pbWF0aW9uLW5hbWU6ICR7Z3JhZGllbnRLZXlmcmFtZX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGNsczIgPSBjc3MoXG4gIHtcbiAgICAkJGZsZXg6IDIxLFxuICAgICQkdGVzdFZhcjogJ3JlZCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkICQkdGVzdFZhcicsXG4gIH0sXG4gIHtcbiAgICAkJGZsZXg6IDIyLFxuICAgICQkdGVzdFZhcjE6ICdyZWQnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAkJHRlc3RWYXIxJyxcbiAgfSxcbik7XG5cbmV4cG9ydCBjb25zdCBjbHMzID0gY3NzKHtcbiAgY2xhc3NOYW1lOiAnVGVzdC1jbGFzcycsXG59KWBcbiAgLS0tZmxleDogMztcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG5gO1xuXG5leHBvcnQgY29uc3QgY2xzNCA9IGNzcyh7IGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MyJyB9KShcbiAge1xuICAgICQkZmxleDogNDEsXG4gICAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6ICckJHRlc3RWYXInLFxuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIH0sXG4gICh7IHRoZW1lIH0pID0+ICh7XG4gICAgJCRmbGV4OiA0MixcbiAgICBjb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgZm9udFNpemU6IHRoZW1lLnNpemUuZm9udC5oMSxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGFiLFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBzaXplOiB7XG4gICAgICAgIHNtYWxsOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjEsXG4gICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgICAgICB9LFxuICAgICAgICBtZWRpdW06IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMixcbiAgICAgICAgICBwYWRkaW5nOiA1LFxuICAgICAgICB9LFxuICAgICAgICBsYXJnZToge1xuICAgICAgICAgICQkZmxleDogNDIzLFxuICAgICAgICAgIHBhZGRpbmc6IDEwLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICB9KSxcbiAgKHsgdGhlbWUgfSkgPT4gYFxuICAgIC0tLWZsZXg6IDQzO1xuICAgIGNvbG9yOiAke3RoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgICBmb250LXNpemU6ICR7dGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbiAgYCxcbiAgYFxuICAgIC0tLWZsZXg6IDQ0O1xuICAgIGNvbG9yOiByZWQ7XG4gICAgZm9udC1zaXplOiAxcmVtO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuICBgLFxuKTtcblxuZXhwb3J0IGNvbnN0IGNsczUgPSBjc3MoeyBjbGFzc05hbWU6ICdUZXN0LWNsYXNzMycgfSkoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJCRmbGV4OiA1MSxcbiAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgYmFja2dyb3VuZENvbG9yOiAnJCR0ZXN0VmFyJyxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUucHJpbWFyeS5tYWluJyl9YCxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGZsZXg6IDUyLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRmbGV4OiA1MyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGZsZXg6IDU0LFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBjb2xvcjoge1xuICAgICAgcHJpbWFyeToge1xuICAgICAgICAkJGZsZXg6IDU1LFxuICAgICAgICBjb2xvcjogJ2dyZWVuJyxcbiAgICAgIH0sXG4gICAgICBzZWNvbmRhcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NixcbiAgICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgY29tcG91bmRWYXJpYW50czogW1xuICAgIHtcbiAgICAgIHNpemU6ICdzbWFsbCcsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgICQkZmxleDogNTcsXG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHNpemU6ICdsYXJnZScsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgICQkZmxleDogNTgsXG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSkpO1xuXG5leHBvcnQgY29uc3QgY2xzNiA9IGNzcygoeyB0aGVtZSB9KSA9PiAoe1xuICBjb2xvcjogJyRwYWxldHRlLm1haW4nLFxuICAvLyBAdHMtZXhwZWN0LWVycm9yIG1haW4xIGRvZXMgbm90IGV4aXN0cyBpbiB0aGVtZS5wYWxldHRlXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUucGFsZXR0ZS5tYWluMSxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUubWFpbicpfWAsXG4gIHZhcmlhbnRzOiB7XG4gICAgcGFsZXR0ZToge1xuICAgICAgcHJpbWFyeToge1xuICAgICAgICBjb2xvcjogJ3JlZCcsXG4gICAgICAgIGJvcmRlckNvbG9yOiAncGluaycsXG4gICAgICB9LFxuICAgICAgc2Vjb25kYXJ5OiB7XG4gICAgICAgIGNvbG9yOiAncmVkJyxcbiAgICAgICAgYm9yZGVyQ29sb3I6ICdwaW5rJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgY29tcG91bmRWYXJpYW50czogW1xuICAgIHtcbiAgICAgIHBhbGV0dGU6ICdzZWNvbmRhcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgIGJvcmRlcldpZHRoOiAxLFxuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSkpO1xuIl19*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.js b/packages/pigment-css-core/tests/css/fixtures/css.output.js index ad2dea6c..0da00c5b 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.output.js +++ b/packages/pigment-css-core/tests/css/fixtures/css.output.js @@ -4,6 +4,7 @@ import { css as _css3, css as _css4, css as _css5, + css as _css6, } from '@pigment-css/core/runtime'; export const cls1 = /*#__PURE__*/ _css({ classes: 'cx3ztpe', @@ -86,3 +87,26 @@ export const cls5 = /*#__PURE__*/ _css5({ }, ], }); +export const cls6 = /*#__PURE__*/ _css6({ + classes: 'c1qxs0o9', + variants: [ + { + $$cls: 'c1qxs0o9-palette-primary', + props: { + palette: 'primary', + }, + }, + { + $$cls: 'c1qxs0o9-palette-secondary', + props: { + palette: 'secondary', + }, + }, + { + $$cls: 'c1qxs0o9-cv', + props: { + palette: 'secondary', + }, + }, + ], +}); diff --git a/packages/pigment-css-core/tests/keyframes/keyframes.spec.ts b/packages/pigment-css-core/tests/keyframes/keyframes.spec.ts index 0d52dde7..f3ac7a1f 100644 --- a/packages/pigment-css-core/tests/keyframes/keyframes.spec.ts +++ b/packages/pigment-css-core/tests/keyframes/keyframes.spec.ts @@ -1,8 +1,18 @@ +import { t } from '@pigment-css/theme'; import { keyframes } from '../../src'; -keyframes` +declare module '@pigment-css/theme' { + interface Theme { + palette: { + main: string; + }; + } +} + +keyframes( + ({ theme }) => ` 0% { - background: ${({ theme }) => theme.palette.main}; + background: ${theme.palette.main}; } 50% { @@ -10,18 +20,20 @@ keyframes` } 100% { - background: ${({ theme }) => { + background: ${ // @ts-expect-error secondary does not exist on theme. - return theme.palette.secondary.main; - }}; + theme.palette.secondary.main + }; } -`; +`, +); -keyframes({ +const res = keyframes({ className: 'loop', -})` +})( + ({ theme }) => ` 0% { - background: ${({ theme }) => theme.palette.main}; + background: ${theme.palette.main}; } 50% { @@ -29,30 +41,28 @@ keyframes({ } 100% { - background: ${({ theme }) => { + background: ${ // @ts-expect-error secondary does not exist on theme. - return theme.palette.secondary.main; - }}; + theme.palette.secondary.main + }; } -`; +`, +); -keyframes( - { - className: 'loop', +keyframes({ + className: 'loop', +})({ + '0%': { + background: t('$palette.main'), }, - ({ theme }) => ({ - '0%': { - background: theme.palette.main, - }, - '50%': { - background: 'green', - }, - '100%': { - // @ts-expect-error secondary does not exist on theme. - background: theme.palette.secondary.main, - }, - }), -); + '50%': { + background: 'green', + }, + '100%': { + // @ts-expect-error secondary does not exist on theme. + background: theme.palette.secondary.main, + }, +}); keyframes(({ theme }) => ({ '0%': { From d130e55f3c4c87c63864b73f284707bed627b5a3 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Tue, 14 Jan 2025 20:01:12 +0530 Subject: [PATCH 15/42] eslint fix --- .eslintignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintignore b/.eslintignore index a9382ec8..1a9209a1 100644 --- a/.eslintignore +++ b/.eslintignore @@ -9,6 +9,7 @@ /packages/pigment-css-react/exports/ /packages/pigment-css-react/theme/ /packages/pigment-css-react/tests/**/fixtures +/packages/pigment-css-core/exports/ /packages/pigment-css-core/tests/**/fixtures /packages/pigment-css-nextjs-plugin/loader.js # Ignore fixtures From 2365f758935459ce52d10002dcc12f1aa3e149f7 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Tue, 14 Jan 2025 20:24:05 +0530 Subject: [PATCH 16/42] Replace absolute paths in sourcemap to relative paths --- .../tests/css/fixtures/css-no-layers.output.css | 2 +- .../css/fixtures/css-replacement-import.output.css | 2 +- .../tests/css/fixtures/css.output.css | 2 +- .../keyframes/fixtures/keyframes-theme.output.css | 2 +- .../tests/keyframes/fixtures/keyframes.output.css | 2 +- packages/pigment-css-core/tests/testUtils.ts | 11 ++++++++++- 6 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/pigment-css-core/tests/css/fixtures/css-no-layers.output.css b/packages/pigment-css-core/tests/css/fixtures/css-no-layers.output.css index 05cea33f..cc0b1e81 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css-no-layers.output.css +++ b/packages/pigment-css-core/tests/css/fixtures/css-no-layers.output.css @@ -1,3 +1,3 @@ @keyframes ggmdnc6 {50%{background:green;}} .c12ez28n{---flex:1;color:red;font-size:3rem;animation-name:ggmdnc6;background-color:aliceblue;} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3Mtbm8tbGF5ZXJzLmlucHV0LmpzIl0sIm5hbWVzIjpbIi5nZ21kbmM2IiwiLmMxMmV6MjhuIl0sIm1hcHBpbmdzIjoiQUFJbUNBO0FBTWZDIiwiZmlsZSI6Ii9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3Mtbm8tbGF5ZXJzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuXG5jb25zdCBhYiA9ICdhbGljZWJsdWUnO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogJ2dyZWVuJyxcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IGNsczEgPSBjc3NgXG4gIC0tLWZsZXg6IDE7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGFuaW1hdGlvbi1uYW1lOiAke2dyYWRpZW50S2V5ZnJhbWV9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbmA7XG4iXX0=*/ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3Mtbm8tbGF5ZXJzLmlucHV0LmpzIl0sIm5hbWVzIjpbIi5nZ21kbmM2IiwiLmMxMmV6MjhuIl0sIm1hcHBpbmdzIjoiQUFJbUNBO0FBTWZDIiwiZmlsZSI6Ii9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3Mtbm8tbGF5ZXJzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuXG5jb25zdCBhYiA9ICdhbGljZWJsdWUnO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogJ2dyZWVuJyxcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IGNsczEgPSBjc3NgXG4gIC0tLWZsZXg6IDE7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGFuaW1hdGlvbi1uYW1lOiAke2dyYWRpZW50S2V5ZnJhbWV9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbmA7XG4iXX0=*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/css/fixtures/css-replacement-import.output.css b/packages/pigment-css-core/tests/css/fixtures/css-replacement-import.output.css index 385b3705..11280dbe 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css-replacement-import.output.css +++ b/packages/pigment-css-core/tests/css/fixtures/css-replacement-import.output.css @@ -1,3 +1,3 @@ @layer pigment.base{@keyframes gasf547{50%{background:green;}}} @layer pigment.base{.c1pxk10v{---flex:1;color:red;font-size:3rem;animation-name:gasf547;background-color:aliceblue;}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MtcmVwbGFjZW1lbnQtaW1wb3J0LmlucHV0LmpzIl0sIm5hbWVzIjpbIi5nYXNmNTQ3IiwiLmMxcHhrMTB2Il0sIm1hcHBpbmdzIjoiQUFJbUNBO0FBTWZDIiwiZmlsZSI6Ii9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MtcmVwbGFjZW1lbnQtaW1wb3J0LmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuXG5jb25zdCBhYiA9ICdhbGljZWJsdWUnO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogJ2dyZWVuJyxcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IGNsczEgPSBjc3NgXG4gIC0tLWZsZXg6IDE7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGFuaW1hdGlvbi1uYW1lOiAke2dyYWRpZW50S2V5ZnJhbWV9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbmA7XG4iXX0=*/ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MtcmVwbGFjZW1lbnQtaW1wb3J0LmlucHV0LmpzIl0sIm5hbWVzIjpbIi5nYXNmNTQ3IiwiLmMxcHhrMTB2Il0sIm1hcHBpbmdzIjoiQUFJbUNBO0FBTWZDIiwiZmlsZSI6Ii9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MtcmVwbGFjZW1lbnQtaW1wb3J0LmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuXG5jb25zdCBhYiA9ICdhbGljZWJsdWUnO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogJ2dyZWVuJyxcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IGNsczEgPSBjc3NgXG4gIC0tLWZsZXg6IDE7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGFuaW1hdGlvbi1uYW1lOiAke2dyYWRpZW50S2V5ZnJhbWV9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbmA7XG4iXX0=*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.css b/packages/pigment-css-core/tests/css/fixtures/css.output.css index 13ae7542..d5e3d93b 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.output.css +++ b/packages/pigment-css-core/tests/css/fixtures/css.output.css @@ -22,4 +22,4 @@ @layer pigment.variants{.c1qxs0o9-palette-primary{color:red;border-color:pink;}} @layer pigment.variants{.c1qxs0o9-palette-secondary{color:red;border-color:pink;}} @layer pigment.compoundvariants{.c1qxs0o9-cv{border-width:1px;}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmdxdmMzd2UiLCIuY3gzenRwZSIsIi5jMWFxOTlvNiIsIi5jMWFxOTlvNi0xIiwiLlRlc3QtY2xhc3MiLCIuVGVzdC1jbGFzczIiLCIuVGVzdC1jbGFzczItMSIsIi5UZXN0LWNsYXNzMi0yIiwiLlRlc3QtY2xhc3MyLTMiLCIuVGVzdC1jbGFzczItc2l6ZS1zbWFsbC0xIiwiLlRlc3QtY2xhc3MyLXNpemUtbWVkaXVtLTEiLCIuVGVzdC1jbGFzczItc2l6ZS1sYXJnZS0xIiwiLlRlc3QtY2xhc3MzIiwiLlRlc3QtY2xhc3MzLXNpemUtc21hbGwiLCIuVGVzdC1jbGFzczMtc2l6ZS1tZWRpdW0iLCIuVGVzdC1jbGFzczMtc2l6ZS1sYXJnZSIsIi5UZXN0LWNsYXNzMy1jb2xvci1wcmltYXJ5IiwiLlRlc3QtY2xhc3MzLWNvbG9yLXNlY29uZGFyeSIsIi5UZXN0LWNsYXNzMy1jdiIsIi5UZXN0LWNsYXNzMy1jdi0xIiwiLmMxcXhzMG85IiwiLmMxcXhzMG85LXBhbGV0dGUtcHJpbWFyeSIsIi5jMXF4czBvOS1wYWxldHRlLXNlY29uZGFyeSIsIi5jMXF4czBvOS1jdiJdLCJtYXBwaW5ncyI6IkFBS21DQTtBQU1mQztBQVNsQkM7QUFLQUM7QUFPa0JDO0FBVWxCQztBQU1BQztBQXdCQUM7QUFNQUM7QUFwQ0FDO0FBTUFDO0FBd0JBQztBQWNvREM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFxRDlCQztBQUFBQztBQUFBQztBQUFBQyIsImZpbGUiOiIvVXNlcnMvYnJpamVzaC9wcm9qZWN0cy9tdWkvcGlnbWVudC1jc3MvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9jc3MvZml4dHVyZXMvY3NzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuaW1wb3J0IHsgdCB9IGZyb20gJ0BwaWdtZW50LWNzcy90aGVtZSc7XG5cbmNvbnN0IGFiID0gJ2FsaWNlYmx1ZSc7XG5cbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUgPSBrZXlmcmFtZXMoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiAnZ3JlZW4nLFxuICB9LFxufSkpO1xuXG5leHBvcnQgY29uc3QgY2xzMSA9IGNzc2BcbiAgLS0tZmxleDogMTtcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYW5pbWF0aW9uLW5hbWU6ICR7Z3JhZGllbnRLZXlmcmFtZX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGNsczIgPSBjc3MoXG4gIHtcbiAgICAkJGZsZXg6IDIxLFxuICAgICQkdGVzdFZhcjogJ3JlZCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkICQkdGVzdFZhcicsXG4gIH0sXG4gIHtcbiAgICAkJGZsZXg6IDIyLFxuICAgICQkdGVzdFZhcjE6ICdyZWQnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAkJHRlc3RWYXIxJyxcbiAgfSxcbik7XG5cbmV4cG9ydCBjb25zdCBjbHMzID0gY3NzKHtcbiAgY2xhc3NOYW1lOiAnVGVzdC1jbGFzcycsXG59KWBcbiAgLS0tZmxleDogMztcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG5gO1xuXG5leHBvcnQgY29uc3QgY2xzNCA9IGNzcyh7IGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MyJyB9KShcbiAge1xuICAgICQkZmxleDogNDEsXG4gICAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6ICckJHRlc3RWYXInLFxuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIH0sXG4gICh7IHRoZW1lIH0pID0+ICh7XG4gICAgJCRmbGV4OiA0MixcbiAgICBjb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgZm9udFNpemU6IHRoZW1lLnNpemUuZm9udC5oMSxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGFiLFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBzaXplOiB7XG4gICAgICAgIHNtYWxsOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjEsXG4gICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgICAgICB9LFxuICAgICAgICBtZWRpdW06IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMixcbiAgICAgICAgICBwYWRkaW5nOiA1LFxuICAgICAgICB9LFxuICAgICAgICBsYXJnZToge1xuICAgICAgICAgICQkZmxleDogNDIzLFxuICAgICAgICAgIHBhZGRpbmc6IDEwLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICB9KSxcbiAgKHsgdGhlbWUgfSkgPT4gYFxuICAgIC0tLWZsZXg6IDQzO1xuICAgIGNvbG9yOiAke3RoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgICBmb250LXNpemU6ICR7dGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbiAgYCxcbiAgYFxuICAgIC0tLWZsZXg6IDQ0O1xuICAgIGNvbG9yOiByZWQ7XG4gICAgZm9udC1zaXplOiAxcmVtO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuICBgLFxuKTtcblxuZXhwb3J0IGNvbnN0IGNsczUgPSBjc3MoeyBjbGFzc05hbWU6ICdUZXN0LWNsYXNzMycgfSkoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJCRmbGV4OiA1MSxcbiAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgYmFja2dyb3VuZENvbG9yOiAnJCR0ZXN0VmFyJyxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUucHJpbWFyeS5tYWluJyl9YCxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGZsZXg6IDUyLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRmbGV4OiA1MyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGZsZXg6IDU0LFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBjb2xvcjoge1xuICAgICAgcHJpbWFyeToge1xuICAgICAgICAkJGZsZXg6IDU1LFxuICAgICAgICBjb2xvcjogJ2dyZWVuJyxcbiAgICAgIH0sXG4gICAgICBzZWNvbmRhcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NixcbiAgICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgY29tcG91bmRWYXJpYW50czogW1xuICAgIHtcbiAgICAgIHNpemU6ICdzbWFsbCcsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgICQkZmxleDogNTcsXG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHNpemU6ICdsYXJnZScsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgICQkZmxleDogNTgsXG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSkpO1xuXG5leHBvcnQgY29uc3QgY2xzNiA9IGNzcygoeyB0aGVtZSB9KSA9PiAoe1xuICBjb2xvcjogJyRwYWxldHRlLm1haW4nLFxuICAvLyBAdHMtZXhwZWN0LWVycm9yIG1haW4xIGRvZXMgbm90IGV4aXN0cyBpbiB0aGVtZS5wYWxldHRlXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUucGFsZXR0ZS5tYWluMSxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUubWFpbicpfWAsXG4gIHZhcmlhbnRzOiB7XG4gICAgcGFsZXR0ZToge1xuICAgICAgcHJpbWFyeToge1xuICAgICAgICBjb2xvcjogJ3JlZCcsXG4gICAgICAgIGJvcmRlckNvbG9yOiAncGluaycsXG4gICAgICB9LFxuICAgICAgc2Vjb25kYXJ5OiB7XG4gICAgICAgIGNvbG9yOiAncmVkJyxcbiAgICAgICAgYm9yZGVyQ29sb3I6ICdwaW5rJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgY29tcG91bmRWYXJpYW50czogW1xuICAgIHtcbiAgICAgIHBhbGV0dGU6ICdzZWNvbmRhcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgIGJvcmRlcldpZHRoOiAxLFxuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSkpO1xuIl19*/ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmdxdmMzd2UiLCIuY3gzenRwZSIsIi5jMWFxOTlvNiIsIi5jMWFxOTlvNi0xIiwiLlRlc3QtY2xhc3MiLCIuVGVzdC1jbGFzczIiLCIuVGVzdC1jbGFzczItMSIsIi5UZXN0LWNsYXNzMi0yIiwiLlRlc3QtY2xhc3MyLTMiLCIuVGVzdC1jbGFzczItc2l6ZS1zbWFsbC0xIiwiLlRlc3QtY2xhc3MyLXNpemUtbWVkaXVtLTEiLCIuVGVzdC1jbGFzczItc2l6ZS1sYXJnZS0xIiwiLlRlc3QtY2xhc3MzIiwiLlRlc3QtY2xhc3MzLXNpemUtc21hbGwiLCIuVGVzdC1jbGFzczMtc2l6ZS1tZWRpdW0iLCIuVGVzdC1jbGFzczMtc2l6ZS1sYXJnZSIsIi5UZXN0LWNsYXNzMy1jb2xvci1wcmltYXJ5IiwiLlRlc3QtY2xhc3MzLWNvbG9yLXNlY29uZGFyeSIsIi5UZXN0LWNsYXNzMy1jdiIsIi5UZXN0LWNsYXNzMy1jdi0xIiwiLmMxcXhzMG85IiwiLmMxcXhzMG85LXBhbGV0dGUtcHJpbWFyeSIsIi5jMXF4czBvOS1wYWxldHRlLXNlY29uZGFyeSIsIi5jMXF4czBvOS1jdiJdLCJtYXBwaW5ncyI6IkFBS21DQTtBQU1mQztBQVNsQkM7QUFLQUM7QUFPa0JDO0FBVWxCQztBQU1BQztBQXdCQUM7QUFNQUM7QUFwQ0FDO0FBTUFDO0FBd0JBQztBQWNvREM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFxRDlCQztBQUFBQztBQUFBQztBQUFBQyIsImZpbGUiOiIvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9jc3MvZml4dHVyZXMvY3NzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuaW1wb3J0IHsgdCB9IGZyb20gJ0BwaWdtZW50LWNzcy90aGVtZSc7XG5cbmNvbnN0IGFiID0gJ2FsaWNlYmx1ZSc7XG5cbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUgPSBrZXlmcmFtZXMoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiAnZ3JlZW4nLFxuICB9LFxufSkpO1xuXG5leHBvcnQgY29uc3QgY2xzMSA9IGNzc2BcbiAgLS0tZmxleDogMTtcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYW5pbWF0aW9uLW5hbWU6ICR7Z3JhZGllbnRLZXlmcmFtZX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGNsczIgPSBjc3MoXG4gIHtcbiAgICAkJGZsZXg6IDIxLFxuICAgICQkdGVzdFZhcjogJ3JlZCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkICQkdGVzdFZhcicsXG4gIH0sXG4gIHtcbiAgICAkJGZsZXg6IDIyLFxuICAgICQkdGVzdFZhcjE6ICdyZWQnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAkJHRlc3RWYXIxJyxcbiAgfSxcbik7XG5cbmV4cG9ydCBjb25zdCBjbHMzID0gY3NzKHtcbiAgY2xhc3NOYW1lOiAnVGVzdC1jbGFzcycsXG59KWBcbiAgLS0tZmxleDogMztcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG5gO1xuXG5leHBvcnQgY29uc3QgY2xzNCA9IGNzcyh7IGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MyJyB9KShcbiAge1xuICAgICQkZmxleDogNDEsXG4gICAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6ICckJHRlc3RWYXInLFxuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIH0sXG4gICh7IHRoZW1lIH0pID0+ICh7XG4gICAgJCRmbGV4OiA0MixcbiAgICBjb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgZm9udFNpemU6IHRoZW1lLnNpemUuZm9udC5oMSxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGFiLFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBzaXplOiB7XG4gICAgICAgIHNtYWxsOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjEsXG4gICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgICAgICB9LFxuICAgICAgICBtZWRpdW06IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMixcbiAgICAgICAgICBwYWRkaW5nOiA1LFxuICAgICAgICB9LFxuICAgICAgICBsYXJnZToge1xuICAgICAgICAgICQkZmxleDogNDIzLFxuICAgICAgICAgIHBhZGRpbmc6IDEwLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICB9KSxcbiAgKHsgdGhlbWUgfSkgPT4gYFxuICAgIC0tLWZsZXg6IDQzO1xuICAgIGNvbG9yOiAke3RoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgICBmb250LXNpemU6ICR7dGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbiAgYCxcbiAgYFxuICAgIC0tLWZsZXg6IDQ0O1xuICAgIGNvbG9yOiByZWQ7XG4gICAgZm9udC1zaXplOiAxcmVtO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuICBgLFxuKTtcblxuZXhwb3J0IGNvbnN0IGNsczUgPSBjc3MoeyBjbGFzc05hbWU6ICdUZXN0LWNsYXNzMycgfSkoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJCRmbGV4OiA1MSxcbiAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgYmFja2dyb3VuZENvbG9yOiAnJCR0ZXN0VmFyJyxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUucHJpbWFyeS5tYWluJyl9YCxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGZsZXg6IDUyLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRmbGV4OiA1MyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGZsZXg6IDU0LFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBjb2xvcjoge1xuICAgICAgcHJpbWFyeToge1xuICAgICAgICAkJGZsZXg6IDU1LFxuICAgICAgICBjb2xvcjogJ2dyZWVuJyxcbiAgICAgIH0sXG4gICAgICBzZWNvbmRhcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NixcbiAgICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgY29tcG91bmRWYXJpYW50czogW1xuICAgIHtcbiAgICAgIHNpemU6ICdzbWFsbCcsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgICQkZmxleDogNTcsXG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHNpemU6ICdsYXJnZScsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgICQkZmxleDogNTgsXG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSkpO1xuXG5leHBvcnQgY29uc3QgY2xzNiA9IGNzcygoeyB0aGVtZSB9KSA9PiAoe1xuICBjb2xvcjogJyRwYWxldHRlLm1haW4nLFxuICAvLyBAdHMtZXhwZWN0LWVycm9yIG1haW4xIGRvZXMgbm90IGV4aXN0cyBpbiB0aGVtZS5wYWxldHRlXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUucGFsZXR0ZS5tYWluMSxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUubWFpbicpfWAsXG4gIHZhcmlhbnRzOiB7XG4gICAgcGFsZXR0ZToge1xuICAgICAgcHJpbWFyeToge1xuICAgICAgICBjb2xvcjogJ3JlZCcsXG4gICAgICAgIGJvcmRlckNvbG9yOiAncGluaycsXG4gICAgICB9LFxuICAgICAgc2Vjb25kYXJ5OiB7XG4gICAgICAgIGNvbG9yOiAncmVkJyxcbiAgICAgICAgYm9yZGVyQ29sb3I6ICdwaW5rJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgY29tcG91bmRWYXJpYW50czogW1xuICAgIHtcbiAgICAgIHBhbGV0dGU6ICdzZWNvbmRhcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgIGJvcmRlcldpZHRoOiAxLFxuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSkpO1xuIl19*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css index 204ddee1..c595476c 100644 --- a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes-theme.output.css @@ -4,4 +4,4 @@ @layer pigment.base{@keyframes k1gqc21d{50%{background:green;}100%{background:blue;}}} @layer pigment.base{@keyframes loop{50%{background:green;}}} @layer pigment.base{@keyframes k1jjo2js{50%{background:green;}}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMtdGhlbWUuaW5wdXQuanMiXSwibmFtZXMiOlsiLmc1Zzk1bmQiLCIuZ3QyZnVhYiIsIi5nMTYxMXRpMyIsIi5rMWdxYzIxZCIsIi5sb29wIiwiLmsxampvMmpzIl0sIm1hcHBpbmdzIjoiQUFJbUNBO0FBWVRDO0FBMEJXQztBQUd4QkM7QUFpQkFDO0FBZ0JYQyIsImZpbGUiOiIvVXNlcnMvYnJpamVzaC9wcm9qZWN0cy9tdWkvcGlnbWVudC1jc3MvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9rZXlmcmFtZXMvZml4dHVyZXMva2V5ZnJhbWVzLXRoZW1lLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9jb3JlJztcblxuY29uc3QgZ3JlZW4gPSAnZ3JlZW4nO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICcwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgfSxcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbixcbiAgfSxcbiAgJzEwMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5zZWNvbmRhcnkubWFpbixcbiAgfSxcbn0pKTtcblxuY29uc3QgZ3JhZGllbnRLZXlmcmFtZTIgPSBrZXlmcmFtZXNgXG4gIDAlIHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgfVxuXG4gIDUwJSB7XG4gICAgYmFja2dyb3VuZDogJHtncmVlbn07XG4gIH1cblxuICAxMDAlIHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUuc2Vjb25kYXJ5Lm1haW59O1xuICB9XG5gO1xuXG4vLyBzaW11bGF0ZSBDc3NCYXNlbGluZSB0cmFuc3BpbGVkIGJ5IE5leHQuanNcbmV4cG9ydCBjb25zdCBzdHlsZXMgPSAodGhlbWUpID0+ICh7XG4gICcwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgfSxcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbixcbiAgfSxcbiAgJzEwMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5zZWNvbmRhcnkubWFpbixcbiAgfSxcbn0pO1xuY29uc3QgZ3JhZGllbnRLZXlmcmFtZTMgPSBrZXlmcmFtZXMoKF9jID0gKHsgdGhlbWUgfSkgPT4gc3R5bGVzKHRoZW1lKSkpO1xudmFyIF9jO1xuXG5jb25zdCBrZXkxID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLm1haW59O1xuICB9XG5cbiAgNTAlIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuXG4gIDEwMCUge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4ge1xuICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvciBzZWNvbmRhcnkgZG9lcyBub3QgZXhpc3Qgb24gdGhlbWUuXG4gICAgICByZXR1cm4gdGhlbWUucGFsZXR0ZS5zZWNvbmRhcnkubWFpbjtcbiAgICB9fTtcbiAgfVxuYDtcblxuY29uc3Qga2V5MiA9IGtleWZyYW1lcyh7XG4gIGNsYXNzTmFtZTogJ2xvb3AnLFxufSlgXG4gIDAlIHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUubWFpbn07XG4gIH1cblxuICA1MCUge1xuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICB9XG5gO1xuXG5jb25zdCBrZXkzID0ga2V5ZnJhbWVzKFxuICB7XG4gICAgY2xhc3NOYW1lOiAnbG9vcDEnLFxuICB9LFxuICAoeyB0aGVtZSB9KSA9PiAoe1xuICAgICcwJSc6IHtcbiAgICAgIGJhY2tncm91bmQ6IHRoZW1lLnBhbGV0dGUubWFpbixcbiAgICB9LFxuICAgICc1MCUnOiB7XG4gICAgICBiYWNrZ3JvdW5kOiAnZ3JlZW4nLFxuICAgIH0sXG4gIH0pLFxuKTtcbiJdfQ==*/ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMtdGhlbWUuaW5wdXQuanMiXSwibmFtZXMiOlsiLmc1Zzk1bmQiLCIuZ3QyZnVhYiIsIi5nMTYxMXRpMyIsIi5rMWdxYzIxZCIsIi5sb29wIiwiLmsxampvMmpzIl0sIm1hcHBpbmdzIjoiQUFJbUNBO0FBWVRDO0FBMEJXQztBQUd4QkM7QUFpQkFDO0FBZ0JYQyIsImZpbGUiOiIvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9rZXlmcmFtZXMvZml4dHVyZXMva2V5ZnJhbWVzLXRoZW1lLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9jb3JlJztcblxuY29uc3QgZ3JlZW4gPSAnZ3JlZW4nO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICcwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgfSxcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbixcbiAgfSxcbiAgJzEwMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5zZWNvbmRhcnkubWFpbixcbiAgfSxcbn0pKTtcblxuY29uc3QgZ3JhZGllbnRLZXlmcmFtZTIgPSBrZXlmcmFtZXNgXG4gIDAlIHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgfVxuXG4gIDUwJSB7XG4gICAgYmFja2dyb3VuZDogJHtncmVlbn07XG4gIH1cblxuICAxMDAlIHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUuc2Vjb25kYXJ5Lm1haW59O1xuICB9XG5gO1xuXG4vLyBzaW11bGF0ZSBDc3NCYXNlbGluZSB0cmFuc3BpbGVkIGJ5IE5leHQuanNcbmV4cG9ydCBjb25zdCBzdHlsZXMgPSAodGhlbWUpID0+ICh7XG4gICcwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgfSxcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbixcbiAgfSxcbiAgJzEwMCUnOiB7XG4gICAgYmFja2dyb3VuZDogdGhlbWUucGFsZXR0ZS5zZWNvbmRhcnkubWFpbixcbiAgfSxcbn0pO1xuY29uc3QgZ3JhZGllbnRLZXlmcmFtZTMgPSBrZXlmcmFtZXMoKF9jID0gKHsgdGhlbWUgfSkgPT4gc3R5bGVzKHRoZW1lKSkpO1xudmFyIF9jO1xuXG5jb25zdCBrZXkxID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5wYWxldHRlLm1haW59O1xuICB9XG5cbiAgNTAlIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuXG4gIDEwMCUge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4ge1xuICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvciBzZWNvbmRhcnkgZG9lcyBub3QgZXhpc3Qgb24gdGhlbWUuXG4gICAgICByZXR1cm4gdGhlbWUucGFsZXR0ZS5zZWNvbmRhcnkubWFpbjtcbiAgICB9fTtcbiAgfVxuYDtcblxuY29uc3Qga2V5MiA9IGtleWZyYW1lcyh7XG4gIGNsYXNzTmFtZTogJ2xvb3AnLFxufSlgXG4gIDAlIHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUubWFpbn07XG4gIH1cblxuICA1MCUge1xuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICB9XG5gO1xuXG5jb25zdCBrZXkzID0ga2V5ZnJhbWVzKFxuICB7XG4gICAgY2xhc3NOYW1lOiAnbG9vcDEnLFxuICB9LFxuICAoeyB0aGVtZSB9KSA9PiAoe1xuICAgICcwJSc6IHtcbiAgICAgIGJhY2tncm91bmQ6IHRoZW1lLnBhbGV0dGUubWFpbixcbiAgICB9LFxuICAgICc1MCUnOiB7XG4gICAgICBiYWNrZ3JvdW5kOiAnZ3JlZW4nLFxuICAgIH0sXG4gIH0pLFxuKTtcbiJdfQ==*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css index 657e080d..4dd15452 100644 --- a/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css +++ b/packages/pigment-css-core/tests/keyframes/fixtures/keyframes.output.css @@ -1,3 +1,3 @@ @layer pigment.base{@keyframes rrtfw11{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}} @layer pigment.base{@keyframes rotate{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMuaW5wdXQuanMiXSwibmFtZXMiOlsiLnJydGZ3MTEiLCIucm90YXRlIl0sIm1hcHBpbmdzIjoiQUFFaUNBO0FBU1RDIiwiZmlsZSI6Ii9Vc2Vycy9icmlqZXNoL3Byb2plY3RzL211aS9waWdtZW50LWNzcy9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMuaW5wdXQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuXG5jb25zdCByb3RhdGVLZXlmcmFtZSA9IGtleWZyYW1lcyh7XG4gIGZyb206IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMzYwZGVnKScsXG4gIH0sXG4gIHRvOiB7XG4gICAgdHJhbnNmb3JtOiAncm90YXRlKDBkZWcpJyxcbiAgfSxcbn0pO1xuXG5jb25zdCByb3RhdGVLZXlmcmFtZTIgPSBrZXlmcmFtZXMoeyBjbGFzc05hbWU6ICdyb3RhdGUnIH0pYFxuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG5gO1xuIl19*/ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMuaW5wdXQuanMiXSwibmFtZXMiOlsiLnJydGZ3MTEiLCIucm90YXRlIl0sIm1hcHBpbmdzIjoiQUFFaUNBO0FBU1RDIiwiZmlsZSI6Ii9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2tleWZyYW1lcy9maXh0dXJlcy9rZXlmcmFtZXMuaW5wdXQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuXG5jb25zdCByb3RhdGVLZXlmcmFtZSA9IGtleWZyYW1lcyh7XG4gIGZyb206IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMzYwZGVnKScsXG4gIH0sXG4gIHRvOiB7XG4gICAgdHJhbnNmb3JtOiAncm90YXRlKDBkZWcpJyxcbiAgfSxcbn0pO1xuXG5jb25zdCByb3RhdGVLZXlmcmFtZTIgPSBrZXlmcmFtZXMoeyBjbGFzc05hbWU6ICdyb3RhdGUnIH0pYFxuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG5gO1xuIl19*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/testUtils.ts b/packages/pigment-css-core/tests/testUtils.ts index 9467cf15..9f420ed3 100644 --- a/packages/pigment-css-core/tests/testUtils.ts +++ b/packages/pigment-css-core/tests/testUtils.ts @@ -14,6 +14,15 @@ type TransformOptions = { const shouldUpdateOutput = process.env.UPDATE_FIXTURES === 'true'; +function replaceAbsolutePathInSourceMap(sourcemap: string) { + const sourceMapJson = JSON.parse(sourcemap) as { sources: string[]; file: string }; + sourceMapJson.sources = sourceMapJson.sources.map((absPath) => + absPath.replace(process.cwd(), ''), + ); + sourceMapJson.file = sourceMapJson.file.replace(process.cwd(), ''); + return JSON.stringify(sourceMapJson); +} + export async function runTransformation(absolutePath: string, options?: TransformOptions) { const cache = new TransformCacheCollection(); const { emitter: eventEmitter } = createFileReporter(false); @@ -85,7 +94,7 @@ export async function runTransformation(absolutePath: string, options?: Transfor const formattedCss = (result.cssText ?? '') + (result.cssSourceMapText - ? `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(result.cssSourceMapText).toString('base64')}*/` + ? `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(replaceAbsolutePathInSourceMap(result.cssSourceMapText)).toString('base64')}*/` : ''); if (!outputContent || shouldUpdateOutput) { From 26c97dccc67f5f15b7bff8d9144e85cbc4d61dc1 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Tue, 21 Jan 2025 09:26:05 +0530 Subject: [PATCH 17/42] sync pnpm changes --- pnpm-lock.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 51672668..b63d5cbf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -454,8 +454,8 @@ importers: packages/pigment-css-core: dependencies: '@babel/types': - specifier: ^7.26.0 - version: 7.26.0 + specifier: ^7.25.8 + version: 7.26.5 '@pigment-css/theme': specifier: workspace:^ version: link:../pigment-css-theme From 0919b1dee6f029b82fe073e3a226cc2cb42570cc Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Sat, 1 Feb 2025 09:55:51 +0530 Subject: [PATCH 18/42] Add a workaround to use t() function in template literals --- packages/pigment-css-theme/package.json | 8 ++++++ packages/pigment-css-theme/src/index-node.ts | 1 + packages/pigment-css-theme/src/theme-node.ts | 26 ++++++++++++++++++++ packages/pigment-css-theme/src/theme.ts | 8 ++++-- packages/pigment-css-theme/tsup.config.ts | 2 +- 5 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 packages/pigment-css-theme/src/index-node.ts create mode 100644 packages/pigment-css-theme/src/theme-node.ts diff --git a/packages/pigment-css-theme/package.json b/packages/pigment-css-theme/package.json index fdaf7ff4..2b0d691a 100644 --- a/packages/pigment-css-theme/package.json +++ b/packages/pigment-css-theme/package.json @@ -47,6 +47,14 @@ ], "exports": { ".": { + "node": { + "types": "./build/index.d.ts", + "import": { + "types": "./build/index.d.mts", + "default": "./build/index-node.mjs" + }, + "default": "./build/index-node.js" + }, "types": "./build/index.d.ts", "import": { "types": "./build/index.d.mts", diff --git a/packages/pigment-css-theme/src/index-node.ts b/packages/pigment-css-theme/src/index-node.ts new file mode 100644 index 00000000..834bb239 --- /dev/null +++ b/packages/pigment-css-theme/src/index-node.ts @@ -0,0 +1 @@ +export * from './theme-node'; diff --git a/packages/pigment-css-theme/src/theme-node.ts b/packages/pigment-css-theme/src/theme-node.ts new file mode 100644 index 00000000..7f5f0ddf --- /dev/null +++ b/packages/pigment-css-theme/src/theme-node.ts @@ -0,0 +1,26 @@ +import { ThemeKey } from './theme'; + +class WrapperString extends String { + isThemeVar = true; +} + +/** + * It just returns what it receives at this point but with a wrapper to identity in Node.js. + * It is there to strictly type first argument as per the overridden `Theme`. + * + * @example Usage in application + * + * ```js + * import { t } from '@pigment-css/theme'; + * import { css } from '@pigment-css/core'; + * + * // override Theme type as per docs + * + * const cls1 = css({ + * border: `1px solid ${t('$palette.main')}`, + * }) + * ``` + */ +export function t(themeKey: ThemeKey): WrapperString { + return new WrapperString(themeKey); +} diff --git a/packages/pigment-css-theme/src/theme.ts b/packages/pigment-css-theme/src/theme.ts index 040db7e5..0e5a461e 100644 --- a/packages/pigment-css-theme/src/theme.ts +++ b/packages/pigment-css-theme/src/theme.ts @@ -16,6 +16,10 @@ type PathsToLeaves = { export type ThemeKey = `$${PathsToLeaves}`; +class WrapperString extends String { + isThemeVar = true; +} + /** * It just returns what it receives at this point. Actual transformation happens during the build time * separately. @@ -34,6 +38,6 @@ export type ThemeKey = `$${PathsToLeaves}`; * }) * ``` */ -export function t(themeKey: ThemeKey): ThemeKey { - return themeKey; +export function t(themeKey: ThemeKey): WrapperString { + return new WrapperString(themeKey); } diff --git a/packages/pigment-css-theme/tsup.config.ts b/packages/pigment-css-theme/tsup.config.ts index ac534617..b04427b6 100644 --- a/packages/pigment-css-theme/tsup.config.ts +++ b/packages/pigment-css-theme/tsup.config.ts @@ -6,7 +6,7 @@ const baseConfig: Options = { tsconfig: './tsconfig.build.json', }; -const BASE_FILES = ['index.ts']; +const BASE_FILES = ['index.ts', 'index-node.ts']; export default defineConfig([ { From 6b8362524f7b6edf50c3bc9bb6d3491a97e851c7 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Sat, 1 Feb 2025 09:56:59 +0530 Subject: [PATCH 19/42] Add defaultVariants to the output --- packages/pigment-css-core/src/base.ts | 2 +- packages/pigment-css-core/src/css.js | 28 ++----------------- packages/pigment-css-core/src/index.ts | 1 + .../pigment-css-core/src/processors/css.ts | 18 ++++++++++++ packages/pigment-css-core/src/runtime/css.ts | 4 +-- packages/pigment-css-core/src/utils.ts | 6 ++-- .../pigment-css-core/tests/css/css.spec.ts | 8 ++++++ .../tests/css/fixtures/css.input.js | 4 ++- .../tests/css/fixtures/css.output.css | 2 +- .../tests/css/fixtures/css.output.js | 3 ++ .../src/utils/processStyle.ts | 14 ++++++++-- 11 files changed, 55 insertions(+), 35 deletions(-) diff --git a/packages/pigment-css-core/src/base.ts b/packages/pigment-css-core/src/base.ts index a269a40c..9484e2ae 100644 --- a/packages/pigment-css-core/src/base.ts +++ b/packages/pigment-css-core/src/base.ts @@ -48,4 +48,4 @@ export type CSSObject = export type ThemeArgs = { theme: Theme; }; -export type Primitive = string | null | undefined | boolean | number; +export type Primitive = string | String | null | undefined | boolean | number; diff --git a/packages/pigment-css-core/src/css.js b/packages/pigment-css-core/src/css.js index 623486b0..0ad443b2 100644 --- a/packages/pigment-css-core/src/css.js +++ b/packages/pigment-css-core/src/css.js @@ -2,29 +2,7 @@ import { generateErrorMessage } from './utils'; export default function css() { console.error(generateErrorMessage('css')); + return () => { + console.error(generateErrorMessage('css')); + }; } - -/** -const cls1 = css({ - className() { - return 'class-name', - }, -})({ - color: 'red', - backgroundColor: (props) => props.isRed ? 'red' : 'blue', - variants: { - size: { - small: { - padding: 2, - } - } - }, - compoundVariants: [], - defaultVariants: {}, -}); - -const {className, style} = cls1({ - isRed: true, - size: 'small', -}); - */ diff --git a/packages/pigment-css-core/src/index.ts b/packages/pigment-css-core/src/index.ts index fe74fe3e..e33b3b32 100644 --- a/packages/pigment-css-core/src/index.ts +++ b/packages/pigment-css-core/src/index.ts @@ -2,3 +2,4 @@ export * from '@pigment-css/theme'; export * from './base'; export { default as css } from './css'; export { default as keyframes } from './keyframes'; +export * from './utils'; diff --git a/packages/pigment-css-core/src/processors/css.ts b/packages/pigment-css-core/src/processors/css.ts index 5f735508..54a83e6f 100644 --- a/packages/pigment-css-core/src/processors/css.ts +++ b/packages/pigment-css-core/src/processors/css.ts @@ -21,6 +21,7 @@ import { serializeStyles, valueToLiteral, evaluateClassNameArg, + getCSSVar, } from '@pigment-css/utils'; import { CallParam, @@ -49,6 +50,8 @@ export type TemplateCallback = (params: Record | undefined) => export abstract class BaseCssProcessor { public variants: { $$cls: string; props: Record }[] = []; + public defaultVariants: Record = {}; + public variables: StyleObjectReturn['variables'] = {}; readonly artifacts: Artifact[] = []; @@ -159,6 +162,12 @@ export class CssTaggedTemplateProcessor extends BaseCssProcessor { const evaluatedValue = values.get(param.ex.name); if (typeof evaluatedValue === 'function') { templateExpressions.push(evaluatedValue(themeArgs)); + } else if ( + typeof evaluatedValue === 'object' && + evaluatedValue && + (evaluatedValue as unknown as Record).isThemeVar + ) { + templateExpressions.push(getCSSVar(evaluatedValue.toString(), true)); } else { templateExpressions.push(evaluatedValue as Primitive); } @@ -333,6 +342,7 @@ export class CssObjectProcessor extends BaseCssProcessor { addStyles(result.base, 'base'); addStyles(result.variants, 'variants'); addStyles(result.compoundVariants, 'compoundvariants'); + this.defaultVariants = result.defaultVariants; } } @@ -455,6 +465,14 @@ export class CssProcessor extends BaseProcessor { ), ); } + if (Object.keys(this.processor.defaultVariants).length > 0) { + args.properties.push( + t.objectProperty( + t.identifier('defaultVariants'), + valueToLiteral(this.processor.defaultVariants), + ), + ); + } if (Object.keys(this.processor.variables).length > 0) { args.properties.push( t.objectProperty(t.identifier('vars'), valueToLiteral(this.processor.variables)), diff --git a/packages/pigment-css-core/src/runtime/css.ts b/packages/pigment-css-core/src/runtime/css.ts index 53a34f8b..0d178496 100644 --- a/packages/pigment-css-core/src/runtime/css.ts +++ b/packages/pigment-css-core/src/runtime/css.ts @@ -3,12 +3,12 @@ */ type Props = Record; -type VariantInfo = { +export type VariantInfo = { $$cls: string; props: Props; }; -type ClassInfo = { +export type ClassInfo = { classes: string; variants?: VariantInfo[]; }; diff --git a/packages/pigment-css-core/src/utils.ts b/packages/pigment-css-core/src/utils.ts index 10899e57..ea4f4fa0 100644 --- a/packages/pigment-css-core/src/utils.ts +++ b/packages/pigment-css-core/src/utils.ts @@ -1,6 +1,6 @@ const BUNDLER_MESSAGE = - 'Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.'; + 'Make sure to install the Pigment CSS plugin package and configure it. @pigment-css/plugin/vite for Vite integration or @pigment-css/plugin/nextjs for Next.js integration.'; -export function generateErrorMessage(fnName: string) { - return `${process.env.PACKAGE_NAME}: You were trying to call "${fnName}" function without configuring your bundler. ${BUNDLER_MESSAGE}`; +export function generateErrorMessage(fnName: string, packageName = process.env.PACKAGE_NAME) { + return `${packageName}: You were trying to call "${fnName}" function without configuring your bundler. ${BUNDLER_MESSAGE}`; } diff --git a/packages/pigment-css-core/tests/css/css.spec.ts b/packages/pigment-css-core/tests/css/css.spec.ts index 6ebda1a7..ac3aea5b 100644 --- a/packages/pigment-css-core/tests/css/css.spec.ts +++ b/packages/pigment-css-core/tests/css/css.spec.ts @@ -43,8 +43,16 @@ const cls2 = css(({ theme }) => ({ }, }, ], + defaultVariants: { + palette: 'primary', + }, })); +const res = cls2({ + palette: 'primary', + size: 'large', +}); + const cls2WithMetadata = css({ className: 'Test1', })(({ theme }) => ({ diff --git a/packages/pigment-css-core/tests/css/fixtures/css.input.js b/packages/pigment-css-core/tests/css/fixtures/css.input.js index 2fb08379..7780b281 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.input.js +++ b/packages/pigment-css-core/tests/css/fixtures/css.input.js @@ -69,6 +69,9 @@ export const cls4 = css({ className: 'Test-class2' })( }, }, }, + defaultVariants: { + size: 'medium', + }, }), ({ theme }) => ` ---flex: 43; @@ -139,7 +142,6 @@ export const cls5 = css({ className: 'Test-class3' })(({ theme }) => ({ export const cls6 = css(({ theme }) => ({ color: '$palette.main', - // @ts-expect-error main1 does not exists in theme.palette backgroundColor: theme.palette.main1, border: `1px solid ${t('$palette.main')}`, variants: { diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.css b/packages/pigment-css-core/tests/css/fixtures/css.output.css index d5e3d93b..e4b08084 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.output.css +++ b/packages/pigment-css-core/tests/css/fixtures/css.output.css @@ -22,4 +22,4 @@ @layer pigment.variants{.c1qxs0o9-palette-primary{color:red;border-color:pink;}} @layer pigment.variants{.c1qxs0o9-palette-secondary{color:red;border-color:pink;}} @layer pigment.compoundvariants{.c1qxs0o9-cv{border-width:1px;}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmdxdmMzd2UiLCIuY3gzenRwZSIsIi5jMWFxOTlvNiIsIi5jMWFxOTlvNi0xIiwiLlRlc3QtY2xhc3MiLCIuVGVzdC1jbGFzczIiLCIuVGVzdC1jbGFzczItMSIsIi5UZXN0LWNsYXNzMi0yIiwiLlRlc3QtY2xhc3MyLTMiLCIuVGVzdC1jbGFzczItc2l6ZS1zbWFsbC0xIiwiLlRlc3QtY2xhc3MyLXNpemUtbWVkaXVtLTEiLCIuVGVzdC1jbGFzczItc2l6ZS1sYXJnZS0xIiwiLlRlc3QtY2xhc3MzIiwiLlRlc3QtY2xhc3MzLXNpemUtc21hbGwiLCIuVGVzdC1jbGFzczMtc2l6ZS1tZWRpdW0iLCIuVGVzdC1jbGFzczMtc2l6ZS1sYXJnZSIsIi5UZXN0LWNsYXNzMy1jb2xvci1wcmltYXJ5IiwiLlRlc3QtY2xhc3MzLWNvbG9yLXNlY29uZGFyeSIsIi5UZXN0LWNsYXNzMy1jdiIsIi5UZXN0LWNsYXNzMy1jdi0xIiwiLmMxcXhzMG85IiwiLmMxcXhzMG85LXBhbGV0dGUtcHJpbWFyeSIsIi5jMXF4czBvOS1wYWxldHRlLXNlY29uZGFyeSIsIi5jMXF4czBvOS1jdiJdLCJtYXBwaW5ncyI6IkFBS21DQTtBQU1mQztBQVNsQkM7QUFLQUM7QUFPa0JDO0FBVWxCQztBQU1BQztBQXdCQUM7QUFNQUM7QUFwQ0FDO0FBTUFDO0FBd0JBQztBQWNvREM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFxRDlCQztBQUFBQztBQUFBQztBQUFBQyIsImZpbGUiOiIvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9jc3MvZml4dHVyZXMvY3NzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuaW1wb3J0IHsgdCB9IGZyb20gJ0BwaWdtZW50LWNzcy90aGVtZSc7XG5cbmNvbnN0IGFiID0gJ2FsaWNlYmx1ZSc7XG5cbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUgPSBrZXlmcmFtZXMoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiAnZ3JlZW4nLFxuICB9LFxufSkpO1xuXG5leHBvcnQgY29uc3QgY2xzMSA9IGNzc2BcbiAgLS0tZmxleDogMTtcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYW5pbWF0aW9uLW5hbWU6ICR7Z3JhZGllbnRLZXlmcmFtZX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGNsczIgPSBjc3MoXG4gIHtcbiAgICAkJGZsZXg6IDIxLFxuICAgICQkdGVzdFZhcjogJ3JlZCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkICQkdGVzdFZhcicsXG4gIH0sXG4gIHtcbiAgICAkJGZsZXg6IDIyLFxuICAgICQkdGVzdFZhcjE6ICdyZWQnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAkJHRlc3RWYXIxJyxcbiAgfSxcbik7XG5cbmV4cG9ydCBjb25zdCBjbHMzID0gY3NzKHtcbiAgY2xhc3NOYW1lOiAnVGVzdC1jbGFzcycsXG59KWBcbiAgLS0tZmxleDogMztcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG5gO1xuXG5leHBvcnQgY29uc3QgY2xzNCA9IGNzcyh7IGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MyJyB9KShcbiAge1xuICAgICQkZmxleDogNDEsXG4gICAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6ICckJHRlc3RWYXInLFxuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIH0sXG4gICh7IHRoZW1lIH0pID0+ICh7XG4gICAgJCRmbGV4OiA0MixcbiAgICBjb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgZm9udFNpemU6IHRoZW1lLnNpemUuZm9udC5oMSxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGFiLFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBzaXplOiB7XG4gICAgICAgIHNtYWxsOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjEsXG4gICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgICAgICB9LFxuICAgICAgICBtZWRpdW06IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMixcbiAgICAgICAgICBwYWRkaW5nOiA1LFxuICAgICAgICB9LFxuICAgICAgICBsYXJnZToge1xuICAgICAgICAgICQkZmxleDogNDIzLFxuICAgICAgICAgIHBhZGRpbmc6IDEwLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICB9KSxcbiAgKHsgdGhlbWUgfSkgPT4gYFxuICAgIC0tLWZsZXg6IDQzO1xuICAgIGNvbG9yOiAke3RoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgICBmb250LXNpemU6ICR7dGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbiAgYCxcbiAgYFxuICAgIC0tLWZsZXg6IDQ0O1xuICAgIGNvbG9yOiByZWQ7XG4gICAgZm9udC1zaXplOiAxcmVtO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuICBgLFxuKTtcblxuZXhwb3J0IGNvbnN0IGNsczUgPSBjc3MoeyBjbGFzc05hbWU6ICdUZXN0LWNsYXNzMycgfSkoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJCRmbGV4OiA1MSxcbiAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgYmFja2dyb3VuZENvbG9yOiAnJCR0ZXN0VmFyJyxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUucHJpbWFyeS5tYWluJyl9YCxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGZsZXg6IDUyLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRmbGV4OiA1MyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGZsZXg6IDU0LFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBjb2xvcjoge1xuICAgICAgcHJpbWFyeToge1xuICAgICAgICAkJGZsZXg6IDU1LFxuICAgICAgICBjb2xvcjogJ2dyZWVuJyxcbiAgICAgIH0sXG4gICAgICBzZWNvbmRhcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NixcbiAgICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgY29tcG91bmRWYXJpYW50czogW1xuICAgIHtcbiAgICAgIHNpemU6ICdzbWFsbCcsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgICQkZmxleDogNTcsXG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHNpemU6ICdsYXJnZScsXG4gICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgICQkZmxleDogNTgsXG4gICAgICAgIGJvcmRlclJhZGl1czogJzEwMCUnLFxuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSkpO1xuXG5leHBvcnQgY29uc3QgY2xzNiA9IGNzcygoeyB0aGVtZSB9KSA9PiAoe1xuICBjb2xvcjogJyRwYWxldHRlLm1haW4nLFxuICAvLyBAdHMtZXhwZWN0LWVycm9yIG1haW4xIGRvZXMgbm90IGV4aXN0cyBpbiB0aGVtZS5wYWxldHRlXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUucGFsZXR0ZS5tYWluMSxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUubWFpbicpfWAsXG4gIHZhcmlhbnRzOiB7XG4gICAgcGFsZXR0ZToge1xuICAgICAgcHJpbWFyeToge1xuICAgICAgICBjb2xvcjogJ3JlZCcsXG4gICAgICAgIGJvcmRlckNvbG9yOiAncGluaycsXG4gICAgICB9LFxuICAgICAgc2Vjb25kYXJ5OiB7XG4gICAgICAgIGNvbG9yOiAncmVkJyxcbiAgICAgICAgYm9yZGVyQ29sb3I6ICdwaW5rJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgY29tcG91bmRWYXJpYW50czogW1xuICAgIHtcbiAgICAgIHBhbGV0dGU6ICdzZWNvbmRhcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgIGJvcmRlcldpZHRoOiAxLFxuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSkpO1xuIl19*/ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmdxdmMzd2UiLCIuY3gzenRwZSIsIi5jMWFxOTlvNiIsIi5jMWFxOTlvNi0xIiwiLlRlc3QtY2xhc3MiLCIuVGVzdC1jbGFzczIiLCIuVGVzdC1jbGFzczItMSIsIi5UZXN0LWNsYXNzMi0yIiwiLlRlc3QtY2xhc3MyLTMiLCIuVGVzdC1jbGFzczItc2l6ZS1zbWFsbC0xIiwiLlRlc3QtY2xhc3MyLXNpemUtbWVkaXVtLTEiLCIuVGVzdC1jbGFzczItc2l6ZS1sYXJnZS0xIiwiLlRlc3QtY2xhc3MzIiwiLlRlc3QtY2xhc3MzLXNpemUtc21hbGwiLCIuVGVzdC1jbGFzczMtc2l6ZS1tZWRpdW0iLCIuVGVzdC1jbGFzczMtc2l6ZS1sYXJnZSIsIi5UZXN0LWNsYXNzMy1jb2xvci1wcmltYXJ5IiwiLlRlc3QtY2xhc3MzLWNvbG9yLXNlY29uZGFyeSIsIi5UZXN0LWNsYXNzMy1jdiIsIi5UZXN0LWNsYXNzMy1jdi0xIiwiLmMxcXhzMG85IiwiLmMxcXhzMG85LXBhbGV0dGUtcHJpbWFyeSIsIi5jMXF4czBvOS1wYWxldHRlLXNlY29uZGFyeSIsIi5jMXF4czBvOS1jdiJdLCJtYXBwaW5ncyI6IkFBS21DQTtBQU1mQztBQVNsQkM7QUFLQUM7QUFPa0JDO0FBVWxCQztBQU1BQztBQTJCQUM7QUFNQUM7QUF2Q0FDO0FBTUFDO0FBMkJBQztBQWNvREM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFxRDlCQztBQUFBQztBQUFBQztBQUFBQyIsImZpbGUiOiIvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9jc3MvZml4dHVyZXMvY3NzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuaW1wb3J0IHsgdCB9IGZyb20gJ0BwaWdtZW50LWNzcy90aGVtZSc7XG5cbmNvbnN0IGFiID0gJ2FsaWNlYmx1ZSc7XG5cbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUgPSBrZXlmcmFtZXMoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiAnZ3JlZW4nLFxuICB9LFxufSkpO1xuXG5leHBvcnQgY29uc3QgY2xzMSA9IGNzc2BcbiAgLS0tZmxleDogMTtcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYW5pbWF0aW9uLW5hbWU6ICR7Z3JhZGllbnRLZXlmcmFtZX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGNsczIgPSBjc3MoXG4gIHtcbiAgICAkJGZsZXg6IDIxLFxuICAgICQkdGVzdFZhcjogJ3JlZCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkICQkdGVzdFZhcicsXG4gIH0sXG4gIHtcbiAgICAkJGZsZXg6IDIyLFxuICAgICQkdGVzdFZhcjE6ICdyZWQnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAkJHRlc3RWYXIxJyxcbiAgfSxcbik7XG5cbmV4cG9ydCBjb25zdCBjbHMzID0gY3NzKHtcbiAgY2xhc3NOYW1lOiAnVGVzdC1jbGFzcycsXG59KWBcbiAgLS0tZmxleDogMztcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG5gO1xuXG5leHBvcnQgY29uc3QgY2xzNCA9IGNzcyh7IGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MyJyB9KShcbiAge1xuICAgICQkZmxleDogNDEsXG4gICAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6ICckJHRlc3RWYXInLFxuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIH0sXG4gICh7IHRoZW1lIH0pID0+ICh7XG4gICAgJCRmbGV4OiA0MixcbiAgICBjb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgZm9udFNpemU6IHRoZW1lLnNpemUuZm9udC5oMSxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGFiLFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBzaXplOiB7XG4gICAgICAgIHNtYWxsOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjEsXG4gICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgICAgICB9LFxuICAgICAgICBtZWRpdW06IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMixcbiAgICAgICAgICBwYWRkaW5nOiA1LFxuICAgICAgICB9LFxuICAgICAgICBsYXJnZToge1xuICAgICAgICAgICQkZmxleDogNDIzLFxuICAgICAgICAgIHBhZGRpbmc6IDEwLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICAgIGRlZmF1bHRWYXJpYW50czoge1xuICAgICAgc2l6ZTogJ21lZGl1bScsXG4gICAgfSxcbiAgfSksXG4gICh7IHRoZW1lIH0pID0+IGBcbiAgICAtLS1mbGV4OiA0MztcbiAgICBjb2xvcjogJHt0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbn07XG4gICAgZm9udC1zaXplOiAke3RoZW1lLnNpemUuZm9udC5oMX07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG4gIGAsXG4gIGBcbiAgICAtLS1mbGV4OiA0NDtcbiAgICBjb2xvcjogcmVkO1xuICAgIGZvbnQtc2l6ZTogMXJlbTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbiAgYCxcbik7XG5cbmV4cG9ydCBjb25zdCBjbHM1ID0gY3NzKHsgY2xhc3NOYW1lOiAnVGVzdC1jbGFzczMnIH0pKCh7IHRoZW1lIH0pID0+ICh7XG4gICQkZmxleDogNTEsXG4gICQkdGVzdFZhcjogJ3JlZCcsXG4gIGJhY2tncm91bmRDb2xvcjogJyQkdGVzdFZhcicsXG4gIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIHZhcmlhbnRzOiB7XG4gICAgc2l6ZToge1xuICAgICAgc21hbGw6IHtcbiAgICAgICAgJCRmbGV4OiA1MixcbiAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICBib3JkZXJDb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgICB9LFxuICAgICAgbWVkaXVtOiB7XG4gICAgICAgICQkZmxleDogNTMsXG4gICAgICAgIHBhZGRpbmc6IDUsXG4gICAgICB9LFxuICAgICAgbGFyZ2U6IHtcbiAgICAgICAgJCRmbGV4OiA1NCxcbiAgICAgICAgcGFkZGluZzogMTAsXG4gICAgICB9LFxuICAgIH0sXG4gICAgY29sb3I6IHtcbiAgICAgIHByaW1hcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NSxcbiAgICAgICAgY29sb3I6ICdncmVlbicsXG4gICAgICB9LFxuICAgICAgc2Vjb25kYXJ5OiB7XG4gICAgICAgICQkZmxleDogNTYsXG4gICAgICAgIGNvbG9yOiAnYmx1ZScsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG4gIGNvbXBvdW5kVmFyaWFudHM6IFtcbiAgICB7XG4gICAgICBzaXplOiAnc21hbGwnLFxuICAgICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICAgIGNzczoge1xuICAgICAgICAkJGZsZXg6IDU3LFxuICAgICAgICBib3JkZXJSYWRpdXM6ICcxMDAlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgICB7XG4gICAgICBzaXplOiAnbGFyZ2UnLFxuICAgICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICAgIGNzczoge1xuICAgICAgICAkJGZsZXg6IDU4LFxuICAgICAgICBib3JkZXJSYWRpdXM6ICcxMDAlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgXSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IGNsczYgPSBjc3MoKHsgdGhlbWUgfSkgPT4gKHtcbiAgY29sb3I6ICckcGFsZXR0ZS5tYWluJyxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5wYWxldHRlLm1haW4xLFxuICBib3JkZXI6IGAxcHggc29saWQgJHt0KCckcGFsZXR0ZS5tYWluJyl9YCxcbiAgdmFyaWFudHM6IHtcbiAgICBwYWxldHRlOiB7XG4gICAgICBwcmltYXJ5OiB7XG4gICAgICAgIGNvbG9yOiAncmVkJyxcbiAgICAgICAgYm9yZGVyQ29sb3I6ICdwaW5rJyxcbiAgICAgIH0sXG4gICAgICBzZWNvbmRhcnk6IHtcbiAgICAgICAgY29sb3I6ICdyZWQnLFxuICAgICAgICBib3JkZXJDb2xvcjogJ3BpbmsnLFxuICAgICAgfSxcbiAgICB9LFxuICB9LFxuICBjb21wb3VuZFZhcmlhbnRzOiBbXG4gICAge1xuICAgICAgcGFsZXR0ZTogJ3NlY29uZGFyeScsXG4gICAgICBjc3M6IHtcbiAgICAgICAgYm9yZGVyV2lkdGg6IDEsXG4gICAgICB9LFxuICAgIH0sXG4gIF0sXG59KSk7XG4iXX0=*/ \ No newline at end of file diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.js b/packages/pigment-css-core/tests/css/fixtures/css.output.js index 0da00c5b..b8325619 100644 --- a/packages/pigment-css-core/tests/css/fixtures/css.output.js +++ b/packages/pigment-css-core/tests/css/fixtures/css.output.js @@ -37,6 +37,9 @@ export const cls4 = /*#__PURE__*/ _css4({ }, }, ], + defaultVariants: { + size: 'medium', + }, }); export const cls5 = /*#__PURE__*/ _css5({ classes: 'Test-class3', diff --git a/packages/pigment-css-utils/src/utils/processStyle.ts b/packages/pigment-css-utils/src/utils/processStyle.ts index eb61cae8..90528b3d 100644 --- a/packages/pigment-css-utils/src/utils/processStyle.ts +++ b/packages/pigment-css-utils/src/utils/processStyle.ts @@ -56,13 +56,14 @@ export type ProcessStyleObjectsReturn = { base: StyleObjectReturn[]; variants: StyleObjectReturn[]; compoundVariants: StyleObjectReturn[]; + defaultVariants: Record; }; function splitAndJoin(str: string): string { return str.split('.').join('-'); } -function getCSSVar(key: string, wrapInVar = false): string { +export function getCSSVar(key: string, wrapInVar = false): string { let result: string; if (key.startsWith('$$')) { result = `---${cssesc(splitAndJoin(key.substring(2)))}`; @@ -139,6 +140,7 @@ function getCss( base: [], variants: [], compoundVariants: [], + defaultVariants: {}, }; if (typeof style === 'string') { result.base.push({ @@ -149,7 +151,7 @@ function getCss( }); return result; } - const { variants, compoundVariants } = style; + const { variants, compoundVariants, defaultVariants } = style; delete style.variants; delete style.compoundVariants; delete style.defaultVariants; @@ -220,6 +222,9 @@ function getCss( } }); } + if (defaultVariants && Object.keys(defaultVariants).length > 0) { + result.defaultVariants = defaultVariants; + } return result; } @@ -234,6 +239,7 @@ export function processStyleObjects( base: [], variants: [], compoundVariants: [], + defaultVariants: {}, }; styles.reduce((acc, style, index) => { @@ -250,6 +256,10 @@ export function processStyleObjects( acc.base.push(...res.base); acc.variants.push(...res.variants); acc.compoundVariants.push(...res.compoundVariants); + acc.defaultVariants = { + ...acc.defaultVariants, + ...res.defaultVariants, + }; return acc; }, result); return result; From d727ea8bd3990a8894d418cb7acbd31bc09750a6 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Sat, 1 Feb 2025 11:49:22 +0530 Subject: [PATCH 20/42] Add defaultVariants support in runtime --- packages/pigment-css-core/src/runtime/css.ts | 35 +++++++++++++++---- .../tests/css/css-runtime.test.ts | 30 ++++++++++++++++ 2 files changed, 58 insertions(+), 7 deletions(-) diff --git a/packages/pigment-css-core/src/runtime/css.ts b/packages/pigment-css-core/src/runtime/css.ts index 0d178496..eae057f4 100644 --- a/packages/pigment-css-core/src/runtime/css.ts +++ b/packages/pigment-css-core/src/runtime/css.ts @@ -1,7 +1,7 @@ /** * This module is not supposed to be imported by users. */ -type Props = Record; +type Props = Record; export type VariantInfo = { $$cls: string; @@ -11,30 +11,48 @@ export type VariantInfo = { export type ClassInfo = { classes: string; variants?: VariantInfo[]; + defaultVariants?: Props; }; -function isVariantMatching(props: Props, variantProps: Props) { +function isVariantMatching(props: Props, variantProps: Props, defaultVariants: Props = {}) { // eslint-disable-next-line no-restricted-syntax for (const key in variantProps) { if (!variantProps.hasOwnProperty(key)) { continue; } - if (variantProps[key] !== props[key]) { + const propValue = props[key] ?? defaultVariants[key]; + // eslint-disable-next-line eqeqeq + if (variantProps[key] != propValue) { return false; } } return true; } -export function css({ classes, variants = [] }: ClassInfo) { - return (props?: Props) => { +export function css({ classes, variants = [], defaultVariants = {} }: ClassInfo) { + let baseClasses = classes; + + if (variants.length > 0) { + const newClasses = []; + for (let i = 0; i < variants.length; i += 1) { + const variant = variants[i]; + if (isVariantMatching(defaultVariants, variant.props)) { + newClasses.push(variant.$$cls); + } + } + if (newClasses.length > 0) { + baseClasses = `${baseClasses} ${newClasses.join(' ')}`; + } + } + function cssWithProps(props?: Props) { if (!props || !variants.length) { - return classes; + return baseClasses; } + const newClasses = []; for (let i = 0; i < variants.length; i += 1) { const variant = variants[i]; - if (isVariantMatching(props, variant.props)) { + if (isVariantMatching(props, variant.props, defaultVariants)) { newClasses.push(variant.$$cls); } } @@ -42,5 +60,8 @@ export function css({ classes, variants = [] }: ClassInfo) { return classes; } return `${classes} ${newClasses.join(' ')}`; + } + cssWithProps.toString = function toString() { + return baseClasses; }; } diff --git a/packages/pigment-css-core/tests/css/css-runtime.test.ts b/packages/pigment-css-core/tests/css/css-runtime.test.ts index 88d82610..704eebeb 100644 --- a/packages/pigment-css-core/tests/css/css-runtime.test.ts +++ b/packages/pigment-css-core/tests/css/css-runtime.test.ts @@ -32,4 +32,34 @@ describe('css - runtime', () => { 'hello world c-secondary-s-medium', ); }); + + it('should consider defaultVariants when returning classes', () => { + const cssFn = css({ + classes: 'hello world', + variants: [ + { + props: { color: 'primary' }, + $$cls: 'c-primary', + }, + { + props: { size: 'medium' }, + $$cls: 's-medium', + }, + { + props: { color: 'secondary', size: 'medium' }, + $$cls: 'c-secondary-s-medium', + }, + ], + defaultVariants: { + color: 'primary', + size: 'medium', + }, + }); + expect(cssFn.toString()).to.equal('hello world c-primary s-medium'); + expect(cssFn({})).to.equal('hello world c-primary s-medium'); + expect(cssFn({ color: 'secondary' })).to.equal('hello world s-medium c-secondary-s-medium'); + expect(cssFn({ color: 'tertiary', size: 'medium' })).to.equal('hello world s-medium'); + expect(cssFn({ size: 'large' })).to.equal('hello world c-primary'); + expect(cssFn({ size: 'large', color: 'tertiary' })).to.equal('hello world'); + }); }); From 39702bd2db500b26cd98039a9552ab6f77d1b8d0 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Sat, 1 Feb 2025 11:57:38 +0530 Subject: [PATCH 21/42] Fix typescript issue --- packages/pigment-css-core/src/keyframes.d.ts | 10 +++------- packages/pigment-css-core/src/runtime/css.ts | 1 + packages/pigment-css-theme/src/theme-node.ts | 2 +- packages/pigment-css-theme/src/theme.ts | 8 ++------ 4 files changed, 7 insertions(+), 14 deletions(-) diff --git a/packages/pigment-css-core/src/keyframes.d.ts b/packages/pigment-css-core/src/keyframes.d.ts index 83e5989d..1ea5830f 100644 --- a/packages/pigment-css-core/src/keyframes.d.ts +++ b/packages/pigment-css-core/src/keyframes.d.ts @@ -1,12 +1,8 @@ -import type { CSSPropertiesMultiValue, Primitive, ThemeArgs } from './base'; +import type { CSSObjectNoCallback, Primitive, ThemeArgs } from './base'; import { BaseInterface } from './css'; interface KeyframesObject { - [key: string]: { - [K in keyof CSSPropertiesMultiValue]: - | CSSPropertiesMultiValue[K] - | Array; - }; + [key: string]: CSSObjectNoCallback; } type KeyframesFn = (themeArgs: ThemeArgs) => string; @@ -21,6 +17,6 @@ interface KeyframesWithOption { (metadata: M): KeyframesNoOption; } -declare const keyframes: KeyframesNoOption & KeyframesWithOption; +declare const keyframes: KeyframesWithOption & KeyframesNoOption; export default keyframes; diff --git a/packages/pigment-css-core/src/runtime/css.ts b/packages/pigment-css-core/src/runtime/css.ts index eae057f4..72c00f58 100644 --- a/packages/pigment-css-core/src/runtime/css.ts +++ b/packages/pigment-css-core/src/runtime/css.ts @@ -64,4 +64,5 @@ export function css({ classes, variants = [], defaultVariants = {} }: ClassInfo) cssWithProps.toString = function toString() { return baseClasses; }; + return cssWithProps; } diff --git a/packages/pigment-css-theme/src/theme-node.ts b/packages/pigment-css-theme/src/theme-node.ts index 7f5f0ddf..3c78cc60 100644 --- a/packages/pigment-css-theme/src/theme-node.ts +++ b/packages/pigment-css-theme/src/theme-node.ts @@ -5,7 +5,7 @@ class WrapperString extends String { } /** - * It just returns what it receives at this point but with a wrapper to identity in Node.js. + * It just returns what it receives at this point but with a wrapper to identify in Node.js. * It is there to strictly type first argument as per the overridden `Theme`. * * @example Usage in application diff --git a/packages/pigment-css-theme/src/theme.ts b/packages/pigment-css-theme/src/theme.ts index 0e5a461e..040db7e5 100644 --- a/packages/pigment-css-theme/src/theme.ts +++ b/packages/pigment-css-theme/src/theme.ts @@ -16,10 +16,6 @@ type PathsToLeaves = { export type ThemeKey = `$${PathsToLeaves}`; -class WrapperString extends String { - isThemeVar = true; -} - /** * It just returns what it receives at this point. Actual transformation happens during the build time * separately. @@ -38,6 +34,6 @@ class WrapperString extends String { * }) * ``` */ -export function t(themeKey: ThemeKey): WrapperString { - return new WrapperString(themeKey); +export function t(themeKey: ThemeKey): ThemeKey { + return themeKey; } From ea8f952d449112e6b5bb1892202ae494e3ded65e Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Sat, 1 Feb 2025 12:27:59 +0530 Subject: [PATCH 22/42] Fix test --- packages/pigment-css-utils/tests/utils/processStyle.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/pigment-css-utils/tests/utils/processStyle.test.ts b/packages/pigment-css-utils/tests/utils/processStyle.test.ts index fd986a8e..d28c6bfe 100644 --- a/packages/pigment-css-utils/tests/utils/processStyle.test.ts +++ b/packages/pigment-css-utils/tests/utils/processStyle.test.ts @@ -123,6 +123,7 @@ describe('processStyle', () => { serializables: {}, }, ], + defaultVariants: {}, variants: [ { className: 'class-size-small', From aa46a39923e187510f890b3574fac9fc895687ba Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Mon, 3 Feb 2025 10:34:13 +0530 Subject: [PATCH 23/42] Export type definitions required for React package --- packages/pigment-css-core/src/css.d.ts | 8 ++++---- packages/pigment-css-core/src/index.ts | 1 + packages/pigment-css-core/src/runtime/css.ts | 2 +- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/pigment-css-core/src/css.d.ts b/packages/pigment-css-core/src/css.d.ts index ec5038ec..6351f798 100644 --- a/packages/pigment-css-core/src/css.d.ts +++ b/packages/pigment-css-core/src/css.d.ts @@ -2,17 +2,17 @@ import { CSSObjectNoCallback, CSSProperties, Primitive, ThemeArgs } from './base export type CssFn = (props: Props) => string | number; -type Variants = { +export type Variants = { [VariantGroup: string]: { [VariantName: string]: CSSObjectNoCallback; }; }; -type VariantNames = { +export type VariantNames = { [K in keyof T]?: keyof T[K]; }; -type CompoundVariant = VariantNames & { +export type CompoundVariant = VariantNames & { css: CSSProperties; }; @@ -44,7 +44,7 @@ type CSSWithVariants = CSSObjectNoCallback & CVAConfig; type CssValue = CSSWithVariants | string; -type CssArg = ((themeArgs: ThemeArgs) => CssValue) | CssValue; +export type CssArg = ((themeArgs: ThemeArgs) => CssValue) | CssValue; type CssReturn = { className: string; diff --git a/packages/pigment-css-core/src/index.ts b/packages/pigment-css-core/src/index.ts index e33b3b32..2a2ca70b 100644 --- a/packages/pigment-css-core/src/index.ts +++ b/packages/pigment-css-core/src/index.ts @@ -1,5 +1,6 @@ export * from '@pigment-css/theme'; export * from './base'; export { default as css } from './css'; +export type { Variants, VariantNames, BaseInterface, CssArg } from './css'; export { default as keyframes } from './keyframes'; export * from './utils'; diff --git a/packages/pigment-css-core/src/runtime/css.ts b/packages/pigment-css-core/src/runtime/css.ts index 72c00f58..39105fc4 100644 --- a/packages/pigment-css-core/src/runtime/css.ts +++ b/packages/pigment-css-core/src/runtime/css.ts @@ -14,7 +14,7 @@ export type ClassInfo = { defaultVariants?: Props; }; -function isVariantMatching(props: Props, variantProps: Props, defaultVariants: Props = {}) { +export function isVariantMatching(props: Props, variantProps: Props, defaultVariants: Props = {}) { // eslint-disable-next-line no-restricted-syntax for (const key in variantProps) { if (!variantProps.hasOwnProperty(key)) { From ffa937f4987708d8dfd29727f3bb56c9e3da5e76 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Sat, 8 Feb 2025 11:20:44 +0530 Subject: [PATCH 24/42] Revert theme changes for node --- packages/pigment-css-theme/package.json | 8 ------ packages/pigment-css-theme/src/index-node.ts | 1 - packages/pigment-css-theme/src/theme-node.ts | 26 -------------------- packages/pigment-css-theme/src/theme.ts | 6 ++++- packages/pigment-css-theme/tsup.config.ts | 2 +- 5 files changed, 6 insertions(+), 37 deletions(-) delete mode 100644 packages/pigment-css-theme/src/index-node.ts delete mode 100644 packages/pigment-css-theme/src/theme-node.ts diff --git a/packages/pigment-css-theme/package.json b/packages/pigment-css-theme/package.json index 2b0d691a..fdaf7ff4 100644 --- a/packages/pigment-css-theme/package.json +++ b/packages/pigment-css-theme/package.json @@ -47,14 +47,6 @@ ], "exports": { ".": { - "node": { - "types": "./build/index.d.ts", - "import": { - "types": "./build/index.d.mts", - "default": "./build/index-node.mjs" - }, - "default": "./build/index-node.js" - }, "types": "./build/index.d.ts", "import": { "types": "./build/index.d.mts", diff --git a/packages/pigment-css-theme/src/index-node.ts b/packages/pigment-css-theme/src/index-node.ts deleted file mode 100644 index 834bb239..00000000 --- a/packages/pigment-css-theme/src/index-node.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './theme-node'; diff --git a/packages/pigment-css-theme/src/theme-node.ts b/packages/pigment-css-theme/src/theme-node.ts deleted file mode 100644 index 3c78cc60..00000000 --- a/packages/pigment-css-theme/src/theme-node.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { ThemeKey } from './theme'; - -class WrapperString extends String { - isThemeVar = true; -} - -/** - * It just returns what it receives at this point but with a wrapper to identify in Node.js. - * It is there to strictly type first argument as per the overridden `Theme`. - * - * @example Usage in application - * - * ```js - * import { t } from '@pigment-css/theme'; - * import { css } from '@pigment-css/core'; - * - * // override Theme type as per docs - * - * const cls1 = css({ - * border: `1px solid ${t('$palette.main')}`, - * }) - * ``` - */ -export function t(themeKey: ThemeKey): WrapperString { - return new WrapperString(themeKey); -} diff --git a/packages/pigment-css-theme/src/theme.ts b/packages/pigment-css-theme/src/theme.ts index 040db7e5..d023936d 100644 --- a/packages/pigment-css-theme/src/theme.ts +++ b/packages/pigment-css-theme/src/theme.ts @@ -10,7 +10,11 @@ type PathsToLeaves = { [K in keyof T]: K extends string | number ? T[K] extends object ? Join> - : `${K}` + : K extends `$${string}` + ? never + : K extends `_${string}` + ? never + : `${K}` : never; }[keyof T]; diff --git a/packages/pigment-css-theme/tsup.config.ts b/packages/pigment-css-theme/tsup.config.ts index b04427b6..ac534617 100644 --- a/packages/pigment-css-theme/tsup.config.ts +++ b/packages/pigment-css-theme/tsup.config.ts @@ -6,7 +6,7 @@ const baseConfig: Options = { tsconfig: './tsconfig.build.json', }; -const BASE_FILES = ['index.ts', 'index-node.ts']; +const BASE_FILES = ['index.ts']; export default defineConfig([ { From 0dde96a85b787e1551fc2ce737e4592b53f25075 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Thu, 26 Dec 2024 14:03:52 +0530 Subject: [PATCH 25/42] First working version of pigment-css/react@v1 --- .codesandbox/ci.json | 1 + .eslintignore | 2 + .eslintrc.js | 2 + packages/pigment-css-react-new/README.md | 29 + packages/pigment-css-react-new/exports/css.js | 5 + .../pigment-css-react-new/exports/styled.js | 5 + packages/pigment-css-react-new/package.json | 132 ++++ packages/pigment-css-react-new/src/index.ts | 2 + .../src/processors/css.ts | 5 + .../src/processors/styled.ts | 117 +++ .../src/runtime/index.ts | 2 + .../src/runtime/styled.js | 13 + .../pigment-css-react-new/src/styled.d.ts | 1 + packages/pigment-css-react-new/src/styled.js | 1 + packages/pigment-css-react-new/src/sx.d.ts | 10 + packages/pigment-css-react-new/styles.css | 3 + .../styled-import-replacement.input.js | 37 + .../styled-import-replacement.output.css | 5 + .../styled-import-replacement.output.js | 14 + .../styled/fixtures/styled-no-layer.input.js | 107 +++ .../fixtures/styled-no-layer.output.css | 12 + .../styled/fixtures/styled-no-layer.output.js | 70 ++ .../tests/styled/fixtures/styled.input.js | 116 +++ .../tests/styled/fixtures/styled.output.css | 13 + .../tests/styled/fixtures/styled.output.js | 72 ++ .../tests/styled/styled.spec.tsx | 20 + .../tests/styled/styled.test.tsx | 44 ++ .../pigment-css-react-new/tests/testUtils.ts | 136 ++++ .../pigment-css-react-new/tsconfig.build.json | 7 + packages/pigment-css-react-new/tsconfig.json | 12 + packages/pigment-css-react-new/tsup.config.ts | 29 + pnpm-lock.yaml | 715 ++++++++++++++---- tsconfig.json | 8 +- 33 files changed, 1592 insertions(+), 155 deletions(-) create mode 100644 packages/pigment-css-react-new/README.md create mode 100644 packages/pigment-css-react-new/exports/css.js create mode 100644 packages/pigment-css-react-new/exports/styled.js create mode 100644 packages/pigment-css-react-new/package.json create mode 100644 packages/pigment-css-react-new/src/index.ts create mode 100644 packages/pigment-css-react-new/src/processors/css.ts create mode 100644 packages/pigment-css-react-new/src/processors/styled.ts create mode 100644 packages/pigment-css-react-new/src/runtime/index.ts create mode 100644 packages/pigment-css-react-new/src/runtime/styled.js create mode 100644 packages/pigment-css-react-new/src/styled.d.ts create mode 100644 packages/pigment-css-react-new/src/styled.js create mode 100644 packages/pigment-css-react-new/src/sx.d.ts create mode 100644 packages/pigment-css-react-new/styles.css create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.input.js create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.css create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.js create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.input.js create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.css create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.js create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js create mode 100644 packages/pigment-css-react-new/tests/styled/styled.spec.tsx create mode 100644 packages/pigment-css-react-new/tests/styled/styled.test.tsx create mode 100644 packages/pigment-css-react-new/tests/testUtils.ts create mode 100644 packages/pigment-css-react-new/tsconfig.build.json create mode 100644 packages/pigment-css-react-new/tsconfig.json create mode 100644 packages/pigment-css-react-new/tsup.config.ts diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 29b9c589..61f524d8 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -6,6 +6,7 @@ "packages/pigment-css-core", "packages/pigment-css-nextjs-plugin", "packages/pigment-css-react", + "packages/pigment-css-react-new", "packages/pigment-css-theme", "packages/pigment-css-unplugin", "packages/pigment-css-utils", diff --git a/.eslintignore b/.eslintignore index 1a9209a1..3b7fdb07 100644 --- a/.eslintignore +++ b/.eslintignore @@ -11,6 +11,8 @@ /packages/pigment-css-react/tests/**/fixtures /packages/pigment-css-core/exports/ /packages/pigment-css-core/tests/**/fixtures +/packages/pigment-css-react-new/exports/ +/packages/pigment-css-react-new/tests/**/fixtures /packages/pigment-css-nextjs-plugin/loader.js # Ignore fixtures /packages-internal/scripts/typescript-to-proptypes/test/*/* diff --git a/.eslintrc.js b/.eslintrc.js index d36b0c24..c8de7cfe 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -83,6 +83,8 @@ module.exports = { ], 'no-use-before-define': 'off', + 'react/react-in-jsx-scope': 'off', + // disabled type-aware linting due to performance considerations '@typescript-eslint/dot-notation': 'off', 'dot-notation': 'error', diff --git a/packages/pigment-css-react-new/README.md b/packages/pigment-css-react-new/README.md new file mode 100644 index 00000000..f00cca52 --- /dev/null +++ b/packages/pigment-css-react-new/README.md @@ -0,0 +1,29 @@ +# Pigment CSS + +Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time. + +## Getting started + +Pigment CSS supports Next.js and Vite with support for more bundlers in the future. + +### Why choose Pigment CSS + +Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "traditional" CSS-in-JS solutions that process styles at runtime are no longer required for unlocking features like color transformations and theme variables which are necessary for maintaining a sophisticated design system. + +Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components. + +Compared to its predecessors, Pigment CSS offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components. +Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment CSS in v6. + +### Installation + + + +```bash +npm install @pigment-css/core +npm install --save-dev @pigment-css/nextjs-plugin +``` + + + +For more information and getting started guide, check the [repository README.md](https://github.com/mui/pigment-css). diff --git a/packages/pigment-css-react-new/exports/css.js b/packages/pigment-css-react-new/exports/css.js new file mode 100644 index 00000000..90873c69 --- /dev/null +++ b/packages/pigment-css-react-new/exports/css.js @@ -0,0 +1,5 @@ +Object.defineProperty(exports, '__esModule', { + value: true, +}); + +exports.default = require('../build/processors/css').StyledCssProcessor; diff --git a/packages/pigment-css-react-new/exports/styled.js b/packages/pigment-css-react-new/exports/styled.js new file mode 100644 index 00000000..88af3fd0 --- /dev/null +++ b/packages/pigment-css-react-new/exports/styled.js @@ -0,0 +1,5 @@ +Object.defineProperty(exports, '__esModule', { + value: true, +}); + +exports.default = require('../build/processors/styled').StyledProcessor; diff --git a/packages/pigment-css-react-new/package.json b/packages/pigment-css-react-new/package.json new file mode 100644 index 00000000..5e4cc0f3 --- /dev/null +++ b/packages/pigment-css-react-new/package.json @@ -0,0 +1,132 @@ +{ + "name": "@pigment-css/react-new", + "version": "0.0.27", + "main": "build/index.js", + "module": "build/index.mjs", + "types": "build/index.d.ts", + "author": "MUI Team", + "description": "A zero-runtime CSS-in-JS library to be used with React.", + "repository": { + "type": "git", + "url": "git+https://github.com/mui/pigment-css.git", + "directory": "packages/pigment-css-react-new" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/mui/pigment-css/issues" + }, + "homepage": "https://github.com/mui/pigment-css/tree/master/README.md", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "scripts": { + "clean": "rimraf build", + "watch": "tsup --watch --clean false", + "copy-license": "node ../../scripts/pigment-license.mjs", + "build": "tsup", + "test": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/pigment-css-react-new/**/*.test.{js,ts,tsx}'", + "test:update": "cd ../../ && cross-env NODE_ENV=test UPDATE_FIXTURES=true mocha 'packages/pigment-css-react-new/**/*.test.{js,ts,tsx}'", + "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-css-react-new mocha 'packages/pigment-css-react-new/**/*.test.{js,ts,tsx}'", + "typescript": "tsc --noEmit -p ." + }, + "dependencies": { + "@babel/plugin-syntax-jsx": "^7.25.9", + "@babel/types": "^7.25.8", + "@pigment-css/core": "workspace:*", + "@pigment-css/utils": "workspace:*", + "@pigment-css/theme": "workspace:^", + "@wyw-in-js/processor-utils": "^0.5.5", + "@wyw-in-js/shared": "^0.5.5", + "@wyw-in-js/transform": "^0.5.5", + "csstype": "^3.1.3" + }, + "peerDependencies": { + "react": "^17 || ^18 || ^19 || ^19.0.0-rc" + }, + "devDependencies": { + "@types/react": "^19.0.2", + "@types/chai": "^4.3.14", + "chai": "^4.4.1", + "prettier": "^3.3.3", + "react": "^19.0.0" + }, + "sideEffects": false, + "publishConfig": { + "access": "public" + }, + "wyw-in-js": { + "tags": { + "styled": "./exports/styled.js", + "sx": "./exports/sx.js", + "keyframes": "@pigment-css/core/exports/keyframes", + "css": "./exports/css.js" + } + }, + "files": [ + "src", + "build", + "exports", + "package.json", + "styles.css", + "LICENSE" + ], + "exports": { + ".": { + "types": "./build/index.d.ts", + "import": { + "types": "./build/index.d.mts", + "default": "./build/index.mjs" + }, + "require": "./build/index.js", + "default": "./build/index.js" + }, + "./package.json": "./package.json", + "./styles.css": "./styles.css", + "./processors/css": { + "import": "./build/processors/css.mjs", + "require": "./build/processors/css.js", + "default": "./build/processors/css.js" + }, + "./processors/styled": { + "import": "./build/processors/styled.mjs", + "require": "./build/processors/styled.js", + "default": "./build/processors/styled.js" + }, + "./exports/*": { + "default": "./exports/*.js" + }, + "./runtime": { + "import": "./build/runtime/index.mjs", + "require": "./build/runtime/index.js", + "default": "./build/runtime/index.js" + } + }, + "nx": { + "targets": { + "test": { + "cache": false, + "dependsOn": [ + "build" + ] + }, + "test:update": { + "cache": false, + "dependsOn": [ + "build" + ] + }, + "test:ci": { + "cache": false, + "dependsOn": [ + "build" + ] + }, + "build": { + "outputs": [ + "{projectRoot}/build" + ] + } + } + } +} diff --git a/packages/pigment-css-react-new/src/index.ts b/packages/pigment-css-react-new/src/index.ts new file mode 100644 index 00000000..5cb0efb9 --- /dev/null +++ b/packages/pigment-css-react-new/src/index.ts @@ -0,0 +1,2 @@ +export * from '@pigment-css/core'; +export * from './styled'; diff --git a/packages/pigment-css-react-new/src/processors/css.ts b/packages/pigment-css-react-new/src/processors/css.ts new file mode 100644 index 00000000..7d9832ae --- /dev/null +++ b/packages/pigment-css-react-new/src/processors/css.ts @@ -0,0 +1,5 @@ +import { CssProcessor } from '@pigment-css/core/processors/css'; + +export class StyledCssProcessor extends CssProcessor { + basePath = `${process.env.PACKAGE_NAME}/runtime`; +} diff --git a/packages/pigment-css-react-new/src/processors/styled.ts b/packages/pigment-css-react-new/src/processors/styled.ts new file mode 100644 index 00000000..f4dd7e43 --- /dev/null +++ b/packages/pigment-css-react-new/src/processors/styled.ts @@ -0,0 +1,117 @@ +import { Identifier } from '@babel/types'; +import { evaluateClassNameArg } from '@pigment-css/utils'; +import { + type CallParam, + type Expression, + type MemberParam, + type Params, + type TailProcessorParams, + validateParams, +} from '@wyw-in-js/processor-utils'; +import { ValueType } from '@wyw-in-js/shared'; +import { CssProcessor } from '@pigment-css/core/processors/css'; +import { BaseInterface } from '@pigment-css/core/css'; + +export type TemplateCallback = (params: Record | undefined) => string | number; + +type WrappedNode = + | string + | { + node: Identifier; + source: string; + }; + +const REACT_COMPONENT = '$$reactComponent'; + +export class StyledProcessor extends CssProcessor { + tagName: WrappedNode = ''; + + // eslint-disable-next-line class-methods-use-this + get packageName() { + return process.env.PACKAGE_NAME as string; + } + + basePath = `${this.packageName}/runtime`; + + constructor(params: Params, ...args: TailProcessorParams) { + const [callee, callOrMember, callOrTemplate] = params; + super([callee, callOrTemplate], ...args); + + if (params.length === 3) { + validateParams( + params, + ['callee', ['call', 'member'], ['call', 'template']], + `Invalid use of ${this.tagSource.imported} function.`, + ); + + this.setTagName(callOrMember as CallParam | MemberParam); + } else { + throw new Error(`${this.packageName} Invalid call to ${this.tagSource.imported} function.`); + } + } + + private setTagName(param: CallParam | MemberParam) { + if (param[0] === 'member') { + this.tagName = param[1]; + } else { + const [, element, callOpt] = param; + switch (element.kind) { + case ValueType.CONST: { + if (typeof element.value === 'string') { + this.tagName = element.value; + } + break; + } + case ValueType.LAZY: { + this.tagName = { + node: element.ex, + source: element.source, + }; + this.dependencies.push(element); + break; + } + case ValueType.FUNCTION: { + this.tagName = REACT_COMPONENT; + break; + } + default: + break; + } + + if (callOpt) { + this.processor.staticClass = evaluateClassNameArg(callOpt.source) as BaseInterface; + } + } + } + + getBaseClass(): string { + return this.className; + } + + get asSelector(): string { + return this.processor.getBaseClass(); + } + + get value(): Expression { + return this.astService.stringLiteral(`.${this.processor.getBaseClass()}`); + } + + createReplacement() { + const t = this.astService; + const callId = t.addNamedImport('styled', this.getImportPath()); + const elementOrComponent = (() => { + if (typeof this.tagName === 'string') { + if (this.tagName === REACT_COMPONENT) { + return t.arrowFunctionExpression([], t.blockStatement([])); + } + return t.stringLiteral(this.tagName); + } + if (this.tagName?.node) { + return t.callExpression(t.identifier(this.tagName.node.name), []); + } + return t.nullLiteral(); + })(); + const firstCall = t.callExpression(callId, [elementOrComponent]); + return t.callExpression(firstCall, [this.getStyleArgs()]); + } +} diff --git a/packages/pigment-css-react-new/src/runtime/index.ts b/packages/pigment-css-react-new/src/runtime/index.ts new file mode 100644 index 00000000..85fa192f --- /dev/null +++ b/packages/pigment-css-react-new/src/runtime/index.ts @@ -0,0 +1,2 @@ +export * from '@pigment-css/core/runtime'; +export * from './styled'; diff --git a/packages/pigment-css-react-new/src/runtime/styled.js b/packages/pigment-css-react-new/src/runtime/styled.js new file mode 100644 index 00000000..27a0892d --- /dev/null +++ b/packages/pigment-css-react-new/src/runtime/styled.js @@ -0,0 +1,13 @@ +import * as React from 'react'; + +export function styled(component) { + function classWrapper({ displayName }) { + // eslint-disable-next-line react/prop-types + const WrappedComponent = React.forwardRef(function WrappedComponent({ as: asProp, ...rest }) { + const FinalComponent = asProp ?? component; + return ; + }); + WrappedComponent.displayName = `Pigment(${displayName ?? 'Styled'})`; + } + return classWrapper; +} diff --git a/packages/pigment-css-react-new/src/styled.d.ts b/packages/pigment-css-react-new/src/styled.d.ts new file mode 100644 index 00000000..fa6a253e --- /dev/null +++ b/packages/pigment-css-react-new/src/styled.d.ts @@ -0,0 +1 @@ +export declare function styled(): void; diff --git a/packages/pigment-css-react-new/src/styled.js b/packages/pigment-css-react-new/src/styled.js new file mode 100644 index 00000000..9a82254a --- /dev/null +++ b/packages/pigment-css-react-new/src/styled.js @@ -0,0 +1 @@ +export { styled } from './runtime/styled'; diff --git a/packages/pigment-css-react-new/src/sx.d.ts b/packages/pigment-css-react-new/src/sx.d.ts new file mode 100644 index 00000000..ba4394ec --- /dev/null +++ b/packages/pigment-css-react-new/src/sx.d.ts @@ -0,0 +1,10 @@ +import type { CSSObjectNoCallback, ThemeArgs } from '@pigment-css/core'; + +type GetTheme = Argument extends { theme: infer Theme } ? Theme : never; + +export type SxProp = + | CSSObjectNoCallback + | ((theme: GetTheme) => CSSObjectNoCallback) + | ReadonlyArray) => CSSObjectNoCallback)>; + +export default function sx(arg: SxProp, componentClass?: string): string; diff --git a/packages/pigment-css-react-new/styles.css b/packages/pigment-css-react-new/styles.css new file mode 100644 index 00000000..87774e54 --- /dev/null +++ b/packages/pigment-css-react-new/styles.css @@ -0,0 +1,3 @@ +/** + * Placeholder css file where theme contents will be injected by the bundler + */ diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.input.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.input.js new file mode 100644 index 00000000..26a8765a --- /dev/null +++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.input.js @@ -0,0 +1,37 @@ +import { styled, keyframes } from '@pigment-css/react-new'; + +function TestComponent() { + return

Hello World

; +} + +const rotateKeyframe = keyframes({ + from: { + transform: 'translateX(0%)', + }, + to: { + transform: 'translateX(100%)', + }, +}); + +const Component = styled.div({ + animation: `${rotateKeyframe} 2s ease-out 0s infinite`, + marginLeft: 10, +}); + +export const SliderRail = styled(TestComponent, { + name: 'MuiSlider', + slot: 'Rail', +})` + display: block; + position: absolute; + left: 0; + top: 0; + border-top-left-radius: 3px; +`; + +const SliderRail2 = styled.span` + ${SliderRail} { + padding-inline-start: none; + margin: 0px 10px 10px 30px; + } +`; diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.css b/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.css new file mode 100644 index 00000000..ad7f38c2 --- /dev/null +++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.css @@ -0,0 +1,5 @@ +@layer pigment.base{@keyframes r1gkqk0p{from{transform:translateX(0%);}to{transform:translateX(100%);}}} +@layer pigment.base{.cor4ri8{animation:r1gkqk0p 2s ease-out 0s infinite;margin-left:10px;}} +@layer pigment.base{.sn659j3{display:block;position:absolute;left:0;top:0;border-top-left-radius:3px;}} +@layer pigment.base{.s9z6p60 .sn659j3{padding-inline-start:none;margin:0px 10px 10px 30px;}} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC1pbXBvcnQtcmVwbGFjZW1lbnQuaW5wdXQuanMiXSwibmFtZXMiOlsiLnIxZ2txazBwIiwiLmNvcjRyaTgiLCIuc242NTlqMyIsIi5zOXo2cDYwIl0sIm1hcHBpbmdzIjoiQUFNaUNBO0FBU0pDO0FBS0hDO0FBV05DIiwiZmlsZSI6Ii9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC1pbXBvcnQtcmVwbGFjZW1lbnQuaW5wdXQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgc3R5bGVkLCBrZXlmcmFtZXMgfSBmcm9tICdAcGlnbWVudC1jc3MvcmVhY3QtbmV3JztcblxuZnVuY3Rpb24gVGVzdENvbXBvbmVudCgpIHtcbiAgcmV0dXJuIDxoMT5IZWxsbyBXb3JsZDwvaDE+O1xufVxuXG5jb25zdCByb3RhdGVLZXlmcmFtZSA9IGtleWZyYW1lcyh7XG4gIGZyb206IHtcbiAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKDAlKScsXG4gIH0sXG4gIHRvOiB7XG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgxMDAlKScsXG4gIH0sXG59KTtcblxuY29uc3QgQ29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIGFuaW1hdGlvbjogYCR7cm90YXRlS2V5ZnJhbWV9IDJzIGVhc2Utb3V0IDBzIGluZmluaXRlYCxcbiAgbWFyZ2luTGVmdDogMTAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFNsaWRlclJhaWwgPSBzdHlsZWQoVGVzdENvbXBvbmVudCwge1xuICBuYW1lOiAnTXVpU2xpZGVyJyxcbiAgc2xvdDogJ1JhaWwnLFxufSlgXG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGxlZnQ6IDA7XG4gIHRvcDogMDtcbiAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogM3B4O1xuYDtcblxuY29uc3QgU2xpZGVyUmFpbDIgPSBzdHlsZWQuc3BhbmBcbiAgJHtTbGlkZXJSYWlsfSB7XG4gICAgcGFkZGluZy1pbmxpbmUtc3RhcnQ6IG5vbmU7XG4gICAgbWFyZ2luOiAwcHggMTBweCAxMHB4IDMwcHg7XG4gIH1cbmA7XG4iXX0=*/ \ No newline at end of file diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.js new file mode 100644 index 00000000..784ed810 --- /dev/null +++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.js @@ -0,0 +1,14 @@ +import { styled as _styled, styled as _styled2, styled as _styled3 } from '@my-lib/react/styled'; +function TestComponent() { + return

Hello World

; +} +const Component = /*#__PURE__*/ _styled('div')({ + classes: 'cor4ri8', +}); +const _exp3 = /*#__PURE__*/ () => TestComponent; +export const SliderRail = /*#__PURE__*/ _styled2(_exp3())({ + classes: 'sn659j3', +}); +const SliderRail2 = /*#__PURE__*/ _styled3('span')({ + classes: 's9z6p60', +}); diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.input.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.input.js new file mode 100644 index 00000000..cd06929d --- /dev/null +++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.input.js @@ -0,0 +1,107 @@ +import { styled, keyframes } from '@pigment-css/react-new'; + +const rotateKeyframe = keyframes({ + from: { + transform: 'rotate(360deg)', + }, + to: { + transform: 'rotate(0deg)', + }, +}); + +function TestComponent() { + return

Hello

; +} + +const StyledTest = styled(TestComponent)({ + $$id: 0, + display: 'block', + position: 'absolute', + borderRadius: 'inherit', + color(props) { + return props.size === 'small' ? 'red' : 'blue'; + }, + variants: { + size: { + small: { + $$id: '01', + padding: 0, + margin: 0, + borderColor: 'red', + }, + medium: { + $$id: '02', + padding: 5, + }, + large: { + $$id: '03', + padding: 10, + }, + }, + }, +}); + +export const SliderRail3 = styled('span', { + name: 'MuiSlider', + slot: 'Rail', +})({ + $$id: 1, + display: 'block', + position: 'absolute', + borderRadius: 'inherit', + backgroundColor: 'currentColor', + opacity: 0.38, +}); + +export const SliderRail = styled('span', { + name: 'MuiSlider', + slot: 'Rail', +})` + ---id: 2; + display: block; + position: absolute; + border-radius: inherit; + background-color: currentColor; + opacity: 0.38; +`; + +const SliderRail5 = styled.span({ + display: 'block', + opacity: 0.38, + [SliderRail]: { + display: 'none', + }, +}); + +const Component = styled.div({ + $$id: 3, + color: '#ff5252', + animation: `${rotateKeyframe} 2s ease-out 0s infinite`, +}); + +const SliderRail2 = styled('span')` + ---id: 4; + display: block; + opacity: 0.38; + ${SliderRail} { + display: none; + } +`; + +const SliderRail4 = styled.span` + ---id: 5; + display: block; + opacity: 0.38; + ${SliderRail} { + display: none; + } +`; + +export function App() { + return ( + + + + + ); +} diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.css b/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.css new file mode 100644 index 00000000..d7a8cecf --- /dev/null +++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.css @@ -0,0 +1,12 @@ +@keyframes rl9f3t2 {from{transform:rotate(360deg);}to{transform:rotate(0deg);}} +.s1k22dj{---id:0;display:block;position:absolute;border-radius:inherit;color:var(--s1k22dj-1);} +.s1k22dj-size-small{---id:01;padding:0;margin:0;border-color:red;} +.s1k22dj-size-medium{---id:02;padding:5px;} +.s1k22dj-size-large{---id:03;padding:10px;} +.scx6lci{---id:1;display:block;position:absolute;border-radius:inherit;background-color:currentColor;opacity:0.38;} +.s1uutepx{---id:2;display:block;position:absolute;border-radius:inherit;background-color:currentColor;opacity:0.38;} +.s1czomkm{display:block;opacity:0.38;}.s1czomkm .s1uutepx{display:none;} +.camj2o9{---id:3;color:#ff5252;animation:rl9f3t2 2s ease-out 0s infinite;} +.s9jspa8{---id:4;display:block;opacity:0.38;}.s9jspa8 .s1uutepx{display:none;} +.sg47azp{---id:5;display:block;opacity:0.38;}.sg47azp .s1uutepx{display:none;} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC1uby1sYXllci5pbnB1dC5qcyJdLCJuYW1lcyI6WyIucmw5ZjN0MiIsIi5zMWsyMmRqIiwiLnMxazIyZGotc2l6ZS1zbWFsbCIsIi5zMWsyMmRqLXNpemUtbWVkaXVtIiwiLnMxazIyZGotc2l6ZS1sYXJnZSIsIi5zY3g2bGNpIiwiLnMxdXV0ZXB4IiwiLnMxY3pvbWttIiwiLmNhbWoybzkiLCIuczlqc3BhOCIsIi5zZzQ3YXpwIl0sIm1hcHBpbmdzIjoiQUFFaUNBO0FBYVFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBK0J0Q0M7QUFTdUJDO0FBWU1DO0FBUUhDO0FBTVRDO0FBU0FDIiwiZmlsZSI6Ii9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC1uby1sYXllci5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzdHlsZWQsIGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9yZWFjdC1uZXcnO1xuXG5jb25zdCByb3RhdGVLZXlmcmFtZSA9IGtleWZyYW1lcyh7XG4gIGZyb206IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMzYwZGVnKScsXG4gIH0sXG4gIHRvOiB7XG4gICAgdHJhbnNmb3JtOiAncm90YXRlKDBkZWcpJyxcbiAgfSxcbn0pO1xuXG5mdW5jdGlvbiBUZXN0Q29tcG9uZW50KCkge1xuICByZXR1cm4gPGgxPkhlbGxvPC9oMT47XG59XG5cbmNvbnN0IFN0eWxlZFRlc3QgPSBzdHlsZWQoVGVzdENvbXBvbmVudCkoe1xuICAkJGlkOiAwLFxuICBkaXNwbGF5OiAnYmxvY2snLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgYm9yZGVyUmFkaXVzOiAnaW5oZXJpdCcsXG4gIGNvbG9yKHByb3BzKSB7XG4gICAgcmV0dXJuIHByb3BzLnNpemUgPT09ICdzbWFsbCcgPyAncmVkJyA6ICdibHVlJztcbiAgfSxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGlkOiAnMDEnLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiAncmVkJyxcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRpZDogJzAyJyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGlkOiAnMDMnLFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbDMgPSBzdHlsZWQoJ3NwYW4nLCB7XG4gIG5hbWU6ICdNdWlTbGlkZXInLFxuICBzbG90OiAnUmFpbCcsXG59KSh7XG4gICQkaWQ6IDEsXG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICBib3JkZXJSYWRpdXM6ICdpbmhlcml0JyxcbiAgYmFja2dyb3VuZENvbG9yOiAnY3VycmVudENvbG9yJyxcbiAgb3BhY2l0eTogMC4zOCxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbCA9IHN0eWxlZCgnc3BhbicsIHtcbiAgbmFtZTogJ011aVNsaWRlcicsXG4gIHNsb3Q6ICdSYWlsJyxcbn0pYFxuICAtLS1pZDogMjtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYm9yZGVyLXJhZGl1czogaW5oZXJpdDtcbiAgYmFja2dyb3VuZC1jb2xvcjogY3VycmVudENvbG9yO1xuICBvcGFjaXR5OiAwLjM4O1xuYDtcblxuY29uc3QgU2xpZGVyUmFpbDUgPSBzdHlsZWQuc3Bhbih7XG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIG9wYWNpdHk6IDAuMzgsXG4gIFtTbGlkZXJSYWlsXToge1xuICAgIGRpc3BsYXk6ICdub25lJyxcbiAgfSxcbn0pO1xuXG5jb25zdCBDb21wb25lbnQgPSBzdHlsZWQuZGl2KHtcbiAgJCRpZDogMyxcbiAgY29sb3I6ICcjZmY1MjUyJyxcbiAgYW5pbWF0aW9uOiBgJHtyb3RhdGVLZXlmcmFtZX0gMnMgZWFzZS1vdXQgMHMgaW5maW5pdGVgLFxufSk7XG5cbmNvbnN0IFNsaWRlclJhaWwyID0gc3R5bGVkKCdzcGFuJylgXG4gIC0tLWlkOiA0O1xuICBkaXNwbGF5OiBibG9jaztcbiAgb3BhY2l0eTogMC4zODtcbiAgJHtTbGlkZXJSYWlsfSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgU2xpZGVyUmFpbDQgPSBzdHlsZWQuc3BhbmBcbiAgLS0taWQ6IDU7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBvcGFjaXR5OiAwLjM4O1xuICAke1NsaWRlclJhaWx9IHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG5gO1xuXG5leHBvcnQgZnVuY3Rpb24gQXBwKCkge1xuICByZXR1cm4gKFxuICAgIDxDb21wb25lbnQ+XG4gICAgICA8U2xpZGVyUmFpbCAvPlxuICAgICAgPFNsaWRlclJhaWwyIC8+XG4gICAgPC9Db21wb25lbnQ+XG4gICk7XG59XG4iXX0=*/ \ No newline at end of file diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.js new file mode 100644 index 00000000..ca3e3e5c --- /dev/null +++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.js @@ -0,0 +1,70 @@ +import { + styled as _styled, + styled as _styled2, + styled as _styled3, + styled as _styled4, + styled as _styled5, + styled as _styled6, + styled as _styled7, +} from '@pigment-css/react-new/runtime'; +function TestComponent() { + return

Hello

; +} +const _exp2 = /*#__PURE__*/ () => TestComponent; +const StyledTest = /*#__PURE__*/ _styled(_exp2())({ + classes: 's1k22dj', + variants: [ + { + $$cls: 's1k22dj-size-small', + props: { + size: 'small', + }, + }, + { + $$cls: 's1k22dj-size-medium', + props: { + size: 'medium', + }, + }, + { + $$cls: 's1k22dj-size-large', + props: { + size: 'large', + }, + }, + ], + vars: { + '--s1k22dj-1': [ + (props) => { + return props.size === 'small' ? 'red' : 'blue'; + }, + 0, + ], + }, +}); +export const SliderRail3 = /*#__PURE__*/ _styled2('span')({ + classes: 'scx6lci', +}); +export const SliderRail = /*#__PURE__*/ _styled3('span')({ + classes: 's1uutepx', +}); +const SliderRail5 = /*#__PURE__*/ _styled4('span')({ + classes: 's1czomkm', +}); +const Component = /*#__PURE__*/ _styled5('div')({ + classes: 'camj2o9', +}); +const SliderRail2 = /*#__PURE__*/ _styled6('span')({ + classes: 's9jspa8', +}); +const SliderRail4 = /*#__PURE__*/ _styled7('span')({ + classes: 'sg47azp', +}); +export function App() { + return ( + + + + + ); +} diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js new file mode 100644 index 00000000..e4689c85 --- /dev/null +++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js @@ -0,0 +1,116 @@ +import { styled, keyframes, css } from '@pigment-css/react-new'; + +const cls1 = css({ + color: 'red', +}); + +export const rotateKeyframe = keyframes({ className: 'rotate' })({ + from: { + transform: 'rotate(360deg)', + }, + to: { + transform: 'rotate(0deg)', + }, +}); + +function TestComponent() { + return

Hello

; +} + +const StyledTest = styled(TestComponent, { + className: 'StyledTest', +})({ + $$id: 0, + display: 'block', + position: 'absolute', + borderRadius: 'inherit', + [`.${cls1}`]: { + color: 'blue', + }, + color(props) { + return props.size === 'small' ? 'red' : 'blue'; + }, + variants: { + size: { + small: { + $$id: '01', + padding: 0, + margin: 0, + borderColor: 'red', + }, + medium: { + $$id: '02', + padding: 5, + }, + large: { + $$id: '03', + padding: 10, + }, + }, + }, +}); + +export const SliderRail3 = styled('span', { + name: 'MuiSlider', + slot: 'Rail', +})({ + $$id: 1, + display: 'block', + position: 'absolute', + borderRadius: 'inherit', + backgroundColor: 'currentColor', + opacity: 0.38, +}); + +export const SliderRail = styled('span', { + name: 'MuiSlider', + slot: 'Rail', +})` + ---id: 2; + display: block; + position: absolute; + border-radius: inherit; + background-color: currentColor; + opacity: 0.38; +`; + +const SliderRail5 = styled.span({ + display: 'block', + opacity: 0.38, + [SliderRail]: { + display: 'none', + }, +}); + +const Component = styled.div({ + $$id: 3, + color: '#ff5252', + animation: `${rotateKeyframe} 2s ease-out 0s infinite`, +}); + +const SliderRail2 = styled('span')` + ---id: 4; + display: block; + opacity: 0.38; + ${SliderRail} { + display: none; + } +`; + +const SliderRail4 = styled.span` + ---id: 5; + display: block; + opacity: 0.38; + ${SliderRail} { + display: none; + } +`; + +export function App() { + return ( + + + + + ); +} diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css new file mode 100644 index 00000000..7b82483a --- /dev/null +++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css @@ -0,0 +1,13 @@ +@layer pigment.base{.c1dgsgnh{color:red;}} +@layer pigment.base{@keyframes rotate{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}} +@layer pigment.base{.StyledTest{---id:0;display:block;position:absolute;border-radius:inherit;color:var(--StyledTest-1);}.StyledTest .c1dgsgnh{color:blue;}} +@layer pigment.variants{.StyledTest-size-small{---id:01;padding:0;margin:0;border-color:red;}} +@layer pigment.variants{.StyledTest-size-medium{---id:02;padding:5px;}} +@layer pigment.variants{.StyledTest-size-large{---id:03;padding:10px;}} +@layer pigment.base{.s4ekdda{---id:1;display:block;position:absolute;border-radius:inherit;background-color:currentColor;opacity:0.38;}} +@layer pigment.base{.sqpzee{---id:2;display:block;position:absolute;border-radius:inherit;background-color:currentColor;opacity:0.38;}} +@layer pigment.base{.s1o48m17{display:block;opacity:0.38;}.s1o48m17 .sqpzee{display:none;}} +@layer pigment.base{.c13e7k7c{---id:3;color:#ff5252;animation:rotate 2s ease-out 0s infinite;}} +@layer pigment.base{.sqzgjb7{---id:4;display:block;opacity:0.38;}.sqzgjb7 .sqpzee{display:none;}} +@layer pigment.base{.sxcjuwu{---id:5;display:block;opacity:0.38;}.sxcjuwu .sqpzee{display:none;}} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC5pbnB1dC5qcyJdLCJuYW1lcyI6WyIuYzFkZ3NnbmgiLCIucm90YXRlIiwiLlN0eWxlZFRlc3QiLCIuU3R5bGVkVGVzdC1zaXplLXNtYWxsIiwiLlN0eWxlZFRlc3Qtc2l6ZS1tZWRpdW0iLCIuU3R5bGVkVGVzdC1zaXplLWxhcmdlIiwiLnM0ZWtkZGEiLCIuc3FwemVlIiwiLnMxbzQ4bTE3IiwiLmMxM2U3azdjIiwiLnNxemdqYjciLCIuc3hjanV3dSJdLCJtYXBwaW5ncyI6IkFBRWlCQTtBQUlnREM7QUFlOURDO0FBQUFDO0FBQUFDO0FBQUFDO0FBa0NBQztBQVN1QkM7QUFZTUM7QUFRSEM7QUFNVEM7QUFTQUMiLCJmaWxlIjoiL3BhY2thZ2VzL3BpZ21lbnQtY3NzLXJlYWN0LW5ldy90ZXN0cy9zdHlsZWQvZml4dHVyZXMvc3R5bGVkLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHN0eWxlZCwga2V5ZnJhbWVzLCBjc3MgfSBmcm9tICdAcGlnbWVudC1jc3MvcmVhY3QtbmV3JztcblxuY29uc3QgY2xzMSA9IGNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbn0pO1xuXG5leHBvcnQgY29uc3Qgcm90YXRlS2V5ZnJhbWUgPSBrZXlmcmFtZXMoeyBjbGFzc05hbWU6ICdyb3RhdGUnIH0pKHtcbiAgZnJvbToge1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgzNjBkZWcpJyxcbiAgfSxcbiAgdG86IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMGRlZyknLFxuICB9LFxufSk7XG5cbmZ1bmN0aW9uIFRlc3RDb21wb25lbnQoKSB7XG4gIHJldHVybiA8aDE+SGVsbG88L2gxPjtcbn1cblxuY29uc3QgU3R5bGVkVGVzdCA9IHN0eWxlZChUZXN0Q29tcG9uZW50LCB7XG4gIGNsYXNzTmFtZTogJ1N0eWxlZFRlc3QnLFxufSkoe1xuICAkJGlkOiAwLFxuICBkaXNwbGF5OiAnYmxvY2snLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgYm9yZGVyUmFkaXVzOiAnaW5oZXJpdCcsXG4gIFtgLiR7Y2xzMX1gXToge1xuICAgIGNvbG9yOiAnYmx1ZScsXG4gIH0sXG4gIGNvbG9yKHByb3BzKSB7XG4gICAgcmV0dXJuIHByb3BzLnNpemUgPT09ICdzbWFsbCcgPyAncmVkJyA6ICdibHVlJztcbiAgfSxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGlkOiAnMDEnLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiAncmVkJyxcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRpZDogJzAyJyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGlkOiAnMDMnLFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbDMgPSBzdHlsZWQoJ3NwYW4nLCB7XG4gIG5hbWU6ICdNdWlTbGlkZXInLFxuICBzbG90OiAnUmFpbCcsXG59KSh7XG4gICQkaWQ6IDEsXG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICBib3JkZXJSYWRpdXM6ICdpbmhlcml0JyxcbiAgYmFja2dyb3VuZENvbG9yOiAnY3VycmVudENvbG9yJyxcbiAgb3BhY2l0eTogMC4zOCxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbCA9IHN0eWxlZCgnc3BhbicsIHtcbiAgbmFtZTogJ011aVNsaWRlcicsXG4gIHNsb3Q6ICdSYWlsJyxcbn0pYFxuICAtLS1pZDogMjtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYm9yZGVyLXJhZGl1czogaW5oZXJpdDtcbiAgYmFja2dyb3VuZC1jb2xvcjogY3VycmVudENvbG9yO1xuICBvcGFjaXR5OiAwLjM4O1xuYDtcblxuY29uc3QgU2xpZGVyUmFpbDUgPSBzdHlsZWQuc3Bhbih7XG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIG9wYWNpdHk6IDAuMzgsXG4gIFtTbGlkZXJSYWlsXToge1xuICAgIGRpc3BsYXk6ICdub25lJyxcbiAgfSxcbn0pO1xuXG5jb25zdCBDb21wb25lbnQgPSBzdHlsZWQuZGl2KHtcbiAgJCRpZDogMyxcbiAgY29sb3I6ICcjZmY1MjUyJyxcbiAgYW5pbWF0aW9uOiBgJHtyb3RhdGVLZXlmcmFtZX0gMnMgZWFzZS1vdXQgMHMgaW5maW5pdGVgLFxufSk7XG5cbmNvbnN0IFNsaWRlclJhaWwyID0gc3R5bGVkKCdzcGFuJylgXG4gIC0tLWlkOiA0O1xuICBkaXNwbGF5OiBibG9jaztcbiAgb3BhY2l0eTogMC4zODtcbiAgJHtTbGlkZXJSYWlsfSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgU2xpZGVyUmFpbDQgPSBzdHlsZWQuc3BhbmBcbiAgLS0taWQ6IDU7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBvcGFjaXR5OiAwLjM4O1xuICAke1NsaWRlclJhaWx9IHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG5gO1xuXG5leHBvcnQgZnVuY3Rpb24gQXBwKCkge1xuICByZXR1cm4gKFxuICAgIDxDb21wb25lbnQ+XG4gICAgICA8U2xpZGVyUmFpbCAvPlxuICAgICAgPFNsaWRlclJhaWwyIC8+XG4gICAgPC9Db21wb25lbnQ+XG4gICk7XG59XG4iXX0=*/ \ No newline at end of file diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js new file mode 100644 index 00000000..ae6085e3 --- /dev/null +++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js @@ -0,0 +1,72 @@ +import { + css as _css, + styled as _styled, + styled as _styled2, + styled as _styled3, + styled as _styled4, + styled as _styled5, + styled as _styled6, + styled as _styled7, +} from '@pigment-css/react-new/runtime'; +export const rotateKeyframe = 'rotate'; +function TestComponent() { + return

Hello

; +} +const _exp4 = /*#__PURE__*/ () => TestComponent; +const StyledTest = /*#__PURE__*/ _styled(_exp4())({ + classes: 'StyledTest', + variants: [ + { + $$cls: 'StyledTest-size-small', + props: { + size: 'small', + }, + }, + { + $$cls: 'StyledTest-size-medium', + props: { + size: 'medium', + }, + }, + { + $$cls: 'StyledTest-size-large', + props: { + size: 'large', + }, + }, + ], + vars: { + '--StyledTest-1': [ + (props) => { + return props.size === 'small' ? 'red' : 'blue'; + }, + 0, + ], + }, +}); +export const SliderRail3 = /*#__PURE__*/ _styled2('span')({ + classes: 's4ekdda', +}); +export const SliderRail = /*#__PURE__*/ _styled3('span')({ + classes: 'sqpzee', +}); +const SliderRail5 = /*#__PURE__*/ _styled4('span')({ + classes: 's1o48m17', +}); +const Component = /*#__PURE__*/ _styled5('div')({ + classes: 'c13e7k7c', +}); +const SliderRail2 = /*#__PURE__*/ _styled6('span')({ + classes: 'sqzgjb7', +}); +const SliderRail4 = /*#__PURE__*/ _styled7('span')({ + classes: 'sxcjuwu', +}); +export function App() { + return ( + + + + + ); +} diff --git a/packages/pigment-css-react-new/tests/styled/styled.spec.tsx b/packages/pigment-css-react-new/tests/styled/styled.spec.tsx new file mode 100644 index 00000000..8e2858f3 --- /dev/null +++ b/packages/pigment-css-react-new/tests/styled/styled.spec.tsx @@ -0,0 +1,20 @@ +// import { styled } from '../../src/styled'; + +// const Button = styled('button')({ +// color: 'red', +// variants: { +// hue: { +// primary: { +// color: 'red', +// backgroundColor: 'blue', +// }, +// }, +// }, +// }); + +// // @ts-expect-error `download` does not exist on button +// ; + +// ; diff --git a/packages/pigment-css-react-new/tests/styled/styled.test.tsx b/packages/pigment-css-react-new/tests/styled/styled.test.tsx new file mode 100644 index 00000000..324de6ad --- /dev/null +++ b/packages/pigment-css-react-new/tests/styled/styled.test.tsx @@ -0,0 +1,44 @@ +import path from 'node:path'; +import { runTransformation, expect } from '../testUtils'; + +describe('Pigment CSS - styled', () => { + it('basics', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/styled.input.js'), + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); + + it('should replace the import paths to the ones specified in config', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/styled-import-replacement.input.js'), + { + runtimeReplacementPath(tag) { + if (tag === 'styled') { + return `@my-lib/react/styled`; + } + return null; + }, + }, + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); + + it('should not use css layers if the feature is disabled', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/styled-no-layer.input.js'), + { + features: { + useLayer: false, + }, + }, + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); +}); diff --git a/packages/pigment-css-react-new/tests/testUtils.ts b/packages/pigment-css-react-new/tests/testUtils.ts new file mode 100644 index 00000000..24ac2236 --- /dev/null +++ b/packages/pigment-css-react-new/tests/testUtils.ts @@ -0,0 +1,136 @@ +import * as fs from 'node:fs'; +import * as path from 'node:path'; +import { expect as chaiExpect } from 'chai'; +import { asyncResolveFallback } from '@wyw-in-js/shared'; +import { TransformCacheCollection, createFileReporter, transform } from '@wyw-in-js/transform'; +import * as prettier from 'prettier'; +import { PigmentConfig, preprocessor, transformPigmentConfig } from '@pigment-css/utils'; + +import pkgJson from '../package.json'; + +type TransformOptions = { + outputDir?: string; +} & PigmentConfig; + +const shouldUpdateOutput = process.env.UPDATE_FIXTURES === 'true'; + +function replaceAbsolutePathInSourceMap(sourcemap: string) { + const sourceMapJson = JSON.parse(sourcemap) as { sources: string[]; file: string }; + sourceMapJson.sources = sourceMapJson.sources.map((absPath) => + absPath.replace(process.cwd(), ''), + ); + sourceMapJson.file = sourceMapJson.file.replace(process.cwd(), ''); + return JSON.stringify(sourceMapJson); +} + +export async function runTransformation(absolutePath: string, options?: TransformOptions) { + const cache = new TransformCacheCollection(); + const { emitter: eventEmitter } = createFileReporter(false); + const inputFilePath = absolutePath; + const { outputDir, ...restOptions } = options ?? {}; + let outputFilePath = ( + outputDir ? path.join(outputDir, inputFilePath.split(path.sep).pop() as string) : absolutePath + ).replace('.input.', '.output.'); + let outputCssFilePath = ( + outputDir ? path.join(outputDir, inputFilePath.split(path.sep).pop() as string) : absolutePath + ) + .replace('.input.js', '.output.css') + .replace('.input.jsx', '.output.css'); + + if (!outputFilePath.includes('output')) { + outputFilePath = outputFilePath.replace(path.extname(outputFilePath), '.output.js'); + } + + if (!outputCssFilePath.includes('output')) { + outputCssFilePath = outputCssFilePath.replace(path.extname(outputCssFilePath), '.output.css'); + } + + const inputContent = fs.readFileSync(inputFilePath, 'utf8'); + let outputContent = fs.existsSync(outputFilePath) ? fs.readFileSync(outputFilePath, 'utf8') : ''; + let outputCssContent = fs.existsSync(outputCssFilePath) + ? fs.readFileSync(outputCssFilePath, 'utf8') + : ''; + + const pluginOptions = transformPigmentConfig({ + babelOptions: { + configFile: false, + babelrc: false, + plugins: ['@babel/plugin-syntax-jsx'], + }, + tagResolver(source: string, tag: string) { + if (source !== '@pigment-css/react-new') { + return null; + } + const tagPath = pkgJson['wyw-in-js'].tags[tag] as string | undefined; + if (!tagPath) { + return null; + } + const res = tagPath.startsWith('.') + ? require.resolve(`../${tagPath}`) + : require.resolve(tagPath); + return res; + }, + ...restOptions, + }); + + const result = await transform( + { + options: { + filename: inputFilePath, + // preprocessor: (selector, css) => preprocessor(selector, css, options?.css), + preprocessor, + pluginOptions, + }, + cache, + eventEmitter, + }, + inputContent, + asyncResolveFallback, + ); + + const prettierConfig = await prettier.resolveConfig( + path.join(process.cwd(), 'prettier.config.js'), + ); + const formattedJs = await prettier.format(result.code, { + ...prettierConfig, + parser: 'babel', + }); + // let formattedCss = await prettier.format(result.cssText ?? '', { + // ...prettierConfig, + // parser: 'css', + // }); + const formattedCss = + (result.cssText ?? '') + + (result.cssSourceMapText + ? `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(replaceAbsolutePathInSourceMap(result.cssSourceMapText)).toString('base64')}*/` + : ''); + + if (!outputContent || shouldUpdateOutput) { + fs.mkdirSync(path.dirname(outputFilePath), { recursive: true }); + fs.writeFileSync(outputFilePath, formattedJs, 'utf-8'); + outputContent = formattedJs; + } + + if (!outputCssContent || shouldUpdateOutput) { + fs.mkdirSync(path.dirname(outputCssFilePath), { recursive: true }); + fs.writeFileSync(outputCssFilePath, formattedCss, 'utf-8'); + outputCssContent = formattedCss; + } + + return { + output: { + js: formattedJs, + css: formattedCss, + }, + fixture: { + js: outputContent, + css: outputCssContent, + }, + }; +} + +export function expect(val: any): ReturnType { + const CUSTOM_ERROR = + 'The file contents have changed. Run "test:update" command to update the file if this is expected.'; + return chaiExpect(val, CUSTOM_ERROR); +} diff --git a/packages/pigment-css-react-new/tsconfig.build.json b/packages/pigment-css-react-new/tsconfig.build.json new file mode 100644 index 00000000..2639ca1b --- /dev/null +++ b/packages/pigment-css-react-new/tsconfig.build.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "composite": false + }, + "exclude": ["./tsup.config.ts", "src/**/*.d.ts"] +} diff --git a/packages/pigment-css-react-new/tsconfig.json b/packages/pigment-css-react-new/tsconfig.json new file mode 100644 index 00000000..e851de14 --- /dev/null +++ b/packages/pigment-css-react-new/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../../tsconfig.json", + "include": [ + "src/**/*.tsx", + "src/**/*.js", + "src/**/*.ts", + "tests/**/*.spec.ts", + "tests/**/*.spec.tsx", + "src/exports/css.cjs" + ], + "exclude": ["./tsup.config.ts"] +} diff --git a/packages/pigment-css-react-new/tsup.config.ts b/packages/pigment-css-react-new/tsup.config.ts new file mode 100644 index 00000000..6509ad28 --- /dev/null +++ b/packages/pigment-css-react-new/tsup.config.ts @@ -0,0 +1,29 @@ +import { Options, defineConfig } from 'tsup'; +import config from '../../tsup.config'; + +const processors = ['styled', 'css']; + +const baseConfig: Options = { + ...(config as Options), + tsconfig: './tsconfig.build.json', +}; + +const BASE_FILES = ['index.ts']; + +export default defineConfig([ + { + ...baseConfig, + entry: BASE_FILES.map((file) => `./src/${file}`), + }, + { + ...baseConfig, + entry: ['./src/runtime/index.ts'], + outDir: 'build/runtime', + }, + { + ...baseConfig, + entry: processors.map((file) => `./src/processors/${file}.ts`), + outDir: 'build/processors', + cjsInterop: true, + }, +]); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b63d5cbf..188a7daa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -131,7 +131,7 @@ importers: version: 9.1.0(eslint@8.57.0) eslint-import-resolver-webpack: specifier: ^0.13.8 - version: 0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)) + version: 0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)) eslint-plugin-babel: specifier: ^5.3.1 version: 5.3.1(eslint@8.57.0) @@ -164,7 +164,7 @@ importers: version: 11.2.0 lerna: specifier: ^8.1.2 - version: 8.1.2(encoding@0.1.13) + version: 8.1.2(@swc/core@1.10.3(@swc/helpers@0.5.15))(encoding@0.1.13) lodash: specifier: ^4.17.21 version: 4.17.21 @@ -176,7 +176,7 @@ importers: version: 10.8.2 nx: specifier: ^18.2.3 - version: 18.2.4 + version: 18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)) nyc: specifier: ^15.1.0 version: 15.1.0 @@ -218,7 +218,7 @@ importers: version: 36.0.0(stylelint@16.3.1(typescript@5.6.3)) tsup: specifier: ^8.3.5 - version: 8.3.5(jiti@1.21.6)(postcss@8.4.47)(tsx@4.19.2)(typescript@5.6.3)(yaml@2.6.0) + version: 8.3.5(@swc/core@1.10.3(@swc/helpers@0.5.15))(jiti@1.21.6)(postcss@8.4.47)(tsx@4.19.2)(typescript@5.6.3)(yaml@2.6.0) tsx: specifier: ^4.19.2 version: 4.19.2 @@ -431,7 +431,7 @@ importers: version: 18.3.1 eslint-config-next: specifier: 15.0.2 - version: 15.0.2(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0)(typescript@5.6.3) + version: 15.0.2(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3) serve: specifier: 14.2.4 version: 14.2.4 @@ -446,10 +446,10 @@ importers: version: 8.56.7 '@typescript-eslint/experimental-utils': specifier: ^5.62.0 - version: 5.62.0(eslint@8.57.0)(typescript@5.6.3) + version: 5.62.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3) '@typescript-eslint/parser': specifier: ^7.5.0 - version: 7.6.0(eslint@8.57.0)(typescript@5.6.3) + version: 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3) packages/pigment-css-core: dependencies: @@ -514,7 +514,7 @@ importers: version: 7.25.9 '@babel/parser': specifier: ^7.26.2 - version: 7.26.2 + version: 7.26.3 '@babel/types': specifier: ^7.26.5 version: 7.26.5 @@ -529,7 +529,7 @@ importers: version: 11.13.3(@types/react@18.3.12)(react@18.3.1) '@emotion/serialize': specifier: ^1.3.2 - version: 1.3.2 + version: 1.3.3 '@emotion/styled': specifier: ^11.13.0 version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) @@ -611,7 +611,7 @@ importers: version: 18.3.12 '@types/stylis': specifier: ^4.2.5 - version: 4.2.5 + version: 4.2.7 chai: specifier: ^4.4.1 version: 4.5.0 @@ -622,6 +622,52 @@ importers: specifier: ^18.3.1 version: 18.3.1 + packages/pigment-css-react-new: + dependencies: + '@babel/plugin-syntax-jsx': + specifier: ^7.25.9 + version: 7.25.9(@babel/core@7.26.0) + '@babel/types': + specifier: ^7.25.8 + version: 7.26.5 + '@pigment-css/core': + specifier: workspace:* + version: link:../pigment-css-core + '@pigment-css/theme': + specifier: workspace:^ + version: link:../pigment-css-theme + '@pigment-css/utils': + specifier: workspace:* + version: link:../pigment-css-utils + '@wyw-in-js/processor-utils': + specifier: ^0.5.5 + version: 0.5.5 + '@wyw-in-js/shared': + specifier: ^0.5.5 + version: 0.5.5 + '@wyw-in-js/transform': + specifier: ^0.5.5 + version: 0.5.5(typescript@5.6.3) + csstype: + specifier: ^3.1.3 + version: 3.1.3 + devDependencies: + '@types/chai': + specifier: ^4.3.14 + version: 4.3.14 + '@types/react': + specifier: ^19.0.2 + version: 19.0.2 + chai: + specifier: ^4.4.1 + version: 4.5.0 + prettier: + specifier: ^3.3.3 + version: 3.3.3 + react: + specifier: ^19.0.0 + version: 19.0.0 + packages/pigment-css-theme: devDependencies: '@types/chai': @@ -666,7 +712,7 @@ importers: version: 4.5.0 webpack: specifier: ^5.91.0 - version: 5.91.0(esbuild@0.24.0) + version: 5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0) packages/pigment-css-utils: dependencies: @@ -787,10 +833,6 @@ packages: resolution: {integrity: sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==} engines: {node: '>=6.9.0'} - '@babel/generator@7.26.2': - resolution: {integrity: sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==} - engines: {node: '>=6.9.0'} - '@babel/generator@7.26.3': resolution: {integrity: sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==} engines: {node: '>=6.9.0'} @@ -893,8 +935,8 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/parser@7.26.2': - resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==} + '@babel/parser@7.26.3': + resolution: {integrity: sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==} engines: {node: '>=6.0.0'} hasBin: true @@ -1371,10 +1413,6 @@ packages: resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==} engines: {node: '>=6.9.0'} - '@babel/traverse@7.25.9': - resolution: {integrity: sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==} - engines: {node: '>=6.9.0'} - '@babel/traverse@7.26.4': resolution: {integrity: sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==} engines: {node: '>=6.9.0'} @@ -1386,6 +1424,7 @@ packages: '@base_ui/react@1.0.0-alpha.3': resolution: {integrity: sha512-3k3zlFDjYPrwb8IWShBHrZLM0Rs0c2W2VFKWTF9XdqkijvI0PFBTqEGBpG+cASsjPoNiJ9WKYYsPICEn40UCgg==} engines: {node: '>=12.0.0'} + deprecated: Base UI npm package name changed. It's now published under @base-ui-components/react. peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 @@ -1453,9 +1492,6 @@ packages: '@types/react': optional: true - '@emotion/serialize@1.3.2': - resolution: {integrity: sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==} - '@emotion/serialize@1.3.3': resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==} @@ -1480,9 +1516,6 @@ packages: peerDependencies: react: '>=16.8.0' - '@emotion/utils@1.4.1': - resolution: {integrity: sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==} - '@emotion/utils@1.4.2': resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==} @@ -1921,18 +1954,42 @@ packages: peerDependencies: eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 - '@eslint-community/regexpp@4.10.0': - resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==} + '@eslint-community/regexpp@4.12.1': + resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==} engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0} + '@eslint/config-array@0.19.1': + resolution: {integrity: sha512-fo6Mtm5mWyKjA/Chy1BYTdn5mGJoDNjC7C64ug20ADsRDGrA85bN3uK3MaKbeRkRuuIEAR5N33Jr1pbm411/PA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@eslint/core@0.9.1': + resolution: {integrity: sha512-GuUdqkyyzQI5RMIWkHhvTWLCyLo1jNK3vzkSyaExH5kHPDHcuL2VOpHjmMY+y3+NC69qAKToBqldTBgYeLSr9Q==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@eslint/eslintrc@2.1.4': resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@eslint/eslintrc@3.2.0': + resolution: {integrity: sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@eslint/js@8.57.0': resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@eslint/js@9.17.0': + resolution: {integrity: sha512-Sxc4hqcs1kTu0iID3kcZDW3JHq2a77HO9P8CP6YEA/FpH3Ll8UXE2r/86Rz9YJLKme39S9vU5OWNjC6Xl0Cr3w==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@eslint/object-schema@2.1.5': + resolution: {integrity: sha512-o0bhxnL89h5Bae5T318nFoFzGy+YE5i/gGkoPAgkmTVdRKTiv3p8JHevPiPaMwoloKfEiiaHlawCqaZMqRm+XQ==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@eslint/plugin-kit@0.2.4': + resolution: {integrity: sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@floating-ui/core@1.6.0': resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==} @@ -1971,6 +2028,14 @@ packages: resolution: {integrity: sha512-nPgzOiDs/FSFhE+dX2KfkmsmkXM3WfXYP06FoW8cXvHshwxHSI3FbXwe5XJYstDAWXP9YA7AMSvmwnuD4OAl2w==} engines: {node: '>=12.0.0'} + '@humanfs/core@0.19.1': + resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==} + engines: {node: '>=18.18.0'} + + '@humanfs/node@0.16.6': + resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==} + engines: {node: '>=18.18.0'} + '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} @@ -1984,6 +2049,14 @@ packages: resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==} deprecated: Use @eslint/object-schema instead + '@humanwhocodes/retry@0.3.1': + resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==} + engines: {node: '>=18.18'} + + '@humanwhocodes/retry@0.4.1': + resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==} + engines: {node: '>=18.18'} + '@hutson/parse-repository-url@3.0.2': resolution: {integrity: sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==} engines: {node: '>=6.9.0'} @@ -2919,6 +2992,75 @@ packages: resolution: {integrity: sha512-/4UjstX8ploZklY8MmlOQoXB1jWIo3Go4MP0R39sbkoWuN6rJ7Zt6l4bjkDPM4hKsjoODh9SSKn2otlp3XL3/A==} engines: {node: '>=14.17'} + '@swc/core-darwin-arm64@1.10.3': + resolution: {integrity: sha512-LFFCxAUKBy69AUE+01rgazQcafIXrYs6tBa9SyKPR51ft6Tp66dAVrWg9MTykaWskuXEe80LPUvUw1ga3bOH3A==} + engines: {node: '>=10'} + cpu: [arm64] + os: [darwin] + + '@swc/core-darwin-x64@1.10.3': + resolution: {integrity: sha512-yZNv1+yPg0GvYdThsMI8WpaPRAPuw2gQDMdgijLFfRcRlr2l1sTWsDHqGd7QMTx+acYM3uB537gyd31WjUAwlQ==} + engines: {node: '>=10'} + cpu: [x64] + os: [darwin] + + '@swc/core-linux-arm-gnueabihf@1.10.3': + resolution: {integrity: sha512-Qa6hu5ASoKV4rcYUBGG3y3z+9UT042KAG4A7ivqqYQFcMfkB4NbZb5So2YWOpUc0/5YlSVkgL22h3Mbj5EXy7A==} + engines: {node: '>=10'} + cpu: [arm] + os: [linux] + + '@swc/core-linux-arm64-gnu@1.10.3': + resolution: {integrity: sha512-BGnoZrmo0nlkXrOxVHk5U3j9u4BuquFviC+LvMe+HrDc5YLVe1gSXMUSBKhIz9MY9uFgxXW977TnB1XjLSKe5Q==} + engines: {node: '>=10'} + cpu: [arm64] + os: [linux] + + '@swc/core-linux-arm64-musl@1.10.3': + resolution: {integrity: sha512-L07/4zKnIY2S/00bE+Yn3oEHkyGjWmGGE8Ta4luVCL+00s04EIwMoE1Hc8E8xFB5zLew5ViKFc5kNb5YZ/tRFQ==} + engines: {node: '>=10'} + cpu: [arm64] + os: [linux] + + '@swc/core-linux-x64-gnu@1.10.3': + resolution: {integrity: sha512-cvTCekY4u0fBIDNfhv/2UxcOXqH4XJE2iNxKuQejS5KIapFJwrZ+fRQ2lha3+yopI/d2p96BlBEWTAcBzeTntw==} + engines: {node: '>=10'} + cpu: [x64] + os: [linux] + + '@swc/core-linux-x64-musl@1.10.3': + resolution: {integrity: sha512-h9kUOTrSSpY9JNc41a+NMAwK62USk/pvNE9Fi/Pfoklmlf9j9j8gRCitqvHpmZcEF4PPIsoMdiGetDipTwvWlw==} + engines: {node: '>=10'} + cpu: [x64] + os: [linux] + + '@swc/core-win32-arm64-msvc@1.10.3': + resolution: {integrity: sha512-iHOmLYkZYn3r1Ff4rfyczdrYGt/wVIWyY0t8swsO9o1TE+zmucGFZuYZzgj3ng8Kp4sojJrydAGz8TINQZDBzQ==} + engines: {node: '>=10'} + cpu: [arm64] + os: [win32] + + '@swc/core-win32-ia32-msvc@1.10.3': + resolution: {integrity: sha512-4SqLSE4Ozh8SxuVuHIZhkSyJQru5+WbQMRs5ggLRqeUy3vkUPHOAFAY3oMwDJUN6BwbAr8+664TmdrMwaWh8Ng==} + engines: {node: '>=10'} + cpu: [ia32] + os: [win32] + + '@swc/core-win32-x64-msvc@1.10.3': + resolution: {integrity: sha512-jTyf/IbNq7NVyqqDIEDzgjALjWu1IMfXKLXXAJArreklIMzkfHU1sV32ZJLOBmRKPyslCoalxIAU+hTx4reUTQ==} + engines: {node: '>=10'} + cpu: [x64] + os: [win32] + + '@swc/core@1.10.3': + resolution: {integrity: sha512-2yjqCcsBx6SNBQZIYNlwxED9aYXW/7QBZyr8LYAxTx5bzmoNhKiClYbsNLe1NJ6ccf5uSbcInw12PjXLduNEdQ==} + engines: {node: '>=10'} + peerDependencies: + '@swc/helpers': '*' + peerDependenciesMeta: + '@swc/helpers': + optional: true + '@swc/counter@0.1.3': resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==} @@ -2928,6 +3070,9 @@ packages: '@swc/helpers@0.5.15': resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==} + '@swc/types@0.1.17': + resolution: {integrity: sha512-V5gRru+aD8YVyCOMAjMpWR1Ui577DD5KSJsHP8RAxopAH22jFz6GZd/qxqjO6MJHQhcsjvjOFXyDhyLQUnMveQ==} + '@szmarczak/http-timer@4.0.6': resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==} engines: {node: '>=10'} @@ -3150,9 +3295,6 @@ packages: '@types/serve-static@1.15.7': resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==} - '@types/stylis@4.2.5': - resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==} - '@types/stylis@4.2.7': resolution: {integrity: sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA==} @@ -4150,8 +4292,8 @@ packages: engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'} hasBin: true - cross-spawn@7.0.3: - resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} + cross-spawn@7.0.6: + resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} css-functions-list@3.2.1: @@ -4728,6 +4870,10 @@ packages: resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + eslint-scope@8.2.0: + resolution: {integrity: sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + eslint-utils@3.0.0: resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==} engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0} @@ -4742,12 +4888,30 @@ packages: resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + eslint-visitor-keys@4.2.0: + resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + eslint@8.57.0: resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true + eslint@9.17.0: + resolution: {integrity: sha512-evtlNcpJg+cZLcnVKwsai8fExnqjGPicK7gnUtlNuzu+Fv9bI0aLpND5T44VLQtoMEnI57LoXO9XAkIXwohKrA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + hasBin: true + peerDependencies: + jiti: '*' + peerDependenciesMeta: + jiti: + optional: true + + espree@10.3.0: + resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + espree@9.6.1: resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -5221,6 +5385,10 @@ packages: resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==} engines: {node: '>=8'} + globals@14.0.0: + resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==} + engines: {node: '>=18'} + globalthis@1.0.4: resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==} engines: {node: '>= 0.4'} @@ -9149,13 +9317,13 @@ snapshots: dependencies: '@ampproject/remapping': 2.3.0 '@babel/code-frame': 7.26.2 - '@babel/generator': 7.26.2 + '@babel/generator': 7.26.3 '@babel/helper-compilation-targets': 7.25.9 '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0) '@babel/helpers': 7.26.0 - '@babel/parser': 7.26.2 + '@babel/parser': 7.26.3 '@babel/template': 7.25.9 - '@babel/traverse': 7.25.9 + '@babel/traverse': 7.26.4 '@babel/types': 7.26.5 convert-source-map: 2.0.0 debug: 4.3.7(supports-color@8.1.1) @@ -9165,14 +9333,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/generator@7.26.2': - dependencies: - '@babel/parser': 7.26.5 - '@babel/types': 7.26.5 - '@jridgewell/gen-mapping': 0.3.5 - '@jridgewell/trace-mapping': 0.3.25 - jsesc: 3.0.2 - '@babel/generator@7.26.3': dependencies: '@babel/parser': 7.26.5 @@ -9240,7 +9400,7 @@ snapshots: '@babel/helper-module-imports@7.25.9': dependencies: - '@babel/traverse': 7.25.9 + '@babel/traverse': 7.26.4 '@babel/types': 7.26.5 transitivePeerDependencies: - supports-color @@ -9321,7 +9481,7 @@ snapshots: regenerator-runtime: 0.14.1 v8flags: 3.2.0 - '@babel/parser@7.26.2': + '@babel/parser@7.26.3': dependencies: '@babel/types': 7.26.5 @@ -9918,18 +10078,6 @@ snapshots: '@babel/parser': 7.26.5 '@babel/types': 7.26.5 - '@babel/traverse@7.25.9': - dependencies: - '@babel/code-frame': 7.26.2 - '@babel/generator': 7.26.2 - '@babel/parser': 7.26.5 - '@babel/template': 7.25.9 - '@babel/types': 7.26.5 - debug: 4.3.7(supports-color@8.1.1) - globals: 11.12.0 - transitivePeerDependencies: - - supports-color - '@babel/traverse@7.26.4': dependencies: '@babel/code-frame': 7.26.2 @@ -10007,7 +10155,7 @@ snapshots: dependencies: '@emotion/memoize': 0.9.0 '@emotion/sheet': 1.4.0 - '@emotion/utils': 1.4.1 + '@emotion/utils': 1.4.2 '@emotion/weak-memoize': 0.4.0 stylis: 4.2.0 @@ -10015,9 +10163,9 @@ snapshots: dependencies: '@emotion/babel-plugin': 11.12.0 '@emotion/cache': 11.13.1 - '@emotion/serialize': 1.3.2 + '@emotion/serialize': 1.3.3 '@emotion/sheet': 1.4.0 - '@emotion/utils': 1.4.1 + '@emotion/utils': 1.4.2 transitivePeerDependencies: - supports-color @@ -10034,9 +10182,9 @@ snapshots: '@babel/runtime': 7.26.0 '@emotion/babel-plugin': 11.12.0 '@emotion/cache': 11.13.1 - '@emotion/serialize': 1.3.2 + '@emotion/serialize': 1.3.3 '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@18.3.1) - '@emotion/utils': 1.4.1 + '@emotion/utils': 1.4.2 '@emotion/weak-memoize': 0.4.0 hoist-non-react-statics: 3.3.2 react: 18.3.1 @@ -10050,9 +10198,9 @@ snapshots: '@babel/runtime': 7.26.0 '@emotion/babel-plugin': 11.12.0 '@emotion/cache': 11.13.1 - '@emotion/serialize': 1.3.2 + '@emotion/serialize': 1.3.3 '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@19.0.0) - '@emotion/utils': 1.4.1 + '@emotion/utils': 1.4.2 '@emotion/weak-memoize': 0.4.0 hoist-non-react-statics: 3.3.2 react: 19.0.0 @@ -10061,14 +10209,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@emotion/serialize@1.3.2': - dependencies: - '@emotion/hash': 0.9.2 - '@emotion/memoize': 0.9.0 - '@emotion/unitless': 0.10.0 - '@emotion/utils': 1.4.1 - csstype: 3.1.3 - '@emotion/serialize@1.3.3': dependencies: '@emotion/hash': 0.9.2 @@ -10085,9 +10225,9 @@ snapshots: '@emotion/babel-plugin': 11.12.0 '@emotion/is-prop-valid': 1.3.1 '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1) - '@emotion/serialize': 1.3.2 + '@emotion/serialize': 1.3.3 '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@18.3.1) - '@emotion/utils': 1.4.1 + '@emotion/utils': 1.4.2 react: 18.3.1 optionalDependencies: '@types/react': 18.3.12 @@ -10100,9 +10240,9 @@ snapshots: '@emotion/babel-plugin': 11.12.0 '@emotion/is-prop-valid': 1.3.1 '@emotion/react': 11.13.3(@types/react@19.0.2)(react@19.0.0) - '@emotion/serialize': 1.3.2 + '@emotion/serialize': 1.3.3 '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@19.0.0) - '@emotion/utils': 1.4.1 + '@emotion/utils': 1.4.2 react: 19.0.0 optionalDependencies: '@types/react': 19.0.2 @@ -10120,8 +10260,6 @@ snapshots: dependencies: react: 19.0.0 - '@emotion/utils@1.4.1': {} - '@emotion/utils@1.4.2': {} '@emotion/weak-memoize@0.4.0': {} @@ -10344,7 +10482,24 @@ snapshots: eslint: 8.57.0 eslint-visitor-keys: 3.4.3 - '@eslint-community/regexpp@4.10.0': {} + '@eslint-community/eslint-utils@4.4.0(eslint@9.17.0(jiti@1.21.6))': + dependencies: + eslint: 9.17.0(jiti@1.21.6) + eslint-visitor-keys: 3.4.3 + + '@eslint-community/regexpp@4.12.1': {} + + '@eslint/config-array@0.19.1': + dependencies: + '@eslint/object-schema': 2.1.5 + debug: 4.3.7(supports-color@8.1.1) + minimatch: 3.1.2 + transitivePeerDependencies: + - supports-color + + '@eslint/core@0.9.1': + dependencies: + '@types/json-schema': 7.0.15 '@eslint/eslintrc@2.1.4': dependencies: @@ -10360,8 +10515,30 @@ snapshots: transitivePeerDependencies: - supports-color + '@eslint/eslintrc@3.2.0': + dependencies: + ajv: 6.12.6 + debug: 4.3.7(supports-color@8.1.1) + espree: 10.3.0 + globals: 14.0.0 + ignore: 5.3.1 + import-fresh: 3.3.0 + js-yaml: 4.1.0 + minimatch: 3.1.2 + strip-json-comments: 3.1.1 + transitivePeerDependencies: + - supports-color + '@eslint/js@8.57.0': {} + '@eslint/js@9.17.0': {} + + '@eslint/object-schema@2.1.5': {} + + '@eslint/plugin-kit@0.2.4': + dependencies: + levn: 0.4.1 + '@floating-ui/core@1.6.0': dependencies: '@floating-ui/utils': 0.2.8 @@ -10417,6 +10594,13 @@ snapshots: - encoding - supports-color + '@humanfs/core@0.19.1': {} + + '@humanfs/node@0.16.6': + dependencies: + '@humanfs/core': 0.19.1 + '@humanwhocodes/retry': 0.3.1 + '@humanwhocodes/config-array@0.11.14': dependencies: '@humanwhocodes/object-schema': 2.0.3 @@ -10429,6 +10613,10 @@ snapshots: '@humanwhocodes/object-schema@2.0.3': {} + '@humanwhocodes/retry@0.3.1': {} + + '@humanwhocodes/retry@0.4.1': {} + '@hutson/parse-repository-url@3.0.2': {} '@img/sharp-darwin-arm64@0.33.5': @@ -10551,10 +10739,10 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.4.15 - '@lerna/create@8.1.2(encoding@0.1.13)(typescript@5.6.3)': + '@lerna/create@8.1.2(@swc/core@1.10.3(@swc/helpers@0.5.15))(encoding@0.1.13)(typescript@5.6.3)': dependencies: '@npmcli/run-script': 7.0.2 - '@nx/devkit': 18.2.4(nx@18.2.4) + '@nx/devkit': 18.2.4(nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15))) '@octokit/plugin-enterprise-rest': 6.0.1 '@octokit/rest': 19.0.11(encoding@0.1.13) byte-size: 8.1.1 @@ -10591,7 +10779,7 @@ snapshots: npm-packlist: 5.1.1 npm-registry-fetch: 14.0.5 npmlog: 6.0.2 - nx: 18.2.4 + nx: 18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)) p-map: 4.0.0 p-map-series: 2.1.0 p-queue: 6.6.2 @@ -11065,28 +11253,28 @@ snapshots: transitivePeerDependencies: - supports-color - '@nrwl/devkit@18.2.4(nx@18.2.4)': + '@nrwl/devkit@18.2.4(nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)))': dependencies: - '@nx/devkit': 18.2.4(nx@18.2.4) + '@nx/devkit': 18.2.4(nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15))) transitivePeerDependencies: - nx - '@nrwl/tao@18.2.4': + '@nrwl/tao@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15))': dependencies: - nx: 18.2.4 + nx: 18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)) tslib: 2.6.2 transitivePeerDependencies: - '@swc-node/register' - '@swc/core' - debug - '@nx/devkit@18.2.4(nx@18.2.4)': + '@nx/devkit@18.2.4(nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)))': dependencies: - '@nrwl/devkit': 18.2.4(nx@18.2.4) + '@nrwl/devkit': 18.2.4(nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15))) ejs: 3.1.9 enquirer: 2.3.6 ignore: 5.3.1 - nx: 18.2.4 + nx: 18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)) semver: 7.6.3 tmp: 0.2.3 tslib: 2.6.2 @@ -11598,6 +11786,54 @@ snapshots: hast-util-to-string: 2.0.0 unist-util-visit: 4.1.2 + '@swc/core-darwin-arm64@1.10.3': + optional: true + + '@swc/core-darwin-x64@1.10.3': + optional: true + + '@swc/core-linux-arm-gnueabihf@1.10.3': + optional: true + + '@swc/core-linux-arm64-gnu@1.10.3': + optional: true + + '@swc/core-linux-arm64-musl@1.10.3': + optional: true + + '@swc/core-linux-x64-gnu@1.10.3': + optional: true + + '@swc/core-linux-x64-musl@1.10.3': + optional: true + + '@swc/core-win32-arm64-msvc@1.10.3': + optional: true + + '@swc/core-win32-ia32-msvc@1.10.3': + optional: true + + '@swc/core-win32-x64-msvc@1.10.3': + optional: true + + '@swc/core@1.10.3(@swc/helpers@0.5.15)': + dependencies: + '@swc/counter': 0.1.3 + '@swc/types': 0.1.17 + optionalDependencies: + '@swc/core-darwin-arm64': 1.10.3 + '@swc/core-darwin-x64': 1.10.3 + '@swc/core-linux-arm-gnueabihf': 1.10.3 + '@swc/core-linux-arm64-gnu': 1.10.3 + '@swc/core-linux-arm64-musl': 1.10.3 + '@swc/core-linux-x64-gnu': 1.10.3 + '@swc/core-linux-x64-musl': 1.10.3 + '@swc/core-win32-arm64-msvc': 1.10.3 + '@swc/core-win32-ia32-msvc': 1.10.3 + '@swc/core-win32-x64-msvc': 1.10.3 + '@swc/helpers': 0.5.15 + optional: true + '@swc/counter@0.1.3': {} '@swc/helpers@0.5.13': @@ -11608,6 +11844,11 @@ snapshots: dependencies: tslib: 2.8.1 + '@swc/types@0.1.17': + dependencies: + '@swc/counter': 0.1.3 + optional: true + '@szmarczak/http-timer@4.0.6': dependencies: defer-to-connect: 2.0.1 @@ -11661,7 +11902,7 @@ snapshots: '@types/babel__core@7.20.5': dependencies: - '@babel/parser': 7.26.2 + '@babel/parser': 7.26.3 '@babel/types': 7.26.5 '@types/babel__generator': 7.6.8 '@types/babel__template': 7.4.4 @@ -11858,8 +12099,6 @@ snapshots: '@types/node': 20.17.10 '@types/send': 0.17.4 - '@types/stylis@4.2.5': {} - '@types/stylis@4.2.7': {} '@types/unist@2.0.10': {} @@ -11878,7 +12117,7 @@ snapshots: '@typescript-eslint/eslint-plugin@7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3)': dependencies: - '@eslint-community/regexpp': 4.10.0 + '@eslint-community/regexpp': 4.12.1 '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3) '@typescript-eslint/scope-manager': 7.6.0 '@typescript-eslint/type-utils': 7.6.0(eslint@8.57.0)(typescript@5.6.3) @@ -11896,10 +12135,30 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/experimental-utils@5.62.0(eslint@8.57.0)(typescript@5.6.3)': + '@typescript-eslint/eslint-plugin@7.6.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)': dependencies: - '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.6.3) - eslint: 8.57.0 + '@eslint-community/regexpp': 4.12.1 + '@typescript-eslint/parser': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3) + '@typescript-eslint/scope-manager': 7.6.0 + '@typescript-eslint/type-utils': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3) + '@typescript-eslint/utils': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3) + '@typescript-eslint/visitor-keys': 7.6.0 + debug: 4.3.7(supports-color@8.1.1) + eslint: 9.17.0(jiti@1.21.6) + graphemer: 1.4.0 + ignore: 5.3.1 + natural-compare: 1.4.0 + semver: 7.6.3 + ts-api-utils: 1.3.0(typescript@5.6.3) + optionalDependencies: + typescript: 5.6.3 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/experimental-utils@5.62.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)': + dependencies: + '@typescript-eslint/utils': 5.62.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3) + eslint: 9.17.0(jiti@1.21.6) transitivePeerDependencies: - supports-color - typescript @@ -11917,6 +12176,19 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)': + dependencies: + '@typescript-eslint/scope-manager': 7.6.0 + '@typescript-eslint/types': 7.6.0 + '@typescript-eslint/typescript-estree': 7.6.0(typescript@5.6.3) + '@typescript-eslint/visitor-keys': 7.6.0 + debug: 4.3.7(supports-color@8.1.1) + eslint: 9.17.0(jiti@1.21.6) + optionalDependencies: + typescript: 5.6.3 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/scope-manager@5.62.0': dependencies: '@typescript-eslint/types': 5.62.0 @@ -11939,6 +12211,18 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/type-utils@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)': + dependencies: + '@typescript-eslint/typescript-estree': 7.6.0(typescript@5.6.3) + '@typescript-eslint/utils': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3) + debug: 4.3.7(supports-color@8.1.1) + eslint: 9.17.0(jiti@1.21.6) + ts-api-utils: 1.3.0(typescript@5.6.3) + optionalDependencies: + typescript: 5.6.3 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/types@5.62.0': {} '@typescript-eslint/types@7.6.0': {} @@ -11972,15 +12256,15 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.6.3)': + '@typescript-eslint/utils@5.62.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)': dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@9.17.0(jiti@1.21.6)) '@types/json-schema': 7.0.15 '@types/semver': 7.5.8 '@typescript-eslint/scope-manager': 5.62.0 '@typescript-eslint/types': 5.62.0 '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.6.3) - eslint: 8.57.0 + eslint: 9.17.0(jiti@1.21.6) eslint-scope: 5.1.1 semver: 7.6.3 transitivePeerDependencies: @@ -12001,6 +12285,20 @@ snapshots: - supports-color - typescript + '@typescript-eslint/utils@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)': + dependencies: + '@eslint-community/eslint-utils': 4.4.0(eslint@9.17.0(jiti@1.21.6)) + '@types/json-schema': 7.0.15 + '@types/semver': 7.5.8 + '@typescript-eslint/scope-manager': 7.6.0 + '@typescript-eslint/types': 7.6.0 + '@typescript-eslint/typescript-estree': 7.6.0(typescript@5.6.3) + eslint: 9.17.0(jiti@1.21.6) + semver: 7.6.3 + transitivePeerDependencies: + - supports-color + - typescript + '@typescript-eslint/visitor-keys@5.62.0': dependencies: '@typescript-eslint/types': 5.62.0 @@ -12102,7 +12400,7 @@ snapshots: '@wyw-in-js/processor-utils@0.5.5': dependencies: - '@babel/generator': 7.26.2 + '@babel/generator': 7.26.3 '@wyw-in-js/shared': 0.5.5 transitivePeerDependencies: - supports-color @@ -12118,11 +12416,11 @@ snapshots: '@wyw-in-js/transform@0.5.5(typescript@5.6.3)': dependencies: '@babel/core': 7.26.0 - '@babel/generator': 7.26.2 + '@babel/generator': 7.26.3 '@babel/helper-module-imports': 7.25.9 '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.0) '@babel/template': 7.25.9 - '@babel/traverse': 7.25.9 + '@babel/traverse': 7.26.4 '@babel/types': 7.26.5 '@wyw-in-js/processor-utils': 0.5.5 '@wyw-in-js/shared': 0.5.5 @@ -12901,7 +13199,7 @@ snapshots: compressible@2.0.18: dependencies: - mime-db: 1.52.0 + mime-db: 1.53.0 compression@1.7.4: dependencies: @@ -13061,9 +13359,9 @@ snapshots: cross-env@7.0.3: dependencies: - cross-spawn: 7.0.3 + cross-spawn: 7.0.6 - cross-spawn@7.0.3: + cross-spawn@7.0.6: dependencies: path-key: 3.1.1 shebang-command: 2.0.0 @@ -13648,19 +13946,19 @@ snapshots: object.assign: 4.1.5 object.entries: 1.1.8 - eslint-config-next@15.0.2(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0)(typescript@5.6.3): + eslint-config-next@15.0.2(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3): dependencies: '@next/eslint-plugin-next': 15.0.2 '@rushstack/eslint-patch': 1.10.4 - '@typescript-eslint/eslint-plugin': 7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3) - '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3) - eslint: 8.57.0 + '@typescript-eslint/eslint-plugin': 7.6.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3) + '@typescript-eslint/parser': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3) + eslint: 9.17.0(jiti@1.21.6) eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0) - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) - eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0) - eslint-plugin-react: 7.37.2(eslint@8.57.0) - eslint-plugin-react-hooks: 5.0.0(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@9.17.0(jiti@1.21.6)) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6)) + eslint-plugin-jsx-a11y: 6.10.2(eslint@9.17.0(jiti@1.21.6)) + eslint-plugin-react: 7.37.2(eslint@9.17.0(jiti@1.21.6)) + eslint-plugin-react-hooks: 5.0.0(eslint@9.17.0(jiti@1.21.6)) optionalDependencies: typescript: 5.6.3 transitivePeerDependencies: @@ -13680,26 +13978,26 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0): + eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@9.17.0(jiti@1.21.6)): dependencies: '@nolyfill/is-core-module': 1.0.39 debug: 4.3.7(supports-color@8.1.1) enhanced-resolve: 5.16.0 - eslint: 8.57.0 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) + eslint: 9.17.0(jiti@1.21.6) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@9.17.0(jiti@1.21.6)))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6)) fast-glob: 3.3.2 get-tsconfig: 4.8.1 is-bun-module: 1.2.1 is-glob: 4.0.3 optionalDependencies: - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6)) transitivePeerDependencies: - '@typescript-eslint/parser' - eslint-import-resolver-node - eslint-import-resolver-webpack - supports-color - eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)): + eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)): dependencies: array.prototype.find: 2.2.3 debug: 3.2.7 @@ -13713,19 +14011,30 @@ snapshots: lodash: 4.17.21 resolve: 2.0.0-next.5 semver: 5.7.2 - webpack: 5.91.0(esbuild@0.24.0) + webpack: 5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0) transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0): + eslint-module-utils@2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0) - eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)) + eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)) + transitivePeerDependencies: + - supports-color + + eslint-module-utils@2.12.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@9.17.0(jiti@1.21.6)))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6)): + dependencies: + debug: 3.2.7 + optionalDependencies: + '@typescript-eslint/parser': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3) + eslint: 9.17.0(jiti@1.21.6) + eslint-import-resolver-node: 0.3.9 + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@9.17.0(jiti@1.21.6)) + eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)) transitivePeerDependencies: - supports-color @@ -13742,7 +14051,7 @@ snapshots: lodash.snakecase: 4.1.1 lodash.upperfirst: 4.3.1 - eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0): + eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.8 @@ -13753,7 +14062,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -13771,7 +14080,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0): + eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6)): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.8 @@ -13780,9 +14089,9 @@ snapshots: array.prototype.flatmap: 1.3.2 debug: 3.2.7 doctrine: 2.1.0 - eslint: 8.57.0 + eslint: 9.17.0(jiti@1.21.6) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@9.17.0(jiti@1.21.6)))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6)) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -13794,7 +14103,7 @@ snapshots: string.prototype.trimend: 1.0.8 tsconfig-paths: 3.15.0 optionalDependencies: - '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3) + '@typescript-eslint/parser': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3) transitivePeerDependencies: - eslint-import-resolver-typescript - eslint-import-resolver-webpack @@ -13819,6 +14128,25 @@ snapshots: safe-regex-test: 1.0.3 string.prototype.includes: 2.0.1 + eslint-plugin-jsx-a11y@6.10.2(eslint@9.17.0(jiti@1.21.6)): + dependencies: + aria-query: 5.3.2 + array-includes: 3.1.8 + array.prototype.flatmap: 1.3.2 + ast-types-flow: 0.0.8 + axe-core: 4.10.2 + axobject-query: 4.1.0 + damerau-levenshtein: 1.0.8 + emoji-regex: 9.2.2 + eslint: 9.17.0(jiti@1.21.6) + hasown: 2.0.2 + jsx-ast-utils: 3.3.5 + language-tags: 1.0.9 + minimatch: 3.1.2 + object.fromentries: 2.0.8 + safe-regex-test: 1.0.3 + string.prototype.includes: 2.0.1 + eslint-plugin-mocha@10.4.1(eslint@8.57.0): dependencies: eslint: 8.57.0 @@ -13830,9 +14158,9 @@ snapshots: dependencies: eslint: 8.57.0 - eslint-plugin-react-hooks@5.0.0(eslint@8.57.0): + eslint-plugin-react-hooks@5.0.0(eslint@9.17.0(jiti@1.21.6)): dependencies: - eslint: 8.57.0 + eslint: 9.17.0(jiti@1.21.6) eslint-plugin-react@7.37.2(eslint@8.57.0): dependencies: @@ -13856,6 +14184,28 @@ snapshots: string.prototype.matchall: 4.0.11 string.prototype.repeat: 1.0.0 + eslint-plugin-react@7.37.2(eslint@9.17.0(jiti@1.21.6)): + dependencies: + array-includes: 3.1.8 + array.prototype.findlast: 1.2.5 + array.prototype.flatmap: 1.3.2 + array.prototype.tosorted: 1.1.4 + doctrine: 2.1.0 + es-iterator-helpers: 1.1.0 + eslint: 9.17.0(jiti@1.21.6) + estraverse: 5.3.0 + hasown: 2.0.2 + jsx-ast-utils: 3.3.5 + minimatch: 3.1.2 + object.entries: 1.1.8 + object.fromentries: 2.0.8 + object.values: 1.2.0 + prop-types: 15.8.1 + resolve: 2.0.0-next.5 + semver: 6.3.1 + string.prototype.matchall: 4.0.11 + string.prototype.repeat: 1.0.0 + eslint-rule-composer@0.3.0: {} eslint-scope@5.1.1: @@ -13868,6 +14218,11 @@ snapshots: esrecurse: 4.3.0 estraverse: 5.3.0 + eslint-scope@8.2.0: + dependencies: + esrecurse: 4.3.0 + estraverse: 5.3.0 + eslint-utils@3.0.0(eslint@8.57.0): dependencies: eslint: 8.57.0 @@ -13877,10 +14232,12 @@ snapshots: eslint-visitor-keys@3.4.3: {} + eslint-visitor-keys@4.2.0: {} + eslint@8.57.0: dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) - '@eslint-community/regexpp': 4.10.0 + '@eslint-community/regexpp': 4.12.1 '@eslint/eslintrc': 2.1.4 '@eslint/js': 8.57.0 '@humanwhocodes/config-array': 0.11.14 @@ -13889,7 +14246,7 @@ snapshots: '@ungap/structured-clone': 1.2.0 ajv: 6.12.6 chalk: 4.1.2 - cross-spawn: 7.0.3 + cross-spawn: 7.0.6 debug: 4.3.7(supports-color@8.1.1) doctrine: 3.0.0 escape-string-regexp: 4.0.0 @@ -13920,6 +14277,53 @@ snapshots: transitivePeerDependencies: - supports-color + eslint@9.17.0(jiti@1.21.6): + dependencies: + '@eslint-community/eslint-utils': 4.4.0(eslint@9.17.0(jiti@1.21.6)) + '@eslint-community/regexpp': 4.12.1 + '@eslint/config-array': 0.19.1 + '@eslint/core': 0.9.1 + '@eslint/eslintrc': 3.2.0 + '@eslint/js': 9.17.0 + '@eslint/plugin-kit': 0.2.4 + '@humanfs/node': 0.16.6 + '@humanwhocodes/module-importer': 1.0.1 + '@humanwhocodes/retry': 0.4.1 + '@types/estree': 1.0.6 + '@types/json-schema': 7.0.15 + ajv: 6.12.6 + chalk: 4.1.2 + cross-spawn: 7.0.6 + debug: 4.3.7(supports-color@8.1.1) + escape-string-regexp: 4.0.0 + eslint-scope: 8.2.0 + eslint-visitor-keys: 4.2.0 + espree: 10.3.0 + esquery: 1.5.0 + esutils: 2.0.3 + fast-deep-equal: 3.1.3 + file-entry-cache: 8.0.0 + find-up: 5.0.0 + glob-parent: 6.0.2 + ignore: 5.3.1 + imurmurhash: 0.1.4 + is-glob: 4.0.3 + json-stable-stringify-without-jsonify: 1.0.1 + lodash.merge: 4.6.2 + minimatch: 3.1.2 + natural-compare: 1.4.0 + optionator: 0.9.3 + optionalDependencies: + jiti: 1.21.6 + transitivePeerDependencies: + - supports-color + + espree@10.3.0: + dependencies: + acorn: 8.14.0 + acorn-jsx: 5.3.2(acorn@8.14.0) + eslint-visitor-keys: 4.2.0 + espree@9.6.1: dependencies: acorn: 8.14.0 @@ -14007,7 +14411,7 @@ snapshots: execa@5.0.0: dependencies: - cross-spawn: 7.0.3 + cross-spawn: 7.0.6 get-stream: 6.0.1 human-signals: 2.1.0 is-stream: 2.0.1 @@ -14019,7 +14423,7 @@ snapshots: execa@5.1.1: dependencies: - cross-spawn: 7.0.3 + cross-spawn: 7.0.6 get-stream: 6.0.1 human-signals: 2.1.0 is-stream: 2.0.1 @@ -14032,7 +14436,7 @@ snapshots: execa@9.5.1: dependencies: '@sindresorhus/merge-streams': 4.0.0 - cross-spawn: 7.0.3 + cross-spawn: 7.0.6 figures: 6.1.0 get-stream: 9.0.1 human-signals: 8.0.0 @@ -14241,12 +14645,12 @@ snapshots: foreground-child@2.0.0: dependencies: - cross-spawn: 7.0.3 + cross-spawn: 7.0.6 signal-exit: 3.0.7 foreground-child@3.1.1: dependencies: - cross-spawn: 7.0.3 + cross-spawn: 7.0.6 signal-exit: 4.1.0 form-data@4.0.0: @@ -14490,6 +14894,8 @@ snapshots: dependencies: type-fest: 0.20.2 + globals@14.0.0: {} + globalthis@1.0.4: dependencies: define-properties: 1.2.1 @@ -15170,7 +15576,7 @@ snapshots: istanbul-lib-processinfo@2.0.3: dependencies: archy: 1.0.0 - cross-spawn: 7.0.3 + cross-spawn: 7.0.6 istanbul-lib-coverage: 3.2.2 p-map: 3.0.0 rimraf: 3.0.2 @@ -15382,11 +15788,11 @@ snapshots: dependencies: language-subtag-registry: 0.3.22 - lerna@8.1.2(encoding@0.1.13): + lerna@8.1.2(@swc/core@1.10.3(@swc/helpers@0.5.15))(encoding@0.1.13): dependencies: - '@lerna/create': 8.1.2(encoding@0.1.13)(typescript@5.6.3) + '@lerna/create': 8.1.2(@swc/core@1.10.3(@swc/helpers@0.5.15))(encoding@0.1.13)(typescript@5.6.3) '@npmcli/run-script': 7.0.2 - '@nx/devkit': 18.2.4(nx@18.2.4) + '@nx/devkit': 18.2.4(nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15))) '@octokit/plugin-enterprise-rest': 6.0.1 '@octokit/rest': 19.0.11(encoding@0.1.13) byte-size: 8.1.1 @@ -15429,7 +15835,7 @@ snapshots: npm-packlist: 5.1.1 npm-registry-fetch: 14.0.5 npmlog: 6.0.2 - nx: 18.2.4 + nx: 18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)) p-map: 4.0.0 p-map-series: 2.1.0 p-pipe: 3.1.0 @@ -16683,9 +17089,9 @@ snapshots: nwsapi@2.2.7: {} - nx@18.2.4: + nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)): dependencies: - '@nrwl/tao': 18.2.4 + '@nrwl/tao': 18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)) '@yarnpkg/lockfile': 1.1.0 '@yarnpkg/parsers': 3.0.0-rc.46 '@zkochan/js-yaml': 0.0.6 @@ -16730,6 +17136,7 @@ snapshots: '@nx/nx-linux-x64-musl': 18.2.4 '@nx/nx-win32-arm64-msvc': 18.2.4 '@nx/nx-win32-x64-msvc': 18.2.4 + '@swc/core': 1.10.3(@swc/helpers@0.5.15) transitivePeerDependencies: - debug @@ -17398,7 +17805,7 @@ snapshots: react-docgen@5.4.3: dependencies: '@babel/core': 7.26.0 - '@babel/generator': 7.26.2 + '@babel/generator': 7.26.3 '@babel/runtime': 7.26.0 ast-types: 0.14.2 commander: 2.20.3 @@ -18474,15 +18881,16 @@ snapshots: temp-dir@1.0.0: {} - terser-webpack-plugin@5.3.10(esbuild@0.24.0)(webpack@5.91.0(esbuild@0.24.0)): + terser-webpack-plugin@5.3.10(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.2 terser: 5.30.3 - webpack: 5.91.0(esbuild@0.24.0) + webpack: 5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0) optionalDependencies: + '@swc/core': 1.10.3(@swc/helpers@0.5.15) esbuild: 0.24.0 terser@5.30.3: @@ -18600,7 +19008,7 @@ snapshots: tsscmp@1.0.6: {} - tsup@8.3.5(jiti@1.21.6)(postcss@8.4.47)(tsx@4.19.2)(typescript@5.6.3)(yaml@2.6.0): + tsup@8.3.5(@swc/core@1.10.3(@swc/helpers@0.5.15))(jiti@1.21.6)(postcss@8.4.47)(tsx@4.19.2)(typescript@5.6.3)(yaml@2.6.0): dependencies: bundle-require: 5.0.0(esbuild@0.24.0) cac: 6.7.14 @@ -18619,6 +19027,7 @@ snapshots: tinyglobby: 0.2.10 tree-kill: 1.2.2 optionalDependencies: + '@swc/core': 1.10.3(@swc/helpers@0.5.15) postcss: 8.4.47 typescript: 5.6.3 transitivePeerDependencies: @@ -19025,7 +19434,7 @@ snapshots: webpack-virtual-modules@0.6.2: {} - webpack@5.91.0(esbuild@0.24.0): + webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0): dependencies: '@types/eslint-scope': 3.7.7 '@types/estree': 1.0.6 @@ -19048,7 +19457,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(esbuild@0.24.0)(webpack@5.91.0(esbuild@0.24.0)) + terser-webpack-plugin: 5.3.10(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)) watchpack: 2.4.1 webpack-sources: 3.2.3 transitivePeerDependencies: diff --git a/tsconfig.json b/tsconfig.json index 5c4728e4..37b3cc7a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,7 +4,7 @@ // aligning with Node18 recommendation: https://www.npmjs.com/package/@tsconfig/node18 "target": "es2022", "lib": ["es2020", "dom", "ES2021.String"], - "jsx": "preserve", + "jsx": "react-jsx", "moduleResolution": "bundler", "forceConsistentCasingInFileNames": true, "strict": true, @@ -31,7 +31,11 @@ "@pigment-css/theme": ["./packages/pigment-css-theme/src"], "@pigment-css/theme/*": ["./packages/pigment-css-theme/src/*"], "@pigment-css/utils": ["./packages/pigment-css-utils/src"], - "@pigment-css/utils/*": ["./packages/pigment-css-utils/src/*"] + "@pigment-css/utils/*": ["./packages/pigment-css-utils/src/*"], + "@pigment-css/core": ["./packages/pigment-css-core/src"], + "@pigment-css/core/*": ["./packages/pigment-css-core/src/*"], + "@pigment-css/react-new": ["./packages/pigment-css-react-new/src"], + "@pigment-css/react-new/*": ["./packages/pigment-css-react-new/src/*"] }, // Otherwise we get react-native typings which conflict with dom.lib. "types": ["node", "react", "mocha"] From 8eb34db0f221fe3adbdd42500b072bd02ed6ef5f Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Mon, 3 Feb 2025 10:36:46 +0530 Subject: [PATCH 26/42] Implement styled runtime --- packages/pigment-css-react-new/package.json | 1 + .../src/runtime/styled.js | 13 -- .../src/runtime/styled.tsx | 119 ++++++++++++++++++ .../pigment-css-react-new/src/styled.d.ts | 76 ++++++++++- .../fixtures/dummy-component.fixture.js | 3 + .../tests/styled/fixtures/styled.input.js | 5 +- .../tests/styled/fixtures/styled.output.css | 2 +- .../tests/styled/fixtures/styled.output.js | 4 +- .../tests/styled/styled.spec.tsx | 72 ++++++++--- pnpm-lock.yaml | 3 + 10 files changed, 256 insertions(+), 42 deletions(-) delete mode 100644 packages/pigment-css-react-new/src/runtime/styled.js create mode 100644 packages/pigment-css-react-new/src/runtime/styled.tsx create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/dummy-component.fixture.js diff --git a/packages/pigment-css-react-new/package.json b/packages/pigment-css-react-new/package.json index 5e4cc0f3..5d18d54a 100644 --- a/packages/pigment-css-react-new/package.json +++ b/packages/pigment-css-react-new/package.json @@ -33,6 +33,7 @@ "dependencies": { "@babel/plugin-syntax-jsx": "^7.25.9", "@babel/types": "^7.25.8", + "@emotion/is-prop-valid": "^1.3.1", "@pigment-css/core": "workspace:*", "@pigment-css/utils": "workspace:*", "@pigment-css/theme": "workspace:^", diff --git a/packages/pigment-css-react-new/src/runtime/styled.js b/packages/pigment-css-react-new/src/runtime/styled.js deleted file mode 100644 index 27a0892d..00000000 --- a/packages/pigment-css-react-new/src/runtime/styled.js +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; - -export function styled(component) { - function classWrapper({ displayName }) { - // eslint-disable-next-line react/prop-types - const WrappedComponent = React.forwardRef(function WrappedComponent({ as: asProp, ...rest }) { - const FinalComponent = asProp ?? component; - return ; - }); - WrappedComponent.displayName = `Pigment(${displayName ?? 'Styled'})`; - } - return classWrapper; -} diff --git a/packages/pigment-css-react-new/src/runtime/styled.tsx b/packages/pigment-css-react-new/src/runtime/styled.tsx new file mode 100644 index 00000000..19c9f127 --- /dev/null +++ b/packages/pigment-css-react-new/src/runtime/styled.tsx @@ -0,0 +1,119 @@ +import { Primitive } from '@pigment-css/core'; +import { ClassInfo, css } from '@pigment-css/core/runtime'; +import * as React from 'react'; +import isPropValid from '@emotion/is-prop-valid'; + +type StyledInfo = ClassInfo & { + displayName?: string; + vars?: Record Primitive, boolean]>; +}; + +function defaultShouldForwardProp(propName: string): boolean { + // if first character is $ + if (propName.charCodeAt(0) === 36) { + return false; + } + if (propName === 'as') { + return false; + } + return true; +} + +function shouldForwardProp(propName: string) { + if (defaultShouldForwardProp(propName)) { + return isPropValid(propName); + } + return false; +} + +function getStyle(props: ClassInfo['defaultVariants'], vars: StyledInfo['vars']) { + const newStyle: Record = {}; + if (!props || !vars) { + return newStyle; + } + // eslint-disable-next-line no-restricted-syntax + for (const key in vars) { + if (!vars.hasOwnProperty(key)) { + continue; + } + const [variableFunction, isUnitLess] = vars[key]; + const value = variableFunction(props); + if (typeof value === 'undefined') { + continue; + } + if (typeof value === 'string' || isUnitLess) { + newStyle[key] = value; + } else { + newStyle[key] = `${value}px`; + } + } + return newStyle; +} + +export function styled(tag: T) { + if (process.env.NODE_ENV === 'development') { + if (tag === undefined) { + throw new Error( + 'You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.', + ); + } + } + const shouldForwardPropLocal = + typeof tag === 'string' ? shouldForwardProp : defaultShouldForwardProp; + + function scopedStyled({ + classes, + variants = [], + defaultVariants = {}, + vars, + displayName = '', + }: StyledInfo) { + const cssFn = css({ + classes, + variants, + defaultVariants, + }); + const baseClasses = cssFn(); + + const StyledComponent = React.forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef & { + as?: React.ElementType; + className?: string; + style?: React.CSSProperties; + } + >(function render(props, ref) { + const newProps: Record = {}; + + // eslint-disable-next-line no-restricted-syntax + for (const key in props) { + // if first char is $ + if (shouldForwardPropLocal(key)) { + newProps[key] = props[key]; + } + } + newProps.className = variants.length === 0 ? baseClasses : baseClasses; + newProps.style = { + ...props.style, + ...getStyle(props, vars), + }; + + const Component = props.as ?? tag; + return ; + }); + + if (displayName) { + StyledComponent.displayName = displayName; + } else { + StyledComponent.displayName = 'Styled(Pigment)'; + } + + // @ts-expect-error No TS check required + // eslint-disable-next-line no-underscore-dangle + StyledComponent.__styled_by_pigment_css = true; + + return StyledComponent; + } + + return scopedStyled; +} diff --git a/packages/pigment-css-react-new/src/styled.d.ts b/packages/pigment-css-react-new/src/styled.d.ts index fa6a253e..8fa73427 100644 --- a/packages/pigment-css-react-new/src/styled.d.ts +++ b/packages/pigment-css-react-new/src/styled.d.ts @@ -1 +1,75 @@ -export declare function styled(): void; +import type * as React from 'react'; +import { Variants, BaseInterface, CssArg, VariantNames, Primitive } from '@pigment-css/core'; + +export type NoInfer = [T][T extends any ? 0 : never]; +type FastOmit = { + [K in keyof T as K extends U ? never : K]: T[K]; +}; + +export type Substitute = FastOmit & B; + +interface RequiredProps { + className?: string; + style?: React.CSSProperties; +} + +export type PolymorphicComponentProps< + Props extends {}, + AsTarget extends React.ElementType | undefined, + AsTargetProps extends object = AsTarget extends React.ElementType + ? React.ComponentPropsWithRef + : {}, +> = NoInfer, 'as'>> & { + as?: AsTarget; + children?: React.ReactNode; +}; + +export interface PolymorphicComponent + extends React.ForwardRefExoticComponent { + ( + props: PolymorphicComponentProps, + ): React.JSX.Element; +} + +type StyledArgument = CssArg; + +interface StyledComponent extends PolymorphicComponent { + defaultProps?: Partial | undefined; + toString: () => string; +} + +interface StyledOptions extends BaseInterface {} + +export interface CreateStyledComponent< + Component extends React.ElementType, + OuterProps extends object, +> { + ( + arg: TemplateStringsArray, + ...templateArgs: (Primitive | ((props: Props) => Primitive))[] + ): StyledComponent> & (Component extends string ? {} : Component); + + ( + ...styles: Array> + ): StyledComponent : V>> & + (Component extends string ? {} : Component); +} + +export interface CreateStyled { + < + TagOrComponent extends React.ElementType, + FinalProps extends {} = React.ComponentPropsWithRef, + >( + tag: TagOrComponent, + options?: StyledOptions, + ): CreateStyledComponent; +} + +export type CreateStyledIndex = { + [Key in keyof React.JSX.IntrinsicElements]: CreateStyledComponent< + Key, + React.JSX.IntrinsicElements[Key] + >; +}; + +export declare const styled: CreateStyled & CreateStyledIndex; diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/dummy-component.fixture.js b/packages/pigment-css-react-new/tests/styled/fixtures/dummy-component.fixture.js new file mode 100644 index 00000000..ade8d673 --- /dev/null +++ b/packages/pigment-css-react-new/tests/styled/fixtures/dummy-component.fixture.js @@ -0,0 +1,3 @@ +export function TestComponent() { + return

Hello

; +} diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js index e4689c85..58d8415c 100644 --- a/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js +++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js @@ -1,4 +1,5 @@ import { styled, keyframes, css } from '@pigment-css/react-new'; +import { TestComponent } from './dummy-component.fixture'; const cls1 = css({ color: 'red', @@ -13,10 +14,6 @@ export const rotateKeyframe = keyframes({ className: 'rotate' })({ }, }); -function TestComponent() { - return

Hello

; -} - const StyledTest = styled(TestComponent, { className: 'StyledTest', })({ diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css index 7b82483a..b7a759ad 100644 --- a/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css +++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css @@ -10,4 +10,4 @@ @layer pigment.base{.c13e7k7c{---id:3;color:#ff5252;animation:rotate 2s ease-out 0s infinite;}} @layer pigment.base{.sqzgjb7{---id:4;display:block;opacity:0.38;}.sqzgjb7 .sqpzee{display:none;}} @layer pigment.base{.sxcjuwu{---id:5;display:block;opacity:0.38;}.sxcjuwu .sqpzee{display:none;}} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC5pbnB1dC5qcyJdLCJuYW1lcyI6WyIuYzFkZ3NnbmgiLCIucm90YXRlIiwiLlN0eWxlZFRlc3QiLCIuU3R5bGVkVGVzdC1zaXplLXNtYWxsIiwiLlN0eWxlZFRlc3Qtc2l6ZS1tZWRpdW0iLCIuU3R5bGVkVGVzdC1zaXplLWxhcmdlIiwiLnM0ZWtkZGEiLCIuc3FwemVlIiwiLnMxbzQ4bTE3IiwiLmMxM2U3azdjIiwiLnNxemdqYjciLCIuc3hjanV3dSJdLCJtYXBwaW5ncyI6IkFBRWlCQTtBQUlnREM7QUFlOURDO0FBQUFDO0FBQUFDO0FBQUFDO0FBa0NBQztBQVN1QkM7QUFZTUM7QUFRSEM7QUFNVEM7QUFTQUMiLCJmaWxlIjoiL3BhY2thZ2VzL3BpZ21lbnQtY3NzLXJlYWN0LW5ldy90ZXN0cy9zdHlsZWQvZml4dHVyZXMvc3R5bGVkLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHN0eWxlZCwga2V5ZnJhbWVzLCBjc3MgfSBmcm9tICdAcGlnbWVudC1jc3MvcmVhY3QtbmV3JztcblxuY29uc3QgY2xzMSA9IGNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbn0pO1xuXG5leHBvcnQgY29uc3Qgcm90YXRlS2V5ZnJhbWUgPSBrZXlmcmFtZXMoeyBjbGFzc05hbWU6ICdyb3RhdGUnIH0pKHtcbiAgZnJvbToge1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgzNjBkZWcpJyxcbiAgfSxcbiAgdG86IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMGRlZyknLFxuICB9LFxufSk7XG5cbmZ1bmN0aW9uIFRlc3RDb21wb25lbnQoKSB7XG4gIHJldHVybiA8aDE+SGVsbG88L2gxPjtcbn1cblxuY29uc3QgU3R5bGVkVGVzdCA9IHN0eWxlZChUZXN0Q29tcG9uZW50LCB7XG4gIGNsYXNzTmFtZTogJ1N0eWxlZFRlc3QnLFxufSkoe1xuICAkJGlkOiAwLFxuICBkaXNwbGF5OiAnYmxvY2snLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgYm9yZGVyUmFkaXVzOiAnaW5oZXJpdCcsXG4gIFtgLiR7Y2xzMX1gXToge1xuICAgIGNvbG9yOiAnYmx1ZScsXG4gIH0sXG4gIGNvbG9yKHByb3BzKSB7XG4gICAgcmV0dXJuIHByb3BzLnNpemUgPT09ICdzbWFsbCcgPyAncmVkJyA6ICdibHVlJztcbiAgfSxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGlkOiAnMDEnLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiAncmVkJyxcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRpZDogJzAyJyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGlkOiAnMDMnLFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbDMgPSBzdHlsZWQoJ3NwYW4nLCB7XG4gIG5hbWU6ICdNdWlTbGlkZXInLFxuICBzbG90OiAnUmFpbCcsXG59KSh7XG4gICQkaWQ6IDEsXG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICBib3JkZXJSYWRpdXM6ICdpbmhlcml0JyxcbiAgYmFja2dyb3VuZENvbG9yOiAnY3VycmVudENvbG9yJyxcbiAgb3BhY2l0eTogMC4zOCxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbCA9IHN0eWxlZCgnc3BhbicsIHtcbiAgbmFtZTogJ011aVNsaWRlcicsXG4gIHNsb3Q6ICdSYWlsJyxcbn0pYFxuICAtLS1pZDogMjtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYm9yZGVyLXJhZGl1czogaW5oZXJpdDtcbiAgYmFja2dyb3VuZC1jb2xvcjogY3VycmVudENvbG9yO1xuICBvcGFjaXR5OiAwLjM4O1xuYDtcblxuY29uc3QgU2xpZGVyUmFpbDUgPSBzdHlsZWQuc3Bhbih7XG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIG9wYWNpdHk6IDAuMzgsXG4gIFtTbGlkZXJSYWlsXToge1xuICAgIGRpc3BsYXk6ICdub25lJyxcbiAgfSxcbn0pO1xuXG5jb25zdCBDb21wb25lbnQgPSBzdHlsZWQuZGl2KHtcbiAgJCRpZDogMyxcbiAgY29sb3I6ICcjZmY1MjUyJyxcbiAgYW5pbWF0aW9uOiBgJHtyb3RhdGVLZXlmcmFtZX0gMnMgZWFzZS1vdXQgMHMgaW5maW5pdGVgLFxufSk7XG5cbmNvbnN0IFNsaWRlclJhaWwyID0gc3R5bGVkKCdzcGFuJylgXG4gIC0tLWlkOiA0O1xuICBkaXNwbGF5OiBibG9jaztcbiAgb3BhY2l0eTogMC4zODtcbiAgJHtTbGlkZXJSYWlsfSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgU2xpZGVyUmFpbDQgPSBzdHlsZWQuc3BhbmBcbiAgLS0taWQ6IDU7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBvcGFjaXR5OiAwLjM4O1xuICAke1NsaWRlclJhaWx9IHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG5gO1xuXG5leHBvcnQgZnVuY3Rpb24gQXBwKCkge1xuICByZXR1cm4gKFxuICAgIDxDb21wb25lbnQ+XG4gICAgICA8U2xpZGVyUmFpbCAvPlxuICAgICAgPFNsaWRlclJhaWwyIC8+XG4gICAgPC9Db21wb25lbnQ+XG4gICk7XG59XG4iXX0=*/ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC5pbnB1dC5qcyJdLCJuYW1lcyI6WyIuYzFkZ3NnbmgiLCIucm90YXRlIiwiLlN0eWxlZFRlc3QiLCIuU3R5bGVkVGVzdC1zaXplLXNtYWxsIiwiLlN0eWxlZFRlc3Qtc2l6ZS1tZWRpdW0iLCIuU3R5bGVkVGVzdC1zaXplLWxhcmdlIiwiLnM0ZWtkZGEiLCIuc3FwemVlIiwiLnMxbzQ4bTE3IiwiLmMxM2U3azdjIiwiLnNxemdqYjciLCIuc3hjanV3dSJdLCJtYXBwaW5ncyI6IkFBR2lCQTtBQUlnREM7QUFXOURDO0FBQUFDO0FBQUFDO0FBQUFDO0FBa0NBQztBQVN1QkM7QUFZTUM7QUFRSEM7QUFNVEM7QUFTQUMiLCJmaWxlIjoiL3BhY2thZ2VzL3BpZ21lbnQtY3NzLXJlYWN0LW5ldy90ZXN0cy9zdHlsZWQvZml4dHVyZXMvc3R5bGVkLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHN0eWxlZCwga2V5ZnJhbWVzLCBjc3MgfSBmcm9tICdAcGlnbWVudC1jc3MvcmVhY3QtbmV3JztcbmltcG9ydCB7IFRlc3RDb21wb25lbnQgfSBmcm9tICcuL2R1bW15LWNvbXBvbmVudC5maXh0dXJlJztcblxuY29uc3QgY2xzMSA9IGNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbn0pO1xuXG5leHBvcnQgY29uc3Qgcm90YXRlS2V5ZnJhbWUgPSBrZXlmcmFtZXMoeyBjbGFzc05hbWU6ICdyb3RhdGUnIH0pKHtcbiAgZnJvbToge1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgzNjBkZWcpJyxcbiAgfSxcbiAgdG86IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMGRlZyknLFxuICB9LFxufSk7XG5cbmNvbnN0IFN0eWxlZFRlc3QgPSBzdHlsZWQoVGVzdENvbXBvbmVudCwge1xuICBjbGFzc05hbWU6ICdTdHlsZWRUZXN0Jyxcbn0pKHtcbiAgJCRpZDogMCxcbiAgZGlzcGxheTogJ2Jsb2NrJyxcbiAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICBbYC4ke2NsczF9YF06IHtcbiAgICBjb2xvcjogJ2JsdWUnLFxuICB9LFxuICBjb2xvcihwcm9wcykge1xuICAgIHJldHVybiBwcm9wcy5zaXplID09PSAnc21hbGwnID8gJ3JlZCcgOiAnYmx1ZSc7XG4gIH0sXG4gIHZhcmlhbnRzOiB7XG4gICAgc2l6ZToge1xuICAgICAgc21hbGw6IHtcbiAgICAgICAgJCRpZDogJzAxJyxcbiAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICBib3JkZXJDb2xvcjogJ3JlZCcsXG4gICAgICB9LFxuICAgICAgbWVkaXVtOiB7XG4gICAgICAgICQkaWQ6ICcwMicsXG4gICAgICAgIHBhZGRpbmc6IDUsXG4gICAgICB9LFxuICAgICAgbGFyZ2U6IHtcbiAgICAgICAgJCRpZDogJzAzJyxcbiAgICAgICAgcGFkZGluZzogMTAsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFNsaWRlclJhaWwzID0gc3R5bGVkKCdzcGFuJywge1xuICBuYW1lOiAnTXVpU2xpZGVyJyxcbiAgc2xvdDogJ1JhaWwnLFxufSkoe1xuICAkJGlkOiAxLFxuICBkaXNwbGF5OiAnYmxvY2snLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgYm9yZGVyUmFkaXVzOiAnaW5oZXJpdCcsXG4gIGJhY2tncm91bmRDb2xvcjogJ2N1cnJlbnRDb2xvcicsXG4gIG9wYWNpdHk6IDAuMzgsXG59KTtcblxuZXhwb3J0IGNvbnN0IFNsaWRlclJhaWwgPSBzdHlsZWQoJ3NwYW4nLCB7XG4gIG5hbWU6ICdNdWlTbGlkZXInLFxuICBzbG90OiAnUmFpbCcsXG59KWBcbiAgLS0taWQ6IDI7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGJvcmRlci1yYWRpdXM6IGluaGVyaXQ7XG4gIGJhY2tncm91bmQtY29sb3I6IGN1cnJlbnRDb2xvcjtcbiAgb3BhY2l0eTogMC4zODtcbmA7XG5cbmNvbnN0IFNsaWRlclJhaWw1ID0gc3R5bGVkLnNwYW4oe1xuICBkaXNwbGF5OiAnYmxvY2snLFxuICBvcGFjaXR5OiAwLjM4LFxuICBbU2xpZGVyUmFpbF06IHtcbiAgICBkaXNwbGF5OiAnbm9uZScsXG4gIH0sXG59KTtcblxuY29uc3QgQ29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gICQkaWQ6IDMsXG4gIGNvbG9yOiAnI2ZmNTI1MicsXG4gIGFuaW1hdGlvbjogYCR7cm90YXRlS2V5ZnJhbWV9IDJzIGVhc2Utb3V0IDBzIGluZmluaXRlYCxcbn0pO1xuXG5jb25zdCBTbGlkZXJSYWlsMiA9IHN0eWxlZCgnc3BhbicpYFxuICAtLS1pZDogNDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIG9wYWNpdHk6IDAuMzg7XG4gICR7U2xpZGVyUmFpbH0ge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbmA7XG5cbmNvbnN0IFNsaWRlclJhaWw0ID0gc3R5bGVkLnNwYW5gXG4gIC0tLWlkOiA1O1xuICBkaXNwbGF5OiBibG9jaztcbiAgb3BhY2l0eTogMC4zODtcbiAgJHtTbGlkZXJSYWlsfSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuZXhwb3J0IGZ1bmN0aW9uIEFwcCgpIHtcbiAgcmV0dXJuIChcbiAgICA8Q29tcG9uZW50PlxuICAgICAgPFNsaWRlclJhaWwgLz5cbiAgICAgIDxTbGlkZXJSYWlsMiAvPlxuICAgIDwvQ29tcG9uZW50PlxuICApO1xufVxuIl19*/ \ No newline at end of file diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js index ae6085e3..4e921e30 100644 --- a/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js +++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js @@ -8,10 +8,8 @@ import { styled as _styled6, styled as _styled7, } from '@pigment-css/react-new/runtime'; +import { TestComponent } from './dummy-component.fixture'; export const rotateKeyframe = 'rotate'; -function TestComponent() { - return

Hello

; -} const _exp4 = /*#__PURE__*/ () => TestComponent; const StyledTest = /*#__PURE__*/ _styled(_exp4())({ classes: 'StyledTest', diff --git a/packages/pigment-css-react-new/tests/styled/styled.spec.tsx b/packages/pigment-css-react-new/tests/styled/styled.spec.tsx index 8e2858f3..86f4acb8 100644 --- a/packages/pigment-css-react-new/tests/styled/styled.spec.tsx +++ b/packages/pigment-css-react-new/tests/styled/styled.spec.tsx @@ -1,20 +1,52 @@ -// import { styled } from '../../src/styled'; - -// const Button = styled('button')({ -// color: 'red', -// variants: { -// hue: { -// primary: { -// color: 'red', -// backgroundColor: 'blue', -// }, -// }, -// }, -// }); - -// // @ts-expect-error `download` does not exist on button -// ; - -// ; +import { t } from '@pigment-css/theme'; +import { styled } from '../../src/styled'; + +declare module '@pigment-css/theme' { + interface Theme { + palette: { + main: string; + }; + } +} + +const Button = styled('button')({ + color: 'red', + variants: { + btnSize: { + small: { + padding: 0, + }, + medium: { + padding: '1rem', + }, + large: { + padding: '2rem', + }, + }, + }, +}); + +const Div1 = styled.div<{ $size?: 'small' | 'medium' | 'large' }>` + color: red; + padding: ${({ $size }) => ($size === 'small' ? 2 : 4)}; +`; + + undefined}> +