Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughConsolidates Tailwind into a single bundled CSS approach: removes many per-module Tailwind configs and SCSS directives, adds centralized base and components CSS, updates PostCSS/webpack/package.json, and rewire asset registrations and component exports. Changes
Sequence DiagramsequenceDiagram
participant Dev as Developer / CI
participant PostCSS as PostCSS (`@tailwindcss/postcss`)
participant Webpack as Webpack Build
participant Assets as PHP Asset Registry
participant Browser as Browser
Dev->>PostCSS: Configure plugin via postcss.config.js
PostCSS->>Webpack: Emit processed base Tailwind CSS (base-tailwind.css)
Webpack->>Webpack: Bundle components into components.css and components-bundle.css
Webpack->>Assets: Output CSS files to public assets
Assets->>Assets: Register dokan-tailwind and component bundles (components.css, components-bundle.css)
Browser->>Assets: Request admin page
Assets->>Browser: Enqueue dokan-tailwind + components bundle(s)
Browser->>Browser: Apply centralized Dokan styles (via .dokan-layout scope)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
package.json (1)
31-52: Add missing@plugindirectives for Tailwind v4 plugins in the CSS entry point.The installed plugins (
@tailwindcss/forms,@tailwindcss/typography, tailwind-scrollbar-hide) are compatible with Tailwind v4.1.18, and the PostCSS pipeline is correctly configured. However, the main CSS entry point (./src/base-tailwind.css) is missing the required@plugindirectives. In Tailwind v4's CSS-first approach, plugins must be explicitly loaded in the CSS file, not just installed as npm packages.Add the following to
./src/base-tailwind.cssafter the@import "tailwindcss/theme.css"line:`@plugin` "@tailwindcss/forms"; `@plugin` "@tailwindcss/typography"; `@plugin` "tailwind-scrollbar-hide";Without these directives, the plugins will not be available even though they are installed.
🤖 Fix all issues with AI agents
In `@includes/Admin/Dashboard/Dashboard.php`:
- Around line 647-649: The footer string assigned to $dom_element contains an
external anchor with target="_blank" and an unlocalized user-facing message;
update the anchor to include rel="noopener noreferrer" to prevent
reverse-tabnabbing and wrap the visible text portion with esc_html__() using the
'dokan-lite' text domain (keep any HTML markup intact, only localize the
user-facing sentence) so the output uses WordPress internationalization and is
secure; locate the assignment to $dom_element in Dashboard.php and apply these
changes to the string building around the rating link.
In `@src/base-tailwind.css`:
- Around line 85-95: The `@import` rules currently inside the .dokan-layout block
must be moved to the top of the stylesheet and placed before any selectors so
they are not ignored; remove the `@import` "tailwindcss/preflight.css"
layer(base), `@import` "tailwindcss/utilities.css", `@import`
'./dokan-components.css', and `@import` '@getdokan/dokan-ui/dist/dokan-ui.css'
from inside .dokan-layout and place them at the top of src/base-tailwind.css in
the intended order (preflight, utilities, dokan-components, dokan-ui) while
leaving only the CSS declarations such as border-color: var(--color-border);
inside the .dokan-layout selector.
In `@src/dokan-components.css`:
- Around line 8-99: The global reset/selectors (e.g., *, *::before, *::after,
table:not(.dataviews-view-table), ul, ol, h1..h6, a:focus, button:focus,
a:not(.dokan-btn)..., input[type="checkbox"]::before, textarea:focus, button,
[role="button"], input[type="button"] etc.) are currently unscoped and can leak
styles; scope these base rules by wrapping them under a container selector like
.dokan-layout (or :where(.dokan-layout)) so the resets only apply inside that
layout, and leave only truly global rules outside—update every selector in this
diff to be nested/prefixed with .dokan-layout (including the focus, link, form,
and button rule blocks) so the styles no longer affect unrelated UI.
In `@src/intelligence/components/DokanAI.tsx`:
- Around line 1-8: Imports in DokanAI.tsx reference non-existent `@dokan/`*
aliases (DokanAlert, DokanButton, DokanModal, DokanTooltip, useMutationObserver)
causing compile errors; fix by either adding path mappings for
"@dokan/components" -> "./src/components" and "@dokan/hooks" -> "./src/hooks" in
tsconfig.json and matching aliases in webpack.config.js, or update the imports
in DokanAI.tsx to use the existing "@src" alias (e.g., import { DokanAlert, ...
} from '@src/components' and import { useMutationObserver } from '@src/hooks');
also confirm SimpleInput and TextArea are actually exported from
`@getdokan/dokan-ui` and switch to a local export if not.
🧹 Nitpick comments (2)
src/admin/dashboard/style.scss (1)
16-18: Spacing value1.25remis numerically correct for Tailwind'stop-5utility.The conversion from
@apply top-5totop: 1.25rem !importantis accurate (Tailwind default: top-5 = 1.25rem). However, hardcoding spacing breaks design system alignment. If your project ever adopts custom spacing tokens, this value may drift. The!importantflag suggests this is an intentional specificity override—consider whether it could use a CSS custom property instead if theme customization becomes relevant.src/dokan-components.css (1)
485-503: Merge duplicate.dokan-ai-promptblocks for clarity.
The same selector is declared twice; combining avoids accidental overrides and keeps the style centralized.♻️ Proposed merge
-.dokan-dashboard header.dokan-ai-prompt { - margin: 0 0 10px 0; - border-bottom: 1px solid `#ededed`; - padding: 0 0 10px 0; - line-height: 1.25; -} -.dokan-dashboard header.dokan-ai-prompt { - display: flex; - justify-content: space-between; - align-items: center; - gap: 10px; - margin-bottom: 25px !important; -} +.dokan-dashboard header.dokan-ai-prompt { + margin: 0 0 10px 0; + border-bottom: 1px solid `#ededed`; + padding: 0 0 10px 0; + line-height: 1.25; + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px; + margin-bottom: 25px !important; +}
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Fix all issues with AI agents
In `@src/admin/dashboard/style.css`:
- Around line 1-2: Replace the invalid SCSS-style single-line comment "// Define
custom animation keyframes" with a valid CSS comment or remove it so the
stylesheet parses; specifically, update the top-of-file comment near the
Tailwind/dokan-tailwind note (the line containing "// Define custom animation
keyframes") to use /* ... */ syntax or delete that line to prevent
PostCSS/browser parse errors.
In `@src/dokan-components.css`:
- Around line 108-129: The base .dokan-btn rules currently use !important on
background-color, color and border which prevents the :hover and :active rules
from taking effect; remove the !important flags from the base declarations
(background-color, color, border) in .dokan-btn so the .dokan-btn:hover and
.dokan-btn:active styles can override them, and apply the same fix to
.dokan-btn-secondary and .dokan-btn-tertiary (or alternatively add !important to
their :hover/:active if you must keep base !important, but prefer removing base
!important).
- Around line 523-526: The CSS selector is missing the leading dot—replace the
element selector "dokan-dashboard header.dokan-ai-prompt `#ai-prompt-app`" with
the class selector ".dokan-dashboard header.dokan-ai-prompt `#ai-prompt-app`" so
it matches the same pattern used at lines with ".dokan-dashboard" and becomes
effective; update the rule containing "align-self: flex-end; padding-bottom:
10px;" accordingly.
- Around line 499-515: Merge the duplicate CSS blocks for the selector
.dokan-dashboard header.dokan-ai-prompt into a single rule: remove the redundant
second declaration of border-bottom, consolidate properties so only one
border-bottom remains, keep the intended final layout values (display: flex;
justify-content: space-between; align-items: center; gap: 10px; margin-bottom:
25px !important; padding/line-height if needed) and drop the obsolete/duplicate
declarations from the first block so there are no conflicting or duplicated
properties.
In `@src/vendor-dashboard/layout/style.css`:
- Around line 1-2: Fix the typo in the CSS comment by changing the commented
directive "@referance '../../base-tailwind.css';" to "@reference
'../../base-tailwind.css';" so the inline documentation/directive in
src/vendor-dashboard/layout/style.css is correct and won't confuse future
maintainers if uncommented.
In `@src/vendor-dashboard/reports/layout/style.scss`:
- Around line 172-194: The SCSS linter wants an empty line before double-slash
comments inside the rules; update the stylesheet so each `//` comment has a
blank line above it (e.g., the `// color: $studio-gray-60;` inside
`.woocommerce-usage-modal__wrapper a`, the `// margin-top: $gap;` inside
`.woocommerce-usage-modal__actions`, and the `// margin-left: $gap;` inside
`.woocommerce-usage-modal__actions button`). Insert a single blank line before
each of those `//` comment lines to satisfy
`scss/double-slash-comment-empty-line-before`.
🧹 Nitpick comments (10)
src/admin/dashboard/style.css (1)
60-69: Duplicate.dataviews-no-resultsselectors can be merged.These two adjacent rule blocks target the same selector and could be combined into one for clarity.
♻️ Suggested merge
.dataviews-wrapper { - .dataviews-no-results { - color: `#6b7280`; - } - - .dataviews-no-results { - padding-top: 1rem; - padding-bottom: 1rem; - } + .dataviews-no-results { + color: `#6b7280`; + padding-top: 1rem; + padding-bottom: 1rem; + } }src/vendor-dashboard/layout/components/Sidebar.tsx (2)
2-5: Remove commented-out imports.Lines 2 and 4 are dead code. Commented-out imports add noise; if needed later they can be retrieved from version control.
Proposed fix
-// import { Tooltip } from '@getdokan/dokan-ui'; import { truncate } from '@src/utilities'; -// import { Tooltip } from '@wordpress/components'; import { DokanTooltip as Tooltip } from '@src/components';
242-251: Unreachable fallback in Tooltip content.
sideBarTitleis already defaulted to__( 'Dokan', 'dokan-lite' )on line 159, so it can never be falsy here. The|| __( 'Vendor Dashboard', 'dokan-lite' )fallback on line 244 is dead code.Proposed fix
<Tooltip - content={ - sideBarTitle || - __( 'Vendor Dashboard', 'dokan-lite' ) - } + content={ sideBarTitle } >src/dokan-components.css (2)
89-105: Redundantcursor: pointeron:hover:not(:disabled).The parent rule already sets
cursor: pointer(line 95); the:hover:not(:disabled)block (lines 97–99) repeats the identical declaration with no additional effect.Proposed fix
cursor: pointer; - &:hover:not(:disabled) { - cursor: pointer; - } - &:disabled,
174-257: Heavy repetition across semantic button variants — consider a shared base class.
.dokan-btn-info,.dokan-btn-success,.dokan-btn-warning, and.dokan-btn-dangerduplicate the same@apply,outline,transform, and:disabledrules. Extracting a.dokan-btn-semantic(or similar) base and only varying the color custom properties per variant would cut ~60 lines and make future changes less error-prone.src/vendor-dashboard/reports/layout/style.scss (2)
33-40: Empty rule blocks left after commenting out all properties.Multiple selectors in this file have had all their properties commented out, leaving empty blocks (e.g.,
.woocommerce-layout__primaryhere,.woocommerce-listat Line 247,.woocommerce-list__itemat Line 255, etc.). These produce no CSS output and are just noise. Either remove the blocks entirely or replace the commented-out$variable-based values with their concrete equivalents as part of this migration.
34-39: Significant amount of commented-out code left in the file.There are ~15 commented-out property declarations referencing old SCSS variables (
$gap,$gap-large,$studio-gray-5,$studio-gray-60,$adminbar-height, etc.) scattered throughout. If these variables are no longer available after the Tailwind v4 migration, the comments serve no purpose and should be removed. If they are placeholders for future replacement, consider adding a single// TODOat the top documenting the intent rather than leaving orphaned comments inline.Also applies to: 136-139, 178-179, 189-189, 192-193, 210-210, 218-218, 221-222, 232-233, 248-248, 252-252, 256-256, 268-268
includes/Assets.php (1)
82-82: Redundant enqueue —dokan-tailwindis already a dependency ofdokan-vue-admin.
dokan-vue-admin(line 339) declaresdokan-tailwindas a dep, so enqueuingdokan-vue-adminat line 110 will pull it in automatically. This explicit call is harmless (WordPress deduplicates) but unnecessary. Consider removing it to reduce confusion about where styles are loaded.webpack.config.js (2)
19-49: Add defensive handling inDokanRtlCssPlugin.Two concerns:
asset.source()may return aBuffer(depending on upstream loaders/plugins).rtlcss.process()expects a string. Call.toString()to be safe.- If
rtlcss.process()throws (e.g., malformed CSS), the entire build will fail with an unhelpful error. A try/catch with a descriptive warning would improve DX.Proposed defensive fix
files.filter( ( f ) => path.extname( f ) === '.css' ).forEach( ( filename ) => { const asset = compilation.assets[ filename ]; if ( ! asset ) return; - const src = asset.source(); - const dst = rtlcss.process( src ); - // Emit RTL next to LTR: ../css/components.css → ../css/components-rtl.css - const rtlFilename = filename.replace( /\.css$/, '-rtl.css' ); - compilation.assets[ rtlFilename ] = new webpack.sources.RawSource( dst ); - chunk.files.add( rtlFilename ); + try { + const src = asset.source().toString(); + const dst = rtlcss.process( src ); + const rtlFilename = filename.replace( /\.css$/, '-rtl.css' ); + compilation.assets[ rtlFilename ] = new webpack.sources.RawSource( dst ); + chunk.files.add( rtlFilename ); + } catch ( err ) { + compilation.warnings.push( + new webpack.WebpackError( `DokanRtlCssPlugin: failed to process ${ filename }: ${ err.message }` ) + ); + } } );
139-154: CSS filename mapping looks correct but the naming is indirect.The
dokan-tailwindentry emittingcomponents.cssandcomponentsentry emittingcomponents-bundle.cssworks but is counterintuitive. A future developer may expectdokan-tailwind→dokan-tailwind.css. The inline comments help, but consider renaming the webpack entry point itself (e.g., fromdokan-tailwindtodokan-components-tailwind) or the output file to reduce the mismatch, if feasible.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@webpack.config.js`:
- Around line 97-99: The removal of RtlCssPlugin from the plugin filter causes
RTL stylesheets (e.g., the rtl.less entry declared in webpack-entries.js and the
dokan-rtl-style enqueued in includes/Assets.php) to stop being emitted; either
re-enable RtlCssPlugin in the filter (remove the check excluding
plugin.constructor.name !== 'RtlCssPlugin') or, if you intend to rely on
Tailwind v4 logical properties, audit all SCSS files for directional properties
(margin-left/right, padding-left/right, etc.) and convert them to logical
properties so RTL output is unnecessary. Update the plugin filter or the SCSS
accordingly and ensure the rtl.less entry still produces a built artifact
consumed by includes/Assets.php.
🧹 Nitpick comments (2)
webpack.config.js (1)
106-113: Naming mismatch:dokan-tailwindentry →components.css,componentsentry →components-bundle.css.The output filenames don't intuitively map to their entry names, which can confuse future maintainers:
Entry name Output file dokan-tailwindcomponents.csscomponentscomponents-bundle.cssA developer looking for the Tailwind base styles would likely search for a file matching "tailwind", not "components.css". Consider either:
- Renaming the output files to reflect their entry names (e.g.,
dokan-tailwind.cssandcomponents.css), or- Adding more descriptive inline comments explaining why these names diverge (the current comments help, but the mapping is still surprising).
src/components/index.tsx (1)
13-15: Nit: Simplify./../layout/to../layout/.The
./..prefix is redundant;../layout/403is the conventional form.Proposed diff
-export { default as Forbidden } from './../layout/403'; -export { default as NotFound } from './../layout/404'; -export { default as InternalError } from './../layout/500'; +export { default as Forbidden } from '../layout/403'; +export { default as NotFound } from '../layout/404'; +export { default as InternalError } from '../layout/500';
* fixed tailwind v4 migration ui issues * updated video popup css * updated UpgradeModal bg image path * updated images path of UpgradeModal --------- Co-authored-by: Rakib Al-Hasan <rakib@Mac.localdomain>
…3108) * fixed css of withdraw options & menu manager's page * Fix Menu Manager tab styles Fix outline and spacing issues in Menu Manager styles. --------- Co-authored-by: Mahbub Rabbani <mahbub.rucse@gmail.com>
…lean up whitespace chore: remove allowJs option from tsconfig.json and tidy up configuration
|
@dev-shahed bhai, Please begin testing this PR. Run |
…hance AdminNotices action button layout
…for consistency in Tailwind CSS usage
… apply important flag for overrides
… with important flags for consistency
….php to handle currency symbol encoding and add dokan-tailwind CSS dependency
…clean-files script to clean in package.json
dev-shahed
added
QA In Progress
Type: Bug
and removed
🎉 QA Approved
|
|
4 participants
All Submissions:
Changes proposed in this Pull Request:
Related Pull Request(s)
Dokan Lite Tailwind 4 and Pro Tailwind 3: https://github.com/getdokan/dokan-pro/pull/5425
Closes
How to test the changes in this Pull Request:
Changelog entry
Title
Detailed Description of the pull request. What was previous behaviour
and what will be changed in this PR.
Before Changes
Describe the issue before changes with screenshots(s).
After Changes
Describe the issue after changes with screenshot(s).
Feature Video (optional)
Link of detailed video if this PR is for a feature.
PR Self Review Checklist:
FOR PR REVIEWER ONLY:
Summary by CodeRabbit
Improvements
Bug Fixes