github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-08-19 11:36:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): reduce css bundle size

Browse Source
This commit is contained in:
Łukasz Mierzwa
2021-08-05 20:21:34 +01:00
committed by Łukasz Mierzwa
parent 1bc397bd39
commit 7912442b76
14 changed files with 78 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -2,6 +2,7 @@
/karma
/karma-*
/ui/build
/ui/build.pre
/ui/coverage
/ui/node_modules
/ui/.eslintcache
CHANGELOG.md
+5
View File
@@ -10,6 +10,11 @@
- Alert history queries didn't include grid labels as those got
removed from alert groups in #3222, this is now fixed.
### Changed
- Reduced CSS bundle size by removing unused CSS rules with
[PurgeCSS](https://purgecss.com/).
## v0.89
### Fixed
ui/.depcheckrc.yaml
+1
View File
@@ -14,3 +14,4 @@ ignores:
- "@types/node"
- "@percy/storybook"
- "@storybook/preset-create-react-app"
- "purgecss"
ui/Makefile
+10 -1
View File
@@ -22,7 +22,7 @@ npm-fetch: $(NODE_INSTALL)
$(NODE_PATH)/%: $(NODE_INSTALL)
@if [ ! -x $@ ]; then echo "missing script: $@" ; exit 1; fi
build/index.html: $(NODE_INSTALL) $(NODE_PATH)/react-scripts $(call rwildcard, public src, *)
build/index.html: $(NODE_INSTALL) $(NODE_PATH)/react-scripts $(call rwildcard, public src, *) purgecss.config.js
@rm -fr node_modules/.cache/eslint-loader
npm run build
@@ -55,6 +55,15 @@ format: $(NODE_PATH)/prettier
build/stats.json: build
npx source-map-explorer build/static/*/*.{js,css} --json > build/stats.json
.PHONY: backup-css
backup-css:
mkdir -p build.pre/static
cp -R build/static/css build.pre/static/css
build.pre/css.diff: build purgecss.config.js
npx prettier -w build.pre/static/css/*.css build/static/css/*.css
diff -uN build.pre/static/css build/static/css > build.pre/css.diff || echo
.PHONY: npm-upgrade
npm-upgrade:
rm -fr node_modules package-lock.json
ui/package-lock.json
Generated
+31
View File
@@ -19988,6 +19988,37 @@
}
}
},
"purgecss": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
"integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
"dev": true,
"requires": {
"commander": "^6.0.0",
"glob": "^7.0.0",
"postcss": "^8.2.1",
"postcss-selector-parser": "^6.0.2"
},
"dependencies": {
"commander": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
"dev": true
},
"postcss": {
"version": "8.3.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
"integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
"dev": true,
"requires": {
"colorette": "^1.2.2",
"nanoid": "^3.1.23",
"source-map-js": "^0.6.2"
}
}
}
},
"q": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
ui/package.json
+2
View File
@@ -87,6 +87,7 @@
"jest-canvas-mock": "2.3.1",
"jest-date-mock": "1.0.8",
"prettier": "2.3.2",
"purgecss": "4.0.3",
"react-scripts": "4.0.3",
"sass": "1.37.5",
"typescript": "4.3.5"
@@ -94,6 +95,7 @@
"scripts": {
"start": "REACT_APP_BACKEND_URI=http://localhost:8080 react-scripts start",
"build": "react-scripts build",
"postbuild": "make backup-css && purgecss -c purgecss.config.js",
"test": "react-scripts test",
"storybook": "start-storybook",
"snapshot": "build-storybook --quiet -s public && percy-storybook --widths=700,1280 --minimum_height=200",
ui/purgecss.config.js
+11
View File
@@ -0,0 +1,11 @@
module.exports = {
content: ["build/index.html", "build/static/js/*.js", "src/**/*.{ts,tsx}"],
css: ["build/static/css/*.css"],
output: "build/static/css",
variables: true,
fontFace: false,
keyframes: false,
safelist: {
greedy: [/^components-/, /^firing-[0-9]$/, /^alert-history-loading-/],
},
};
ui/src/Components/InhibitedByModal/index.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ const InhibitedByModal: FC<{
<FontAwesomeIcon className="text-success" icon={faVolumeMute} />
</span>
</TooltipWrapper>
<Modal size="lg" isOpen={isVisible} toggleOpen={toggle}>
<Modal size="modal-lg" isOpen={isVisible} toggleOpen={toggle}>
<React.Suspense
fallback={
<h1 className="display-1 text-placeholder p-5 m-auto">
ui/src/Components/Labels/FilteringCounterBadge/index.tsx
+3 -3
View File
@@ -20,7 +20,7 @@ const FilteringCounterBadge: FC<{
counter: number;
themed: boolean;
alwaysVisible?: boolean;
defaultColor?: "light" | "primary";
defaultColor?: "bg-light" | "bg-primary";
isAppend?: boolean;
}> = ({
alertStore,
@@ -29,7 +29,7 @@ const FilteringCounterBadge: FC<{
counter,
themed,
alwaysVisible = false,
defaultColor = "light",
defaultColor = "bg-light",
isAppend = true,
}) => {
const { ref, props } = useFlashTransition(counter);
@@ -72,7 +72,7 @@ const FilteringCounterBadge: FC<{
themed
? cs.className
: [
`bg-${defaultColor}`,
`${defaultColor}`,
"rounded-pill components-label-with-hover",
...cs.baseClassNames,
].join(" ")
ui/src/Components/ManagedSilence/SilenceComment.tsx
+1 -1
View File
@@ -80,7 +80,7 @@ const SilenceComment: FC<{
counter={alertCount}
themed={false}
alwaysVisible={alertCountAlwaysVisible}
defaultColor="primary"
defaultColor="bg-primary"
isAppend={false}
/>
<span className="badge components-label with-click">
ui/src/Components/Modal/index.test.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ describe("<ModalInner />", () => {
})
);
const tree = mount(
<ModalInner size="lg" isUpper toggleOpen={fakeToggle} />
<ModalInner size="modal-lg" isUpper toggleOpen={fakeToggle} />
);
tree.setProps({ isUpper: false });
tree.setProps({ isUpper: true });
ui/src/Components/Modal/index.tsx
+4 -4
View File
@@ -10,7 +10,7 @@ import { useHotkeys } from "react-hotkeys-hook";
import { ThemeContext } from "Components/Theme";
const ModalInner: FC<{
size: "lg" | "xl";
size: "modal-lg" | "modal-xl";
isUpper: boolean;
toggleOpen: () => void;
}> = ({ size, isUpper, toggleOpen, children }) => {
@@ -36,7 +36,7 @@ const ModalInner: FC<{
<div className="modal-open">
<div ref={ref} className="modal d-block" role="dialog">
<div
className={`modal-dialog modal-${size} ${
className={`modal-dialog ${size} ${
isUpper ? "modal-upper shadow" : ""
}`}
role="document"
@@ -49,13 +49,13 @@ const ModalInner: FC<{
};
const Modal: FC<{
size?: "lg" | "xl";
size?: "modal-lg" | "modal-xl";
isOpen: boolean;
isUpper?: boolean;
toggleOpen: () => void;
onExited?: () => void;
}> = ({
size = "lg",
size = "modal-lg",
isOpen,
isUpper = false,
toggleOpen,
ui/src/Components/NavBar/FilterInput/History.tsx
+6 -6
View File
@@ -50,14 +50,14 @@ function ReduceFilter(filter: FilterT): ReduceFilterT {
}
const ActionButton: FC<{
color: string;
colorClass: string;
icon: IconDefinition;
title: ReactNode;
action: () => void;
afterClick: () => void;
}> = ({ color, icon, title, action, afterClick }) => (
}> = ({ colorClass, icon, title, action, afterClick }) => (
<button
className={`component-history-button btn btn-sm btn-${color}`}
className={`component-history-button btn btn-sm ${colorClass}`}
onClick={() => {
action();
afterClick();
@@ -129,7 +129,7 @@ const HistoryMenu: FC<{
<div className="dropdown-divider" />
<div className="px-3 d-flex justify-content-center flex-wrap">
<ActionButton
color="success"
colorClass="btn-success"
icon={faSave}
title="Save filters"
action={() => {
@@ -140,14 +140,14 @@ const HistoryMenu: FC<{
afterClick={afterClick}
/>
<ActionButton
color="danger"
colorClass="btn-danger"
icon={faUndoAlt}
title="Reset filters"
action={settingsStore.savedFilters.clear}
afterClick={afterClick}
/>
<ActionButton
color="secondary"
colorClass="btn-secondary"
icon={faTrash}
title="Clear history"
action={onClear}
ui/src/Components/OverviewModal/index.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ const OverviewModal: FC<{
</div>
</CSSTransition>
</TooltipWrapper>
<Modal size="xl" isOpen={isVisible} toggleOpen={toggle}>
<Modal size="modal-xl" isOpen={isVisible} toggleOpen={toggle}>
<React.Suspense
fallback={
<h1 className="display-1 text-placeholder p-5 m-auto">