Meta: Don't engage tailwind at the component level.

.changeset/violet-rocks-kneel.md

@@ -0,0 +1,15 @@
+---
+'@nordcom/nordstar-accented': patch
+'@nordcom/nordstar-details': patch
+'@nordcom/nordstar-heading': patch
+'@nordcom/nordstar-button': patch
+'@nordcom/nordstar-header': patch
+'@nordcom/nordstar-label': patch
+'@nordcom/nordstar-card': patch
+'@nordcom/nordstar-view': patch
+'@nordcom/nordstar': patch
+'@nordcom/nordstar-system': patch
+'@nordcom/nordstar-input': patch
+---
+
+-   Don't engage tailwind at the component level.

.hintrc

@@ -19,7 +19,8 @@
                     "overflow: clip",
                     "overscroll-behavior",
                     "text-size-adjust",
-                    "user-select"
+                    "user-select",
+                    "-webkit-text-size-adjust"
                 ]
             }
         ],

packages/components/accented/src/accented.tsx

@@ -19,9 +19,10 @@ const Accented = forwardRef<'span', AccentedProps>(
     ({ as: Tag = 'span', color = 'default', className, ...props }, ref) => {
         return (
             <Tag
-                ref={ref}
                 {...props}
+                ref={ref}
                 className={cn(
+                    'contents',
                     color === 'foreground' && 'text-foreground',
                     (color === 'default' || color === 'primary') && 'text-primary',
                     color === 'secondary' && 'text-secondary',

packages/components/accented/src/index.ts

@@ -1,5 +1,3 @@
-import './globals.css';
-
 import Accented from './accented';
 
 export type { AccentedProps } from './accented';

packages/components/button/src/index.ts

@@ -1,5 +1,3 @@
-import './globals.css';
-
 import Button from './button';
 
 export type { ButtonProps } from './button';

packages/components/card/src/index.ts

@@ -1,5 +1,3 @@
-import './globals.css';
-
 import Card from './card';
 
 export type { CardDividerProps, CardProps } from './card';

packages/components/details/src/details.tsx

@@ -30,6 +30,6 @@ const Details = forwardRef<typeof Card, DetailsProps>(({ label, className, child
     );
 });
 
-Details.displayName = 'Nordstar.Details';
-
-export default Details;
+export default Object.assign(Details, {
+    displayName: 'Nordstar.Details'
+});

packages/components/details/src/index.ts

@@ -1,5 +1,3 @@
-import './globals.css';
-
 import Details from './details';
 
 export type { DetailsProps } from './details';

packages/components/header/src/header.tsx

@@ -17,7 +17,7 @@ const Header = ({ sticky = true, className, children, ...props }: HeaderProps) =
             as="header"
             borderless={true}
             className={cn(
-                'z-10 mb-3 flex min-h-20 w-full items-center justify-center rounded-none border-0 border-none bg-background/95 px-0 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/75 md:h-20',
+                '[var(--layout-page-width)]:px-0 z-10 mb-3 flex min-h-20 w-full items-center justify-center rounded-none border-0 border-none bg-background/95 px-3 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/75 md:h-20',
                 sticky &&
                     'sticky inset-0 bottom-auto z-40 border-0 border-b-2 border-solid border-background-highlight',
                 className
@@ -54,7 +54,7 @@ const Logo = forwardRef<'section', HeaderLogoProps>(({ as, className, ...props }
             ref={ref}
             draggable={false}
             className={cn(
-                '[var(--layout-page-width)]:px-0 px-3 text-lg font-extrabold uppercase *:h-full *:object-contain *:object-left [&>a]:transition-colors [&>a]:hover:text-primary',
+                'text-lg font-extrabold uppercase *:h-full *:object-contain *:object-left [&>a]:transition-colors [&>a]:hover:text-primary',
                 className
             )}
         />
@@ -80,7 +80,7 @@ const Menu = forwardRef<'nav', HeaderMenuProps>(({ as, className, overflowShadow
             ref={ref}
             draggable={false}
             className={cn(
-                'md:overflow-x [var(--layout-page-width)]:px-0 flex w-full touch-auto select-none items-center gap-6 overflow-x-auto scroll-smooth px-3 py-3 md:justify-end',
+                'md:overflow-x flex w-full touch-auto select-none items-center gap-6 overflow-x-auto scroll-smooth py-3 md:justify-end',
                 overflowShadow && 'animate-scroll-shadow-inset [animation-timeline:scroll(self_inline)]',
                 className
             )}

packages/components/header/src/index.ts

@@ -1,5 +1,3 @@
-import './globals.css';
-
 import Header from './header';
 
 export type { HeaderLogoProps, HeaderMenuLinkProps, HeaderMenuProps, HeaderProps } from './header';

packages/components/heading/src/index.ts

@@ -1,5 +1,3 @@
-import './globals.css';
-
 import Heading from './heading';
 
 export type { HeadingProps } from './heading';

packages/components/input/src/index.ts

@@ -1,5 +1,3 @@
-import './globals.css';
-
 import Input from './input';
 
 export type { InputProps } from './input';

packages/components/input/src/input.tsx

@@ -150,7 +150,7 @@ const Input = forwardRef<'input' | 'textarea', InputProps<As>>(
                                 'pointer-events-none select-none text-xs font-extrabold uppercase transition-all [transform:translateZ(0)_translateY(0)]',
                                 !placeholder &&
                                     !contents &&
-                                    '-mb-2 text-inherit group-first-of-type:-mb-0 group-focus-within:translate-y-0 group-focus-within:text-sm [transform:translateY(.65rem)]'
+                                    '-mb-2 text-inherit [transform:translateY(.65rem)] group-first-of-type:-mb-0 group-focus-within:translate-y-0 group-focus-within:text-sm'
                             )}
                             data-full-height={!placeholder && !contents}
                         >
@@ -168,7 +168,7 @@ const Input = forwardRef<'input' | 'textarea', InputProps<As>>(
                         ref={ref}
                         className={cn(
                             styles.input,
-                            'relative h-full w-full appearance-none border-0 bg-transparent p-0 text-sm leading-none outline-0 placeholder:text-foreground-highlight placeholder:transition-opacity [font-size:inherit] placeholder:[font-size:inherit]',
+                            'relative h-full w-full appearance-none border-0 bg-transparent p-0 text-sm leading-none outline-0 [font-size:inherit] placeholder:text-foreground-highlight placeholder:transition-opacity placeholder:[font-size:inherit]',
                             label && as !== 'textarea' && 'absolute inset-y-0 h-15 pt-3',
                             as === 'textarea' && 'h-full min-h-20 leading-normal'
                         )}

packages/components/input/tsconfig.json

@@ -2,13 +2,13 @@
     "$schema": "https://json.schemastore.org/tsconfig.json",
     "extends": "../../../tsconfig.json",
     "compilerOptions": {
-        "baseUrl": ".",
+        "baseUrl": "",
         "composite": true,
-        "outDir": "./dist",
-        "rootDir": "./src",
-        "typeRoots": ["./node_modules/@types", "./src/@types", "./dist/index.d.ts"]
+        "outDir": "dist",
+        "rootDir": "src",
+        "typeRoots": ["node_modules/@types", "src/@types", "dist/index.d.ts"]
     },
     "exclude": ["node_modules", "coverage", "dist", "**/*.test.*", "**/*.stories.*"],
-    "include": ["./src/@types"],
+    "include": ["src/@types"],
     "references": [{ "path": "../../../tsconfig.json" }]
 }

packages/components/label/src/index.ts

@@ -1,5 +1,3 @@
-import './globals.css';
-
 import Label from './label';
 
 export type { LabelProps } from './label';

packages/components/view/src/index.ts

@@ -1,5 +1,3 @@
-import './globals.css';
-
 import View from './view';
 
 export type { ViewProps } from './view';

packages/core/nordstar/package.json

@@ -99,6 +99,7 @@
         "@types/react-dom": "18.3.0",
         "@types/react": "18.3.9",
         "autoprefixer": "10.4.20",
+        "postcss-import": "16.1.0",
         "postcss": "8.4.47",
         "prettier": "3.3.3",
         "react-dom": "18.3.1",

packages/core/nordstar/postcss.config.cjs

@@ -3,8 +3,5 @@ const path = require('node:path');
 const process = require('node:process');
 
 module.exports = {
-    plugins: [
-        require('tailwindcss')(path.resolve(path.join(process.cwd().split('/packages')[0], 'tailwind.config.cjs'))),
-        require('autoprefixer')
-    ]
+    plugins: [require('postcss-import')(), require('tailwindcss')('tailwind.config.cjs'), require('autoprefixer')]
 };

packages/core/nordstar/src/index.ts

@@ -1,5 +1,3 @@
-import './globals.css';
-
 // Core
 export type {
     As,

packages/core/nordstar/tailwind.config.cjs

@@ -0,0 +1,98 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: ['class'],
+    content: [
+        './src/**/*.{ts,tsx}',
+        //
+        './**/@nordcom/**/dist/**/*.{js,jsx}'
+    ],
+    theme: {
+        container: {
+            center: true,
+            padding: '2rem',
+            screens: {
+                '2xl': '1400px'
+            }
+        },
+        extend: {
+            height: {
+                15: '3.75rem'
+            },
+            brightness: {
+                65: '.65'
+            },
+            transitionProperty: {
+                colors: 'color, background-color, border-color, text-decoration-color, fill, stroke, filter'
+            },
+            transitionDuration: {
+                DEFAULT: '250ms'
+            },
+            fontSize: {
+                inherit: 'inherit'
+            },
+            fontFamily: {
+                DEFAULT: ['var(--font-sans, var(--font-fallback))', 'sans-serif'],
+                heading: ['var(--font-heading, var(--font-sans, var(--font-fallback)))', 'sans-serif'],
+                body: ['var(--font-heading, var(--font-sans, var(--font-fallback)))', 'sans-serif'],
+                sans: ['var(--font-sans, var(--font-fallback))', 'sans-serif'],
+                mono: ['var(--font-mono)', 'monospace']
+            },
+            fontWeight: {
+                inherit: 'inherit'
+            },
+            colors: {
+                foreground: {
+                    DEFAULT: 'hsl(var(--color-foreground))',
+                    highlight: 'hsl(var(--color-foreground-highlight))'
+                },
+                background: {
+                    DEFAULT: 'hsl(var(--color-background))',
+                    highlight: 'hsl(var(--color-background-highlight))'
+                },
+                primary: {
+                    DEFAULT: 'hsl(var(--color-accent-primary))',
+                    foreground: 'hsl(var(--color-accent-primary-foreground))'
+                },
+                secondary: {
+                    DEFAULT: 'hsl(var(--color-accent-secondary))',
+                    foreground: 'hsl(var(--color-accent-secondary-foreground))'
+                }
+            },
+            borderWidth: {
+                1: 'var(--border-width-small, 1px)',
+                2: 'var(--border-width, 2px)',
+                4: 'var(--border-width-large, 4px)'
+            },
+            strokeWidth: {
+                1: '0.2rem',
+                2: '0.25rem',
+                3: '0.35rem'
+            },
+            aspectRatio: {
+                '3/2': '3 / 2'
+            },
+            keyframes: {
+                'scroll-shadow-inset': {
+                    from: {
+                        shadow: 'inset -10px 0px 10px -10px var(--header-scroll-shadow, rgb(155 155 155 / 0.75));'
+                    },
+                    to: {
+                        shadow: 'inset 10px 0px 10px -10px var(--header-scroll-shadow, rgb(155 155 155 / 0.75));'
+                    }
+                }
+            },
+            animation: {
+                'accordion-down': 'accordion-down 0.2s ease-out',
+                'accordion-up': 'accordion-up 0.2s ease-out'
+            },
+            overflow: {}
+        }
+    },
+    future: {
+        hoverOnlyWhenSupported: true
+    },
+    corePlugins: {
+        preflight: false
+    },
+    plugins: []
+};

packages/core/nordstar/vite.config.ts

@@ -20,6 +20,16 @@ export default mergeConfig(
                 }
             }
         },
+        css: {
+            postcss: 'postcss.config.cjs',
+            transformer: 'postcss',
+            devSourcemap: true,
+            modules: {
+                scopeBehaviour: 'local',
+                exportGlobals: true,
+                hashPrefix: 'TEST___'
+            }
+        },
         plugins: [
             codecovVitePlugin({
                 enableBundleAnalysis: !!process.env.CODECOV_TOKEN,

packages/core/nordstar/vitest.config.ts

@@ -14,20 +14,6 @@ export default mergeConfig(
         test: {
             typecheck: {
                 tsconfig: `${__dirname}/tsconfig.test.json`
-            },
-            coverage: {
-                exclude: [
-                    '__tests__/*.*',
-                    '.vitest/*.*',
-
-                    '**/__snapshots__/**/*.*',
-                    '**/__tests__/**/*.*',
-                    '**/*.d.*',
-                    '**/*.test.*',
-                    '**/utils/test/**/*.*',
-                    '**/src/**/index.*',
-                    '**/src/**/config/*.*'
-                ]
             }
         }
     })