Skip to content

Commit 87f724a

Browse files
mykalmaxmykalmax
authored
chore(web_common): move badge related css vars inside component and make css exportable (#5216)
1 parent ae4cd03 commit 87f724a

File tree

10 files changed

+110
-79
lines changed

10 files changed

+110
-79
lines changed

‎web/common/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,9 @@
5050
"default": "./dist/sqlmesh-common.umd.js"
5151
}
5252
},
53-
"./design": "./dist/styles/design/index.css",
54-
"./design/*": "./dist/styles/design/*"
53+
"./styles/*": "./dist/styles/*",
54+
"./design/*": "./dist/styles/design/*",
55+
"./configs/*": "./dist/configs/*"
5556
},
5657
"files": [
5758
"/dist"

‎web/common/src/components/Badge/Badge.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:root {
2+
--color-badge-background: var(--color-gray-100);
3+
--color-badge-foreground: var(--color-prose);
4+
}

‎web/common/src/components/Badge/Badge.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { type Size, type Shape } from '@/types/enums'
66
import { cn } from '@/utils'
77
import { badgeVariants } from './help'
88

9+
import './Badge.css'
10+
911
export interface BadgeProps
1012
extends React.HTMLAttributes<HTMLSpanElement>,
1113
VariantProps<typeof badgeVariants> {
@@ -21,6 +23,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
2123
<Comp
2224
className={cn(badgeVariants({ size, shape, className }))}
2325
ref={ref}
26+
data-component="Badge"
2427
{...props}
2528
/>
2629
)

‎web/common/src/styles/design/semantic-colors.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,4 @@
55
--color-dark: hsl(226, 24%, 8%);
66
--color-brand: var(--color-tobiko);
77
--color-prose: var(--color-gray-800);
8-
9-
/* Badge */
10-
--color-badge-background: var(--color-gray-100);
11-
--color-badge-foreground: var(--color-prose);
128
}

‎web/common/tailwind.base.config.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
theme: {
4+
colors: {
5+
transparent: 'transparent',
6+
white: 'var(--color-white)',
7+
black: 'var(--color-black)',
8+
dark: 'var(--color-dark)',
9+
light: 'var(--color-light)',
10+
brand: 'var(--color-brand)',
11+
prose: 'var(--color-prose)',
12+
badge: {
13+
background: 'var(--color-badge-background)',
14+
foreground: 'var(--color-badge-foreground)',
15+
},
16+
},
17+
extend: {
18+
borderRadius: {
19+
'2xs': 'var(--radius-xs)',
20+
xs: 'calc(var(--radius-xs) + 1px)',
21+
sm: 'calc(var(--radius-xs) + 2px)',
22+
md: 'calc(var(--radius-s))',
23+
lg: 'calc(var(--radius-s) + 1px)',
24+
xl: 'calc(var(--radius-s) + 2px)',
25+
'2xl': 'calc(var(--radius-m))',
26+
},
27+
fontSize: {
28+
'2xs': 'var(--text-2xs)',
29+
xs: 'var(--text-xs)',
30+
s: 'var(--text-s)',
31+
m: 'var(--text-m)',
32+
l: 'var(--text-l)',
33+
xl: 'var(--text-xl)',
34+
'2xl': 'var(--text-2xl)',
35+
'3xl': 'var(--text-3xl)',
36+
'4xl': 'var(--text-4xl)',
37+
},
38+
fontFamily: {
39+
mono: ['var(--font-mono)'],
40+
},
41+
},
42+
},
43+
plugins: [require('@tailwindcss/typography')],
44+
}

‎web/common/tailwind.config.js‎

Lines changed: 1 addition & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,5 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
33
content: ['./src/**/*.{js,ts,jsx,tsx}', './src/**/*.stories.{js,ts,jsx,tsx}'],
4-
theme: {
5-
colors: {
6-
transparent: 'transparent',
7-
white: 'var(--color-white)',
8-
black: 'var(--color-black)',
9-
dark: 'var(--color-dark)',
10-
light: 'var(--color-light)',
11-
brand: 'var(--color-brand)',
12-
prose: 'var(--color-prose)',
13-
badge: {
14-
background: 'var(--color-badge-background)',
15-
foreground: 'var(--color-badge-foreground)',
16-
},
17-
},
18-
extend: {
19-
borderRadius: {
20-
'2xs': 'var(--radius-xs)',
21-
xs: 'calc(var(--radius-xs) + 1px)',
22-
sm: 'calc(var(--radius-xs) + 2px)',
23-
md: 'calc(var(--radius-s))',
24-
lg: 'calc(var(--radius-s) + 1px)',
25-
xl: 'calc(var(--radius-s) + 2px)',
26-
'2xl': 'calc(var(--radius-m))',
27-
},
28-
fontSize: {
29-
'2xs': 'var(--text-2xs)',
30-
xs: 'var(--text-xs)',
31-
s: 'var(--text-s)',
32-
m: 'var(--text-m)',
33-
l: 'var(--text-l)',
34-
xl: 'var(--text-xl)',
35-
'2xl': 'var(--text-2xl)',
36-
'3xl': 'var(--text-3xl)',
37-
'4xl': 'var(--text-4xl)',
38-
},
39-
fontFamily: {
40-
mono: ['var(--font-mono)'],
41-
},
42-
},
43-
},
44-
plugins: [require('@tailwindcss/typography')],
4+
presets: [require('./tailwind.base.config')],
455
}

