Meta: Add tailwind prefix.

NordcomInc · Sep 24, 2024 · dd8deb1 · dd8deb1
1 parent 7cdd1fd
commit dd8deb1
Show file tree

Hide file tree

Showing 22 changed files with 71 additions and 38 deletions.
diff --git a/.changeset/sixty-clocks-joke.md b/.changeset/sixty-clocks-joke.md
@@ -0,0 +1,5 @@
+---
+'@nordcom/nordstar': patch
+---
+
+-   Add tailwind prefix.
diff --git a/.eslintignore b/.eslintignore
@@ -15,3 +15,8 @@ public/
 
 vite.config.ts
 vitest.config.ts
+
+postcss.config.cjs
+postcss.config.js
+
+tailwind.config.cjs
diff --git a/docs/package.json b/docs/package.json
@@ -78,6 +78,7 @@
         "eslint-config-next": "14.2.13",
         "eslint": "8.57.1",
         "postcss": "8.4.47",
+        "postcss-import": "16.1.0",
         "prettier": "3.3.3",
         "rimraf": "6.0.1",
         "tailwindcss": "3.4.13",

diff --git a/docs/postcss.config.js b/docs/postcss.config.js
@@ -1,6 +1,7 @@
 export default {
     plugins: {
-        tailwindcss: {},
-        autoprefixer: {}
+        'postcss-import': {},
+        'tailwindcss': {},
+        'autoprefixer': {}
     }
 };
diff --git a/docs/tailwind.config.cjs b/docs/tailwind.config.cjs
@@ -1,7 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     darkMode: ['class'],
-    content: ['./src/**/*.{ts,tsx}'],
+    content: [
+        './src/**/*.{js,ts,jsx,tsx,mdx}',
+        './node_modules/@nordcom/nordstar/**/*.{js,jsx}',
+        '../node_modules/@nordcom/nordstar/**/*.{js,jsx}'
+    ],
     prefix: '',
     theme: {
         container: {
@@ -31,9 +35,6 @@ module.exports = {
                 sans: ['var(--font-sans, var(--font-fallback))', 'sans-serif'],
                 mono: ['var(--font-mono)', 'monospace']
             },
-            fontWeight: {
-                inherit: 'inherit'
-            },
             colors: {
                 foreground: {
                     DEFAULT: 'hsl(var(--color-foreground))',
@@ -64,20 +65,6 @@ module.exports = {
             },
             aspectRatio: {
                 '3/2': '3 / 2'
-            },
-            keyframes: {
-                'accordion-down': {
-                    from: { height: '0' },
-                    to: { height: 'var(--radix-accordion-content-height)' }
-                },
-                'accordion-up': {
-                    from: { height: 'var(--radix-accordion-content-height)' },
-                    to: { height: '0' }
-                }
-            },
-            animation: {
-                'accordion-down': 'accordion-down 0.2s ease-out',
-                'accordion-up': 'accordion-up 0.2s ease-out'
             }
         }
     },

diff --git a/package.json b/package.json
@@ -25,8 +25,8 @@
         "build:packages": "turbo build --filter=!@nordcom/nordstar-docs --filter=!@nordcom/nordstar-storybook",
         "build:storybook": "turbo build --filter=@nordcom/nordstar-storybook",
         "typecheck": "turbo typecheck",
-        "lint": "eslint **/src/**/*.{ts,tsx}",
-        "prettier": "prettier --check **/src/**/*.{ts,tsx}",
+        "lint": "eslint --ignore-pattern ./packages \"./**/*.{cjs,mjs,ts,tsx}\"",
+        "prettier": "prettier --check  \"./**/*.{cjs,mjs,ts,tsx,scss,json}\" \"!\\packages/**\"",
         "fix": "concurrently -i pnpm:fix:*",
         "fix:docs": "turbo fix --filter=@nordcom/nordstar-docs",
         "fix:packages": "turbo fix --filter=!@nordcom/nordstar-docs --filter=!@nordcom/nordstar-storybook",

diff --git a/packages/components/accented/src/globals.css b/packages/components/accented/src/globals.css
@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/packages/components/button/src/globals.css b/packages/components/button/src/globals.css
@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/packages/components/card/src/globals.css b/packages/components/card/src/globals.css
@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/packages/components/details/src/globals.css b/packages/components/details/src/globals.css
@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/packages/components/header/src/globals.css b/packages/components/header/src/globals.css
@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/packages/components/heading/src/globals.css b/packages/components/heading/src/globals.css
@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/packages/components/input/src/globals.css b/packages/components/input/src/globals.css
@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/packages/components/input/src/input.tsx b/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 [transform:translateY(.65rem)] group-first-of-type:-mb-0 group-focus-within:translate-y-0 group-focus-within:text-sm'
+                                    '-mb-2 text-inherit group-first-of-type:-mb-0 group-focus-within:translate-y-0 group-focus-within:text-sm [transform:translateY(.65rem)]'
                             )}
                             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 [font-size:inherit] placeholder:text-foreground-highlight placeholder:transition-opacity placeholder:[font-size:inherit]',
+                            '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]',
                             label && as !== 'textarea' && 'absolute inset-y-0 h-15 pt-3',
                             as === 'textarea' && 'h-full min-h-20 leading-normal'
                         )}

diff --git a/packages/components/label/src/globals.css b/packages/components/label/src/globals.css
@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/packages/components/view/src/globals.css b/packages/components/view/src/globals.css
@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/packages/core/nordstar/src/globals.css b/packages/core/nordstar/src/globals.css
@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/packages/core/system/src/nordstar-provider.tsx b/packages/core/system/src/nordstar-provider.tsx
@@ -124,7 +124,9 @@ export const NordstarProvider = ({ theme, children, className, ...props }: Nords
 
     return (
         <>
-            <style data-testid="style">{css}</style>
+            <style data-testid="style" suppressHydrationWarning={true}>
+                {css}
+            </style>
             <div
                 id="nordstar"
                 className={cn('contents bg-background text-[16px] font-medium text-foreground', className)}

diff --git a/plop/component/src/globals.css.hbs b/plop/component/src/globals.css.hbs
@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -2,7 +2,7 @@
 module.exports = {
     darkMode: ['class'],
     content: ['./{src,.storybook}/**/*.{ts,tsx}'],
-    prefix: '',
+    prefix: 'nordstar-',
     theme: {
         container: {
             center: true,
@@ -88,5 +88,8 @@ module.exports = {
     future: {
         hoverOnlyWhenSupported: true
     },
+    corePlugins: {
+        preflight: false
+    },
     plugins: []
 };
diff --git a/vite.config.ts b/vite.config.ts
@@ -58,8 +58,8 @@ export default defineConfig({
     root: resolve(__dirname),
     build: {
         copyPublicDir: false,
-        cssCodeSplit: true,
-        cssMinify: true,
+        cssCodeSplit: false,
+        cssMinify: false,
         emptyOutDir: true,
         minify: false,
         outDir: 'dist',