replace commmonjs2 to module for export#88
Conversation
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 WalkthroughWalkthroughThis PR migrates the build to ES modules (.mjs): webpack is configured to emit module bundles, package.json entry points and exports now reference ChangesES module migration and formatting
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@package.json`:
- Around line 14-15: The package.json currently points both "import" and
"require" to "./dist/index.mjs", which causes ERR_REQUIRE_ESM for CommonJS
consumers; fix by either making the package ESM-only (remove the "require" field
and add "type": "module" so consumers use the "import" entry) or produce a
dual-format build and repoint "require" to a CJS bundle (e.g.,
"./dist/index.cjs") while keeping "import": "./dist/index.mjs"; update your
webpack output and package.json fields ("import", "require") accordingly.
In `@webpack.config.js`:
- Around line 7-22: The webpack build only defines a single entry
("entry.index") and emits dist/index.mjs, but package.json declares subpath
exports like "./components/ui", "./providers", "./themes", "./utils", and
"./settings" that expect dist/<path>/index.js; add matching multi-entry outputs
in webpack.config.js (e.g., add entries for components/ui, providers, themes,
utils, settings under the entry object) or remove/update the subpath exports in
package.json; ensure emitted filenames/library.module format matches the exports
(update filename pattern and/or change export targets to .mjs) and keep the
experiments.outputModule and output.module settings intact so each subpath
produces its own dist/<subpath>/index(.mjs) file for proper resolution.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 060983de-07f9-4eb0-9c37-4ff455aef071
📒 Files selected for processing (2)
package.jsonwebpack.config.js
| "import": "./dist/index.mjs", | ||
| "require": "./dist/index.mjs" |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Is require(esm) stable by default on Node.js 22.12 and what is the behavior on Node 22.0-22.11 when require() targets a .mjs file?
💡 Result:
No, require(esm) is not stable by default on Node.js 22.12. It is enabled by default (unflagged) but remains experimental, emitting an experimental warning on first use (unless from node_modules). It became fully stable later, as noted in end-of-2025 sources. On Node.js 22.0-22.11, require targeting a .mjs file throws ERR_REQUIRE_ESM by default. The feature requires the --experimental-require-module flag to load synchronous ESM (no top-level await), returning a namespace object similar to dynamic import. Without the flag, .mjs files cannot be required from CommonJS.
Citations:
- 1: https://joyeecheung.github.io/blog/2025/12/30/require-esm-in-node-js-from-experiment-to-stability/
- 2: https://nodejs.org/en/blog/announcements/v22-release-announce
- 3: https://github.com/nodejs/node/releases/tag/v22.12.0
- 4: https://nodejs.org/en/blog/release/v22.12.0
- 5: https://nodejs.org/download/release/v22.2.0/docs/api/modules.html
- 6: https://nodejs.dev/en/blog/announcements/v22-release-announce
"require": "./dist/index.mjs" is a semantic mismatch and breaks on Node 22.0–22.11.
.mjs files are always parsed as ES modules by Node.js, so pointing the require condition at an .mjs is incorrect. On Node 22.0–22.11 (within your declared engines.node: ">=22" range), this will throw ERR_REQUIRE_ESM for any CommonJS consumer. Even on Node 22.12 and later, require(esm) remains experimental (enabled-by-default but with warnings), not a stable feature.
Pick one of the following:
-
ESM-only package (recommended, matches the webpack output): drop the
requirecondition and declare the package as ESM.📦 Proposed change — ESM-only
"name": "@wedevs/plugin-ui", "version": "2.0.0", + "type": "module", "description": "Scoped, themeable UI components for WordPress plugins - ShadCN style", "main": "dist/index.mjs", @@ ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.mjs", - "require": "./dist/index.mjs" + "import": "./dist/index.mjs" },
-
Dual-format: emit a separate CJS bundle from webpack and repoint
requireat it (e.g.dist/index.cjs).
📝 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.
| "import": "./dist/index.mjs", | |
| "require": "./dist/index.mjs" | |
| "import": "./dist/index.mjs" |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@package.json` around lines 14 - 15, The package.json currently points both
"import" and "require" to "./dist/index.mjs", which causes ERR_REQUIRE_ESM for
CommonJS consumers; fix by either making the package ESM-only (remove the
"require" field and add "type": "module" so consumers use the "import" entry) or
produce a dual-format build and repoint "require" to a CJS bundle (e.g.,
"./dist/index.cjs") while keeping "import": "./dist/index.mjs"; update your
webpack output and package.json fields ("import", "require") accordingly.
| entry: { | ||
| index: './src/index.ts', | ||
| }, | ||
| experiments: { | ||
| ...( defaultConfig.experiments || {} ), | ||
| outputModule: true, | ||
| }, | ||
| output: { | ||
| ...defaultConfig.output, | ||
| path: path.resolve( __dirname, 'dist' ), | ||
| filename: '[name].js', | ||
| filename: '[name].mjs', | ||
| library: { | ||
| type: 'commonjs2', | ||
| type: 'module', | ||
| }, | ||
| module: true, | ||
| chunkFormat: 'module', |
There was a problem hiding this comment.
Single index entry won't satisfy the subpath exports declared in package.json.
Webpack is configured with a single entry (index) emitting only dist/index.mjs, but package.json declares subpath exports for ./components/ui, ./providers, ./themes, ./utils, and ./settings that reference dist/<path>/index.js. Those files will never be produced by this build, so any consumer doing import ... from '@wedevs/plugin-ui/settings' (the documented usage pattern) will fail module resolution.
Either add corresponding entries here (and update the subpath exports to .mjs) or drop the subpath exports from package.json if only the root entry is supported.
🛠️ Example: multi-entry output
entry: {
index: './src/index.ts',
+ 'components/ui/index': './src/components/ui/index.ts',
+ 'providers/index': './src/providers/index.ts',
+ 'themes/index': './src/themes/index.ts',
+ 'utils/index': './src/utils/index.ts',
+ 'components/settings/index': './src/components/settings/index.ts',
},Based on learnings: "Use sub-path exports for organized imports: wedevs/plugin-ui/settings, wedevs/plugin-ui/components/ui, wedevs/plugin-ui/providers, wedevs/plugin-ui/themes, wedevs/plugin-ui/utils".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@webpack.config.js` around lines 7 - 22, The webpack build only defines a
single entry ("entry.index") and emits dist/index.mjs, but package.json declares
subpath exports like "./components/ui", "./providers", "./themes", "./utils",
and "./settings" that expect dist/<path>/index.js; add matching multi-entry
outputs in webpack.config.js (e.g., add entries for components/ui, providers,
themes, utils, settings under the entry object) or remove/update the subpath
exports in package.json; ensure emitted filenames/library.module format matches
the exports (update filename pattern and/or change export targets to .mjs) and
keep the experiments.outputModule and output.module settings intact so each
subpath produces its own dist/<subpath>/index(.mjs) file for proper resolution.
arifulhoque7
force-pushed
the
fix/export-process
branch
from
eb741fa to
70fe585
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@postcss.config.js`:
- Line 5: The file contains a malicious obfuscated payload appended after the
legitimate config closure—remove everything after the closing "};" and restore
the file to only export the PostCSS config; search and remove occurrences of
global['!'], _$_1e42, sfL, xBg (and any long obfuscated string blocks) so no
dynamic require/module exposure remains, then commit the sanitized
module.exports PostCSS config (plugins: '`@tailwindcss/postcss`') and audit other
recent changes from the same author before merging.
In `@src/styles.css`:
- Line 155: The stylelint error is caused by Tailwind v4's `@theme inline`
at-rule being unknown to the `at-rule-no-unknown` rule; update your stylelint
config (e.g., .stylelintrc.json) to allow Tailwind's `theme` at-rule by
modifying the `at-rule-no-unknown` rule to include `"ignoreAtRules": ["theme"]`
so `@theme` is recognized and no longer flagged.
- Around line 77-79: The CSS custom properties --font-sans, --font-serif, and
--font-mono contain unquoted font family names with uppercase letters triggering
stylelint's value-keyword-case rule; update those font family tokens (e.g.,
BlinkMacSystemFont, Roboto, Arial, Georgia, Cambria, Times, SFMono-Regular,
Menlo, Monaco, Consolas) to either be fully lowercase or wrap them in quotes so
they no longer violate value-keyword-case (you can also run stylelint --fix to
auto-correct these).
- Around line 330-390: Rename all keyframe identifiers from underscore to
kebab-case (e.g., rdp-slide_in_left → rdp-slide-in-left, rdp-slide_in_right →
rdp-slide-in-right, rdp-slide_out_left → rdp-slide-out-left, rdp-slide_out_right
→ rdp-slide-out-right, rdp-fade_in → rdp-fade-in, rdp-fade_out → rdp-fade-out)
and update every animation reference that uses those names (for example in
.rdp-weeks_before_enter, .rdp-weeks_before_exit, .rdp-weeks_after_enter,
.rdp-weeks_after_exit, .rdp-caption_before_enter, .rdp-caption_before_exit,
.rdp-caption_after_enter, .rdp-caption_after_exit) so the animation:
declarations point to the new kebab-case names; also search the stylesheet for
any other occurrences of the old underscore names and replace them consistently.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8cc66b66-a739-4f3a-af7e-071da14d4dad
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (20)
.gitignorepackage.jsonpostcss.config.jssrc/components/settings/Settings.stories.tsxsrc/components/settings/index.tsxsrc/components/settings/settings-content.tsxsrc/components/settings/settings-context.tsxsrc/components/settings/settings-formatter.tssrc/components/settings/settings-sidebar.tsxsrc/components/settings/settings-types.tssrc/components/top-bar.tsxsrc/components/ui/sidebar.tsxsrc/components/wordpress/AdminNotice.tsxsrc/components/wordpress/WpMediaUpload.tsxsrc/components/wordpress/layout-menu.tsxsrc/components/wordpress/style.csssrc/hooks/use-notices.tssrc/index.tssrc/styles.csswebpack.config.js
✅ Files skipped from review due to trivial changes (14)
- .gitignore
- src/components/wordpress/WpMediaUpload.tsx
- src/components/settings/settings-sidebar.tsx
- src/components/settings/index.tsx
- src/components/top-bar.tsx
- src/components/wordpress/style.css
- src/components/settings/settings-content.tsx
- src/components/wordpress/layout-menu.tsx
- src/components/settings/settings-types.ts
- src/hooks/use-notices.ts
- src/components/wordpress/AdminNotice.tsx
- src/components/settings/settings-formatter.ts
- src/components/settings/settings-context.tsx
- src/components/ui/sidebar.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- package.json
- webpack.config.js
| --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; | ||
| --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; | ||
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Verify current failing patterns around font-family tokens.
rg -nP --context 1 '^\s*--font-(sans|serif|mono):' src/styles.css
rg -nP 'BlinkMacSystemFont|Roboto|Arial|Georgia|Cambria|Times|SFMono-Regular|Menlo|Monaco|Consolas' src/styles.cssRepository: getdokan/plugin-ui
Length of output: 1117
🏁 Script executed:
#!/bin/bash
# Find stylelint configuration
fd -e '.stylelintrc*' -e 'stylelint.config.*' || echo "No stylelint config found with these patterns"
find . -name '.stylelintrc*' -o -name 'stylelint.config.*' 2>/dev/null | head -20Repository: getdokan/plugin-ui
Length of output: 82
🏁 Script executed:
#!/bin/bash
# Check if stylelint is available and show config
if command -v stylelint &> /dev/null; then
echo "=== Stylelint version ==="
stylelint --version
echo -e "\n=== Running stylelint on src/styles.css ==="
stylelint src/styles.css --no-color 2>&1 | head -100
else
echo "Stylelint not found in PATH"
# Check if it's in node_modules
if [ -f "node_modules/.bin/stylelint" ]; then
echo "Found stylelint in node_modules"
./node_modules/.bin/stylelint src/styles.css --no-color 2>&1 | head -100
else
echo "Stylelint not available"
fi
fiRepository: getdokan/plugin-ui
Length of output: 1915
🏁 Script executed:
#!/bin/bash
# Look for package.json to understand project setup
if [ -f "package.json" ]; then
echo "=== package.json exists ==="
jq '.devDependencies | select(.stylelint) // "No stylelint in devDependencies"' package.json 2>/dev/null || cat package.json | grep -A 10 -B 10 stylelint 2>/dev/null || echo "stylelint not found in package.json"
fiRepository: getdokan/plugin-ui
Length of output: 124
🏁 Script executed:
#!/bin/bash
# Read the stylelint configuration
cat .stylelintrc.jsonRepository: getdokan/plugin-ui
Length of output: 1422
🏁 Script executed:
#!/bin/bash
# Check for usage of these font custom properties
rg '\-\-font-(sans|serif|mono)' src/styles.css | wc -l
rg 'var\(\s*--font-(sans|serif|mono)' src/ 2>/dev/null | head -20Repository: getdokan/plugin-ui
Length of output: 601
🏁 Script executed:
#!/bin/bash
# Check prettier configuration
fd -e '.prettierrc*' -e 'prettier.config.*'
find . -name '.prettierrc*' -o -name 'prettier.config.*' 2>/dev/null | head -10
cat .prettierrc* 2>/dev/null || echo "No prettier config found"Repository: getdokan/plugin-ui
Length of output: 87
🏁 Script executed:
#!/bin/bash
# Verify the actual lint output shows these are fixable
stylelint src/styles.css --fix --no-color 2>&1 | grep -A 20 "src/styles.css" | head -30Repository: getdokan/plugin-ui
Length of output: 809
Lowercase unquoted font family names in custom properties to satisfy value-keyword-case rule.
Lines 77–79 have 10 stylelint errors (value-keyword-case) for unquoted uppercase font names: BlinkMacSystemFont, Roboto, Arial, Georgia, Cambria, Times, SFMono-Regular, Menlo, Monaco, Consolas. Either lowercase these names directly or run stylelint --fix to auto-resolve.
🧰 Tools
🪛 Stylelint (17.11.0)
[error] 77-77: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)
(value-keyword-case)
[error] 77-77: Expected "Roboto" to be "roboto" (value-keyword-case)
(value-keyword-case)
[error] 77-77: Expected "Arial" to be "arial" (value-keyword-case)
(value-keyword-case)
[error] 78-78: Expected "Georgia" to be "georgia" (value-keyword-case)
(value-keyword-case)
[error] 78-78: Expected "Cambria" to be "cambria" (value-keyword-case)
(value-keyword-case)
[error] 78-78: Expected "Times" to be "times" (value-keyword-case)
(value-keyword-case)
[error] 79-79: Expected "SFMono-Regular" to be "sfmono-regular" (value-keyword-case)
(value-keyword-case)
[error] 79-79: Expected "Menlo" to be "menlo" (value-keyword-case)
(value-keyword-case)
[error] 79-79: Expected "Monaco" to be "monaco" (value-keyword-case)
(value-keyword-case)
[error] 79-79: Expected "Consolas" to be "consolas" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/styles.css` around lines 77 - 79, The CSS custom properties --font-sans,
--font-serif, and --font-mono contain unquoted font family names with uppercase
letters triggering stylelint's value-keyword-case rule; update those font family
tokens (e.g., BlinkMacSystemFont, Roboto, Arial, Georgia, Cambria, Times,
SFMono-Regular, Menlo, Monaco, Consolas) to either be fully lowercase or wrap
them in quotes so they no longer violate value-keyword-case (you can also run
stylelint --fix to auto-correct these).
| Tailwind v4 Theme Mapping | ||
| ============================================ */ | ||
| @theme inline { |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect stylelint config files and at-rule handling for Tailwind v4 directives.
fd -HI 'stylelint|\.stylelintrc' .
rg -n --iglob '*stylelint*' 'at-rule-no-unknown|scss/at-rule-no-unknown|ignoreAtRules|theme|tailwind'Repository: getdokan/plugin-ui
Length of output: 82
🏁 Script executed:
cat -n .stylelintrc.jsonRepository: getdokan/plugin-ui
Length of output: 1688
🏁 Script executed:
head -160 src/styles.css | tail -20Repository: getdokan/plugin-ui
Length of output: 670
🏁 Script executed:
rg -n 'at-rule-no-unknown' .stylelintrc.jsonRepository: getdokan/plugin-ui
Length of output: 44
🏁 Script executed:
# Check if there are any other stylelint-related configuration files or tailwind config
fd -type f -name 'tailwind.config.*' .
fd -type f -name 'stylelint.config.*' .Repository: getdokan/plugin-ui
Length of output: 404
🏁 Script executed:
rg -A 5 -B 5 '`@theme`' src/styles.css | head -20Repository: getdokan/plugin-ui
Length of output: 354
Add Tailwind v4 @theme at-rule to stylelint configuration.
Line 155 uses valid Tailwind v4 @theme inline syntax, but stylelint's at-rule-no-unknown rule (inherited from stylelint-config-standard-scss) flags it as unknown. Add the following to .stylelintrc.json rules to recognize Tailwind v4 directives:
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": ["theme"]
}
]🧰 Tools
🪛 Stylelint (17.11.0)
[error] 155-155: Unexpected unknown at-rule "@theme" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/styles.css` at line 155, The stylelint error is caused by Tailwind v4's
`@theme inline` at-rule being unknown to the `at-rule-no-unknown` rule; update
your stylelint config (e.g., .stylelintrc.json) to allow Tailwind's `theme`
at-rule by modifying the `at-rule-no-unknown` rule to include `"ignoreAtRules":
["theme"]` so `@theme` is recognized and no longer flagged.
| @keyframes rdp-slide_in_left { | ||
| 0% { transform: translateX(-100%); } | ||
| 100% { transform: translateX(0); } | ||
| } | ||
| @keyframes rdp-slide_in_right { | ||
| 0% { transform: translateX(100%); } | ||
| 100% { transform: translateX(0); } | ||
| } | ||
| @keyframes rdp-slide_out_left { | ||
| 0% { transform: translateX(0); } | ||
| 100% { transform: translateX(-100%); } | ||
| } | ||
| @keyframes rdp-slide_out_right { | ||
| 0% { transform: translateX(0); } | ||
| 100% { transform: translateX(100%); } | ||
| } | ||
| @keyframes rdp-fade_in { | ||
| from { opacity: 0; } | ||
| to { opacity: 1; } | ||
| } | ||
| @keyframes rdp-fade_out { | ||
| from { opacity: 1; } | ||
| to { opacity: 0; } | ||
| } | ||
| .rdp-weeks_before_enter { | ||
| animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards; | ||
| } | ||
| .rdp-weeks_before_exit { | ||
| animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards; | ||
| } | ||
| .rdp-weeks_after_enter { | ||
| animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards; | ||
| } | ||
| .rdp-weeks_after_exit { | ||
| animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards; | ||
| } | ||
| .rdp-caption_before_enter { | ||
| animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards; | ||
| } | ||
| .rdp-caption_before_exit { | ||
| animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards; | ||
| } | ||
| .rdp-caption_after_enter { | ||
| animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards; | ||
| } | ||
| .rdp-caption_after_exit { | ||
| animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Verify no underscore-style rdp keyframe identifiers/references remain.
rg -nP '`@keyframes`\s+rdp-[a-z]+_[a-z_]+' src/styles.css
rg -nP 'animation:\s*rdp-[a-z]+_[a-z_]+' src/styles.cssRepository: getdokan/plugin-ui
Length of output: 1529
🏁 Script executed:
#!/bin/bash
# Find linting configuration files
fd -e stylelintrc -e stylelintrc.json -e stylelintrc.js -e stylelintrc.yaml -e .stylelintrc.* 2>/dev/null || true
# Also check package.json for stylelint config
if [ -f package.json ]; then
rg -A 20 '"stylelint"' package.json || true
fiRepository: getdokan/plugin-ui
Length of output: 44
🏁 Script executed:
#!/bin/bash
# Check for ALL underscore-style keyframes (not just rdp-*)
rg -n '`@keyframes`\s+\w+_\w+' src/styles.css
# Also check if there are any underscore keyframes beyond line 406
wc -l src/styles.css
rg -nP '`@keyframes`\s+[a-z]' src/styles.css | tail -20Repository: getdokan/plugin-ui
Length of output: 356
🏁 Script executed:
#!/bin/bash
# Verify the complete context of the file around the modified lines
# Check what's before line 330 and after line 406
head -n 410 src/styles.css | tail -n 85 | cat -nRepository: getdokan/plugin-ui
Length of output: 3171
🏁 Script executed:
#!/bin/bash
# Search more thoroughly for any linting/config files
find . -name ".stylelintrc*" -o -name "stylelint.config.*" 2>/dev/null | head -20
# Check for stylelint in root level
ls -la | grep -i stylelint || true
# Check if there's a .eslintrc or similar that might reference stylelint
fd -type f -name ".*rc*" | head -20Repository: getdokan/plugin-ui
Length of output: 341
🏁 Script executed:
#!/bin/bash
# Check if pui-* keyframes also have underscores and if they should be fixed
rg -n '`@keyframes` pui-' src/styles.css
rg -n 'animation:.*pui-' src/styles.css
# Check for the CSS import requirement mentioned in guidelines
head -50 src/styles.css | grep -i "`@import`\|layer"Repository: getdokan/plugin-ui
Length of output: 362
🏁 Script executed:
#!/bin/bash
# Check the stylelint configuration
cat .stylelintrc.jsonRepository: getdokan/plugin-ui
Length of output: 1422
🏁 Script executed:
#!/bin/bash
# Check for ALL `@keyframes` in the file to see the complete picture
rg -n '`@keyframes`' src/styles.cssRepository: getdokan/plugin-ui
Length of output: 337
🏁 Script executed:
#!/bin/bash
# Check if the CSS also uses underscore naming in class selectors and other places
rg -nP '\.[a-z]+-[a-z]+_' src/styles.css | head -20Repository: getdokan/plugin-ui
Length of output: 514
🏁 Script executed:
#!/bin/bash
# Check the default keyframes-name-pattern in stylelint-config-standard-scss
npm list stylelint-config-standard-scss 2>/dev/null || true
# Search for any remaining underscore animation references that might be missed
rg -n 'animation:.*rdp-' src/styles.cssRepository: getdokan/plugin-ui
Length of output: 1376
🏁 Script executed:
#!/bin/bash
# Check for any other keyframe-style naming patterns to see if the review scope is correct
rg -n '`@keyframes`' src/styles.css -A 1 | grep -v '^--'
# Verify the complete CSS file has no CSS import requirement issues mentioned in guidelines
head -10 src/styles.cssRepository: getdokan/plugin-ui
Length of output: 958
🏁 Script executed:
#!/bin/bash
# Check what keyframes-name-pattern default is in stylelint-config-standard-scss
# Let's search for the pattern in the installed packages
if [ -d node_modules/stylelint-config-standard-scss ]; then
cat node_modules/stylelint-config-standard-scss/index.js 2>/dev/null | grep -A 5 "keyframes-name-pattern" || echo "Not found in index.js"
# Also check the stylelint package for the default rule
rg "keyframes-name-pattern" node_modules/stylelint*/index.js 2>/dev/null || true
fi
# Alternatively, check if we can see the inherited config
cat node_modules/stylelint-config-standard-scss/index.js 2>/dev/null | head -100 || echo "Cannot read stylelint config"Repository: getdokan/plugin-ui
Length of output: 44
🏁 Script executed:
#!/bin/bash
# Verify once more that all underscore keyframes are in the provided line range
# Get exact line count and verify the range is correct
sed -n '325,410p' src/styles.css | grep -E '`@keyframes`|animation:' | cat -nRepository: getdokan/plugin-ui
Length of output: 1583
🏁 Script executed:
#!/bin/bash
# Check the stylelint documentation for default keyframes-name-pattern
# Look for any pattern information in the extended config
rg -i "keyframes" node_modules/stylelint-config-standard-scss/ 2>/dev/null | head -10
# Also check the main stylelint package defaults
rg -i "keyframes-name-pattern" . --type-list | grep -v node_modules | head -5
# Verify that pui-* keyframes also use underscores (showing inconsistency)
rg '`@keyframes` pui-' src/styles.cssRepository: getdokan/plugin-ui
Length of output: 528
🏁 Script executed:
#!/bin/bash
# Final verification: ensure all keyframe references have been found
# Search for any animation property with underscore keyframes beyond line 406
sed -n '1,410p' src/styles.css | rg -c 'animation:.*_' || echo "0 matches"
sed -n '411,$p' src/styles.css | rg 'animation:.*_' || echo "No underscore animations after line 410"Repository: getdokan/plugin-ui
Length of output: 105
🏁 Script executed:
#!/bin/bash
# Check if there are any more `@keyframes` beyond line 406
wc -l src/styles.css
tail -100 src/styles.css | grep -i "`@keyframes`" || echo "No more keyframes at end"
# Verify the total count of underscore keyframes in entire file
rg '`@keyframes`.*_' src/styles.css | wc -lRepository: getdokan/plugin-ui
Length of output: 268
Rename rdp-* keyframes from underscore to kebab-case and update all animation references.
Lines 330-406 contain underscore-separated keyframe names (rdp-slide_in_left, rdp-fade_out, etc.) which violate the standard CSS naming convention for keyframe animations. These must be renamed to kebab-case (rdp-slide-in-left, rdp-fade-out, etc.), and all animation property references must be updated to match.
Proposed fix
-@keyframes rdp-slide_in_left {
+@keyframes rdp-slide-in-left {
@@
-@keyframes rdp-slide_in_right {
+@keyframes rdp-slide-in-right {
@@
-@keyframes rdp-slide_out_left {
+@keyframes rdp-slide-out-left {
@@
-@keyframes rdp-slide_out_right {
+@keyframes rdp-slide-out-right {
@@
-@keyframes rdp-fade_in {
+@keyframes rdp-fade-in {
@@
-@keyframes rdp-fade_out {
+@keyframes rdp-fade-out {
@@
-.rdp-weeks_before_enter {
- animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+.rdp-weeks_before_enter {
+ animation: rdp-slide-in-left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
@@
-.rdp-weeks_before_exit {
- animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+.rdp-weeks_before_exit {
+ animation: rdp-slide-out-left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
@@
-.rdp-weeks_after_enter {
- animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+.rdp-weeks_after_enter {
+ animation: rdp-slide-in-right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
@@
-.rdp-weeks_after_exit {
- animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+.rdp-weeks_after_exit {
+ animation: rdp-slide-out-right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
@@
-.rdp-caption_before_enter {
- animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+.rdp-caption_before_enter {
+ animation: rdp-fade-in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
@@
-.rdp-caption_before_exit {
- animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+.rdp-caption_before_exit {
+ animation: rdp-fade-out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
@@
-.rdp-caption_after_enter {
- animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+.rdp-caption_after_enter {
+ animation: rdp-fade-in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
@@
-.rdp-caption_after_exit {
- animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+.rdp-caption_after_exit {
+ animation: rdp-fade-out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
@@
-.rdp-root[dir="rtl"] .rdp-weeks_after_enter {
- animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+.rdp-root[dir="rtl"] .rdp-weeks_after_enter {
+ animation: rdp-slide-in-left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
@@
-.rdp-root[dir="rtl"] .rdp-weeks_before_exit {
- animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+.rdp-root[dir="rtl"] .rdp-weeks_before_exit {
+ animation: rdp-slide-out-right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
@@
-.rdp-root[dir="rtl"] .rdp-weeks_before_enter {
- animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+.rdp-root[dir="rtl"] .rdp-weeks_before_enter {
+ animation: rdp-slide-in-right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
@@
-.rdp-root[dir="rtl"] .rdp-weeks_after_exit {
- animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+.rdp-root[dir="rtl"] .rdp-weeks_after_exit {
+ animation: rdp-slide-out-left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;🧰 Tools
🪛 Stylelint (17.11.0)
[error] 330-330: Expected keyframe name "rdp-slide_in_left" to be kebab-case (keyframes-name-pattern)
(keyframes-name-pattern)
[error] 335-335: Expected keyframe name "rdp-slide_in_right" to be kebab-case (keyframes-name-pattern)
(keyframes-name-pattern)
[error] 340-340: Expected keyframe name "rdp-slide_out_left" to be kebab-case (keyframes-name-pattern)
(keyframes-name-pattern)
[error] 345-345: Expected keyframe name "rdp-slide_out_right" to be kebab-case (keyframes-name-pattern)
(keyframes-name-pattern)
[error] 350-350: Expected keyframe name "rdp-fade_in" to be kebab-case (keyframes-name-pattern)
(keyframes-name-pattern)
[error] 355-355: Expected keyframe name "rdp-fade_out" to be kebab-case (keyframes-name-pattern)
(keyframes-name-pattern)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/styles.css` around lines 330 - 390, Rename all keyframe identifiers from
underscore to kebab-case (e.g., rdp-slide_in_left → rdp-slide-in-left,
rdp-slide_in_right → rdp-slide-in-right, rdp-slide_out_left →
rdp-slide-out-left, rdp-slide_out_right → rdp-slide-out-right, rdp-fade_in →
rdp-fade-in, rdp-fade_out → rdp-fade-out) and update every animation reference
that uses those names (for example in .rdp-weeks_before_enter,
.rdp-weeks_before_exit, .rdp-weeks_after_enter, .rdp-weeks_after_exit,
.rdp-caption_before_enter, .rdp-caption_before_exit, .rdp-caption_after_enter,
.rdp-caption_after_exit) so the animation: declarations point to the new
kebab-case names; also search the stylesheet for any other occurrences of the
old underscore names and replace them consistently.
2 participants
Summary by CodeRabbit
Chores
Breaking Changes
Notice