plutonium 0.19.13 → 0.20.0

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "Core assets for the Plutonium gem",
   "type": "module",
   "main": "src/js/core.js",
@@ -30,9 +30,9 @@
     "marked": "^15.0.3"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.15",
-    "autoprefixer": "^10.4.18",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.0.9",
+    "@tailwindcss/typography": "^0.5.16",
     "concurrently": "^8.2.2",
     "cssnano": "^7.0.2",
     "esbuild": "^0.20.1",
@@ -42,7 +42,8 @@
     "postcss": "^8.4.35",
     "postcss-cli": "^11.0.0",
     "postcss-hash": "^3.0.0",
-    "tailwindcss": "^3.4.1",
+    "postcss-import": "^16.1.0",
+    "tailwindcss": "^4.0.9",
     "vitepress": "^1.4.1",
     "vitepress-plugin-mermaid": "^2.0.17"
   },
@@ -50,9 +51,9 @@
     "dev": "concurrently \"npm run css:dev\" \"npm run js:dev\"",
     "build": "npm run js:prod && npm run css:prod",
     "prepare": "npm run build",
-    "css:dev": "postcss src/css/plutonium.css -o src/build/plutonium.css --watch --dev",
+    "css:dev": "postcss src/css/plutonium.entry.css -o src/build/plutonium.css --watch --dev",
     "js:dev": "node esbuild.config.js --dev",
-    "css:prod": "postcss src/css/plutonium.css -o app/assets/plutonium.css && postcss src/css/plutonium.css -o src/dist/css/plutonium.css",
+    "css:prod": "postcss src/css/plutonium.entry.css -o app/assets/plutonium.css && postcss src/css/plutonium.entry.css -o src/dist/css/plutonium.css",
     "js:prod": "node esbuild.config.js",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",

data/postcss.config.js

@@ -1,8 +1,7 @@
 const config = {
   plugins: {
     'postcss-import': {},
-    tailwindcss: {},
-    autoprefixer: {}
+    '@tailwindcss/postcss': {}
   }
 }
 

data/src/css/easymde.css

@@ -17,7 +17,7 @@
   }
 
   .CodeMirror-scroll {
-    overflow: scroll !important;
+    overflow: scroll;
     margin-bottom: -50px;
     margin-right: -50px;
     padding-bottom: 50px;
@@ -92,7 +92,7 @@
 
   .cm-fat-cursor .CodeMirror-cursor {
     width: auto;
-    border: 0 !important;
+    border: 0;
     background: #77ee77;
   }
 
@@ -149,8 +149,8 @@
   .CodeMirror-gutter-wrapper {
     position: absolute;
     z-index: 4;
-    background: none !important;
-    border: none !important;
+    background: none;
+    border: none;
   }
 
   /* EasyMDE Container */
@@ -287,10 +287,6 @@
   }
 
   /* Syntax Highlighting */
-  /* .cm-s-easymde .cm-header {
-        @apply text-blue-600 dark:text-blue-400;
-    } */
-
   .cm-s-easymde .cm-em {
     @apply italic text-secondary-600 dark:text-secondary-400;
   }
@@ -340,14 +336,13 @@
   }
 
   .cm-formatting.cm-formatting-link {
-    @apply text-secondary-900 dark:text-secondary-400 !important;
+    @apply text-secondary-900 dark:text-secondary-400;
   }
 
   .cm-formatting.cm-formatting-link-string {
-    @apply text-secondary-900 dark:text-secondary-400 !important;
+    @apply text-secondary-900 dark:text-secondary-400;
   }
 
-
   .cm-s-easymde .cm-string {
     @apply text-accent-600 dark:text-accent-400;
   }
@@ -356,10 +351,6 @@
     @apply text-accent-600 dark:text-accent-400;
   }
 
-  /* .cm-s-easymde .cm-link {
-    @apply text-accent-600 dark:text-accent-400;
-  } */
-
   .cm-s-easymde .cm-url {
     @apply text-gray-900 dark:text-white;
   }
@@ -514,7 +505,7 @@
   .cm-fat-cursor .CodeMirror-cursor {
     @apply bg-[#7e7];
     width: auto;
-    border: 0 !important;
+    border: 0;
   }
 
   .cm-fat-cursor div.CodeMirror-cursors {
@@ -723,4 +714,9 @@
   .editor-preview-full table th {
     @apply border border-gray-300 dark:border-gray-600 p-1.5;
   }
+
+  /* Hide elements that need to be hidden without !important */
+  .ss-content .ss-list .ss-optgroup.ss-close .ss-option {
+    display: none;
+  }
 }

data/src/css/plutonium.css

@@ -2,6 +2,4 @@
 @import "easymde.css";
 @import "slim_select.css";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';

data/src/css/plutonium.entry.css

@@ -0,0 +1,22 @@
+@import "plutonium.css";
+
+@config '../../tailwind.config.js';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

data/src/css/slim_select.css

@@ -33,26 +33,30 @@
 
   @keyframes ss-valueIn {
     0% {
-      @apply scale-0 opacity-0;
+      transform: scale(0);
+      opacity: 0;
     }
 
     100% {
-      @apply scale-100 opacity-100;
+      transform: scale(1);
+      opacity: 1;
     }
   }
 
   @keyframes ss-valueOut {
     0% {
-      @apply scale-100 opacity-100;
+      transform: scale(1);
+      opacity: 1;
     }
 
     100% {
-      @apply scale-0 opacity-0;
+      transform: scale(0);
+      opacity: 0;
     }
   }
 
   .ss-hide {
-    @apply hidden !important;
+    display: none;
   }
 
   .ss-main {
@@ -146,7 +150,9 @@
   }
 
   .ss-content {
-    @apply absolute flex h-auto flex-col w-auto max-h-[300px] box-border border rounded-b-md shadow-lg border-gray-300 bg-white dark:bg-gray-700 dark:border-gray-600 transition-all duration-200 opacity-0 scale-y-0 origin-top overflow-hidden z-[10000];
+    @apply absolute flex h-auto flex-col w-auto max-h-[300px] box-border border rounded-b-md shadow-lg border-gray-300 bg-white dark:bg-gray-700 dark:border-gray-600 transition-all duration-200 opacity-0 z-[10000];
+    transform: scaleY(0);
+    transform-origin: top;
   }
 
   .ss-content.ss-relative {
@@ -158,11 +164,15 @@
   }
 
   .ss-content.ss-open-above {
-    @apply flex-col-reverse opacity-100 scale-y-100 origin-bottom rounded-t-md;
+    @apply flex-col-reverse opacity-100 rounded-t-md;
+    transform: scaleY(1);
+    transform-origin: bottom;
   }
 
   .ss-content.ss-open-below {
-    @apply opacity-100 scale-y-100 origin-top rounded-b-md;
+    @apply opacity-100 rounded-b-md;
+    transform: scaleY(1);
+    transform-origin: top;
   }
 
   .ss-content .ss-search {
@@ -201,7 +211,7 @@
   }
 
   .ss-content .ss-list .ss-optgroup.ss-close .ss-option {
-    @apply hidden !important;
+    display: none;
   }
 
   /* Update the specific no results style */

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.19.13
+  version: 0.20.0
 platform: ruby
 authors:
 - Stefan Froelich
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-03-02 00:00:00.000000000 Z
+date: 2025-03-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk
@@ -881,6 +881,7 @@ files:
 - src/css/core.css
 - src/css/easymde.css
 - src/css/plutonium.css
+- src/css/plutonium.entry.css
 - src/css/slim_select.css
 - src/js/controllers/attachment_input_controller.js
 - src/js/controllers/attachment_preview_container_controller.js