‎web/common/tsconfig.base.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2022",
4+
"jsx": "react-jsx",
5+
"module": "ESNext",
6+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
7+
"types": ["vite/client"],
8+
9+
/* Bundler mode */
10+
"moduleResolution": "bundler",
11+
"allowImportingTsExtensions": true,
12+
"verbatimModuleSyntax": true,
13+
"noEmit": true,
14+
15+
/* Linting */
16+
"skipLibCheck": true,
17+
"strict": true,
18+
"noUnusedLocals": true,
19+
"noUnusedParameters": true,
20+
"noFallthroughCasesInSwitch": true,
21+
"noUncheckedSideEffectImports": true,
22+
23+
/* Declaration */
24+
"declaration": true,
25+
"declarationDir": "./dist",
26+
"emitDeclarationOnly": false,
27+
28+
/* Paths */
29+
"baseUrl": ".",
30+
"paths": {
31+
"@/*": ["./src/*"]
32+
}
33+
}
34+
}

‎web/common/tsconfig.build.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
{
2-
"extends": "./tsconfig.json",
2+
"extends": "./tsconfig.base.json",
33
"include": ["src/**/*.ts", "src/**/*.tsx"],
4-
"exclude": ["src/**/*.stories.tsx", "src/**/*.test.ts", "src/**/*.test.tsx"],
4+
"exclude": [
5+
"**/*.test.ts",
6+
"**/*.test.tsx",
7+
"**/*.stories.tsx",
8+
"tests/**/*"
9+
],
510
"compilerOptions": {
611
"noEmit": false,
712
"allowImportingTsExtensions": false,

‎web/common/tsconfig.json‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,7 @@
11
{
2+
"extends": "./tsconfig.base.json",
23
"include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts"],
34
"compilerOptions": {
4-
"target": "ES2022",
5-
"jsx": "react-jsx",
6-
"module": "ESNext",
7-
"lib": ["ES2022", "DOM", "DOM.Iterable"],
8-
"types": ["vite/client", "@testing-library/jest-dom"],
9-
10-
/* Bundler mode */
11-
"moduleResolution": "bundler",
12-
"allowImportingTsExtensions": true,
13-
"verbatimModuleSyntax": true,
14-
"noEmit": true,
15-
16-
/* Linting */
17-
"skipLibCheck": true,
18-
"strict": true,
19-
"noUnusedLocals": true,
20-
"noUnusedParameters": true,
21-
"noFallthroughCasesInSwitch": true,
22-
"noUncheckedSideEffectImports": true,
23-
24-
/* Declaration */
25-
"declaration": true,
26-
"declarationDir": "./dist",
27-
"emitDeclarationOnly": false,
28-
29-
/* Paths */
30-
"baseUrl": ".",
31-
"paths": {
32-
"@/*": ["./src/*"]
33-
}
5+
"types": ["vite/client", "@testing-library/jest-dom"]
346
}
357
}

‎web/common/vite.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,18 @@ export default defineConfig({
1010
dts({
1111
insertTypesEntry: true,
1212
declarationMap: true,
13+
tsconfigPath: './tsconfig.build.json',
1314
}),
1415
viteStaticCopy({
1516
targets: [
1617
{
1718
src: 'src/styles/design',
1819
dest: 'styles',
1920
},
21+
{
22+
src: 'tailwind.base.config.js',
23+
dest: 'configs',
24+
},
2025
],
2126
}),
2227
],
@@ -26,6 +31,7 @@ export default defineConfig({
2631
},
2732
},
2833
build: {
34+
cssMinify: true,
2935
lib: {
3036
entry: path.resolve(__dirname, 'src/index.ts'),
3137
name: 'sqlmesh-common',
@@ -51,6 +57,12 @@ export default defineConfig({
5157
'class-variance-authority': 'classVarianceAuthority',
5258
'@radix-ui/react-slot': 'radixSlot',
5359
},
60+
assetFileNames: assetInfo => {
61+
if (assetInfo.name && assetInfo.name.endsWith('.css')) {
62+
return 'styles/[name].min[extname]'
63+
}
64+
return '[name][extname]'
65+
},
5466
},
5567
},
5668
sourcemap: process.env.NODE_ENV !== 'production',

0 commit comments

Comments
 (0)