[WEB-5198] chore: consolidate global styles #7986
Conversation
anmolsinghbhatia
requested review from
aaryan610,
lifeiscontent,
prateekshourya29,
sriramveeraghanta and
vamsikrishnamathala
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughConsolidates per-app global CSS into a centralized package ( Changes
Sequence Diagram(s)sequenceDiagram
participant App as App layout (runtime)
participant Global as @plane/tailwind-config/global.css
participant Index as styles/index.css
participant Modules as styles/* (themes, editor, components)
participant PostCSS as postcss-import (build)
App->>Global: import global.css
Global->>Index: @import "styles/index.css"
Index->>Modules: @import modules (fonts, base, themes, editor, components)
Note right of PostCSS: During build, postcss-import\nresolves "@plane/" imports via custom resolver
PostCSS-->>Index: resolve @plane/ paths to package files
Modules-->>App: aggregated CSS output served to app
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull Request Overview
This PR consolidates all global styles, fonts, and theme definitions into the @plane/tailwind-config package, removing duplicated CSS code across the web, space, and admin applications.
Key Changes:
- Centralized theme variables, fonts, and component styles into modular CSS files within
@plane/tailwind-config - Removed duplicate
globals.cssfiles from individual apps - Updated all app entry points to import from the centralized
@plane/tailwind-config/global.css
Reviewed Changes
Copilot reviewed 33 out of 42 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/styles/globals.css | Removed entire file (696 lines) as styles moved to centralized package |
| packages/tailwind-config/styles/* | New modular CSS structure with separated concerns (themes, base, components, editor) |
| packages/tailwind-config/global.css | New entry point that imports all modular styles and Tailwind directives |
| packages/tailwind-config/postcss.config.js | Added postcss-import plugin for handling @import statements |
| packages/tailwind-config/package.json | Added postcss-import dependency |
| apps/web/styles/globals.css | Removed entire file (972 lines) replaced by centralized styles |
| apps/web/app/layout.tsx | Updated import to use centralized global.css |
| apps/web/app/(all)/layout.tsx | Removed separate emoji and command-palette imports (now in global.css) |
| apps/space/styles/globals.css | Removed entire file (497 lines) replaced by centralized styles |
| apps/space/app/layout.tsx | Updated import to use centralized global.css |
| apps/admin/styles/globals.css | Removed entire file (396 lines) replaced by centralized styles |
| apps/admin/app/layout.tsx | Updated import to use centralized global.css |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (1)
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (1)
packages/tailwind-config/styles/editor/index.css (1)
1-5: Consider whether this aggregator file is needed.This file aggregates editor styles, but
packages/tailwind-config/styles/index.css(lines 18-22) imports the editor styles directly instead of using this aggregator. This creates a maintenance burden where both files need to be kept in sync.Consider one of these approaches:
- Preferred: Modify
styles/index.cssto import this aggregator instead:-@import "./editor/variables.css"; -@import "./editor/editor.css"; -@import "./editor/table.css"; -@import "./editor/github-dark.css"; -@import "./editor/drag-drop.css"; +@import "./editor/index.css";
- Alternative: Remove this file if the direct imports in
styles/index.cssare intentional for flattening the import tree.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (9)
packages/tailwind-config/fonts/Inter/inter-v13-latin-200.woff2is excluded by!**/*.woff2packages/tailwind-config/fonts/Inter/inter-v13-latin-300.woff2is excluded by!**/*.woff2packages/tailwind-config/fonts/Inter/inter-v13-latin-500.woff2is excluded by!**/*.woff2packages/tailwind-config/fonts/Inter/inter-v13-latin-600.woff2is excluded by!**/*.woff2packages/tailwind-config/fonts/Inter/inter-v13-latin-700.woff2is excluded by!**/*.woff2packages/tailwind-config/fonts/Inter/inter-v13-latin-800.woff2is excluded by!**/*.woff2packages/tailwind-config/fonts/Inter/inter-v13-latin-regular.woff2is excluded by!**/*.woff2packages/tailwind-config/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2is excluded by!**/*.woff2pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (33)
apps/admin/app/layout.tsx(1 hunks)apps/admin/styles/globals.css(0 hunks)apps/space/app/layout.tsx(1 hunks)apps/space/styles/globals.css(0 hunks)apps/web/app/(all)/layout.tsx(1 hunks)apps/web/app/layout.tsx(1 hunks)apps/web/styles/globals.css(0 hunks)packages/tailwind-config/global.css(1 hunks)packages/tailwind-config/package.json(1 hunks)packages/tailwind-config/postcss.config.js(1 hunks)packages/tailwind-config/styles/app-specific/web-animations.css(1 hunks)packages/tailwind-config/styles/base/reset.css(1 hunks)packages/tailwind-config/styles/base/scrollbar.css(1 hunks)packages/tailwind-config/styles/base/typography.css(1 hunks)packages/tailwind-config/styles/components/command-palette.css(1 hunks)packages/tailwind-config/styles/components/emoji-picker.css(2 hunks)packages/tailwind-config/styles/components/spinner.css(1 hunks)packages/tailwind-config/styles/components/tags-input.css(1 hunks)packages/tailwind-config/styles/components/utility-classes.css(1 hunks)packages/tailwind-config/styles/editor/drag-drop.css(1 hunks)packages/tailwind-config/styles/editor/editor.css(1 hunks)packages/tailwind-config/styles/editor/github-dark.css(1 hunks)packages/tailwind-config/styles/editor/index.css(1 hunks)packages/tailwind-config/styles/editor/table.css(1 hunks)packages/tailwind-config/styles/editor/tailwind.css(1 hunks)packages/tailwind-config/styles/editor/variables.css(1 hunks)packages/tailwind-config/styles/fonts.css(1 hunks)packages/tailwind-config/styles/index.css(1 hunks)packages/tailwind-config/styles/themes/dark.css(1 hunks)packages/tailwind-config/styles/themes/editor-colors.css(1 hunks)packages/tailwind-config/styles/themes/light.css(1 hunks)packages/tailwind-config/styles/themes/variables.css(1 hunks)packages/ui/styles/globals.css(0 hunks)
💤 Files with no reviewable changes (4)
- apps/web/styles/globals.css
- packages/ui/styles/globals.css
- apps/space/styles/globals.css
- apps/admin/styles/globals.css
🧰 Additional context used
🪛 Biome (2.1.2)
packages/tailwind-config/styles/editor/drag-drop.css
[error] 106-106: Unknown type selector is not allowed.
See MDN web docs for more details.
Consider replacing the unknown type selector with valid one.
(lint/correctness/noUnknownTypeSelector)
packages/tailwind-config/styles/editor/editor.css
[error] 153-153: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
position is already defined here.
Remove or rename the duplicate property to ensure consistent styling.
(lint/suspicious/noDuplicateProperties)
[error] 229-229: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
cursor is already defined here.
Remove or rename the duplicate property to ensure consistent styling.
(lint/suspicious/noDuplicateProperties)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: Build and lint web apps
🔇 Additional comments (18)
packages/tailwind-config/styles/editor/tailwind.css (1)
1-3: LGTM!Standard Tailwind directives properly configured for the editor layer.
apps/web/app/(all)/layout.tsx (1)
5-7: Verify removed styles are migrated to centralized global.css.Line 6's comment indicates command palette and emoji styles are now in the centralized global.css, but confirm that @plane/tailwind-config/global.css actually imports all necessary component styles (emoji-picker.css, command palette styles, etc.).
packages/tailwind-config/styles/components/emoji-picker.css (1)
54-67: LGTM!The added search container styling (lines 54–67) complements the existing emoji picker styles without conflicts, providing targeted customizations for the search input, placeholder, and icon.
packages/tailwind-config/styles/themes/editor-colors.css (1)
1-50: LGTM!Proper use of Tailwind @layer base and theme-aware CSS variables for editor colors. Light/dark overrides are well-structured.
packages/tailwind-config/styles/fonts.css (1)
1-89: Verify PostCSS import resolution for @plane/ namespace paths.The font-face declarations use
~@plane/tailwind-config/fonts/...paths. This requires proper PostCSS configuration to resolve the@plane/package namespace. postcss-import should be the first plugin in your PostCSS chain so other plugins work on the combined AST, and you'll need a custom resolver or module alias configuration to handle the@plane/namespace. Verify your PostCSS config (or build tool config) explicitly handles this resolution.packages/tailwind-config/styles/components/spinner.css (1)
1-129: LGTM!Properly structured spinner animation with vendor prefixes and appropriate timing. The 12-bar rotation pattern with cascading delays creates the desired visual effect.
packages/tailwind-config/styles/app-specific/web-animations.css (1)
1-161: LGTM!Well-organized web-specific animations using Tailwind's @layer utilities. Animation definitions are clear and the corresponding utility classes (animate-slide-up, animate-text-slide-in, etc.) follow conventions.
apps/web/app/layout.tsx (1)
5-5: LGTM! Import path updated to centralized styles.The change correctly points to the new centralized global stylesheet in the tailwind-config package, aligning with the PR's objective to eliminate style duplication.
apps/space/app/layout.tsx (1)
5-5: LGTM! Consistent with centralized styling approach.The import path change correctly aligns with other app layouts (web, admin) in using the centralized global stylesheet.
apps/admin/app/layout.tsx (1)
6-6: LGTM! Completes the centralization across all apps.All three apps (web, space, admin) now consistently import from the centralized tailwind-config package.
packages/tailwind-config/styles/index.css (1)
1-22: Well-organized modular structure.The file effectively organizes styles into logical categories (fonts, base, themes, components, app-specific, editor). The import order ensures proper CSS cascade.
packages/tailwind-config/styles/base/reset.css (1)
1-17: CSS variable--color-text-100is properly defined and the usage syntax is valid.The variable is defined across the theme files (variables.css line 43, light.css lines 42 and 100, dark.css lines 80 and 137) with RGB values. The
rgba(var(--color-text-100))pattern is valid CSS and widely supported for legacy rgba() syntax with 3-component custom properties.packages/tailwind-config/global.css (1)
1-3: Minimal, clean entry point for centralized styles.The global CSS file appropriately delegates detailed styling to modular imports, reducing complexity at the entry point. Ensure that
./styles/index.cssaggregates all required styles (fonts, themes, editor, etc.) and is imported by all app layout files.packages/tailwind-config/styles/editor/github-dark.css (1)
1-85: Comprehensive syntax highlighting theme—well-organized and complete.The GitHub-dark theme is well-structured with clear color mappings for all major syntax element types. All styles are appropriate for a fixed, immutable theme.
packages/tailwind-config/styles/editor/table.css (1)
1-216: Comprehensive table editor styles—well-organized with clear visual hierarchy.The table styling is thorough, covering structure, interactions (selection, resizing, insertion), and visual feedback. Proper use of CSS custom properties maintains theme consistency. Sections are clearly demarcated with comments.
packages/tailwind-config/styles/themes/light.css (1)
1-132: All referenced CSS custom properties are defined—no issues found.Verification confirms that
--color-primary-200,--color-error-200,--color-error-10, and--color-error-30are all properly defined inpackages/tailwind-config/styles/themes/variables.css. The light theme file is well-structured with proper @layer base organization, clean [data-theme] selectors, and correct hierarchical token dependencies.packages/tailwind-config/styles/editor/editor.css (2)
1-508: The review comment is based on an incorrect assumption about the file content.The file
packages/tailwind-config/styles/editor/editor.css(under review) contains only CSS rule definitions—it has no@importstatements. The CSS imports are handled separately bypackages/tailwind-config/styles/editor/index.cssandpackages/tailwind-config/styles/index.css.The PostCSS configuration itself is correct and properly configured:
postcss-importv16.1.1 is listed as a dependencypostcss.config.jsexists withpostcss-importas the first plugin (correct ordering)- Custom resolver for
@plane/namespace is implemented withrequire.resolve()However, these details are not relevant to the file under review, as
editor.cssdoes not perform any imports. The review's concern about verifying PostCSS configuration for@plane/imports in this specific file is misplaced.Likely an incorrect or invalid review comment.
1-50: The referenced CSS custom properties are defined in a parent theme layer, not missing.All 6 properties that editor.css references are actually defined in
packages/tailwind-config/styles/themes/variables.css(and per-theme overrides inlight.cssanddark.css), not in the editor's ownvariables.cssfile. This represents an implicit cross-layer dependency rather than undefined properties. The properties resolve correctly if the theme CSS is loaded before or alongside editor styles in the cascade. The architecture separates editor-specific variables from theme-level color variables, which is intentional. However, this implicit dependency could be made explicit by either documenting the requirement or ensuring theme imports are part of the editor stylesheet bundle.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (6)
packages/tailwind-config/config/animations.js (1)
7-14: Use transforms instead of left/right for smoother, GPU-accelerated animations; unify naming.left/right property animation can jank; prefer translateX. Also standardize to kebab-case, and keep camelCase aliases for backward compatibility.
module.exports = { // Toast notification animations - leftToaster: { - "0%": { left: "-20rem" }, - "100%": { left: "0" }, - }, - rightToaster: { - "0%": { right: "-20rem" }, - "100%": { right: "0" }, - }, + // keep camelCase aliases for b/c but switch to transform-based motion + leftToaster: { + from: { transform: "translateX(-20rem)" }, + to: { transform: "translateX(0)" }, + }, + rightToaster: { + from: { transform: "translateX(20rem)" }, + to: { transform: "translateX(0)" }, + }, + // kebab-case equivalents (preferred) + "left-toaster": { + from: { transform: "translateX(-20rem)" }, + to: { transform: "translateX(0)" }, + }, + "right-toaster": { + from: { transform: "translateX(20rem)" }, + to: { transform: "translateX(0)" }, + }, // Progress bar animation "bar-loader": { - from: { left: "-100%" }, - to: { left: "100%" }, + from: { transform: "translateX(-100%)" }, + to: { transform: "translateX(100%)" }, },Also applies to: 16-20
packages/tailwind-config/config/utils.js (2)
6-11: JSDoc mismatch; function returns RGB (no alpha). Prefer rgb() over rgba() when no alpha.- * Converts a CSS variable name to RGB format + * Converts a CSS variable name to RGB format * @param {string} variableName - CSS variable name (e.g., "--color-primary-100") - * @returns {string} RGBA color string + * @returns {string} RGB color string */ -const convertToRGB = (variableName) => `rgba(var(${variableName}))`; +const convertToRGB = (variableName) => `rgb(var(${variableName}))`;
18-19: Modern syntax option (optional): rgb(var(--token) / ) reads clearer than rgba(var(--token), a).-const convertToRGBA = (variableName, alpha) => - `rgba(var(${variableName}), ${alpha})`; +const convertToRGBA = (variableName, alpha) => + `rgb(var(${variableName}) / ${alpha})`;packages/tailwind-config/config/shadows.js (1)
12-13: Naming nit: 'rg' is ambiguous. Consider 'base' or drop the extra step for clarity.Small readability win; not blocking.
Also applies to: 24-25
packages/tailwind-config/config/plugins.js (1)
13-27: .px-page-x duplicates theme 'padding.page-x' and mixes @media with responsive variants; can conflict.Define breakpoint with @screen and drop the "responsive" variants to avoid duplicate md rules, or remove theme.padding.page-x to make plugin the single source.
- function ({ addUtilities }) { + function ({ addUtilities, theme }) { const newUtilities = { // Responsive horizontal padding for pages - // Mobile screens ".px-page-x": { - paddingLeft: "1.25rem", - paddingRight: "1.25rem", + paddingLeft: "1.25rem", + paddingRight: "1.25rem", }, - // Medium screens (768px and up) - "@media (min-width: 768px)": { - ".px-page-x": { - paddingLeft: "1.35rem", - paddingRight: "1.35rem", - }, - }, + // Medium screens (via Tailwind breakpoint) + "@screen md": { + ".px-page-x": { + paddingLeft: theme("padding.page-x"), + paddingRight: theme("padding.page-x"), + }, + }, // Hide scrollbar but keep functionality ".scrollbar-hide": { "-ms-overflow-style": "none" /* IE and Edge */, "scrollbar-width": "none" /* Firefox */, "&::-webkit-scrollbar": { display: "none" /* Chrome, Safari and Opera */, }, }, }; - - addUtilities(newUtilities, ["responsive"]); + // No responsive variants; we already emit breakpoint-specific rules + addUtilities(newUtilities); },Also consider removing padding.page-x from spacing.js to avoid duplicate class definitions.
Also applies to: 39-40
packages/tailwind-config/config/colors.js (1)
6-6: Optional: re-export utils in index and import from a single barrel to reduce relative paths.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
packages/tailwind-config/config/animations.js(1 hunks)packages/tailwind-config/config/colors.js(1 hunks)packages/tailwind-config/config/content.js(1 hunks)packages/tailwind-config/config/layout.js(1 hunks)packages/tailwind-config/config/plugins.js(1 hunks)packages/tailwind-config/config/shadows.js(1 hunks)packages/tailwind-config/config/spacing.js(1 hunks)packages/tailwind-config/config/typography.js(1 hunks)packages/tailwind-config/config/utils.js(1 hunks)packages/tailwind-config/tailwind.config.js(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
packages/tailwind-config/config/typography.js (2)
packages/tailwind-config/config/colors.js (1)
require(6-6)packages/tailwind-config/config/utils.js (1)
convertToRGB(10-10)
packages/tailwind-config/config/colors.js (2)
packages/tailwind-config/config/typography.js (1)
require(6-6)packages/tailwind-config/config/utils.js (2)
convertToRGB(10-10)convertToRGBA(18-19)
packages/tailwind-config/tailwind.config.js (2)
packages/tailwind-config/config/colors.js (1)
require(6-6)packages/tailwind-config/config/typography.js (1)
require(6-6)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Build and lint web apps
- GitHub Check: Cursor Bugbot
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
packages/tailwind-config/config/layout.js (1)
8-21: LGTM on named z-index scale; improves readability.Confirm default numeric z-* utilities remain available (theme.extend vs override) in tailwind.config.js.
packages/tailwind-config/config/typography.js (2)
1-25: LGTM! Font size scaling is mathematically correct.The modular structure is clean, and all fontSize values are correctly calculated as 90% of Tailwind's default scale. The approach of centralizing typography configuration improves maintainability.
28-54: Typography configuration looks well-structured.The prose configuration properly maps CSS custom properties for the
@tailwindcss/typographyplugin. UsingconvertToRGBfor color variables maintains consistency with the color configuration module and supports Tailwind's opacity modifier system.packages/tailwind-config/tailwind.config.js (2)
1-14: Excellent modular refactoring!The separation of concerns into focused configuration modules significantly improves maintainability. Each module has a clear, single responsibility, making the codebase easier to navigate and modify.
16-49: Configuration assembly is clean and well-organized.The theme.extend structure properly maps all imported modules to their respective Tailwind properties. The selective destructuring of spacing, typography, and layout modules provides fine-grained control while keeping the main config file readable.
There was a problem hiding this comment.
Actionable comments posted: 5
♻️ Duplicate comments (1)
packages/tailwind-config/styles/themes/variables.css (1)
27-32: RGB color token formatting is now consistent.The past review comment flagged mixed RGB formats (space-separated vs comma-separated) in error color tokens. The current code (lines 27–32) shows all error colors are now consistently comma-separated, resolving the earlier concern.
🧹 Nitpick comments (3)
packages/tailwind-config/styles/components/tags-input.css (1)
1-40: CSS variables properly applied; verify variable definitions exist.The hardcoded color values from the prior version have been replaced with CSS custom properties (
--color-border-200,--color-background-80,--color-background-90,--color-text-100), which aligns well with the PR's centralized theming goal.The
rgba(var(...))pattern requires these variables to be defined as space-separated RGB values (e.g.,--color-border-200: 0 0 0;) to work correctly. Please verify that these variable names are defined inpackages/tailwind-config/styles/themes/variables.cssand that they use the expected format.Additionally, consider adding fallback colors to ensure the component remains usable if CSS variables fail to resolve:
.tags-input-container { - border: 2px solid rgba(var(--color-border-200)); + border: 2px solid rgba(var(--color-border-200, 200 200 200));packages/tailwind-config/styles/editor/editor.css (1)
107-112: Consolidate duplicate selector blocks for checkbox styling.The selector
ul[data-type="taskList"] li > label input[type="checkbox"]is declared twice with conflicting properties. Lines 107–112 define a first set of styles, and lines 144–179 define a second set that cascades over the first due to CSS specificity. The first block is effectively dead code. Merge these into a single rule.-ul[data-type="taskList"] li > label input[type="checkbox"] { - border: 1px solid rgba(var(--color-text-100), 0.2) !important; - outline: none; - border-radius: 2px; - transform: scale(1.05); -} - -/* ... other rules ... */ - ul[data-type="taskList"] li > label input[type="checkbox"] { position: relative; -webkit-appearance: none; appearance: none; background-color: transparent; margin: 0; cursor: pointer; width: 0.8rem; height: 0.8rem; - border: 1.5px solid rgb(var(--color-text-100)); + border: 1.5px solid rgb(var(--color-text-100)); margin-right: 0.2rem; margin-top: 0.15rem; outline: none; border-radius: 2px; transform: scale(1.05); ... }Also applies to: 144-179
packages/tailwind-config/styles/themes/variables.css (1)
56-56: Minor: Fix typo in border color comment.Line 56 has a malformed comment separator:
/* subtle border= 1 */. Should be/* subtle border 1 */or similar.- --color-border-100: 245, 245, 245; /* subtle border= 1 */ + --color-border-100: 245, 245, 245; /* subtle border 1 */
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
packages/tailwind-config/config/colors.js(1 hunks)packages/tailwind-config/config/content.js(1 hunks)packages/tailwind-config/package.json(1 hunks)packages/tailwind-config/postcss.config.js(1 hunks)packages/tailwind-config/styles/components/tags-input.css(1 hunks)packages/tailwind-config/styles/editor/editor.css(1 hunks)packages/tailwind-config/styles/editor/variables.css(1 hunks)packages/tailwind-config/styles/themes/variables.css(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/tailwind-config/config/colors.js (2)
packages/tailwind-config/config/typography.js (1)
require(6-6)packages/tailwind-config/config/utils.js (2)
convertToRGB(10-10)convertToRGBA(18-19)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (6)
packages/tailwind-config/package.json (1)
8-10: Previous critical issue resolved:postcss-importcorrectly placed independencies.The package is now properly listed in
dependenciesrather thandevDependencies, ensuring it's available at runtime when this config is consumed by other packages. Version ^16.1.1 aligns with the latest stable release.packages/tailwind-config/postcss.config.js (1)
3-12: LGTM! Custom resolver correctly handles@plane/*namespace imports.The implementation follows postcss-import best practices:
- Positioned as the first plugin in the pipeline (per learnings)
- Custom resolver uses
require.resolve()for@plane/*packages- Returns
idunchanged for default resolution behavior- Comment accurately describes the package handling
The previous concerns (incorrect comment reference and dependency placement) have been addressed.
Based on learnings
packages/tailwind-config/styles/themes/variables.css (1)
1-469: Overall structure and organization: LGTM.The file defines a comprehensive, well-organized set of CSS custom properties scoped to
:rootwithin@layer base. Naming conventions are consistent, all RGB values are valid, and the hierarchical organization (primary, error, background, text, etc.) supports the modular theming approach described in the PR. The use ofvar()references for semantic aliasing (e.g.,--color-background-primaryreferencing--color-primary-10) is a solid pattern for maintainability.packages/tailwind-config/styles/editor/variables.css (3)
1-193: CSS nesting and custom property structure are well-organized.The file uses modern CSS nesting syntax with
&selectors (lines 49–127, 130–191) and a hierarchical custom property naming scheme (--editor-colors-*,--font-size-*,--line-height-*, etc.), which support maintainability and theme consistency. Theme selectors use attribute substring matching ([data-theme*="light"],[data-theme*="dark"]), which is idiomatic for data-attribute-based theming. The PostCSS pipeline includes"tailwindcss/nesting"plugin (packages/tailwind-config/postcss.config.js), confirming full support for the nested CSS syntax used here.
44-46: The variable--color-text-100is correctly defined and available in scope.The theme files (light.css, dark.css, and variables.css) all define
--color-text-100with RGB values like "23, 23, 23". The import order in styles/index.css confirms that all theme files (lines 6-8) are imported before editor/variables.css (line 18), ensuring the variable is available in scope through the CSS cascade. The syntax and precedence are correct.
248-305: Container queries properly formatted; verification confirms all dependencies in place.All container query expressions use explicit
pxunits (912px, 1344px, 760px, 930px). Verification confirms:
- Both required container elements exist in markup with matching
container-nameproperties (#page-toolbar-containerin toolbar/root.tsx,#page-content-containerin editor-body.tsx)- All referenced CSS custom properties are defined in theme files (
--color-text-100,--normal-content-margin,--wide-content-margin)- Layout configuration logic is sound for responsive padding across viewport ranges
| * Includes custom colors, sidebar colors, toast colors, and subscription colors | ||
| */ | ||
|
|
||
| const { convertToRGB, convertToRGBA } = require("./utils"); |
There was a problem hiding this comment.
🧩 Analysis chain
Bug: convertToRGB returns rgba(...) without alpha; should be rgb(...).
All color tokens here rely on convertToRGB, but utils.js defines it with rgba(var(...)) (no alpha), which is invalid. Switch to rgb(var(...)). This will fix all usages in this file.
Apply in packages/tailwind-config/config/utils.js:
-const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
+const convertToRGB = (variableName) => `rgb(var(${variableName}))`;🏁 Script executed:
#!/bin/bash
# Verify no lingering rgba(var(...)) without alpha
rg -nP 'convertToRGB\\s*=|rgba\\(var\\([^)]*\\)\\)\\b' packages/tailwind-config/configLength of output: 0
---
🏁 Script executed:
```shell
#!/bin/bash
# Directly inspect the utils.js and colors.js files
echo "=== utils.js ==="
cat packages/tailwind-config/config/utils.js
echo -e "\n=== colors.js (first 20 lines) ==="
head -20 packages/tailwind-config/config/colors.js
Length of output: 1440
---
🏁 Script executed:
```shell
#!/bin/bash
# Search for all usages of convertToRGB in the codebase
echo "=== Searching for convertToRGB usages ==="
rg -n 'convertToRGB' packages/tailwind-config --type js
echo -e "\n=== Searching for direct rgba or rgb function patterns ==="
rg -n 'rgba\(var\(|rgb\(var\(' packages/tailwind-config --type js -A1 -B1
Length of output: 17133
Fix convertToRGB to output rgb() instead of rgba()
convertToRGB currently returns rgba(var(...)) without an alpha parameter, which is semantically incorrect and doesn't match the function name. This affects 150+ color definitions across the codebase.
Apply in packages/tailwind-config/config/utils.js:
-const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
+const convertToRGB = (variableName) => `rgb(var(${variableName}))`;Also update the JSDoc comment on the same function from @returns {string} RGBA color string to @returns {string} RGB color string.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In packages/tailwind-config/config/utils.js around lines 1 to 120, convertToRGB
currently returns an rgba(...) string; update its implementation to return an
rgb(var(--...)) string (remove the alpha portion and the 'a' in 'rgba') so the
function name and output match, and change the JSDoc from "@returns {string}
RGBA color string" to "@returns {string} RGB color string".
| relative: false, | ||
| files: [ | ||
| // App directories | ||
| "./app/**/*.{js,ts,jsx,tsx}", | ||
| "./core/**/*.{js,ts,jsx,tsx}", | ||
| "./ce/**/*.{js,ts,jsx,tsx}", | ||
| "./ee/**/*.{js,ts,jsx,tsx}", | ||
|
|
||
| // Component directories | ||
| "./components/**/*.tsx", | ||
| "./constants/**/*.{js,ts,jsx,tsx}", | ||
| "./layouts/**/*.tsx", | ||
| "./pages/**/*.tsx", | ||
| "./ui/**/*.tsx", | ||
|
|
||
| // Shared packages | ||
| "../../packages/ui/src/**/*.{js,ts,jsx,tsx}", | ||
| "../../packages/propel/src/**/*.{js,ts,jsx,tsx}", | ||
| "../../packages/editor/src/**/*.{js,ts,jsx,tsx}", | ||
|
|
||
| // Exclude Storybook files | ||
| "!../../packages/ui/**/*.stories{js,ts,jsx,tsx}", | ||
| ], |
There was a problem hiding this comment.
🧩 Analysis chain
Good call switching to relative: false; verify each app actually consumes these globs.
Looks right for monorepo apps running Tailwind from their own CWD. Ensure apps don’t rely on presets for content (Tailwind doesn’t merge content from presets); each app should set content or import this module’s files.
Run to confirm usage across apps:
🏁 Script executed:
#!/bin/bash
# List app tailwind configs and check they import/assign content from the shared module
fd -t f -a 'tailwind.config.*' apps | while read -r f; do
echo "=== $f ==="
rg -nP 'content\s*:' -n -C1 "$f" || true
rg -n '@plane/tailwind-config/config/content' "$f" || true
echo
doneLength of output: 171
I need to examine the actual content of these tailwind config files to understand if they're using presets or if the content configuration is missing.
Now let me examine the actual content of these tailwind config files:
Now I need to examine the actual tailwind config files to understand their current state:
🏁 Script executed:
#!/bin/bash
# Read the three app tailwind config files
for f in apps/admin/tailwind.config.js apps/space/tailwind.config.js apps/web/tailwind.config.js; do
echo "=== $f ==="
cat "$f"
echo ""
doneLength of output: 675
I need to examine the shared tailwind config to see how it incorporates the content configuration:
🏁 Script executed:
#!/bin/bash
# Read the shared tailwind config file
cat packages/tailwind-config/tailwind.config.jsLength of output: 1164
I need to verify Tailwind's actual behavior with presets and the content option:
🌐 Web query:
Tailwind CSS presets content configuration inheritance behavior
💡 Result:
Short answer: the content array is not merged — a project's content config replaces the preset's content. Tailwind treats content as a "replace" option (not extend/merge), so if your top-level tailwind.config.js defines content it will override whatever a preset provided. [1][2]
Example: if a preset defines content: ['./lib//*.html'] and your project config has content: ['./src//.html'], Tailwind will use only ['./src/**/.html'] (not both). [1]
Sources: Tailwind Presets docs (merging logic) and Content configuration docs. [1][2]
Now I need to verify the actual directory structures in the apps to confirm the glob patterns are valid:
🏁 Script executed:
#!/bin/bash
# Check directory structures in each app
for app in apps/admin apps/space apps/web; do
echo "=== $app directory structure ==="
ls -la "$app" | head -20
echo ""
echo "Checking for key directories:"
for dir in app core ce ee components constants layouts pages ui; do
if [ -d "$app/$dir" ]; then
echo " ✓ $dir exists"
else
echo " ✗ $dir missing"
fi
done
echo ""
doneLength of output: 4117
I found a discrepancy. Let me check if these missing directories are gitignored or if the globs need to be cleaned up:
🏁 Script executed:
#!/bin/bash
# Check if missing directories are in .gitignore
for app in apps/admin apps/space apps/web; do
echo "=== Checking $app/.gitignore ==="
if [ -f "$app/.gitignore" ]; then
grep -E "components|constants|layouts|pages|ui" "$app/.gitignore" || echo " (no matches)"
fi
done
echo ""
echo "=== Checking root .gitignore ==="
grep -E "components|constants|layouts|pages|ui" .gitignore || echo " (no matches)"
echo ""
echo "=== Checking if these dirs exist elsewhere ==="
fd -t d -e 'components|constants|layouts|pages|ui' . --max-depth 2 2>/dev/null | grep -v node_modules | head -20Length of output: 295
Let me verify the monorepo package paths that are also referenced:
🏁 Script executed:
#!/bin/bash
# Check if the referenced package directories exist
echo "=== Checking referenced packages ==="
for pkg in packages/ui packages/propel packages/editor; do
if [ -d "$pkg/src" ]; then
echo "✓ $pkg/src exists"
ls -la "$pkg/src" | head -5
else
echo "✗ $pkg/src missing"
fi
echo ""
doneLength of output: 806
Remove dead glob patterns from content.js that don't match actual app directories.
Verification confirms several glob patterns reference directories that don't exist in any of the three apps (admin, space, web):
./components/**/*.tsx— not in any app./constants/**/*.{js,ts,jsx,tsx}— not in any app./layouts/**/*.tsx— not in any app./pages/**/*.tsx— not in any app./ui/**/*.tsx— not in any app
Only these app-level globs match actual structure:
./app/**/*.{js,ts,jsx,tsx}✓./core/**/*.{js,ts,jsx,tsx}✓./ce/**/*.{js,ts,jsx,tsx}✓./ee/**/*.{js,ts,jsx,tsx}✓
The monorepo package paths are valid and exist. Clean up content.js to remove the unused patterns or confirm these directories will be added.
🤖 Prompt for AI Agents
packages/tailwind-config/config/content.js lines 7-29: several glob patterns
under files are dead (components, constants, layouts, pages, ui) and should be
removed to avoid scanning non-existent directories; update the files array to
keep only the actual app globs (./app/**/*. {js,ts,jsx,tsx}, ./core/**/*.
{js,ts,jsx,tsx}, ./ce/**/*. {js,ts,jsx,tsx}, ./ee/**/*. {js,ts,jsx,tsx}) and the
valid monorepo package paths (../../packages/ui/src/**/*.{js,ts,jsx,tsx},
../../packages/propel/src/**/*.{js,ts,jsx,tsx},
../../packages/editor/src/**/*.{js,ts,jsx,tsx}), preserve the Storybook
exclusion, and remove the five unused patterns (or alternatively confirm and add
the missing directories before leaving the globs); after editing, run the
Tailwind content scan/build to verify no missing matches.
| "../../packages/editor/src/**/*.{js,ts,jsx,tsx}", | ||
|
|
||
| // Exclude Storybook files | ||
| "!../../packages/ui/**/*.stories{js,ts,jsx,tsx}", |
There was a problem hiding this comment.
Fix Storybook exclusion glob and mirror for other shared packages.
Current pattern misses the dot before extensions, so stories aren’t excluded.
Apply:
- "!../../packages/ui/**/*.stories{js,ts,jsx,tsx}",
+ "!../../packages/ui/**/*.stories.{js,ts,jsx,tsx}",
+ "!../../packages/propel/**/*.stories.{js,ts,jsx,tsx}",
+ "!../../packages/editor/**/*.stories.{js,ts,jsx,tsx}",Optional (to reduce bloat):
+ "!**/*.{spec,test}.{js,ts,jsx,tsx}",
+ "!**/__tests__/**",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "!../../packages/ui/**/*.stories{js,ts,jsx,tsx}", | |
| "!../../packages/ui/**/*.stories.{js,ts,jsx,tsx}", | |
| "!../../packages/propel/**/*.stories.{js,ts,jsx,tsx}", | |
| "!../../packages/editor/**/*.stories.{js,ts,jsx,tsx}", |
🤖 Prompt for AI Agents
packages/tailwind-config/config/content.js around line 28: the Storybook
exclusion glob is missing the dot before the extensions causing stories to not
be excluded; update the pattern to use the correct brace extension syntax (e.g.
change "!../../packages/ui/**/*.stories{js,ts,jsx,tsx}" to use
".stories.{js,ts,jsx,tsx}") and apply the same corrected pattern to the other
shared packages entries so all story files are properly excluded (optionally
remove unused package globs to reduce build bloat).
| } | ||
|
|
||
| &.ProseMirror-selectednode { | ||
| outline: 3px solid rgba(var(--color-primary-100)); |
There was a problem hiding this comment.
Fix incorrect rgba() syntax; use rgb() or the / alpha syntax.
Lines 79, 123, 129–130 use rgba(var(--color-primary-100)) with no alpha channel argument, which is invalid CSS. Use either:
rgb(var(--color-primary-100))if full opacity is intended, orrgba(var(--color-primary-100) / <alpha>)with the modern CSS syntax.
- outline: 3px solid rgba(var(--color-primary-100));
+ outline: 3px solid rgb(var(--color-primary-100));Apply similar fixes at lines 123, 129–130:
- background-color: rgba(var(--color-primary-100)) !important;
+ background-color: rgb(var(--color-primary-100)) !important;
- background-color: rgba(var(--color-primary-300)) !important;
- border-color: rgba(var(--color-primary-300)) !important;
+ background-color: rgb(var(--color-primary-300)) !important;
+ border-color: rgb(var(--color-primary-300)) !important;Also applies to: 123-123, 129-130
🤖 Prompt for AI Agents
In packages/tailwind-config/styles/editor/editor.css around lines 79, 123, and
129–130, the CSS uses invalid rgba(var(--color-primary-100)) syntax without an
alpha value; update each occurrence to either rgb(var(--color-primary-100)) for
full opacity or use the newer slash alpha form rgba(var(--color-primary-100) /
<alpha>) (e.g., / 0.5) where semi-transparency is needed, ensuring you replace
each invalid rgba() call at the listed lines with one of these valid forms.
| --red-light-100: 255, 247, 247; | ||
| --red-light-200: 255, 240, 240; | ||
| --red-light-300: 255, 227, 227; | ||
| --red-light-400: 255, 209, 209; | ||
| --red-light-500: 255, 179, 179; | ||
| --red-light-600: 247, 148, 148; | ||
| --red-light-700: 230, 115, 115; | ||
| --red-light-800: 214, 97, 97; | ||
| --red-light-900: 191, 84, 84; | ||
| --red-light-1000: 163, 77, 77; | ||
| --red-light-1100: 138, 64, 64; | ||
|
|
||
| /* Primitive Colors - Red Dark */ | ||
| --red-dark-100: 102, 41, 41; | ||
| --red-dark-200: 163, 77, 77; | ||
| --red-dark-300: 191, 84, 84; | ||
| --red-dark-400: 214, 97, 97; | ||
| --red-dark-500: 230, 115, 115; | ||
| --red-dark-600: 247, 148, 148; | ||
| --red-dark-700: 255, 179, 179; | ||
| --red-dark-800: 255, 209, 209; | ||
| --red-dark-900: 255, 227, 227; | ||
| --red-dark-1000: 255, 240, 240; | ||
| --red-dark-1100: 255, 247, 247; | ||
|
|
||
| /* Primitive Colors - Blue Light */ | ||
| --blue-light-100: 255, 247, 247; | ||
| --blue-light-200: 255, 240, 240; | ||
| --blue-light-300: 255, 227, 227; | ||
| --blue-light-400: 255, 209, 209; | ||
| --blue-light-500: 255, 179, 179; | ||
| --blue-light-600: 247, 148, 148; | ||
| --blue-light-700: 230, 115, 115; | ||
| --blue-light-800: 214, 97, 97; | ||
| --blue-light-900: 191, 84, 84; | ||
| --blue-light-1000: 163, 77, 77; | ||
| --blue-light-1100: 138, 64, 64; | ||
|
|
||
| /* Primitive Colors - Blue Dark */ | ||
| --blue-dark-100: 138, 64, 64; | ||
| --blue-dark-200: 163, 77, 77; | ||
| --blue-dark-300: 191, 84, 84; | ||
| --blue-dark-400: 214, 97, 97; | ||
| --blue-dark-500: 230, 115, 115; | ||
| --blue-dark-600: 247, 148, 148; | ||
| --blue-dark-700: 255, 179, 179; | ||
| --blue-dark-800: 255, 209, 209; | ||
| --blue-dark-900: 255, 227, 227; | ||
| --blue-dark-1000: 255, 240, 240; | ||
| --blue-dark-1100: 255, 247, 247; |
There was a problem hiding this comment.
🧩 Analysis chain
Verify: Blue-light and red-light palettes have identical RGB values.
Lines 305–315 (blue-light) and 279–289 (red-light) define identical color values across all tones. This appears unintentional and should be verified. Consider whether blue-light should have distinct values from red-light, or if this is placeholder/future customization.
🏁 Script executed:
#!/bin/bash
# Description: Extract and compare blue-light and red-light palette values
# Expected: If they should differ, this will highlight identical RGB tuples
echo "=== Red-light palette values ==="
rg -A 12 "Primitive Colors - Red Light" packages/tailwind-config/styles/themes/variables.css | grep -oP '\d+, \d+, \d+' | sort
echo ""
echo "=== Blue-light palette values ==="
rg -A 12 "Primitive Colors - Blue Light" packages/tailwind-config/styles/themes/variables.css | grep -oP '\d+, \d+, \d+' | sort
echo ""
echo "=== Comparison ==="
red_vals=$(rg -A 12 "Primitive Colors - Red Light" packages/tailwind-config/styles/themes/variables.css | grep -oP '\d+, \d+, \d+' | sort)
blue_vals=$(rg -A 12 "Primitive Colors - Blue Light" packages/tailwind-config/styles/themes/variables.css | grep -oP '\d+, \d+, \d+' | sort)
if [ "$red_vals" = "$blue_vals" ]; then
echo "MATCH: Red-light and blue-light contain identical values (possible error)"
else
echo "DIFFER: Palettes have distinct values (expected)"
fiLength of output: 453
I need to verify if this duplication extends to other color families and check for any documentation explaining it.
Now let me verify if this duplication extends to the dark variants and check the full scope of the issue:
Fix duplicate color definitions between red and blue palettes.
Each color in the default palette includes 11 steps, with 50 being the lightest, and 950 being the darkest, and different color families should have distinct RGB values across their tones. Currently, red-light (lines 279–289) and blue-light (lines 305–315) are identical, and likely red-dark and blue-dark share the same issue. Provide distinct values for the blue palette to maintain semantic color separation.
🤖 Prompt for AI Agents
In packages/tailwind-config/styles/themes/variables.css around lines 279–328 the
blue-light (lines ~305–315) and blue-dark (~316–328) RGB variables are
duplicates of the red palette; replace those duplicate blue values with the
correct blue RGB steps (11 distinct tones matching your design system:
lightest→darkest), ensure the blue-light and blue-dark series use unique
blue-specific RGB triples (not red copies), scan other color families for
similar duplicates and update any found, and add/update a short comment or doc
link in this file noting the source of the blue RGB values so future changes
remain consistent.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/tailwind-config/styles/editor/drag-drop.css (1)
77-106: List item margin calculations are reasonable.The progressive margin-left adjustments for ordered and unordered list items (lines 93–106) account for increasing list marker width across digit boundaries (1-digit → 2-digit → 3-digit numbers), which aligns with typical typographic alignment. Consider adding brief inline comments to document the intent (e.g.,
/* Adjust for 2-digit list numbers */).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/tailwind-config/styles/editor/drag-drop.css(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build and lint web apps
🔇 Additional comments (3)
packages/tailwind-config/styles/editor/drag-drop.css (3)
108-120: Previous critical issue has been resolved.The selector syntax has been corrected:
.ProseMirror .node-imageand.ProseMirror .node-imageComponentnow properly target nested class selectors with the required dot and space notation. This resolves the Biome linting error from the prior review.
38-75: Drag-and-drop selection styling looks solid.The use of CSS custom properties (
--horizontal-offset) for conditional offset calculation is clean. The:has()pseudo-class correctly exempts certain block types (images, tables, issue embeds) from the default offset, and the::afterpseudo-element creates a visual selection highlight with appropriate stacking and sizing logic.
1-36: Menu and handle visibility toggles are clear.The use of opacity transitions and
pointer-events: noneto hide UI elements is a solid pattern. Consistent application across side-menu, drag-handle, and ai-handle improves maintainability.
Description
Centralize all fonts and global styles into the
@plane/tailwind-configpackage, eliminating style duplication across apps.Key Changes:
@plane/tailwind-config/fonts/@plane/tailwind-config/styles/@plane/tailwind-config/global.cssTailwind config structure:
Type of Change
Summary by CodeRabbit
New Features
Chores