diff --git a/.eslintignore b/.eslintignore index b41682c5..0909b386 100644 --- a/.eslintignore +++ b/.eslintignore @@ -18,8 +18,6 @@ /test/bundling/fixtures/gatsby/.cache /test/bundling/fixtures/gatsby/public /test/bundling/fixtures/gatsby/public -/test/karma.conf.js -/test/karma.conf.profile.js /test/regressions/**/* /tmp .next diff --git a/.eslintrc.js b/.eslintrc.js index fe499326..69afd77d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -140,7 +140,7 @@ module.exports = { 'react/forbid-prop-types': 'off', // Too strict, no time for that 'react/jsx-curly-brace-presence': 'off', // broken // airbnb is using .jsx - 'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }], + 'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.tsx'] }], // Prefer over <>. 'react/jsx-fragments': ['error', 'element'], // Enforces premature optimization @@ -209,6 +209,7 @@ module.exports = { '*.test.js', '*.test.ts', '*.test.tsx', + '*.test.jsx', ], extends: ['plugin:mocha/recommended'], rules: { diff --git a/.gitignore b/.gitignore index 5acd48e2..4064e6e6 100644 --- a/.gitignore +++ b/.gitignore @@ -12,7 +12,8 @@ /.eslintcache /.nyc_output /benchmark/**/dist -/coverage +/coverage/ +/html/ /docs/.env.local /docs/export /docs/pages/playground/ diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json index d5113137..862f1d76 100644 --- a/apps/pigment-css-next-app/package.json +++ b/apps/pigment-css-next-app/package.json @@ -29,14 +29,5 @@ "@types/react": "^18.3.1", "@types/react-dom": "^18.3.0", "eslint": "^8.57.0" - }, - "nx": { - "targets": { - "preview": { - "dependsOn": [ - "^build" - ] - } - } } } diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json index 9dfa809b..e03c5fb9 100644 --- a/apps/pigment-css-vite-app/package.json +++ b/apps/pigment-css-vite-app/package.json @@ -35,19 +35,5 @@ "postcss-combine-media-query": "^1.0.1", "vite": "5.2.11", "vite-plugin-pages": "^0.32.1" - }, - "nx": { - "targets": { - "preview": { - "dependsOn": [ - "^build" - ] - }, - "dev": { - "dependsOn": [ - "^build" - ] - } - } } } diff --git a/nx.json b/nx.json index 4734b4e6..a5543891 100644 --- a/nx.json +++ b/nx.json @@ -3,7 +3,6 @@ "extends": "nx/presets/npm.json", "targetDefaults": { "copy-license": { - "cache": true, "outputs": ["{projectRoot}/LICENSE"] }, "build": { @@ -13,6 +12,18 @@ }, "preview": { "dependsOn": ["^build"] + }, + "test": { + "cache": false, + "dependsOn": ["build"] + }, + "test:update": { + "cache": false, + "dependsOn": ["build"] + }, + "test:ci": { + "cache": false, + "dependsOn": ["build"] } } } diff --git a/package.json b/package.json index 700d5ec8..5180d343 100644 --- a/package.json +++ b/package.json @@ -29,15 +29,10 @@ "test": "node scripts/test.mjs", "tc": "node test/cli.js", "test:extended": "pnpm eslint && pnpm typescript && pnpm test:coverage", - "test:coverage": "pnpm build && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", - "test:coverage:ci": "pnpm build && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", - "test:coverage:html": "pnpm build && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=html mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", - "test:regressions": "cross-env NODE_ENV=production pnpm test:regressions:build && concurrently --success first --kill-others \"pnpm test:regressions:run\" \"pnpm test:regressions:server\"", - "test:regressions:build": "webpack --config test/regressions/webpack.config.js", - "test:regressions:dev": "concurrently \"pnpm test:regressions:build --watch\" \"pnpm test:regressions:server\"", - "test:regressions:run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'", - "test:regressions:server": "serve test/regressions -p 5001", - "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", + "test:coverage": "nx run-many -t test:ci", + "test:coverage:ci": "NODE_ENV=test nx run-many -t test:ci", + "test:coverage:html": "NODE_ENV=test nx run-many -t test:ci:html", + "test:unit": "nx run-many -t test", "test:argos": "node ./scripts/pushArgos.mjs", "typescript": "tsc -b tsconfig.typecheck.json", "typescript:ci": "lerna run --concurrency 3 --no-bail --no-sort typescript", @@ -65,14 +60,17 @@ "@next/eslint-plugin-next": "^14.1.4", "@octokit/rest": "^20.1.0", "@playwright/test": "1.43.0", + "@testing-library/react": "^15.0.7", + "@testing-library/jest-dom": "^6.4.5", "@types/fs-extra": "^11.0.4", "@types/lodash": "^4.17.0", - "@types/mocha": "^10.0.6", "@types/node": "^18.19.30", "@types/react": "^18.2.74", "@types/yargs": "^17.0.32", "@typescript-eslint/eslint-plugin": "^7.5.0", "@typescript-eslint/parser": "^7.5.0", + "@vitest/coverage-v8": "^1.6.0", + "@vitest/ui": "^1.6.0", "babel-plugin-istanbul": "^6.1.1", "babel-plugin-module-resolver": "^5.0.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", @@ -100,7 +98,6 @@ "lerna": "^8.1.2", "lodash": "^4.17.21", "markdownlint-cli2": "^0.13.0", - "mocha": "^10.4.0", "nx": "^18.2.3", "nyc": "^15.1.0", "postcss-styled-syntax": "^0.6.4", @@ -117,6 +114,7 @@ "tsx": "^4.7.2", "typescript": "^5.4.4", "unist-util-visit": "^2.0.3", + "vitest": "^1.6.0", "yargs": "^17.7.2" }, "packageManager": "pnpm@8.15.6", diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json index b1ce6cfb..02e5272f 100644 --- a/packages/eslint-plugin-material-ui/package.json +++ b/packages/eslint-plugin-material-ui/package.json @@ -10,7 +10,7 @@ "@typescript-eslint/parser": "^7.5.0" }, "scripts": { - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js' --timeout 3000" + "test": "echo \"No tests here\"" }, "license": "MIT" } diff --git a/packages/pigment-css-react/.gitignore b/packages/pigment-css-react/.gitignore index ce226001..d661d63e 100644 --- a/packages/pigment-css-react/.gitignore +++ b/packages/pigment-css-react/.gitignore @@ -1,3 +1,5 @@ /processors/ /utils/ LICENSE +/html/ +/coverage/ diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json index 69996de6..389a60bf 100644 --- a/packages/pigment-css-react/package.json +++ b/packages/pigment-css-react/package.json @@ -25,9 +25,9 @@ "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/**/*.test.{js,ts,tsx}'", - "test:update": "cd ../../ && cross-env NODE_ENV=test UPDATE_FIXTURES=true mocha 'packages/pigment-css-react/**/*.test.{js,ts,tsx}'", - "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-css-react mocha 'packages/pigment-css-react/**/*.test.{js,ts,tsx}'", + "test": "vitest run", + "test:update": "UPDATE_FIXTURES=true vitest run", + "test:ci": "vitest run --coverage --reporter=html --coverage.reportsDirectory=./coverage", "typecheck": "tsc --noEmit -p ." }, "dependencies": { @@ -55,17 +55,19 @@ }, "devDependencies": { "@babel/plugin-syntax-jsx": "^7.24.1", + "@testing-library/jest-dom": "^6.4.5", + "@testing-library/react": "^15.0.7", "@types/babel__core": "^7.20.5", "@types/babel__helper-module-imports": "^7.18.3", "@types/babel__helper-plugin-utils": "^7.10.3", "@types/chai": "^4.3.16", "@types/cssesc": "^3.0.2", "@types/lodash": "^4.17.1", - "@types/mocha": "^10.0.6", "@types/node": "^18.19.31", "@types/prop-types": "^15.7.12", "@types/react": "^18.3.1", "@types/stylis": "^4.2.6", + "@vitejs/plugin-react": "^4.2.1", "chai": "^4.4.1", "prettier": "^3.2.5", "prop-types": "^15.8.1", @@ -149,34 +151,5 @@ "require": "./build/RtlProvider.js", "default": "./build/RtlProvider.js" } - }, - "nx": { - "targets": { - "test": { - "cache": false, - "dependsOn": [ - "build" - ] - }, - "test:update": { - "cache": false, - "dependsOn": [ - "build" - ] - }, - "test:ci": { - "cache": false, - "dependsOn": [ - "build" - ] - }, - "build": { - "outputs": [ - "{projectRoot}/build", - "{projectRoot}/processors", - "{projectRoot}/utils" - ] - } - } } } diff --git a/packages/pigment-css-react/src/styled.js b/packages/pigment-css-react/src/styled.jsx similarity index 100% rename from packages/pigment-css-react/src/styled.js rename to packages/pigment-css-react/src/styled.jsx diff --git a/packages/pigment-css-react/tests/Box.spec.tsx b/packages/pigment-css-react/tests/Box.spec.tsx index 8b28efe6..b21d444c 100644 --- a/packages/pigment-css-react/tests/Box.spec.tsx +++ b/packages/pigment-css-react/tests/Box.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Box } from '@pigment-css/react/Box'; +import Box from '../src/Box'; export function App() { return ( diff --git a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css index 181b1abe..05fbda43 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css +++ b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css @@ -1,4 +1,4 @@ -.sd5jss7 { +.s102a5ob { margin: 0; margin-block: 1rem; padding: 0; @@ -7,7 +7,7 @@ flex-direction: column; gap: 0.5rem; } -.sk625fs { +.s22pi4e { display: flex; flex-direction: column; } diff --git a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js index 47a9f092..4cd4cd46 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js +++ b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js @@ -6,7 +6,7 @@ export function App(props) { as: 'ul', 'aria-label': props.label, children: 'Hello Box', - ..._sx('sd5jss7', {}), + ..._sx('s102a5ob', {}), }); } function App2(props) { @@ -14,7 +14,7 @@ function App2(props) { Box, { children: 'Test', - ..._sx2('sk625fs', {}), + ..._sx2('s22pi4e', {}), }, void 0, false, diff --git a/packages/pigment-css-react/tests/Box/fixtures/box.output.css b/packages/pigment-css-react/tests/Box/fixtures/box.output.css index d332a878..3c43cde8 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box.output.css +++ b/packages/pigment-css-react/tests/Box/fixtures/box.output.css @@ -1,5 +1,5 @@ -.bc1d15y { - color: var(--bc1d15y-0); +.b1akj7oz { + color: var(--b1akj7oz-0); margin: 0; margin-block: 1rem; padding: 0; diff --git a/packages/pigment-css-react/tests/Box/fixtures/box.output.js b/packages/pigment-css-react/tests/Box/fixtures/box.output.js index 9b4c632c..7605b8be 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box.output.js +++ b/packages/pigment-css-react/tests/Box/fixtures/box.output.js @@ -7,9 +7,9 @@ export function App(props) { aria-label={props.label} {..._sx( { - className: 'bc1d15y', + className: 'b1akj7oz', vars: { - 'bc1d15y-0': [props.color, false], + 'b1akj7oz-0': [props.color, false], }, }, {}, diff --git a/packages/pigment-css-react/tests/css/fixtures/css.output.css b/packages/pigment-css-react/tests/css/fixtures/css.output.css index 7b2e7bc2..963a64c4 100644 --- a/packages/pigment-css-react/tests/css/fixtures/css.output.css +++ b/packages/pigment-css-react/tests/css/fixtures/css.output.css @@ -1,4 +1,4 @@ -.c1pj8glw { +.ccs6o9u { color: red; font-size: 3rem; } diff --git a/packages/pigment-css-react/tests/css/fixtures/css.output.js b/packages/pigment-css-react/tests/css/fixtures/css.output.js index 351cb0da..5b29baa2 100644 --- a/packages/pigment-css-react/tests/css/fixtures/css.output.js +++ b/packages/pigment-css-react/tests/css/fixtures/css.output.js @@ -1 +1 @@ -const cls1 = 'c1pj8glw'; +const cls1 = 'ccs6o9u'; diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.css b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.css index 491c737f..7a40eda6 100644 --- a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.css +++ b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.css @@ -1,4 +1,4 @@ -@keyframes gpsum18 { +@keyframes g14ms9lx { 0% { background: red; } @@ -9,7 +9,7 @@ background: blue; } } -@keyframes g1t1dgxp { +@keyframes gz01um { 0% { background: red; } diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.js b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.js index 9674335e..893bd1e1 100644 --- a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.js +++ b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.js @@ -1,2 +1,2 @@ -const gradientKeyframe = 'gpsum18'; -const gradientKeyframe2 = 'g1t1dgxp'; +const gradientKeyframe = 'g14ms9lx'; +const gradientKeyframe2 = 'gz01um'; diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.css b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.css index 255fbfb0..bee91443 100644 --- a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.css +++ b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.css @@ -1,4 +1,4 @@ -@keyframes rr2uptz { +@keyframes r6toupf { from { transform: rotate(360deg); } @@ -6,7 +6,7 @@ transform: rotate(0deg); } } -@keyframes r1dngkim { +@keyframes rwg7boy { from { transform: rotate(360deg); } diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.js b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.js index bab4d4fc..0d77b72f 100644 --- a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.js +++ b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.js @@ -1,2 +1,2 @@ -const rotateKeyframe = 'rr2uptz'; -const rotateKeyframe2 = 'r1dngkim'; +const rotateKeyframe = 'r6toupf'; +const rotateKeyframe2 = 'rwg7boy'; diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.css index 3cbf43f4..b4e92fe8 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.css +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.css @@ -1,4 +1,4 @@ -@keyframes r14vlhb { +@keyframes rewlasw { from { transform: translateX(0%); } @@ -6,39 +6,39 @@ transform: translateX(100%); } } -.c194j3ko { - animation: r14vlhb 2s ease-out 0s infinite; +.c1gnxion { + animation: rewlasw 2s ease-out 0s infinite; margin-left: 10px; } -:dir(rtl) .c194j3ko { - animation: r14vlhb 2s ease-out 0s infinite; +:dir(rtl) .c1gnxion { + animation: rewlasw 2s ease-out 0s infinite; margin-right: 10px; } -.sgip8u5 { +.sytgj48 { display: block; position: absolute; left: 0; top: 0; border-top-left-radius: 3px; } -:dir(rtl) .sgip8u5 { +:dir(rtl) .sytgj48 { display: block; position: absolute; right: 0; top: 0; border-top-right-radius: 3px; } -.sgip8u5-1 { +.sytgj48-1 { font-size: 1.5rem; } -:dir(rtl) .sgip8u5-1 { +:dir(rtl) .sytgj48-1 { font-size: 1.5rem; } -.smip3v5 .sgip8u5 { +.sgipd9n .sytgj48 { padding-inline-start: none; margin: 0px 10px 10px 30px; } -:dir(rtl) .smip3v5 .sgip8u5 { +:dir(rtl) .sgipd9n .sytgj48 { padding-inline-start: none; margin: 0px 30px 10px 10px; } diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js index f53fc340..459b5401 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js @@ -1,14 +1,14 @@ import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react'; import _theme from '@pigment-css/react/theme'; const Component = /*#__PURE__*/ _styled('div')({ - classes: ['c194j3ko'], + classes: ['c1gnxion'], }); export const SliderRail = /*#__PURE__*/ _styled2('span', { name: 'MuiSlider', slot: 'Rail', })({ - classes: ['sgip8u5', 'sgip8u5-1'], + classes: ['sytgj48', 'sytgj48-1'], }); const SliderRail2 = /*#__PURE__*/ _styled3('span')({ - classes: ['smip3v5'], + classes: ['sgipd9n'], }); diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.output.css index 0414e662..db96b05b 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.output.css +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.output.css @@ -1,6 +1,6 @@ -.njazm0b { +.n16dgyp3 { border-color: red; } -.njazm0b-1 { +.n16dgyp3-1 { border: none; } diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.output.js index b109577a..99005259 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides.output.js @@ -5,5 +5,5 @@ const NotchedOutlineRoot = /*#__PURE__*/ _styled('fieldset', { slot: 'NotchedOutline', overridesResolver: (props, styles) => styles.notchedOutline, })({ - classes: ['njazm0b', 'njazm0b-1'], + classes: ['n16dgyp3', 'n16dgyp3-1'], }); diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides2.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides2.output.css index cdd4ea1e..51e59236 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides2.output.css +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides2.output.css @@ -1,21 +1,21 @@ -.o1ei225m { +.oqpebcq { padding: 16.5px 14px; } -.o1ei225m-1 { +.oqpebcq-1 { padding: 8.5px 14px; } -.o1ei225m-2 { +.oqpebcq-2 { padding: 0; } -.o1ei225m-3 { +.oqpebcq-3 { padding-left: 0; } -.o1ei225m-4 { +.oqpebcq-4 { padding-right: 0; } -.o1ei225m-5 { +.oqpebcq-5 { padding-left: 10px; } -.o1ei225m-6 { +.oqpebcq-6 { padding: 9px 14.5px; } diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides2.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides2.output.js index 49d4e96d..403bdce4 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides2.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-theme-styleOverrides2.output.js @@ -4,31 +4,31 @@ const OutlinedInputInput = /*#__PURE__*/ _styled('input', { name: 'MuiOutlinedInput', slot: 'Input', })({ - classes: ['o1ei225m', 'o1ei225m-5'], + classes: ['oqpebcq', 'oqpebcq-5'], variants: [ { props: { size: 'small', }, - className: 'o1ei225m-1', + className: 'oqpebcq-1', }, { props: ({ ownerState }) => ownerState.multiline, - className: 'o1ei225m-2', + className: 'oqpebcq-2', }, { props: ({ ownerState }) => ownerState.startAdornment, - className: 'o1ei225m-3', + className: 'oqpebcq-3', }, { props: ({ ownerState }) => ownerState.endAdornment, - className: 'o1ei225m-4', + className: 'oqpebcq-4', }, { props: { size: 'small', }, - className: 'o1ei225m-6', + className: 'oqpebcq-6', }, ], }); diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.css index 2d6da655..580f3bd6 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.css +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.css @@ -1,4 +1,4 @@ -@keyframes rnit1sq { +@keyframes r74bycx { from { transform: rotate(360deg); } @@ -6,11 +6,11 @@ transform: rotate(0deg); } } -.c1h7nuob { +.cemfduf { color: red; - animation: rnit1sq 2s ease-out 0s infinite; + animation: r74bycx 2s ease-out 0s infinite; } -.s13xim6i { +.s7fgwgo { display: block; position: absolute; border-radius: inherit; @@ -18,14 +18,14 @@ opacity: 0.38; font-size: 3rem; } -.s13xim6i-1 { +.s7fgwgo-1 { font-size: 1.5rem; } -.s1emg10t { +.s10rodt2 { display: block; opacity: 0.38; font-size: 3rem; } -.s1emg10t .s13xim6i { +.s10rodt2 .s7fgwgo { display: none; } diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js index 3e3eae8b..64a4c8e5 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js @@ -2,16 +2,16 @@ import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigm import _theme from '@pigment-css/react/theme'; import PropTypes from 'prop-types'; const Component = /*#__PURE__*/ _styled('div')({ - classes: ['c1h7nuob'], + classes: ['cemfduf'], }); const SliderRail = /*#__PURE__*/ _styled2('span', { name: 'MuiSlider', slot: 'Rail', })({ - classes: ['s13xim6i', 's13xim6i-1'], + classes: ['s7fgwgo', 's7fgwgo-1'], }); const SliderRail2 = /*#__PURE__*/ _styled3('span')({ - classes: ['s1emg10t'], + classes: ['s10rodt2'], }); export function App() { return ( diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.css index 4a6e2075..2cf9b82b 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.css +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.css @@ -1,6 +1,6 @@ -.b1prasel-1 { +.b1p4fcjf-1 { color: tomato; } -.b1prasel-2 { +.b1p4fcjf-2 { color: salmon; } diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.js index 6b450dcd..27d74463 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.js @@ -1,17 +1,17 @@ import { styled as _styled } from '@pigment-css/react'; import _theme from '@pigment-css/react/theme'; const Button = /*#__PURE__*/ _styled('button')({ - classes: ['b1prasel'], + classes: ['b1p4fcjf'], variants: [ { props: { color: 'primary', }, - className: 'b1prasel-1', + className: 'b1p4fcjf-1', }, { props: ({ ownerState }) => ownerState.color === 'secondary', - className: 'b1prasel-2', + className: 'b1p4fcjf-2', }, ], }); diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled.output.css index f2133976..032e99b0 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled.output.css +++ b/packages/pigment-css-react/tests/styled/fixtures/styled.output.css @@ -1,4 +1,4 @@ -@keyframes r1sz5zcv { +@keyframes rmbqoav { from { transform: rotate(360deg); } @@ -6,21 +6,21 @@ transform: rotate(0deg); } } -.c1aiqtje { +.c18u98at { color: #ff5252; - animation: r1sz5zcv 2s ease-out 0s infinite; + animation: rmbqoav 2s ease-out 0s infinite; } -.sj0zd45 { +.s1d2yhn4 { display: block; position: absolute; border-radius: inherit; background-color: currentColor; opacity: 0.38; } -.shdkmm7 { +.s17p3km3 { display: block; opacity: 0.38; } -.shdkmm7 .sj0zd45 { +.s17p3km3 .s1d2yhn4 { display: none; } diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled.output.js index 5ae76401..2e987dfd 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled.output.js @@ -2,16 +2,16 @@ import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigm import _theme from '@pigment-css/react/theme'; import PropTypes from 'prop-types'; const Component = /*#__PURE__*/ _styled('div')({ - classes: ['c1aiqtje'], + classes: ['c18u98at'], }); export const SliderRail = /*#__PURE__*/ _styled2('span', { name: 'MuiSlider', slot: 'Rail', })({ - classes: ['sj0zd45'], + classes: ['s1d2yhn4'], }); const SliderRail2 = /*#__PURE__*/ _styled3('span')({ - classes: ['shdkmm7'], + classes: ['s17p3km3'], }); export function App() { return ( diff --git a/packages/pigment-css-react/tests/styled/runtime-styled.test.js b/packages/pigment-css-react/tests/styled/runtime-styled.test.jsx similarity index 75% rename from packages/pigment-css-react/tests/styled/runtime-styled.test.js rename to packages/pigment-css-react/tests/styled/runtime-styled.test.jsx index a0a32538..5f689d8c 100644 --- a/packages/pigment-css-react/tests/styled/runtime-styled.test.js +++ b/packages/pigment-css-react/tests/styled/runtime-styled.test.jsx @@ -1,11 +1,9 @@ import * as React from 'react'; -import { expect } from 'chai'; -import { createRenderer } from '@mui/internal-test-utils'; -import styled from '../../src/styled'; +import { render } from '@testing-library/react'; +import { expect } from 'vitest'; +import { styled } from '../../src'; describe('props filtering', () => { - const { render } = createRenderer(); - it('composes shouldForwardProp on composed styled components', () => { const StyledDiv = styled('div', { shouldForwardProp: (prop) => prop !== 'foo', @@ -17,9 +15,9 @@ describe('props filtering', () => { const { container } = render(); - expect(container.firstChild).to.not.have.attribute('foo'); - expect(container.firstChild).to.not.have.attribute('bar'); - expect(container.firstChild).to.have.attribute('xyz', 'true'); + expect(container.firstChild).not.toHaveAttribute('foo'); + expect(container.firstChild).not.toHaveAttribute('bar'); + expect(container.firstChild).toHaveAttribute('xyz', 'true'); }); it('custom shouldForwardProp works', () => { @@ -41,9 +39,9 @@ describe('props filtering', () => { `; const { container } = render(); - expect(container.firstChild).to.not.have.attribute('color'); - expect(container.firstChild).to.have.attribute('width', '100px'); - expect(container.firstChild).to.have.attribute('height', '100px'); + expect(container.firstChild).not.toHaveAttribute('color'); + expect(container.firstChild).toHaveAttribute('width', '100px'); + expect(container.firstChild).toHaveAttribute('height', '100px'); }); it('default prop filtering for native html tag', () => { @@ -69,17 +67,17 @@ describe('props filtering', () => { hello world , ); - expect(container.firstChild).to.have.attribute('href', 'link'); - expect(container.firstChild).to.have.attribute('aria-label', 'some label'); - expect(container.firstChild).to.have.attribute('data-wow', 'value'); - expect(container.firstChild).to.have.attribute('is', 'true'); - - expect(container.firstChild).not.to.have.attribute('a'); - expect(container.firstChild).not.to.have.attribute('b'); - expect(container.firstChild).not.to.have.attribute('wow'); - expect(container.firstChild).not.to.have.attribute('prop'); - expect(container.firstChild).not.to.have.attribute('filtering'); - expect(container.firstChild).not.to.have.attribute('cool'); + expect(container.firstChild).toHaveAttribute('href', 'link'); + expect(container.firstChild).toHaveAttribute('aria-label', 'some label'); + expect(container.firstChild).toHaveAttribute('data-wow', 'value'); + expect(container.firstChild).toHaveAttribute('is', 'true'); + + expect(container.firstChild).not.toHaveAttribute('a'); + expect(container.firstChild).not.toHaveAttribute('b'); + expect(container.firstChild).not.toHaveAttribute('wow'); + expect(container.firstChild).not.toHaveAttribute('prop'); + expect(container.firstChild).not.toHaveAttribute('filtering'); + expect(container.firstChild).not.toHaveAttribute('cool'); }); it('no prop filtering on non string tags', () => { @@ -105,16 +103,16 @@ describe('props filtering', () => { , ); - expect(container.firstChild).to.have.attribute('href', 'link'); - expect(container.firstChild).to.have.attribute('aria-label', 'some label'); - expect(container.firstChild).to.have.attribute('data-wow', 'value'); - expect(container.firstChild).to.have.attribute('is', 'true'); - expect(container.firstChild).to.have.attribute('a', 'true'); - expect(container.firstChild).to.have.attribute('b', 'true'); - expect(container.firstChild).to.have.attribute('wow', 'true'); - expect(container.firstChild).to.have.attribute('prop', 'true'); - expect(container.firstChild).to.have.attribute('filtering', 'true'); - expect(container.firstChild).to.have.attribute('cool', 'true'); + expect(container.firstChild).toHaveAttribute('href', 'link'); + expect(container.firstChild).toHaveAttribute('aria-label', 'some label'); + expect(container.firstChild).toHaveAttribute('data-wow', 'value'); + expect(container.firstChild).toHaveAttribute('is', 'true'); + expect(container.firstChild).toHaveAttribute('a', 'true'); + expect(container.firstChild).toHaveAttribute('b', 'true'); + expect(container.firstChild).toHaveAttribute('wow', 'true'); + expect(container.firstChild).toHaveAttribute('prop', 'true'); + expect(container.firstChild).toHaveAttribute('filtering', 'true'); + expect(container.firstChild).toHaveAttribute('cool', 'true'); }); describe('ownerState prop', () => { @@ -122,7 +120,7 @@ describe('props filtering', () => { const StyledDiv = styled('div')(); const { container } = render(); - expect(container.firstChild).not.to.have.attribute('ownerState'); + expect(container.firstChild).not.toHaveAttribute('ownerState'); }); it('does not forward `ownerState` to other React component', () => { @@ -133,8 +131,8 @@ describe('props filtering', () => { const StyledDiv = styled(InnerComponent)(); const { container } = render(); - expect(container.firstChild).not.to.have.attribute('ownerState'); - expect(container.firstChild).to.have.attribute('data-ownerstate', 'false'); + expect(container.firstChild).not.toHaveAttribute('ownerState'); + expect(container.firstChild).toHaveAttribute('data-ownerstate', 'false'); }); it('forward `ownerState` to inherited styled component', () => { @@ -159,8 +157,8 @@ describe('props filtering', () => { }); const { container } = render(); - expect(container.firstChild).to.have.class('div1-secondary'); - expect(container.firstChild).to.have.class('div2-secondary'); + expect(container.firstChild).toHaveClass('div1-secondary'); + expect(container.firstChild).toHaveClass('div2-secondary'); }); }); @@ -169,7 +167,7 @@ describe('props filtering', () => { const StyledDiv = styled('div')(); const { container } = render(); - expect(container.firstChild).not.to.have.attribute('classes'); + expect(container.firstChild).not.toHaveAttribute('classes'); }); it('does not forward `classes` for the root slot to other React component', () => { @@ -183,8 +181,8 @@ describe('props filtering', () => { })(); const { container } = render(); - expect(container.firstChild).not.to.have.attribute('classes'); - expect(container.firstChild).not.to.have.class('root-123'); + expect(container.firstChild).not.toHaveAttribute('classes'); + expect(container.firstChild).not.toHaveClass('root-123'); }); it('forward `classes` for the root slot by a custom shouldForwardProp', () => { @@ -199,7 +197,7 @@ describe('props filtering', () => { })(); const { container } = render(); - expect(container.firstChild).to.have.class('root-123'); + expect(container.firstChild).toHaveClass('root-123'); }); }); @@ -214,7 +212,7 @@ describe('props filtering', () => { }); const { container } = render(); - expect(container.firstChild).to.have.class('child'); + expect(container.firstChild).toHaveClass('child'); }); it("child's variants still propagate to its parent", () => { @@ -233,7 +231,7 @@ describe('props filtering', () => { }); const { container } = render(); - expect(container.firstChild).to.have.class('multiline'); + expect(container.firstChild).toHaveClass('multiline'); }); it("child's vars still propagate to its parent", () => { @@ -249,7 +247,7 @@ describe('props filtering', () => { }); const { container } = render(); - expect(container.firstChild).to.have.style('--foo', '300px'); + expect(container.firstChild).toHaveStyle({ '--foo': '300px' }); }); it('use component forward prop if provided `as` is a component', () => { @@ -263,7 +261,7 @@ describe('props filtering', () => { const { container } = render(); - expect(container.firstChild).to.have.tagName('button'); + expect(container.firstChild.tagName).toEqual('BUTTON'); }); it('should forward `as` prop', () => { @@ -382,11 +380,11 @@ describe('props filtering', () => { , ); - expect(container.firstChild).to.have.tagName('div'); - expect(container.firstChild).to.have.class('InputBase-root', 'Input-root'); + expect(container.firstChild.tagName).toEqual('DIV'); + expect(container.firstChild).toHaveClass('InputBase-root', 'Input-root'); - expect(container.firstChild.firstChild).to.have.tagName('select'); - expect(container.firstChild.firstChild).to.have.class('InputBase-input', 'Input-input'); + expect(container.firstChild.firstChild.tagName).toEqual('SELECT'); + expect(container.firstChild.firstChild).toHaveClass('InputBase-input', 'Input-input'); }); }); }); diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-array.output.css b/packages/pigment-css-react/tests/sx/fixtures/sx-array.output.css index 0c6400b6..fc0f922c 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sx-array.output.css +++ b/packages/pigment-css-react/tests/sx/fixtures/sx-array.output.css @@ -1,49 +1,49 @@ -.dnf03uj { +.d77f2qa { opacity: 1; } -.dsvwfmp { +.d7xe34b { color: red; } -.d121rcfp { +.d1c7ydi9 { color: green; } -.schfkcb { - color: var(--schfkcb-0); +.s1f8s81x { + color: var(--s1f8s81x-0); } -.s1cp79ho { +.svfluak { background-color: blue; color: white; } -.soyt4ij { +.sv5tf3c { border: 1px solid red; } -.sr48wd1 { +.s5gn2mm { color: green; } -.s6s70bv { - color: var(--s6s70bv-0); +.s150l9nl { + color: var(--s150l9nl-0); } -.s1v8upwb { +.sh10a0 { opacity: 1; } -.sjtfjpx { +.sylg5x2 { color: red; } -.s1r80n7h { +.s96muxz { color: green; } -.s1gu7ed8 { +.s1g57qnj { border: 1px solid red; } -.s1h4vmh2 { +.s1k5bcbo { opacity: 0.4; } -.s1oy2sl1 { +.so7h5fe { color: red; } -.s14d8kn5 { +.s1feokgc { border: 1px solid red; } -.s1su4mia { - color: var(--s1su4mia-0); +.s1vdrnlm { + color: var(--s1vdrnlm-0); } diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-array.output.js b/packages/pigment-css-react/tests/sx/fixtures/sx-array.output.js index 9b20565e..243ca507 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sx-array.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sx-array.output.js @@ -9,13 +9,13 @@ import { sx as _sx8, } from '@pigment-css/react'; import { jsx as _jsx } from 'react/jsx-runtime'; -
; +
;
@@ -62,9 +62,9 @@ function App3(props) { {...(props.variant === 'secondary' && _sx3( { - className: 'stzaibv', + className: 's1w3gk0m', vars: { - 'stzaibv-0': [props.isRed ? 'red' : 'blue', false], + 's1w3gk0m-0': [props.isRed ? 'red' : 'blue', false], }, }, { @@ -79,11 +79,11 @@ function App3(props) { ); } function App4(props) { - return ; + return ; } function App5(props) { - return ; + return ; } function App6(props) { - return ; + return ; } diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css index a31e4248..74e48dba 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css @@ -1,4 +1,4 @@ -.sdbmcs3 { +.syo8irh { display: block; position: absolute; border-radius: inherit; @@ -6,41 +6,41 @@ opacity: 0.38; font-size: 3rem; } -.sdbmcs3-1 { +.syo8irh-1 { font-size: 3rem; } -.si7ulc4 { +.s1g6t5jc { margin-bottom: 8px; } @media (prefers-color-scheme: dark) { - .si7ulc4 { + .s1g6t5jc { color: white; } } -.sliig2s { +.ska13jz { border-radius: 8px; margin: 5px; } -.sliig2s.MuiAutocomplete-option { +.ska13jz.MuiAutocomplete-option { padding: 8px; } -.so956n { +.s17in6il { color: red; - font-size: var(--so956n-0); + font-size: var(--s17in6il-0); } @media (min-width: 0px) { - .so956n :hover { + .s17in6il :hover { background-color: red; } } @media (min-width: 600px) { - .so956n :hover { + .s17in6il :hover { background-color: blue; color: red; } } @media (min-width: 900px) { - .so956n :hover { + .s17in6il :hover { color: blue; } } diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js index 19bf63cb..6329172e 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js @@ -3,20 +3,20 @@ const SliderRail = /*#__PURE__*/ _styled('span', { name: 'MuiSlider', slot: 'Rail', })({ - classes: ['sdbmcs3', 'sdbmcs3-1'], + classes: ['syo8irh', 'syo8irh-1'], }); const A = { SliderRail, }; function App(props) { - return ; + return ; } function App2() { return ( @@ -27,9 +27,9 @@ function App3(props) { preprocessor(selector, css, options?.css), pluginOptions, + root: process.env.PNPM_SCRIPT_SRC_DIR ?? process.cwd(), }, cache, eventEmitter, diff --git a/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.css b/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.css index 78a83f48..adb5fbc2 100644 --- a/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.css +++ b/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.css @@ -1,4 +1,4 @@ -.si9gu6v { +.s1a5hthf { display: flex; flex-direction: column; gap: 1rem; @@ -9,13 +9,13 @@ letter-spacing: -0.025em; font-weight: 600; } -.si9gu6v-1 { +.s1a5hthf-1 { border: 2px solid #e9e9e9; } -.sbfbm5t { +.s1cb4eun { font-size: 2rem; } -.s1xscf0o { +.s1s691w9 { font-size: 1rem; color: #6f7f95; } diff --git a/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.js b/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.js index 98cafa34..cd05b70c 100644 --- a/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.js +++ b/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.js @@ -10,13 +10,13 @@ const StatRoot = /*#__PURE__*/ _styled('div', { // The component name slot: 'root', // The slot name })({ - classes: ['si9gu6v'], + classes: ['s1a5hthf'], variants: [ { props: { variant: 'outlined', }, - className: 'si9gu6v-1', + className: 's1a5hthf-1', }, ], }); @@ -24,13 +24,13 @@ const StatValue = /*#__PURE__*/ _styled2('div', { name: 'PigmentStat', slot: 'value', })({ - classes: ['sbfbm5t'], + classes: ['s1cb4eun'], }); const StatUnit = /*#__PURE__*/ _styled3('div', { name: 'PigmentStat', slot: 'unit', })({ - classes: ['s1xscf0o'], + classes: ['s1s691w9'], }); const Stat = React.forwardRef(function Stat(props, ref) { const { value, unit, ...other } = props; diff --git a/packages/pigment-css-react/tests/utils/theme-tokens.test.ts b/packages/pigment-css-react/tests/utils/theme-tokens.test.ts index 8ea84789..925507ea 100644 --- a/packages/pigment-css-react/tests/utils/theme-tokens.test.ts +++ b/packages/pigment-css-react/tests/utils/theme-tokens.test.ts @@ -1,5 +1,4 @@ import { extendTheme, generateTokenCss, generateThemeTokens } from '@pigment-css/react/utils'; -import { expect } from 'chai'; describe('theme-tokens', () => { describe('generateTokenCss', () => { diff --git a/packages/pigment-css-react/tsconfig.json b/packages/pigment-css-react/tsconfig.json index 8ac34324..191badea 100644 --- a/packages/pigment-css-react/tsconfig.json +++ b/packages/pigment-css-react/tsconfig.json @@ -7,7 +7,7 @@ "composite": true, "noEmit": false, "resolveJsonModule": true, - "types": ["node", "mocha"] + "types": ["node", "vitest/globals"] }, "include": ["src/**/*.tsx", "src/**/*.js", "src/**/*.ts"], "exclude": ["./tsup.config.ts", "src/**/*.d.ts"] diff --git a/packages/pigment-css-react/tsup.config.ts b/packages/pigment-css-react/tsup.config.ts index d94f0da0..5fd52716 100644 --- a/packages/pigment-css-react/tsup.config.ts +++ b/packages/pigment-css-react/tsup.config.ts @@ -27,7 +27,6 @@ export default defineConfig([ entry: [ './src/utils/index.ts', './src/utils/sx-plugin.ts', - './src/utils/sx-plugin2.ts', './src/utils/remove-prop-types-plugin.ts', ], outDir: 'utils', diff --git a/packages/pigment-css-react/vitest.config.ts b/packages/pigment-css-react/vitest.config.ts new file mode 100644 index 00000000..c3d04f01 --- /dev/null +++ b/packages/pigment-css-react/vitest.config.ts @@ -0,0 +1,8 @@ +import { defineConfig } from 'vitest/config'; +import viteReact from '@vitejs/plugin-react'; +import baseConfig from '../../vitest.config'; + +export default defineConfig({ + ...baseConfig, + plugins: [...(baseConfig.plugins ?? []), viteReact()], +}); diff --git a/packages/pigment-css-unplugin/.gitignore b/packages/pigment-css-unplugin/.gitignore index 6b1d0bfa..658ca583 100644 --- a/packages/pigment-css-unplugin/.gitignore +++ b/packages/pigment-css-unplugin/.gitignore @@ -1 +1,3 @@ LICENSE +/coverage/ +/html/ diff --git a/packages/pigment-css-unplugin/package.json b/packages/pigment-css-unplugin/package.json index 542c38fb..f2ec0955 100644 --- a/packages/pigment-css-unplugin/package.json +++ b/packages/pigment-css-unplugin/package.json @@ -26,8 +26,8 @@ "copy-license": "node ../../scripts/pigment-license.mjs", "build": "tsup --tsconfig tsconfig.build.json", "typecheck": "tsc --noEmit -p .", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/pigment-css-unplugin/**/*.test.{js,ts,tsx}'", - "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-css-unplugin mocha 'packages/pigment-css-unplugin/**/*.test.{js,ts,tsx}'" + "test": "vitest run", + "test:ci": "vitest run --coverage --reporter=html --coverage.reportsDirectory=./coverage" }, "dependencies": { "@babel/core": "^7.24.5", @@ -40,7 +40,6 @@ "devDependencies": { "@types/babel__core": "^7.20.5", "@types/chai": "^4.3.16", - "@types/mocha": "^10.0.6", "chai": "^4.4.1", "webpack": "^5.91.0" }, diff --git a/packages/pigment-css-unplugin/tsconfig.json b/packages/pigment-css-unplugin/tsconfig.json index b11b8a61..e09b4f9a 100644 --- a/packages/pigment-css-unplugin/tsconfig.json +++ b/packages/pigment-css-unplugin/tsconfig.json @@ -9,7 +9,7 @@ "@pigment-css/react": ["./packages/pigment-css-react/src"], "@pigment-css/react/*": ["./packages/pigment-css-react/src/*"] }, - "types": ["node", "mocha", "chai"] + "types": ["node", "vitest/globals"] }, "include": ["src/**/*.ts"], "exclude": ["./tsup.config.ts"] diff --git a/packages/pigment-css-unplugin/vitest.config.ts b/packages/pigment-css-unplugin/vitest.config.ts new file mode 100644 index 00000000..026df8bf --- /dev/null +++ b/packages/pigment-css-unplugin/vitest.config.ts @@ -0,0 +1 @@ +export { default } from '../../vitest.config'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b2d7307c..fa6ab3bd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -88,15 +88,18 @@ importers: '@playwright/test': specifier: 1.43.0 version: 1.43.0 + '@testing-library/jest-dom': + specifier: ^6.4.5 + version: 6.4.5(vitest@1.6.0) + '@testing-library/react': + specifier: ^15.0.7 + version: 15.0.7(@types/react@18.2.75)(react-dom@18.3.1)(react@18.3.1) '@types/fs-extra': specifier: ^11.0.4 version: 11.0.4 '@types/lodash': specifier: ^4.17.0 version: 4.17.0 - '@types/mocha': - specifier: ^10.0.6 - version: 10.0.6 '@types/node': specifier: ^18.19.30 version: 18.19.31 @@ -112,6 +115,12 @@ importers: '@typescript-eslint/parser': specifier: ^7.5.0 version: 7.6.0(eslint@8.57.0)(typescript@5.4.4) + '@vitest/coverage-v8': + specifier: ^1.6.0 + version: 1.6.0(vitest@1.6.0) + '@vitest/ui': + specifier: ^1.6.0 + version: 1.6.0(vitest@1.6.0) babel-plugin-istanbul: specifier: ^6.1.1 version: 6.1.1 @@ -193,9 +202,6 @@ importers: markdownlint-cli2: specifier: ^0.13.0 version: 0.13.0 - mocha: - specifier: ^10.4.0 - version: 10.4.0 nx: specifier: ^18.2.3 version: 18.2.4 @@ -244,6 +250,9 @@ importers: unist-util-visit: specifier: ^2.0.3 version: 2.0.3 + vitest: + specifier: ^1.6.0 + version: 1.6.0(@types/node@18.19.31)(@vitest/ui@1.6.0) yargs: specifier: ^17.7.2 version: 17.7.2 @@ -479,6 +488,12 @@ importers: '@babel/plugin-syntax-jsx': specifier: ^7.24.1 version: 7.24.1(@babel/core@7.24.4) + '@testing-library/jest-dom': + specifier: ^6.4.5 + version: 6.4.5(vitest@1.6.0) + '@testing-library/react': + specifier: ^15.0.7 + version: 15.0.7(@types/react@18.2.75)(react-dom@18.3.1)(react@18.3.1) '@types/babel__core': specifier: ^7.20.5 version: 7.20.5 @@ -497,9 +512,6 @@ importers: '@types/lodash': specifier: ^4.17.1 version: 4.17.1 - '@types/mocha': - specifier: ^10.0.6 - version: 10.0.6 '@types/node': specifier: ^18.19.30 version: 18.19.31 @@ -512,6 +524,9 @@ importers: '@types/stylis': specifier: ^4.2.6 version: 4.2.6 + '@vitejs/plugin-react': + specifier: ^4.2.1 + version: 4.2.1(vite@5.2.11) chai: specifier: ^4.4.1 version: 4.4.1 @@ -552,9 +567,6 @@ importers: '@types/chai': specifier: ^4.3.16 version: 4.3.16 - '@types/mocha': - specifier: ^10.0.6 - version: 10.0.6 chai: specifier: ^4.4.1 version: 4.4.1 @@ -597,6 +609,10 @@ packages: engines: {node: '>=0.10.0'} dev: true + /@adobe/css-tools@4.3.3: + resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==} + dev: true + /@ampproject/remapping@2.3.0: resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==} engines: {node: '>=6.0.0'} @@ -4162,6 +4178,10 @@ packages: dependencies: playwright: 1.43.0 + /@polka/url@1.0.0-next.25: + resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==} + dev: true + /@popperjs/core@2.11.8: resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} dev: false @@ -4543,6 +4563,20 @@ packages: defer-to-connect: 2.0.1 dev: true + /@testing-library/dom@10.1.0: + resolution: {integrity: sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==} + engines: {node: '>=18'} + dependencies: + '@babel/code-frame': 7.24.2 + '@babel/runtime': 7.24.4 + '@types/aria-query': 5.0.4 + aria-query: 5.3.0 + chalk: 4.1.2 + dom-accessibility-api: 0.5.16 + lz-string: 1.5.0 + pretty-format: 27.5.1 + dev: true + /@testing-library/dom@9.3.4: resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==} engines: {node: '>=14'} @@ -4557,6 +4591,38 @@ packages: pretty-format: 27.5.1 dev: true + /@testing-library/jest-dom@6.4.5(vitest@1.6.0): + resolution: {integrity: sha512-AguB9yvTXmCnySBP1lWjfNNUwpbElsaQ567lt2VdGqAdHtpieLgjmcVyv1q7PMIvLbgpDdkWV5Ydv3FEejyp2A==} + engines: {node: '>=14', npm: '>=6', yarn: '>=1'} + peerDependencies: + '@jest/globals': '>= 28' + '@types/bun': latest + '@types/jest': '>= 28' + jest: '>= 28' + vitest: '>= 0.32' + peerDependenciesMeta: + '@jest/globals': + optional: true + '@types/bun': + optional: true + '@types/jest': + optional: true + jest: + optional: true + vitest: + optional: true + dependencies: + '@adobe/css-tools': 4.3.3 + '@babel/runtime': 7.24.4 + aria-query: 5.3.0 + chalk: 3.0.0 + css.escape: 1.5.1 + dom-accessibility-api: 0.6.3 + lodash: 4.17.21 + redent: 3.0.0 + vitest: 1.6.0(@types/node@18.19.31)(@vitest/ui@1.6.0) + dev: true + /@testing-library/react@14.3.0(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-AYJGvNFMbCa5vt1UtDCa/dcaABrXq8gph6VN+cffIx0UeA0qiGqS+sT60+sb+Gjc8tGXdECWYQgaF0khf8b+Lg==} engines: {node: '>=14'} @@ -4571,6 +4637,25 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: true + /@testing-library/react@15.0.7(@types/react@18.2.75)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-cg0RvEdD1TIhhkm1IeYMQxrzy0MtUNfa3minv4MjbgcYzJAZ7yD0i0lwoPOTPr+INtiXFezt2o8xMSnyHhEn2Q==} + engines: {node: '>=18'} + peerDependencies: + '@types/react': ^18.2.74 + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.4 + '@testing-library/dom': 10.1.0 + '@types/react': 18.2.75 + '@types/react-dom': 18.2.24 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: true + /@tootallnate/once@2.0.0: resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==} engines: {node: '>= 10'} @@ -4797,10 +4882,6 @@ packages: resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==} dev: true - /@types/mocha@10.0.6: - resolution: {integrity: sha512-dJvrYWxP/UcXm36Qn36fxhUKu8A/xMRXVT2cliFF1Z7UA9liG5Psj3ezNSZw+5puH2czDXRLcXQxf8JbJt0ejg==} - dev: true - /@types/ms@0.7.34: resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==} dev: true @@ -5139,6 +5220,83 @@ packages: - supports-color dev: true + /@vitest/coverage-v8@1.6.0(vitest@1.6.0): + resolution: {integrity: sha512-KvapcbMY/8GYIG0rlwwOKCVNRc0OL20rrhFkg/CHNzncV03TE2XWvO5w9uZYoxNiMEBacAJt3unSOiZ7svePew==} + peerDependencies: + vitest: 1.6.0 + dependencies: + '@ampproject/remapping': 2.3.0 + '@bcoe/v8-coverage': 0.2.3 + debug: 4.3.4(supports-color@8.1.1) + istanbul-lib-coverage: 3.2.2 + istanbul-lib-report: 3.0.1 + istanbul-lib-source-maps: 5.0.4 + istanbul-reports: 3.1.7 + magic-string: 0.30.10 + magicast: 0.3.4 + picocolors: 1.0.0 + std-env: 3.7.0 + strip-literal: 2.1.0 + test-exclude: 6.0.0 + vitest: 1.6.0(@types/node@18.19.31)(@vitest/ui@1.6.0) + transitivePeerDependencies: + - supports-color + dev: true + + /@vitest/expect@1.6.0: + resolution: {integrity: sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==} + dependencies: + '@vitest/spy': 1.6.0 + '@vitest/utils': 1.6.0 + chai: 4.4.1 + dev: true + + /@vitest/runner@1.6.0: + resolution: {integrity: sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==} + dependencies: + '@vitest/utils': 1.6.0 + p-limit: 5.0.0 + pathe: 1.1.2 + dev: true + + /@vitest/snapshot@1.6.0: + resolution: {integrity: sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==} + dependencies: + magic-string: 0.30.10 + pathe: 1.1.2 + pretty-format: 29.7.0 + dev: true + + /@vitest/spy@1.6.0: + resolution: {integrity: sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==} + dependencies: + tinyspy: 2.2.1 + dev: true + + /@vitest/ui@1.6.0(vitest@1.6.0): + resolution: {integrity: sha512-k3Lyo+ONLOgylctiGovRKy7V4+dIN2yxstX3eY5cWFXH6WP+ooVX79YSyi0GagdTQzLmT43BF27T0s6dOIPBXA==} + peerDependencies: + vitest: 1.6.0 + dependencies: + '@vitest/utils': 1.6.0 + fast-glob: 3.3.2 + fflate: 0.8.2 + flatted: 3.3.1 + pathe: 1.1.2 + picocolors: 1.0.0 + sirv: 2.0.4 + vitest: 1.6.0(@types/node@18.19.31)(@vitest/ui@1.6.0) + dev: true + + /@vitest/utils@1.6.0: + resolution: {integrity: sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==} + dependencies: + diff-sequences: 29.6.3 + estree-walker: 3.0.3 + loupe: 2.3.7 + pretty-format: 29.7.0 + dev: true + /@webassemblyjs/ast@1.12.1: resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==} dependencies: @@ -5358,6 +5516,11 @@ packages: acorn: 8.11.3 dev: true + /acorn-walk@8.3.2: + resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==} + engines: {node: '>=0.4.0'} + dev: true + /acorn@8.11.3: resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==} engines: {node: '>=0.4.0'} @@ -6236,6 +6399,14 @@ packages: escape-string-regexp: 1.0.5 supports-color: 5.5.0 + /chalk@3.0.0: + resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==} + engines: {node: '>=8'} + dependencies: + ansi-styles: 4.3.0 + supports-color: 7.2.0 + dev: true + /chalk@4.1.0: resolution: {integrity: sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==} engines: {node: '>=10'} @@ -6841,7 +7012,6 @@ packages: /css.escape@1.5.1: resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} - dev: false /cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} @@ -8034,6 +8204,12 @@ packages: - supports-color dev: true + /estree-walker@3.0.3: + resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} + dependencies: + '@types/estree': 1.0.5 + dev: true + /esutils@2.0.3: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} engines: {node: '>=0.10.0'} @@ -8222,6 +8398,10 @@ packages: dependencies: reusify: 1.0.4 + /fflate@0.8.2: + resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==} + dev: true + /figures@3.2.0: resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==} engines: {node: '>=8'} @@ -9734,6 +9914,17 @@ packages: - supports-color dev: true + /istanbul-lib-source-maps@5.0.4: + resolution: {integrity: sha512-wHOoEsNJTVltaJp8eVkm8w+GVkVNHT2YDYo53YdzQEL2gWm1hBX5cGFR9hQJtuGLebidVX7et3+dmDZrmclduw==} + engines: {node: '>=10'} + dependencies: + '@jridgewell/trace-mapping': 0.3.25 + debug: 4.3.4(supports-color@8.1.1) + istanbul-lib-coverage: 3.2.2 + transitivePeerDependencies: + - supports-color + dev: true + /istanbul-reports@3.1.7: resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==} engines: {node: '>=8'} @@ -9815,6 +10006,10 @@ packages: /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} + /js-tokens@9.0.0: + resolution: {integrity: sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==} + dev: true + /js-yaml@3.14.1: resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==} hasBin: true @@ -10421,6 +10616,20 @@ packages: hasBin: true dev: true + /magic-string@0.30.10: + resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==} + dependencies: + '@jridgewell/sourcemap-codec': 1.4.15 + dev: true + + /magicast@0.3.4: + resolution: {integrity: sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==} + dependencies: + '@babel/parser': 7.24.5 + '@babel/types': 7.24.0 + source-map-js: 1.2.0 + dev: true + /make-dir@2.1.0: resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==} engines: {node: '>=6'} @@ -10922,6 +11131,11 @@ packages: engines: {node: '>=4'} dev: true + /mrmime@2.0.0: + resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==} + engines: {node: '>=10'} + dev: true + /ms@2.0.0: resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} dev: true @@ -11702,6 +11916,13 @@ packages: dependencies: yocto-queue: 0.1.0 + /p-limit@5.0.0: + resolution: {integrity: sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==} + engines: {node: '>=18'} + dependencies: + yocto-queue: 1.0.0 + dev: true + /p-locate@2.0.0: resolution: {integrity: sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==} engines: {node: '>=4'} @@ -13274,6 +13495,10 @@ packages: object-inspect: 1.13.1 dev: true + /siginfo@2.0.0: + resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==} + dev: true + /signal-exit@3.0.7: resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} dev: true @@ -13329,6 +13554,15 @@ packages: supports-color: 7.2.0 dev: true + /sirv@2.0.4: + resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==} + engines: {node: '>= 10'} + dependencies: + '@polka/url': 1.0.0-next.25 + mrmime: 2.0.0 + totalist: 3.0.1 + dev: true + /slash@2.0.0: resolution: {integrity: sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==} engines: {node: '>=6'} @@ -13504,11 +13738,19 @@ packages: minipass: 3.3.6 dev: true + /stackback@0.0.2: + resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} + dev: true + /statuses@2.0.1: resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==} engines: {node: '>= 0.8'} dev: true + /std-env@3.7.0: + resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==} + dev: true + /stop-iteration-iterator@1.0.0: resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==} engines: {node: '>= 0.4'} @@ -13651,6 +13893,12 @@ packages: engines: {node: '>=8'} dev: true + /strip-literal@2.1.0: + resolution: {integrity: sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==} + dependencies: + js-tokens: 9.0.0 + dev: true + /strong-log-transformer@2.1.0: resolution: {integrity: sha512-B3Hgul+z0L9a236FAUC9iZsL+nVHgoCJnqCbN588DjYxvGXaXaaFbfmQ/JhvKjZwsOukuR72XbHv71Qkug0HxA==} engines: {node: '>=4'} @@ -13950,6 +14198,20 @@ packages: resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==} dev: true + /tinybench@2.8.0: + resolution: {integrity: sha512-1/eK7zUnIklz4JUUlL+658n58XO2hHLQfSk1Zf2LKieUjxidN16eKFEoDEfjHc3ohofSSqK3X5yO6VGb6iW8Lw==} + dev: true + + /tinypool@0.8.4: + resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==} + engines: {node: '>=14.0.0'} + dev: true + + /tinyspy@2.2.1: + resolution: {integrity: sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==} + engines: {node: '>=14.0.0'} + dev: true + /tmp@0.0.33: resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==} engines: {node: '>=0.6.0'} @@ -13977,6 +14239,11 @@ packages: engines: {node: '>=0.6'} dev: true + /totalist@3.0.1: + resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==} + engines: {node: '>=6'} + dev: true + /tough-cookie@4.1.3: resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==} engines: {node: '>=6'} @@ -14520,6 +14787,27 @@ packages: vfile-message: 2.0.4 dev: true + /vite-node@1.6.0(@types/node@18.19.31): + resolution: {integrity: sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + dependencies: + cac: 6.7.14 + debug: 4.3.4(supports-color@8.1.1) + pathe: 1.1.2 + picocolors: 1.0.0 + vite: 5.2.11(@types/node@18.19.31) + transitivePeerDependencies: + - '@types/node' + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser + dev: true + /vite-plugin-pages@0.32.1(vite@5.2.11): resolution: {integrity: sha512-4oPlIbb+J+zpJGfT2xI/27xqY+qTkRc3MBgWKfbW6IWM3CTcSyybuL9kRMCFRdBHfmgkF28qDs7fqVf/HjH1Xw==} peerDependencies: @@ -14615,6 +14903,63 @@ packages: fsevents: 2.3.3 dev: true + /vitest@1.6.0(@types/node@18.19.31)(@vitest/ui@1.6.0): + resolution: {integrity: sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + peerDependencies: + '@edge-runtime/vm': '*' + '@types/node': ^18.19.30 + '@vitest/browser': 1.6.0 + '@vitest/ui': 1.6.0 + happy-dom: '*' + jsdom: '*' + peerDependenciesMeta: + '@edge-runtime/vm': + optional: true + '@types/node': + optional: true + '@vitest/browser': + optional: true + '@vitest/ui': + optional: true + happy-dom: + optional: true + jsdom: + optional: true + dependencies: + '@types/node': 18.19.31 + '@vitest/expect': 1.6.0 + '@vitest/runner': 1.6.0 + '@vitest/snapshot': 1.6.0 + '@vitest/spy': 1.6.0 + '@vitest/ui': 1.6.0(vitest@1.6.0) + '@vitest/utils': 1.6.0 + acorn-walk: 8.3.2 + chai: 4.4.1 + debug: 4.3.4(supports-color@8.1.1) + execa: 8.0.1 + local-pkg: 0.5.0 + magic-string: 0.30.10 + pathe: 1.1.2 + picocolors: 1.0.0 + std-env: 3.7.0 + strip-literal: 2.1.0 + tinybench: 2.8.0 + tinypool: 0.8.4 + vite: 5.2.11(@types/node@18.19.31) + vite-node: 1.6.0(@types/node@18.19.31) + why-is-node-running: 2.2.2 + transitivePeerDependencies: + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser + dev: true + /w3c-xmlserializer@5.0.0: resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==} engines: {node: '>=18'} @@ -14827,6 +15172,15 @@ packages: isexe: 3.1.1 dev: true + /why-is-node-running@2.2.2: + resolution: {integrity: sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==} + engines: {node: '>=8'} + hasBin: true + dependencies: + siginfo: 2.0.0 + stackback: 0.0.2 + dev: true + /wide-align@1.1.5: resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==} dependencies: @@ -15075,6 +15429,11 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} + /yocto-queue@1.0.0: + resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} + engines: {node: '>=12.20'} + dev: true + /zwitch@1.0.5: resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==} dev: true diff --git a/tsconfig.json b/tsconfig.json index 8cde21c6..d40b5e64 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -26,7 +26,7 @@ ] }, // Otherwise we get react-native typings which conflict with dom.lib. - "types": ["node", "react"] + "types": ["node", "react", "vitest/globals"] }, "exclude": ["**/.*/", "**/build", "**/node_modules", "docs/export"] } diff --git a/vitest-setup.ts b/vitest-setup.ts new file mode 100644 index 00000000..97650fd9 --- /dev/null +++ b/vitest-setup.ts @@ -0,0 +1,7 @@ +import { afterEach } from 'vitest'; +import { cleanup } from '@testing-library/react'; +import '@testing-library/jest-dom/vitest'; + +afterEach(() => { + cleanup(); +}); diff --git a/vitest.config.ts b/vitest.config.ts new file mode 100644 index 00000000..583d105d --- /dev/null +++ b/vitest.config.ts @@ -0,0 +1,13 @@ +import * as path from 'node:path'; +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + plugins: [], + test: { + globals: true, + environment: 'jsdom', + include: ['tests/**/*.test.(js|jsx|ts|tsx)'], + exclude: ['**/*.spec.*'], + setupFiles: [path.join(__dirname, 'vitest-setup.ts')], + }, +});