engineering/tpmjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2.2k

fix: enable Biome CSS tailwindDirectives for @apply parsing

Browse source 
- Add css.parser.tailwindDirectives to biome config
- Auto-format CSS files with new parser settings
This commit is contained in:
Ajax Davis 2026-01-09 23:35:53 +10:00
parent 52c7d8d844
commit b889d64faf
4 changed files with 47 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

10
apps/tutorial/src/app/globals.css
View file

@ -58,12 +58,16 @@
}
.glow-cyan {
box-shadow: 0 0 20px hsl(var(--accent-cyan) / 0.3), 0 0 40px hsl(var(--accent-cyan) / 0.2), 0 0
60px hsl(var(--accent-cyan) / 0.1);
box-shadow:
0 0 20px hsl(var(--accent-cyan) / 0.3),
0 0 40px hsl(var(--accent-cyan) / 0.2),
0 0 60px hsl(var(--accent-cyan) / 0.1);
}
.glow-purple {
box-shadow: 0 0 20px hsl(var(--accent-purple) / 0.3), 0 0 40px hsl(var(--accent-purple) / 0.2),
box-shadow:
0 0 20px hsl(var(--accent-purple) / 0.3),
0 0 40px hsl(var(--accent-purple) / 0.2),
0 0 60px hsl(var(--accent-purple) / 0.1);
}

31
apps/web/src/app/globals.css
View file

@ -174,14 +174,17 @@
body {
@apply bg-background text-foreground;
font-family: var(--font-sans);
font-feature-settings: "rlig" 1, "calt" 1;
font-feature-settings:
"rlig" 1,
"calt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Grid/Blueprint background patterns */
.grid-background {
background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
background-image:
linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
background-position: -1px -1px;
@ -195,13 +198,16 @@
.blueprint-background {
background-color: hsl(var(--background));
/* Major grid lines (4x size) */
background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
background-image:
linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px),
/* Minor grid lines (1x size) */
linear-gradient(hsl(var(--grid-color) / 0.3) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--grid-color) / 0.3) 1px, transparent 1px);
background-size: calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
calc(var(--grid-size) * 4) calc(var(--grid-size) * 4), var(--grid-size) var(--grid-size),
background-size:
calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
var(--grid-size) var(--grid-size),
var(--grid-size) var(--grid-size);
}
@ -266,11 +272,15 @@
/* Shadow utilities - Blueprint aesthetic */
.shadow-blueprint {
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03), 0 0 0 1px rgb(0 0 0 / 0.02);
box-shadow:
0 1px 2px 0 rgb(0 0 0 / 0.03),
0 0 0 1px rgb(0 0 0 / 0.02);
}
.shadow-blueprint-hover {
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.05), 0 0 0 1px rgb(0 0 0 / 0.03);
box-shadow:
0 2px 4px 0 rgb(0 0 0 / 0.05),
0 0 0 1px rgb(0 0 0 / 0.03);
}
/* Transition presets */
@ -471,7 +481,12 @@
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, hsl(var(--brutalist-accent) / 0.3), transparent);
background: linear-gradient(
90deg,
transparent,
hsl(var(--brutalist-accent) / 0.3),
transparent
);
animation: scanline 30s linear infinite;
pointer-events: none;
z-index: 1;

6
packages/config/biome.json
View file

@ -56,6 +56,12 @@
"semicolons": "always"
}
},
"css": {
"parser": {
"cssModules": true,
"tailwindDirectives": true
}
},
"overrides": [
{
"includes": ["**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx"],

16
packages/storybook/styles/globals.css
View file

@ -135,14 +135,17 @@
body {
@apply bg-background text-foreground;
font-family: var(--font-sans);
font-feature-settings: "rlig" 1, "calt" 1;
font-feature-settings:
"rlig" 1,
"calt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Grid/Blueprint background patterns */
.grid-background {
background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
background-image:
linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
background-position: -1px -1px;
@ -156,13 +159,16 @@
.blueprint-background {
background-color: hsl(var(--background));
/* Major grid lines (4x size) */
background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
background-image:
linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px),
/* Minor grid lines (1x size) */
linear-gradient(hsl(var(--grid-color) / 0.3) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--grid-color) / 0.3) 1px, transparent 1px);
background-size: calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
calc(var(--grid-size) * 4) calc(var(--grid-size) * 4), var(--grid-size) var(--grid-size),
background-size:
calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
var(--grid-size) var(--grid-size),
var(--grid-size) var(--grid-size);
}