simplify CSS and Tailwind layers

LexSwed · Aug 13, 2024 · eda7ea5 · eda7ea5
1 parent 014acfc
commit eda7ea5
Show file tree

Hide file tree

Showing 15 changed files with 167 additions and 152 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/config/global.css b/packages/config/global.css
@@ -1,10 +1,8 @@
-@layer tw-base, tw-components, tw-utilities;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-@import "tailwindcss/base" layer(tw-base);
-@import "tailwindcss/components" layer(tw-components);
-@import "tailwindcss/utilities" layer(tw-utilities);
-
-@layer tw-base {
+@layer base {
   :root {
     --nou-font-sans: "Rubik Variable";
 
@@ -30,7 +28,7 @@
   }
 }
 
-@layer tw-base {
+@layer base {
   :root {
     --nou-white: 0 0% 100%;
     --nou-black: 0 0% 0%;
@@ -73,7 +71,7 @@
   }
 }
 
-@layer tw-utilities {
+@layer utilities {
   .scrollbar-none {
     -ms-overflow-style: none;
     scrollbar-width: none;

diff --git a/packages/config/theme/generate.js b/packages/config/theme/generate.js
@@ -23,7 +23,7 @@ const darkColors = generateHslThemeFromMaterialThemeBuilder(mdTheme.schemes.dark
 const baseCss = await fs.readFile(new URL("./base.css", import.meta.url));
 
 const themeCss = /* css */ `
-@layer tw-base {
+@layer base {
   :root,
   ::backdrop,
   ::selection {

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -22,23 +22,23 @@
 		"@solid-primitives/presence": "^0.0.6",
 		"@solid-primitives/refs": "^1.0.8",
 		"@solid-primitives/rootless": "^1.4.5",
-		"@solidjs/router": "^0.14.1",
+		"@solidjs/router": "^0.14.2",
 		"class-variance-authority": "^0.7.0",
 		"solid-js": "^1.8.20",
-		"tailwind-merge": "^2.5.1"
+		"tailwind-merge": "^2.5.2"
 	},
 	"devDependencies": {
 		"@nou/config": "^1.0.0",
-		"@storybook/addon-essentials": "^8.2.8",
-		"@storybook/addon-interactions": "^8.2.8",
-		"@storybook/addon-links": "^8.2.8",
-		"@storybook/blocks": "^8.2.8",
-		"@storybook/docs-tools": "^8.2.8",
-		"@storybook/test": "^8.2.8",
+		"@storybook/addon-essentials": "^8.2.9",
+		"@storybook/addon-interactions": "^8.2.9",
+		"@storybook/addon-links": "^8.2.9",
+		"@storybook/blocks": "^8.2.9",
+		"@storybook/docs-tools": "^8.2.9",
+		"@storybook/test": "^8.2.9",
 		"autoprefixer": "^10.4.20",
 		"postcss": "^8.4.41",
 		"remark-gfm": "^4.0.0",
-		"storybook": "^8.2.8",
+		"storybook": "^8.2.9",
 		"storybook-solidjs": "^1.0.0-beta.2",
 		"storybook-solidjs-vite": "^1.0.0-beta.2",
 		"tailwindcss": "^3.4.9",

diff --git a/packages/ui/src/button/button.module.css b/packages/ui/src/button/button.module.css
@@ -1,10 +1,12 @@
+@tailwind components;
+
 @property --btn-ghost-to {
   syntax: "<percentage>";
   inherits: true;
   initial-value: 0%;
 }
 
-@layer tw-components {
+@layer components {
   .button {
     @apply transition;
   }

diff --git a/packages/ui/src/form-field/form-field.module.css b/packages/ui/src/form-field/form-field.module.css
@@ -1,4 +1,6 @@
-@layer tw-components {
+@tailwind components;
+
+@layer components {
   .field {
     --border-color: theme("colors.outline");
     --border-scale-y: 0.75;

diff --git a/packages/ui/src/menu/menu.module.css b/packages/ui/src/menu/menu.module.css
@@ -1,4 +1,6 @@
-@layer tw-components {
+@tailwind components;
+
+@layer components {
   .listItem {
     display: flex;
     align-items: center;

diff --git a/packages/ui/src/picker/picker.module.css b/packages/ui/src/picker/picker.module.css
@@ -1,4 +1,6 @@
-@layer tw-components {
+@tailwind components;
+
+@layer components {
   .input {
     appearance: base-select;
     width: 100%;

diff --git a/packages/ui/src/popover/popover.module.css b/packages/ui/src/popover/popover.module.css
@@ -1,11 +1,14 @@
+@tailwind components;
+@tailwind utilities;
+
 /* Avoid consumers overriding this for all states with e.g. display: flex */
-@layer tw-utilities {
+@layer utilities {
   .popover:not(:popover-open) {
     display: none;
   }
 }
 
-@layer tw-components {
+@layer components {
   .popover {
     background-color: theme("colors.surface");
     color: theme("colors.on-surface");

diff --git a/packages/ui/src/radio/radio-card.module.css b/packages/ui/src/radio/radio-card.module.css
@@ -1,4 +1,6 @@
-@layer tw-components {
+@tailwind components;
+
+@layer components {
   .card {
     position: relative;
     flex-shrink: 0;

diff --git a/packages/ui/src/radio/segmented-button.module.css b/packages/ui/src/radio/segmented-button.module.css
@@ -1,6 +1,6 @@
 @tailwind components;
 
-@layer tw-components {
+@layer components {
   .button {
     display: flex;
     align-items: center;

diff --git a/packages/ui/src/text-field/text-field.module.css b/packages/ui/src/text-field/text-field.module.css
@@ -1,4 +1,6 @@
-@layer tw-components {
+@tailwind components;
+
+@layer components {
   .input {
     flex-basis: 100%;
     background: transparent;

diff --git a/packages/ui/src/toast/toast.module.css b/packages/ui/src/toast/toast.module.css
@@ -1,4 +1,6 @@
-@layer tw-components {
+@tailwind components;
+
+@layer components {
   .toast {
     transition:
       opacity 0.24s ease,

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -26,7 +26,7 @@
 		"@solid-primitives/refs": "^1.0.8",
 		"@solid-primitives/storage": "^4.0.0",
 		"@solidjs/meta": "^0.29.4",
-		"@solidjs/router": "^0.14.1",
+		"@solidjs/router": "^0.14.2",
 		"@solidjs/start": "^1.0.6",
 		"arctic": "^1.9.2",
 		"better-sqlite3": "^11.1.2",

diff --git a/packages/web/src/lib/species-selector/species-selector.module.css b/packages/web/src/lib/species-selector/species-selector.module.css
@@ -1,6 +1,6 @@
-@import "tailwindcss/components" layer(tw-components);
+@tailwind components;
 
-@layer tw-components {
+@layer components {
   .genderSwitch {
     &:has(input[value="male"]:checked) {
       & .genderSwitchCard:has(input[value="male"]) {