Fix: replace deprecated Sass @import with @use - #38
Conversation
📝 WalkthroughWalkthroughThis PR removes unused components and integrations, normalizes category naming to lowercase across blog posts and content, eliminates obsolete utilities and imports, and updates Sass to use the meta.load-css API. Includes deletion of testimonial, career benefits, feature service, and other defunct components. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~28 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 Tip CodeRabbit can enforce grammar and style rules using `languagetool`.Configure the |
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/styles/main.scss (1)
3-5: Static analysis false positives:@tailwinddirectives are valid.The Stylelint errors flagging
@tailwindas unknown at-rules are false positives. This is standard Tailwind CSS syntax. To resolve these warnings, configure Stylelint to recognize Tailwind directives.🔧 Suggested Stylelint configuration fix
Add to your
.stylelintrc(or equivalent config file):{ "rules": { "scss/at-rule-no-unknown": [ true, { "ignoreAtRules": ["tailwind", "apply", "layer", "config", "screen"] } ] } }Alternatively, use
stylelint-config-tailwindcsswhich handles this automatically.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/styles/main.scss` around lines 3 - 5, Stylelint is flagging the Tailwind at-rules (`@tailwind`, `@apply`, `@layer`, etc.) in main.scss as unknown; update the Stylelint config (e.g., .stylelintrc) to allow Tailwind directives by adding an exception for these at-rules (adjust the scss/at-rule-no-unknown rule to ignore "tailwind", "apply", "layer", "config", "screen") or install/use stylelint-config-tailwindcss so `@tailwind` base/components/utilities in main.scss are recognized.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/categories/`[category].astro:
- Around line 13-21: The category normalization is inconsistent and not
null-safe: the categories array uses (await getTaxonomy(...)).map(value =>
slugify(value?.replace(/-/g, "").toLowerCase())) which can throw if value is
null and produces different slugs than taxonomyFilter; fix by extracting a
single normalizer function (e.g., normalizeCategory) that does const s =
String(value ?? ""); return slugify(s.replace(/-/g, "").toLowerCase()); then use
that same normalizeCategory when building categories (the map over getTaxonomy)
and when filtering posts (where taxonomyFilter is applied) so routes and filters
use identical, null-safe normalization across getTaxonomy, categories, and
taxonomyFilter.
---
Nitpick comments:
In `@src/styles/main.scss`:
- Around line 3-5: Stylelint is flagging the Tailwind at-rules (`@tailwind`,
`@apply`, `@layer`, etc.) in main.scss as unknown; update the Stylelint config
(e.g., .stylelintrc) to allow Tailwind directives by adding an exception for
these at-rules (adjust the scss/at-rule-no-unknown rule to ignore "tailwind",
"apply", "layer", "config", "screen") or install/use
stylelint-config-tailwindcss so `@tailwind` base/components/utilities in main.scss
are recognized.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6621406d-0694-488f-b038-b0fcfc9a46c1
📒 Files selected for processing (26)
astro.config.mjssrc/content/blog/ci-cd-for-amrit.mdxsrc/content/blog/containerizing-amrit.mdxsrc/content/blog/elk-stack.mdxsrc/content/blog/local-env-setup.mdxsrc/layouts/components/Community.astrosrc/layouts/components/SuccessStories.astrosrc/layouts/components/Testimonial.astrosrc/layouts/components/blog/FeaturedBlog.astrosrc/layouts/components/career/CareerBenifits.astrosrc/layouts/components/career/CareerSidebar.astrosrc/layouts/components/features/FeatureBanner.astrosrc/layouts/components/features/FeatureService.astrosrc/layouts/components/features/ProjecManagement.astrosrc/layouts/function-components/CareerBenifits.jsxsrc/layouts/function-components/Disqus.jsxsrc/layouts/function-components/FeatureCard.jsxsrc/layouts/function-components/IntegrateMedia.jsxsrc/layouts/function-components/JobPosts.jsxsrc/layouts/function-components/SigninSlider.jsxsrc/layouts/function-components/TestimonialSlider.jsxsrc/lib/utils/similarItems.tssrc/pages/404.astrosrc/pages/categories/[category].astrosrc/pages/programs.astrosrc/styles/main.scss
💤 Files with no reviewable changes (19)
- src/pages/404.astro
- src/layouts/function-components/TestimonialSlider.jsx
- src/layouts/function-components/FeatureCard.jsx
- src/layouts/components/SuccessStories.astro
- src/layouts/function-components/JobPosts.jsx
- src/layouts/function-components/Disqus.jsx
- src/layouts/components/Testimonial.astro
- src/layouts/components/career/CareerSidebar.astro
- astro.config.mjs
- src/layouts/function-components/CareerBenifits.jsx
- src/lib/utils/similarItems.ts
- src/layouts/components/features/ProjecManagement.astro
- src/layouts/components/career/CareerBenifits.astro
- src/layouts/components/features/FeatureService.astro
- src/layouts/function-components/IntegrateMedia.jsx
- src/layouts/components/Community.astro
- src/layouts/components/features/FeatureBanner.astro
- src/pages/programs.astro
- src/layouts/function-components/SigninSlider.jsx
| const categories = [ | ||
| ...new Set( | ||
| // Normalize category labels before route generation so content variants | ||
| // like "DevOps" and "Dev-Ops" collapse into a single category page. | ||
| (await getTaxonomy(config.settings.blog_folder, "categories")).map((value) => | ||
| slugify(value?.replace(/-/g, "").toLowerCase()), | ||
| ), | ||
| ), | ||
| ]; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python - <<'PY'
import pathlib, re
try:
import yaml
except Exception:
raise SystemExit("PyYAML is required in the sandbox. Install with: python -m pip install pyyaml")
root = pathlib.Path("src/content/blog")
dashed = []
invalid = []
for p in root.rglob("*.mdx"):
text = p.read_text(encoding="utf-8")
m = re.match(r'^---\n(.*?)\n---', text, re.S)
if not m:
invalid.append((str(p), "missing frontmatter"))
continue
fm = yaml.safe_load(m.group(1)) or {}
cats = fm.get("categories")
if not isinstance(cats, list):
invalid.append((str(p), f"categories is not a list: {cats!r}"))
continue
for c in cats:
if not isinstance(c, str) or not c.strip():
invalid.append((str(p), f"invalid category value: {c!r}"))
if isinstance(c, str) and "-" in c:
dashed.append((str(p), c))
print(f"dashed_categories={len(dashed)}")
for p, c in dashed:
print(f"{p}: {c}")
print(f"invalid_categories={len(invalid)}")
for p, msg in invalid:
print(f"{p}: {msg}")
PYRepository: PSMRI/AMRIT-Website
Length of output: 1768
🏁 Script executed:
# First, verify the actual file and its structure
head -50 src/pages/categories/\[category\].astro | cat -nRepository: PSMRI/AMRIT-Website
Length of output: 1961
🏁 Script executed:
# Find and examine the taxonomyFilter implementation
fd "taxonomyFilter" -t fRepository: PSMRI/AMRIT-Website
Length of output: 94
🏁 Script executed:
# Search for dashed categories in markdown files directly (avoid YAML parsing)
rg "categories:" src/content/blog -A 5 | head -100Repository: PSMRI/AMRIT-Website
Length of output: 3796
🏁 Script executed:
cat -n src/lib/utils/taxonomyFilter.tsRepository: PSMRI/AMRIT-Website
Length of output: 370
🏁 Script executed:
# Also check the textConverter to understand slugify behavior
cat -n src/lib/utils/textConverter.ts | head -50Repository: PSMRI/AMRIT-Website
Length of output: 1613
Normalize categories consistently to prevent empty category pages and null-safety errors.
Routes normalize with dash removal before slugify (lines 18, 26), but filtering uses taxonomyFilter which only applies slugify without dash removal. This causes a mismatch: a route like devops won't match posts with Dev-Ops since filtering produces dev-ops. Additionally, value?.replace(/-/g, "").toLowerCase() is not null-safe—the ?. protects replace() but .toLowerCase() is still called on the result, throwing an error if value is null.
🔧 Suggested fix (shared normalizer with null-safety)
import taxonomyFilter from "@/lib/utils/taxonomyFilter";
import { slugify, humanize } from "@/lib/utils/textConverter";
+const normalizeCategory = (value: unknown) => {
+ if (typeof value !== "string" || !value.trim()) return null;
+ return slugify(value.replace(/-/g, "").toLowerCase());
+};
+
const categories = [
...new Set(
- (await getTaxonomy(config.settings.blog_folder, "categories")).map((value) =>
- slugify(value?.replace(/-/g, "").toLowerCase()),
- ),
+ (await getTaxonomy(config.settings.blog_folder, "categories"))
+ .map((value) => normalizeCategory(value))
+ .filter((value): value is string => Boolean(value)),
),
];
export async function getStaticPaths() {
const categories = [
...new Set(
- (await getTaxonomy(config.settings.blog_folder, "categories")).map(
- (value) => slugify(value?.replace(/-/g, "").toLowerCase()),
- ),
+ (await getTaxonomy(config.settings.blog_folder, "categories"))
+ .map((value) => normalizeCategory(value))
+ .filter((value): value is string => Boolean(value)),
),
];
return categories.map((item) => {
const category = item;
@@
const posts = await getSinglePage(config.settings.blog_folder);
-const filterByTags = taxonomyFilter(posts, "categories", category);
+const filterByTags = posts.filter((post) =>
+ post.data.categories.some(
+ (value: unknown) => normalizeCategory(value) === category,
+ ),
+);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/categories/`[category].astro around lines 13 - 21, The category
normalization is inconsistent and not null-safe: the categories array uses
(await getTaxonomy(...)).map(value => slugify(value?.replace(/-/g,
"").toLowerCase())) which can throw if value is null and produces different
slugs than taxonomyFilter; fix by extracting a single normalizer function (e.g.,
normalizeCategory) that does const s = String(value ?? ""); return
slugify(s.replace(/-/g, "").toLowerCase()); then use that same normalizeCategory
when building categories (the map over getTaxonomy) and when filtering posts
(where taxonomyFilter is applied) so routes and filters use identical, null-safe
normalization across getTaxonomy, categories, and taxonomyFilter.



Fix Sass deprecation warnings by replacing @import with @use
This improves compatibility with future Sass versions.
Summary by CodeRabbit
Bug Fixes
Chores