From 2141af6bf9fe73299cfc62134e32a1234829cd00 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 15 Jan 2025 09:14:29 +0000 Subject: [PATCH] Add css build Signed-off-by: Charles de Dreuille --- packages/canon/catalog-info.yaml | 2 +- packages/canon/package.json | 6 +- packages/canon/scripts/build-css.mjs | 54 +++++++++++ packages/canon/src/css/components.css | 28 ------ packages/canon/src/css/core.css | 127 -------------------------- 5 files changed, 59 insertions(+), 158 deletions(-) create mode 100644 packages/canon/scripts/build-css.mjs diff --git a/packages/canon/catalog-info.yaml b/packages/canon/catalog-info.yaml index 8369c314b3..4e649b6e82 100644 --- a/packages/canon/catalog-info.yaml +++ b/packages/canon/catalog-info.yaml @@ -5,5 +5,5 @@ metadata: title: '@backstage/canon' spec: lifecycle: experimental - type: backstage-web-library + type: backstage-node-library owner: design-system-maintainers diff --git a/packages/canon/package.json b/packages/canon/package.json index d08f660e7d..5b62d67898 100644 --- a/packages/canon/package.json +++ b/packages/canon/package.json @@ -2,7 +2,7 @@ "name": "@backstage/canon", "version": "0.0.0", "backstage": { - "role": "web-library" + "role": "node-library" }, "publishConfig": { "access": "public", @@ -27,8 +27,10 @@ "dist" ], "scripts": { - "build": "backstage-cli package build", + "build": "yarn build:app && yarn build:css", "build-storybook": "storybook build", + "build:app": "backstage-cli package build", + "build:css": "node scripts/build-css.mjs", "clean": "backstage-cli package clean", "lint": "backstage-cli package lint", "prepack": "backstage-cli package prepack", diff --git a/packages/canon/scripts/build-css.mjs b/packages/canon/scripts/build-css.mjs new file mode 100644 index 0000000000..912a8fbeff --- /dev/null +++ b/packages/canon/scripts/build-css.mjs @@ -0,0 +1,54 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { transform, bundle } from 'lightningcss'; +import fs from 'fs'; +import path from 'path'; + +// Check if core.css and components.css exist +const cssFiles = ['src/css/core.css', 'src/css/components.css']; +const distDir = 'dist/css'; + +cssFiles.forEach(file => { + if (!fs.existsSync(file)) { + console.error(`${file} does not exist`); + process.exit(1); + } +}); + +// Ensure the dist/css directory exists +if (!fs.existsSync(distDir)) { + fs.mkdirSync(distDir, { recursive: true }); +} + +cssFiles.forEach(file => { + let { code: bundleCode } = bundle({ + filename: file, + }); + + let { code, map } = transform({ + filename: `${distDir}/${path.basename(file)}`, + code: bundleCode, + minify: true, + sourceMap: true, + }); + + fs.writeFileSync(`${distDir}/${path.basename(file)}`, code); + fs.writeFileSync(`${distDir}/${path.basename(file)}.map`, map); + + // Clear the content of the original CSS file + fs.writeFileSync(file, ''); +}); diff --git a/packages/canon/src/css/components.css b/packages/canon/src/css/components.css index b7c4ac838a..e69de29bb2 100644 --- a/packages/canon/src/css/components.css +++ b/packages/canon/src/css/components.css @@ -1,28 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* Components */ -@import '../components/Button/styles.css'; -@import '../components/Stack/styles.css'; -@import '../components/Inline/styles.css'; -@import '../components/Grid/styles.css'; -@import '../components/Container/styles.css'; -@import '../components/Icon/styles.css'; -@import '../components/Checkbox/styles.css'; -@import '../components/Table/styles.css'; -@import '../components/Text/styles.css'; -@import '../components/Heading/styles.css'; -@import '../components/Input/styles.css'; diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css index 8419227097..e69de29bb2 100644 --- a/packages/canon/src/css/core.css +++ b/packages/canon/src/css/core.css @@ -1,127 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/* Normalize */ -@import './base.css'; -@import './utilities.css'; - -/* Light theme tokens */ - -:root { - /* Font families */ - --canon-font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol', 'Noto Color Emoji'; - --canon-font-monospace: ui-monospace, 'Menlo', 'Monaco', 'Consolas', - 'Liberation Mono', 'Courier New', monospace; - - /* Font weights */ - --canon-font-weight-regular: 400; - --canon-font-weight-bold: 600; - - /* Font sizes */ - --canon-font-size-label: 0.625rem; /* 10px */ - --canon-font-size-caption: 0.75rem; /* 12px */ - --canon-font-size-body: 0.875rem; /* 14px */ - --canon-font-size-subtitle: 1rem; /* 16px */ - --canon-font-size-title5: 1.25rem; /* 20px */ - --canon-font-size-title4: 1.5rem; /* 24px */ - --canon-font-size-title3: 2rem; /* 32px */ - --canon-font-size-title2: 3rem; /* 48px */ - --canon-font-size-title1: 4rem; /* 64px */ - --canon-font-size-display: 5.75rem; /* 92px */ - - /* Spacing */ - /* This is the spacing multiplier */ - --canon-space: 0.25rem; /* 4px */ - - /* These are the spacing scale */ - --canon-space-0_5: calc(var(--canon-space) * 0.5); /* 2px */ - --canon-space-1: var(--canon-space); /* 4px */ - --canon-space-1_5: calc(var(--canon-space) * 1.5); /* 6px */ - --canon-space-2: calc(var(--canon-space) * 2); /* 8px */ - --canon-space-3: calc(var(--canon-space) * 3); /* 12px */ - --canon-space-4: calc(var(--canon-space) * 4); /* 16px */ - --canon-space-5: calc(var(--canon-space) * 5); /* 20px */ - --canon-space-6: calc(var(--canon-space) * 6); /* 24px */ - --canon-space-7: calc(var(--canon-space) * 7); /* 28px */ - --canon-space-8: calc(var(--canon-space) * 8); /* 32px */ - --canon-space-9: calc(var(--canon-space) * 9); /* 36px */ - --canon-space-10: calc(var(--canon-space) * 10); /* 40px */ - --canon-space-11: calc(var(--canon-space) * 11); /* 44px */ - --canon-space-12: calc(var(--canon-space) * 12); /* 48px */ - --canon-space-13: calc(var(--canon-space) * 13); /* 52px */ - --canon-space-14: calc(var(--canon-space) * 14); /* 56px */ - - /* Border radius */ - --canon-border-radius-2xs: 0.125rem; /* 2px */ - --canon-border-radius-xs: 0.25rem; /* 4px */ - --canon-border-radius-sm: 0.5rem; /* 8px */ - --canon-border-radius-md: 0.75rem; /* 12px */ - --canon-border-radius-lg: 1rem; /* 16px */ - --canon-border-radius-xl: 1.25rem; /* 20px */ - --canon-border-radius-2xl: 1.5rem; /* 24px */ - - /* Container */ - --canon-container-max-width: 1200px; - --canon-container-padding: 1rem; - - /* Colors */ - --canon-accent: #000; - --canon-background: #f8f8f8; - --canon-surface-1: #fff; - --canon-surface-2: #f4f4f4; - --canon-surface-3: #f1f1f1; - - /* Borders */ - --canon-border-base: rgba(0, 0, 0, 0.1); - --canon-border-hover: rgba(0, 0, 0, 0.2); - --canon-border-warning: #e36d05; - --canon-border-error: #e22b2b; - --canon-border-selected: rgba(0, 0, 0, 0.4); - - /* States - Add more states */ - --canon-error: #f50000; - - /* Text colors */ - --canon-text-primary: #000; - --canon-text-primary-on-accent: #fff; - --canon-text-secondary: #646464; -} - -/* Dark theme tokens */ -[data-theme='dark'] { - /* Colors */ - --canon-accent: #fff; - --canon-background: #000; - --canon-surface-1: #121212; - --canon-surface-2: #1a1a1a; - - /* Borders */ - --canon-border-base: rgba(255, 255, 255, 0.2); - --canon-border-hover: rgba(255, 255, 255, 0.3); - --canon-border-warning: #f50000; - --canon-border-error: #f87503; - --canon-border-selected: rgba(255, 255, 255, 0.4); - - /* States - Add more states */ - --canon-error: #f50000; - - /* Text colors */ - --canon-text-primary: #fff; - --canon-text-primary-on-accent: #000; - --canon-text-secondary: #b3b3b3; -}