diff --git a/classPrefixerPlugin.ts b/classPrefixerPlugin.ts deleted file mode 100644 index bc920ae2..00000000 --- a/classPrefixerPlugin.ts +++ /dev/null @@ -1,80 +0,0 @@ -import fs from "node:fs" -import type { Plugin as VPlugin } from "vite" - -const cssClassRegex = /(\.)([^{;]+)({\B)/g -const classNameRegex = /className=["']([^"']+)["']/g - -const classPrefix = "lp-" - -const classesToPrefix = ["sticky"] - -// give me a regexp that can match 2 classes when they are written like .c1.c2 -//const classRegex = /(\.)([^{]+)(\s*{)/g - -//const classRegex = /class(?:Name)?\s*[:=]?\s*["']([^"'\s]+)["']/g - -function prefixCSS(code: string) { - const regex = new RegExp(`(\\.)(${classesToPrefix.join("|")})\\b`, "g") - return code.replace(regex, (match, prefix, classes, suffix) => { - const prefixed = `${classPrefix}${classes}` - console.info("Replacing", match, "with", prefixed) - return match.replace(classes, prefixed) - }) -} - -function prefixJS(code: string) { - const regex = new RegExp( - `(? { - const prefixed = `${classPrefix}${classes}` - console.info("Replacing", match, "with", prefixed) - const replaced = match.replace(classes, prefixed) - return replaced - }) -} - -// give me a regex that will match "sticky" but not "sticky"" or "sticky-" -//const stickyRegex = /sticky(?![\w-])/g - -const writeBundle: VPlugin["writeBundle"] = (options, bundle) => { - // test if file exists - const outputDir = options.dir - if (!outputDir) { - console.info("No output directory found in options", options) - return - } - for (const fileName in bundle) { - if ( - fileName.startsWith("node_modules/") || - fileName.startsWith("_virtual/") - ) { - continue - } - const file = bundle[fileName] - const outputFileName = `${outputDir}/${fileName}` - if (fs.existsSync(outputFileName)) { - const code = fs.readFileSync(outputFileName, "utf-8") - if (fileName.endsWith(".css") || fileName.endsWith(".scss")) { - fs.writeFileSync(outputFileName, prefixCSS(code)) - } - if ( - fileName.endsWith(".js") || - fileName.endsWith(".jsx") || - fileName.endsWith(".ts") || - fileName.endsWith(".tsx") - ) { - fs.writeFileSync(outputFileName, prefixJS(code)) - } - } - } -} - -export default function classPrefixerPlugin() { - const ret: VPlugin = { - name: "class-prefixer-plugin", - writeBundle, - } - return ret -} diff --git a/library/src/components/timetable/PlaceholderItem.tsx b/library/src/components/timetable/PlaceholderItem.tsx index c41a03b8..013253b6 100644 --- a/library/src/components/timetable/PlaceholderItem.tsx +++ b/library/src/components/timetable/PlaceholderItem.tsx @@ -1,4 +1,3 @@ -import { token } from "@atlaskit/tokens" import type { Dayjs } from "dayjs" import type { TimeTableGroup } from "./LPTimeTable" @@ -46,18 +45,9 @@ function PlaceHolderItemPlaceHolder({ }: PlaceholderItemProps) { return (
{ diff --git a/package-lock.json b/package-lock.json index 574b201d..b20dc19d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@atlaskit/datetime-picker": "^13.5.0", "@atlaskit/icon": "^22.3.0", - "@atlaskit/tokens": "^1.49.0", + "@atlaskit/tokens": "^1.49.1", "@emotion/css": "^11.11.2", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-avatar": "^1.0.4", @@ -47,7 +47,7 @@ "@types/react-dom": "^16.9.24", "@typescript-eslint/eslint-plugin": "^7.10.0", "@typescript-eslint/parser": "^7.10.0", - "@vitejs/plugin-react-swc": "^3.6.0", + "@vitejs/plugin-react-swc": "^3.7.0", "autoprefixer": "^10.4.19", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", @@ -80,7 +80,7 @@ "peerDependencies": { "@atlaskit/atlassian-navigation": "^3.6.2", "@atlaskit/banner": "^12.3.1", - "@atlaskit/button": "^17.14.3", + "@atlaskit/button": "^17.15.0", "@atlaskit/calendar": "^14.2.1", "@atlaskit/checkbox": "^13.3.0", "@atlaskit/code": "^15.2.0", @@ -195,11 +195,11 @@ } }, "node_modules/@atlaskit/app-provider": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/@atlaskit/app-provider/-/app-provider-1.3.1.tgz", - "integrity": "sha512-bIf6pAV2PSC5V5r03E2SGjNVmPK2Ly1D2hz3n43Av09fmMLWDumOP2yvPyhnLD2J13uxMnNzzZCX91koMg07tA==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@atlaskit/app-provider/-/app-provider-1.3.2.tgz", + "integrity": "sha512-tvyMNrydTyu5yJK78zUjqbJwgNRdW5nQ31imWFav5PvWXwc36lfGiTXRX/JIxJNBC3rBJ0gLAyrrb9YMzyWcTw==", "dependencies": { - "@atlaskit/tokens": "^1.43.0", + "@atlaskit/tokens": "^1.49.0", "@babel/runtime": "^7.0.0", "bind-event-listener": "^3.0.0" }, @@ -269,9 +269,9 @@ } }, "node_modules/@atlaskit/button": { - "version": "17.14.3", - "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-17.14.3.tgz", - "integrity": "sha512-CDSz+7+f/wyiWD6T/NYXgPOR2w9cKjNz6O36Uvp0dr+xXE1Fe3XAsrP1iC6QJYHHY8YTklF03xURf5tjxBukPQ==", + "version": "17.15.0", + "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-17.15.0.tgz", + "integrity": "sha512-RRPSRN5aLVnZs16EzqtrC+cBdyIBJphFFaxbfoSbQYhVvf7erwoxUWG9aZN5GMs4AfkrGD5kZZuIVgYS0WPVXw==", "dependencies": { "@atlaskit/analytics-next": "^9.3.0", "@atlaskit/ds-lib": "^2.3.0", @@ -288,7 +288,7 @@ "@emotion/react": "^11.7.1" }, "peerDependencies": { - "react": "^16.8.0" + "react": "^16.8.0 || ^17.0.0 || ~18.2.0" } }, "node_modules/@atlaskit/calendar": { @@ -1085,9 +1085,9 @@ } }, "node_modules/@atlaskit/tokens": { - "version": "1.49.0", - "resolved": "https://registry.npmjs.org/@atlaskit/tokens/-/tokens-1.49.0.tgz", - "integrity": "sha512-T1GYnF+E4dmmoPvPmfEEuCHWUlyOXl6Ps85utAJUX4yDyylUFbqmm9dSzw8Yf67huVWF2N3wxunMVuncY0lyrw==", + "version": "1.49.1", + "resolved": "https://registry.npmjs.org/@atlaskit/tokens/-/tokens-1.49.1.tgz", + "integrity": "sha512-3SuhRMPUTU6b+nv0zVoGsNoqrUMtwQ/4iBbKhwaylRITanFxlxBwzW8XCCnn4sp1S2JupiT5BksI0h6jRoKN9Q==", "dependencies": { "@atlaskit/ds-lib": "^2.3.0", "@atlaskit/platform-feature-flags": "^0.2.0", @@ -5109,12 +5109,12 @@ "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==" }, "node_modules/@vitejs/plugin-react-swc": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.6.0.tgz", - "integrity": "sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==", + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.7.0.tgz", + "integrity": "sha512-yrknSb3Dci6svCd/qhHqhFPDSw0QtjumcqdKMoNNzmOl5lMXTTiqzjWtG4Qask2HdvvzaNgSunbQGet8/GrKdA==", "dev": true, "dependencies": { - "@swc/core": "^1.3.107" + "@swc/core": "^1.5.7" }, "peerDependencies": { "vite": "^4 || ^5" @@ -6485,9 +6485,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.4.777", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.777.tgz", - "integrity": "sha512-n02NCwLJ3wexLfK/yQeqfywCblZqLcXphzmid5e8yVPdtEcida7li0A5WQKghHNG0FeOMCzeFOzEbtAh5riXFw==" + "version": "1.4.779", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.779.tgz", + "integrity": "sha512-oaTiIcszNfySXVJzKcjxd2YjPxziAd+GmXyb2HbidCeFo6Z88ygOT7EimlrEQhM2U08VhSrbKhLOXP0kKUCZ6g==" }, "node_modules/emoji-regex": { "version": "10.3.0", @@ -8235,6 +8235,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.", "dependencies": { "once": "^1.3.0", "wrappy": "1" @@ -10135,9 +10136,9 @@ } }, "node_modules/postcss-selector-parser": { - "version": "6.0.16", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz", - "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz", + "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==", "dev": true, "dependencies": { "cssesc": "^3.0.0", @@ -12632,9 +12633,9 @@ } }, "node_modules/undici": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/undici/-/undici-6.18.0.tgz", - "integrity": "sha512-nT8jjv/fE9Et1ilR6QoW8ingRTY2Pp4l2RUrdzV5Yz35RJDrtPc1DXvuNqcpsJSGIRHFdt3YKKktTzJA6r0fTA==", + "version": "6.18.1", + "resolved": "https://registry.npmjs.org/undici/-/undici-6.18.1.tgz", + "integrity": "sha512-/0BWqR8rJNRysS5lqVmfc7eeOErcOP4tZpATVjJOojjHZ71gSYVAtFhEmadcIjwMIUehh5NFyKGsXCnXIajtbA==", "engines": { "node": ">=18.17" } diff --git a/package.json b/package.json index 6cfafb91..ba6f462a 100644 --- a/package.json +++ b/package.json @@ -11,13 +11,11 @@ "description": "", "module": "dist/index.js", "type": "module", - "files": [ - "dist" - ], + "files": ["dist"], "types": "./dist/index.d.ts", "style": "dist/styles.css", "scripts": { - "build:lib": "tsc --noEmit -p tsconfig.lib.json && vitest run && vite build -c vite.config.lib.ts && npm run messages:compile && cp -r ./twThemes dist", + "build:lib": "tsc --noEmit -p tsconfig.lib.json && vitest run && vite build -c vite.config.lib.ts && npm run messages:compile && cp -r ./twThemes dist && npm run tsc:plugin", "build:sc": "node ./showcase/copySources.js && tsc --noEmit && vite build -c vite.config.showcase.ts && node ./showcase/copyIndexTo404.js", "preview": "vitest run && npm run build:sc && vite preview -c vite.config.showcase.ts", "dev:lib": "vite build -c vite.config.lib.ts --watch", @@ -31,13 +29,14 @@ "tsc:lib": "tsc --noEmit -p tsconfig.lib.json", "tsc:sc": "tsc --noEmit", "pack": "vitest run && npm run build:lib && npm pack", - "fastpack": "vite build -c vite.config.lib.ts --mode development --minify false && cp -r ./twThemes dist && npm pack", + "fastpack": "vite build -c vite.config.lib.ts --mode development --minify false && cp -r ./twThemes dist && npm run tsc:plugin && npm pack", "test": "vitest", "bformat": "biome format ./src/**/*", "blint:lib": "biome lint ./library/**/*", "bcheck:lib": "biome check --apply ./library/**/*", "bformat:sc": "biome format ./showcase/**/*", - "blint:sc": "biome lint ./showcase/**/*" + "blint:sc": "biome lint ./showcase/**/*", + "tsc:plugin": "tsc --moduleResolution bundler --module es6 --outDir dist/vite-plugin --declaration vite-classPrefixerPlugin.ts" }, "sideEffects": false, "author": "Markus Toepfer", @@ -51,17 +50,10 @@ "url": "https://github.com/linked-planet/ui-kit-ts/issues" }, "homepage": "https://linked-planet.github.io/ui-kit-ts", - "supportedLocales": [ - "en", - "de" - ], + "supportedLocales": ["en", "de"], "lang": "dist/translations", "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], + "production": [">0.2%", "not dead", "not op_mini all"], "development": [ "last 1 chrome version", "last 1 firefox version", @@ -71,7 +63,7 @@ "dependencies": { "@atlaskit/datetime-picker": "^13.5.0", "@atlaskit/icon": "^22.3.0", - "@atlaskit/tokens": "^1.49.0", + "@atlaskit/tokens": "^1.49.1", "@emotion/css": "^11.11.2", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-avatar": "^1.0.4", @@ -107,7 +99,7 @@ "@types/react-dom": "^16.9.24", "@typescript-eslint/eslint-plugin": "^7.10.0", "@typescript-eslint/parser": "^7.10.0", - "@vitejs/plugin-react-swc": "^3.6.0", + "@vitejs/plugin-react-swc": "^3.7.0", "autoprefixer": "^10.4.19", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", @@ -140,7 +132,7 @@ "peerDependencies": { "@atlaskit/atlassian-navigation": "^3.6.2", "@atlaskit/banner": "^12.3.1", - "@atlaskit/button": "^17.14.3", + "@atlaskit/button": "^17.15.0", "@atlaskit/calendar": "^14.2.1", "@atlaskit/checkbox": "^13.3.0", "@atlaskit/code": "^15.2.0", diff --git a/vite-classPrefixerPlugin.ts b/vite-classPrefixerPlugin.ts new file mode 100644 index 00000000..7f29f896 --- /dev/null +++ b/vite-classPrefixerPlugin.ts @@ -0,0 +1,103 @@ +import * as fs from "node:fs" +import type { Plugin as VPlugin } from "vite" + +let classPrefix = "" +let classesToBePrefix: string[] = [] + +function prefixCSS(code: string, fileName: string) { + const regex = new RegExp(`(\\.)(${classesToBePrefix.join("|")})\\b`, "g") + let counter = 0 + const ret = code.replace(regex, (match, prefix, classes, suffix) => { + const prefixed = `${classPrefix}${classes}` + //console.info("Replacing", match, "with", prefixed) + counter++ + return match.replace(classes, prefixed) + }) + if (counter) { + console.log("Replaced", counter, "CSS classes in", fileName) + } + return ret +} + +function prefixJS(code: string, fileName: string) { + const regex = new RegExp( + `(? { + const prefixed = `${classPrefix}${classes}` + //console.info("Replacing", match, "with", prefixed) + counter++ + const replaced = match.replace(classes, prefixed) + return replaced + }) + if (counter) { + console.log("Replaced", counter, "JS classes in", fileName) + } + return ret +} + +// give me a regex that will match "sticky" but not "sticky"" or "sticky-" +//const stickyRegex = /sticky(?![\w-])/g + +const writeBundle: VPlugin["writeBundle"] = (options, bundle) => { + // test if file exists + const outputDir = options.dir + if (!outputDir) { + console.error( + "\x1b[31m%s\x1b[0m", + "[vite-classPrefixerPlugin] - No output directory found in options", + options, + ) + return + } + console.log( + "\x1b[32m%s\x1b[0m", + "[vite-classPrefixerPlugin] - Prefixing classes...", + ) + for (const fileName in bundle) { + if ( + fileName.startsWith("node_modules/") || + fileName.startsWith("_virtual/") + ) { + continue + } + const outputFileName = `${outputDir}/${fileName}` + if (fs.existsSync(outputFileName)) { + const code = fs.readFileSync(outputFileName, "utf-8") + if (fileName.endsWith(".css") || fileName.endsWith(".scss")) { + fs.writeFileSync(outputFileName, prefixCSS(code, fileName)) + } + if ( + fileName.endsWith(".js") || + fileName.endsWith(".jsx") || + fileName.endsWith(".ts") || + fileName.endsWith(".tsx") + ) { + fs.writeFileSync(outputFileName, prefixJS(code, fileName)) + } + } + } + console.log( + "\x1b[32m%s\x1b[0m", + "[vite-classPrefixerPlugin] - Done prefixing classes.", + "color: green;", + ) +} + +export default function classPrefixerPlugin({ + prefix, + classes, +}: { + prefix: string + classes: string[] +}) { + classPrefix = prefix + classesToBePrefix = classes + const ret: VPlugin = { + name: "class-prefixer-plugin", + writeBundle, + } + return ret +} diff --git a/vite.config.lib.ts b/vite.config.lib.ts index cc255ad9..2450abaf 100644 --- a/vite.config.lib.ts +++ b/vite.config.lib.ts @@ -5,13 +5,18 @@ import dts from "vite-plugin-dts" //import nodePolyfills from "rollup-plugin-polyfill-node" import pkg from "./package.json" -import classPrefixerPlugin from "./classPrefixerPlugin" +import classPrefixerPlugin from "./vite-classPrefixerPlugin" // postcss: import tailwindcss from "tailwindcss" import autoprefixer from "autoprefixer" // +// list of problematic classes in WP Viewport Theme +const classesToPrefix = ["sticky"] +const prefix = "lp-" +// + export default defineConfig({ css: { postcss: { @@ -53,7 +58,12 @@ export default defineConfig({ }, }, external: [...Object.keys(pkg.peerDependencies)], - plugins: [classPrefixerPlugin()], + plugins: [ + classPrefixerPlugin({ + prefix, // this is the prefix that is added to the classes + classes: classesToPrefix, // these are the classes that are prefixed + }), + ], }, }, plugins: [