From 871f2aeb73a94cea68ed3b7b3d798858c64fa03d Mon Sep 17 00:00:00 2001 From: Max Mykal Date: Fri, 22 Aug 2025 17:59:49 -0700 Subject: [PATCH 1/4] make styles exportable --- web/common/package.json | 9 +++-- web/common/src/components/Badge/Badge.tsx | 1 + web/common/tailwind.base.config.js | 44 +++++++++++++++++++++++ web/common/tailwind.config.js | 42 +--------------------- web/common/vite.config.js | 4 +++ 5 files changed, 56 insertions(+), 44 deletions(-) create mode 100644 web/common/tailwind.base.config.js diff --git a/web/common/package.json b/web/common/package.json index 028ce6489d..ffe061f9bb 100644 --- a/web/common/package.json +++ b/web/common/package.json @@ -50,8 +50,11 @@ "default": "./dist/sqlmesh-common.umd.js" } }, - "./design": "./dist/styles/design/index.css", - "./design/*": "./dist/styles/design/*" + "./styles/*": "./dist/styles/*", + "./design/*": "./dist/styles/design/*", + "./configs/*": "./dist/configs/*", + "./tailwind.base.config.js": "./dist/configs/tailwind.base.config.js", + "./styles/tailwind.min.css": "./dist/styles/tailwind.min.css" }, "files": [ "/dist" @@ -89,4 +92,4 @@ }, "type": "module", "types": "dist/index.d.ts" -} +} \ No newline at end of file diff --git a/web/common/src/components/Badge/Badge.tsx b/web/common/src/components/Badge/Badge.tsx index 9ba338e245..c3cbb68c5f 100644 --- a/web/common/src/components/Badge/Badge.tsx +++ b/web/common/src/components/Badge/Badge.tsx @@ -21,6 +21,7 @@ export const Badge = React.forwardRef( ) diff --git a/web/common/tailwind.base.config.js b/web/common/tailwind.base.config.js new file mode 100644 index 0000000000..a004a94d01 --- /dev/null +++ b/web/common/tailwind.base.config.js @@ -0,0 +1,44 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + theme: { + colors: { + transparent: 'transparent', + white: 'var(--color-white)', + black: 'var(--color-black)', + dark: 'var(--color-dark)', + light: 'var(--color-light)', + brand: 'var(--color-brand)', + prose: 'var(--color-prose)', + badge: { + background: 'var(--color-badge-background)', + foreground: 'var(--color-badge-foreground)', + }, + }, + extend: { + borderRadius: { + '2xs': 'var(--radius-xs)', + xs: 'calc(var(--radius-xs) + 1px)', + sm: 'calc(var(--radius-xs) + 2px)', + md: 'calc(var(--radius-s))', + lg: 'calc(var(--radius-s) + 1px)', + xl: 'calc(var(--radius-s) + 2px)', + '2xl': 'calc(var(--radius-m))', + }, + fontSize: { + '2xs': 'var(--text-2xs)', + xs: 'var(--text-xs)', + s: 'var(--text-s)', + m: 'var(--text-m)', + l: 'var(--text-l)', + xl: 'var(--text-xl)', + '2xl': 'var(--text-2xl)', + '3xl': 'var(--text-3xl)', + '4xl': 'var(--text-4xl)', + }, + fontFamily: { + mono: ['var(--font-mono)'], + }, + }, + }, + plugins: [require('@tailwindcss/typography')], +} diff --git a/web/common/tailwind.config.js b/web/common/tailwind.config.js index f751f8a6b0..67fe2ac528 100644 --- a/web/common/tailwind.config.js +++ b/web/common/tailwind.config.js @@ -1,45 +1,5 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{js,ts,jsx,tsx}', './src/**/*.stories.{js,ts,jsx,tsx}'], - theme: { - colors: { - transparent: 'transparent', - white: 'var(--color-white)', - black: 'var(--color-black)', - dark: 'var(--color-dark)', - light: 'var(--color-light)', - brand: 'var(--color-brand)', - prose: 'var(--color-prose)', - badge: { - background: 'var(--color-badge-background)', - foreground: 'var(--color-badge-foreground)', - }, - }, - extend: { - borderRadius: { - '2xs': 'var(--radius-xs)', - xs: 'calc(var(--radius-xs) + 1px)', - sm: 'calc(var(--radius-xs) + 2px)', - md: 'calc(var(--radius-s))', - lg: 'calc(var(--radius-s) + 1px)', - xl: 'calc(var(--radius-s) + 2px)', - '2xl': 'calc(var(--radius-m))', - }, - fontSize: { - '2xs': 'var(--text-2xs)', - xs: 'var(--text-xs)', - s: 'var(--text-s)', - m: 'var(--text-m)', - l: 'var(--text-l)', - xl: 'var(--text-xl)', - '2xl': 'var(--text-2xl)', - '3xl': 'var(--text-3xl)', - '4xl': 'var(--text-4xl)', - }, - fontFamily: { - mono: ['var(--font-mono)'], - }, - }, - }, - plugins: [require('@tailwindcss/typography')], + presets: [require('./tailwind.base.config')], } diff --git a/web/common/vite.config.js b/web/common/vite.config.js index 65b369ab16..94577fcf81 100644 --- a/web/common/vite.config.js +++ b/web/common/vite.config.js @@ -17,6 +17,10 @@ export default defineConfig({ src: 'src/styles/design', dest: 'styles', }, + { + src: 'tailwind.base.config.js', + dest: 'configs', + }, ], }), ], From 06da688043af3bc725c8f27378e99ec575351166 Mon Sep 17 00:00:00 2001 From: Max Mykal Date: Sat, 23 Aug 2025 07:32:49 -0700 Subject: [PATCH 2/4] fix styling for dabge --- web/common/src/components/Badge/Badge.css | 4 ++++ web/common/src/components/Badge/Badge.tsx | 2 ++ web/common/src/styles/design/semantic-colors.css | 4 ---- 3 files changed, 6 insertions(+), 4 deletions(-) create mode 100644 web/common/src/components/Badge/Badge.css diff --git a/web/common/src/components/Badge/Badge.css b/web/common/src/components/Badge/Badge.css new file mode 100644 index 0000000000..029ba541f1 --- /dev/null +++ b/web/common/src/components/Badge/Badge.css @@ -0,0 +1,4 @@ +:root { + --color-badge-background: var(--color-gray-100); + --color-badge-foreground: var(--color-prose); +} diff --git a/web/common/src/components/Badge/Badge.tsx b/web/common/src/components/Badge/Badge.tsx index c3cbb68c5f..93f380bddd 100644 --- a/web/common/src/components/Badge/Badge.tsx +++ b/web/common/src/components/Badge/Badge.tsx @@ -6,6 +6,8 @@ import { type Size, type Shape } from '@/types/enums' import { cn } from '@/utils' import { badgeVariants } from './help' +import './Badge.css' + export interface BadgeProps extends React.HTMLAttributes, VariantProps { diff --git a/web/common/src/styles/design/semantic-colors.css b/web/common/src/styles/design/semantic-colors.css index c58e237539..4a58ba52ff 100644 --- a/web/common/src/styles/design/semantic-colors.css +++ b/web/common/src/styles/design/semantic-colors.css @@ -5,8 +5,4 @@ --color-dark: hsl(226, 24%, 8%); --color-brand: var(--color-tobiko); --color-prose: var(--color-gray-800); - - /* Badge */ - --color-badge-background: var(--color-gray-100); - --color-badge-foreground: var(--color-prose); } From 5c5fe171eb3b8fe97ea4522d88a38a7e6af0b5ca Mon Sep 17 00:00:00 2001 From: Max Mykal Date: Sat, 23 Aug 2025 08:47:43 -0700 Subject: [PATCH 3/4] split tsconfig --- web/common/tsconfig.base.json | 34 ++++++++++++++++++++++++++++++++++ web/common/tsconfig.build.json | 9 +++++++-- web/common/tsconfig.json | 32 ++------------------------------ web/common/vite.config.js | 8 ++++++++ 4 files changed, 51 insertions(+), 32 deletions(-) create mode 100644 web/common/tsconfig.base.json diff --git a/web/common/tsconfig.base.json b/web/common/tsconfig.base.json new file mode 100644 index 0000000000..99a214fe47 --- /dev/null +++ b/web/common/tsconfig.base.json @@ -0,0 +1,34 @@ +{ + "compilerOptions": { + "target": "ES2022", + "jsx": "react-jsx", + "module": "ESNext", + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "types": ["vite/client"], + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "noEmit": true, + + /* Linting */ + "skipLibCheck": true, + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true, + + /* Declaration */ + "declaration": true, + "declarationDir": "./dist", + "emitDeclarationOnly": false, + + /* Paths */ + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/web/common/tsconfig.build.json b/web/common/tsconfig.build.json index 80129f67c0..7eba394efd 100644 --- a/web/common/tsconfig.build.json +++ b/web/common/tsconfig.build.json @@ -1,7 +1,12 @@ { - "extends": "./tsconfig.json", + "extends": "./tsconfig.base.json", "include": ["src/**/*.ts", "src/**/*.tsx"], - "exclude": ["src/**/*.stories.tsx", "src/**/*.test.ts", "src/**/*.test.tsx"], + "exclude": [ + "**/*.test.ts", + "**/*.test.tsx", + "**/*.stories.tsx", + "tests/**/*" + ], "compilerOptions": { "noEmit": false, "allowImportingTsExtensions": false, diff --git a/web/common/tsconfig.json b/web/common/tsconfig.json index 4c17f5cf76..0e230b85f9 100644 --- a/web/common/tsconfig.json +++ b/web/common/tsconfig.json @@ -1,35 +1,7 @@ { + "extends": "./tsconfig.base.json", "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts"], "compilerOptions": { - "target": "ES2022", - "jsx": "react-jsx", - "module": "ESNext", - "lib": ["ES2022", "DOM", "DOM.Iterable"], - "types": ["vite/client", "@testing-library/jest-dom"], - - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "verbatimModuleSyntax": true, - "noEmit": true, - - /* Linting */ - "skipLibCheck": true, - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true, - - /* Declaration */ - "declaration": true, - "declarationDir": "./dist", - "emitDeclarationOnly": false, - - /* Paths */ - "baseUrl": ".", - "paths": { - "@/*": ["./src/*"] - } + "types": ["vite/client", "@testing-library/jest-dom"] } } diff --git a/web/common/vite.config.js b/web/common/vite.config.js index 94577fcf81..237bed29bd 100644 --- a/web/common/vite.config.js +++ b/web/common/vite.config.js @@ -10,6 +10,7 @@ export default defineConfig({ dts({ insertTypesEntry: true, declarationMap: true, + tsconfigPath: './tsconfig.build.json', }), viteStaticCopy({ targets: [ @@ -30,6 +31,7 @@ export default defineConfig({ }, }, build: { + cssMinify: true, lib: { entry: path.resolve(__dirname, 'src/index.ts'), name: 'sqlmesh-common', @@ -55,6 +57,12 @@ export default defineConfig({ 'class-variance-authority': 'classVarianceAuthority', '@radix-ui/react-slot': 'radixSlot', }, + assetFileNames: assetInfo => { + if (assetInfo.name && assetInfo.name.endsWith('.css')) { + return 'styles/[name].min[extname]' + } + return '[name][extname]' + }, }, }, sourcemap: process.env.NODE_ENV !== 'production', From c0b23f18b0bb683dabe2b066502bbdabbe26ea5d Mon Sep 17 00:00:00 2001 From: Max Mykal Date: Mon, 25 Aug 2025 13:16:12 -0700 Subject: [PATCH 4/4] clean up --- web/common/package.json | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/web/common/package.json b/web/common/package.json index ffe061f9bb..5ad2c29389 100644 --- a/web/common/package.json +++ b/web/common/package.json @@ -52,9 +52,7 @@ }, "./styles/*": "./dist/styles/*", "./design/*": "./dist/styles/design/*", - "./configs/*": "./dist/configs/*", - "./tailwind.base.config.js": "./dist/configs/tailwind.base.config.js", - "./styles/tailwind.min.css": "./dist/styles/tailwind.min.css" + "./configs/*": "./dist/configs/*" }, "files": [ "/dist" @@ -92,4 +90,4 @@ }, "type": "module", "types": "dist/index.d.ts" -} \ No newline at end of file +}