From 1978e657bec3a360be45ea4f8a4a52653cd79640 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Wed, 16 Oct 2024 17:57:30 +0200 Subject: [PATCH] fix: ensure PostCSS handles CSS unnesting in Vite config (#457) Co-authored-by: mparticle-automation --- CHANGELOG.md | 8 ++++ package-lock.json | 99 ++++++++++++++++++++++++++++++----------------- package.json | 10 +++-- postcss.config.js | 3 ++ vite.config.js | 7 ++++ 5 files changed, 87 insertions(+), 40 deletions(-) create mode 100644 postcss.config.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 42c570e68..291a294c1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## [1.33.2-fix-unnested-css.1](https://github.com/mParticle/aquarium/compare/v1.33.1...v1.33.2-fix-unnested-css.1) (2024-10-15) + +### Bug Fixes + +- add postcss lib to un-nest css on build ([106ad0a](https://github.com/mParticle/aquarium/commit/106ad0a3f9b8a4465f7899ccf70a127712fa9b43)) +- add postcss to build for unnesting styles ([3fc13d9](https://github.com/mParticle/aquarium/commit/3fc13d9590d996bc1ea6fa8fcfc98d787c4f60cc)) +- trigger rebuild ([9bdc1b7](https://github.com/mParticle/aquarium/commit/9bdc1b715e70142cac74c3831b4d5118c3aaf4d5)) + ## [1.33.1](https://github.com/mParticle/aquarium/compare/v1.33.0...v1.33.1) (2024-10-14) ### Bug Fixes diff --git a/package-lock.json b/package-lock.json index 63503d48b..2cc6d48f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@mparticle/aquarium", - "version": "1.33.1", + "version": "1.33.2-fix-unnested-css.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@mparticle/aquarium", - "version": "1.33.1", + "version": "1.33.2-fix-unnested-css.1", "license": "Apache-2.0", "dependencies": { "lodash.clonedeep": "4.5.0" @@ -45,6 +45,8 @@ "jsdom": "24.1.3", "mdx-mermaid": "^2.0.1", "multer": "1.4.5-lts.1", + "postcss": "8.4.47", + "postcss-nested": "6.2.0", "prettier": "3.3.2", "remark-gfm": "^4.0.0", "shx": "^0.3.4", @@ -3319,22 +3321,6 @@ "react": ">=16.8.0" } }, - "node_modules/@esbuild/darwin-x64": { - "version": "0.18.20", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz", - "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -14370,6 +14356,22 @@ "esbuild": ">=0.12 <1" } }, + "node_modules/esbuild/node_modules/@esbuild/darwin-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz", + "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, "node_modules/escalade": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz", @@ -30279,9 +30281,9 @@ "optional": true }, "node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", + "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", "dev": true }, "node_modules/picomatch": { @@ -30543,9 +30545,9 @@ } }, "node_modules/postcss": { - "version": "8.4.35", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", - "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==", + "version": "8.4.47", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", + "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", "dev": true, "funding": [ { @@ -30563,13 +30565,38 @@ ], "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "picocolors": "^1.1.0", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-nested": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", + "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "postcss-selector-parser": "^6.1.1" + }, + "engines": { + "node": ">=12.0" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, "node_modules/postcss-resolve-nested-selector": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", @@ -30603,9 +30630,9 @@ } }, "node_modules/postcss-selector-parser": { - "version": "6.0.15", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz", - "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", + "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", "dev": true, "dependencies": { "cssesc": "^3.0.0", @@ -34373,9 +34400,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", "dev": true, "engines": { "node": ">=0.10.0" @@ -36967,12 +36994,12 @@ "vite": "^2.6.0 || 3 || 4 || 5" } }, - "node_modules/vite/node_modules/@esbuild/darwin-x64": { + "node_modules/vite/node_modules/@esbuild/darwin-arm64": { "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz", - "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz", + "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==", "cpu": [ - "x64" + "arm64" ], "dev": true, "optional": true, diff --git a/package.json b/package.json index d316fb536..182466546 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mparticle/aquarium", - "version": "1.33.1", + "version": "1.33.2-fix-unnested-css.1", "description": "mParticle Component Library", "license": "Apache-2.0", "keywords": [ @@ -26,9 +26,9 @@ ], "peerDependencies": { "antd": "5.20.x", + "dayjs": "1.11.x", "react": ">=17.0.2", - "react-dom": ">=17.0.2", - "dayjs": "1.11.x" + "react-dom": ">=17.0.2" }, "devDependencies": { "@commitlint/cli": "19.2.1", @@ -78,7 +78,9 @@ "vite-plugin-dts": "3.7.2", "vite-plugin-svgr": "4.2.0", "vitest": "1.3.1", - "wait-on": "7.2.0" + "wait-on": "7.2.0", + "postcss": "8.4.47", + "postcss-nested": "6.2.0" }, "optionalDependencies": { "@rollup/rollup-linux-x64-gnu": "4.18.0", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 000000000..54298d8b4 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,3 @@ +module.exports = { + plugins: [require('postcss-nested')], +} diff --git a/vite.config.js b/vite.config.js index ddbdd42ca..24d20aa43 100644 --- a/vite.config.js +++ b/vite.config.js @@ -2,6 +2,7 @@ import { resolve } from 'path' import { defineConfig } from 'vite' import dts from 'vite-plugin-dts' import svgr from 'vite-plugin-svgr' +import postcssNested from 'postcss-nested' export default defineConfig({ test: { @@ -16,6 +17,12 @@ export default defineConfig({ plugins: [svgr(), dts({ include: 'src/', exclude: '**/*.stories.*', rollupTypes: false, insertTypesEntry: true })], + css: { + postcss: { + plugins: [postcssNested()], + }, + }, + build: { target: 'es6', outDir: 'dist',