Skip to content

Fix: replace deprecated Sass @import with @use - #38

Open
Rmahiii wants to merge 1 commit into
PSMRI:mainfrom
Rmahiii:fix-scss-import
Open

Fix: replace deprecated Sass @import with @use#38
Rmahiii wants to merge 1 commit into
PSMRI:mainfrom
Rmahiii:fix-scss-import

Conversation

@Rmahiii

@Rmahiii Rmahiii commented Mar 18, 2026

Copy link
Copy Markdown

Fix Sass deprecation warnings by replacing @import with @use

  • Migrated SCSS imports to modern @use syntax
  • Ensured styles remain consistent after migration

This improves compatibility with future Sass versions.

Summary by CodeRabbit

  • Bug Fixes

    • Standardized blog category formatting for consistency across content
  • Chores

    • Removed testimonials and reviews components
    • Removed career benefits, sidebar, and job listings features
    • Removed feature showcase and integrations display components
    • Removed comment system integration
    • Removed sitemap functionality
    • Cleaned up unused code and imports

@coderabbitai

coderabbitai Bot commented Mar 18, 2026

Copy link
Copy Markdown
📝 Walkthrough

Walkthrough

This 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

Cohort / File(s) Summary
Configuration & Build Updates
astro.config.mjs, src/styles/main.scss
Removed sitemap integration from config. Updated Sass to replace @import statements with @include meta.load-css() calls for loading partials into Tailwind layers.
Category Normalization
src/content/blog/ci-cd-for-amrit.mdx, src/content/blog/containerizing-amrit.mdx, src/content/blog/elk-stack.mdx, src/content/blog/local-env-setup.mdx
Standardized category casing from mixed cases (DevOps, Dev-Ops, Logging, Monitoring) to lowercase variants (devops, logging, monitoring).
Astro Component Deletions
src/layouts/components/Testimonial.astro, src/layouts/components/Community.astro, src/layouts/components/SuccessStories.astro, src/layouts/components/blog/FeaturedBlog.astro, src/layouts/components/career/CareerBenifits.astro, src/layouts/components/career/CareerSidebar.astro, src/layouts/components/features/...
Removed unused Astro components including testimonial carousel, career benefits/sidebar sections, and feature service/banner modules. Removed unused imports from Community and SuccessStories.
React Component Deletions
src/layouts/function-components/CareerBenifits.jsx, src/layouts/function-components/Disqus.jsx, src/layouts/function-components/FeatureCard.jsx, src/layouts/function-components/IntegrateMedia.jsx, src/layouts/function-components/JobPosts.jsx, src/layouts/function-components/SigninSlider.jsx, src/layouts/function-components/TestimonialSlider.jsx
Removed seven React components handling career benefits, comments, feature cards, integration grids, job listings, and testimonial sliders.
Utility & Type Cleanup
src/lib/utils/similarItems.ts, src/pages/404.astro, src/pages/programs.astro
Removed similarItems utility function. Deleted unused config imports from 404 and programs pages.
Category Route Refactoring
src/pages/categories/[category].astro
Updated category handling to normalize and deduplicate category values using Set and slugify, consolidating variant cases (DevOps, Dev-Ops) into single entries and ensuring consistent route generation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~28 minutes

Poem

🐰 The warren cheers as clutter takes flight,
Components retire, imports grow light,
Categories lowercase, now all synchronized,
Sass layers refined, meta-blessed and prized,
Clean code hops forward with newfound grace! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title 'Fix: replace deprecated Sass @import with @use' clearly and accurately summarizes the primary change, which is updating SCSS imports in src/styles/main.scss from @import to @use syntax.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
📝 Coding Plan
  • Generate coding plan for human review comments

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Tip

CodeRabbit can enforce grammar and style rules using `languagetool`.

Configure the reviews.tools.languagetool setting to enable/disable rules and categories. Refer to the LanguageTool Community to learn more.

@sonarqubecloud

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
src/styles/main.scss (1)

3-5: Static analysis false positives: @tailwind directives are valid.

The Stylelint errors flagging @tailwind as 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-tailwindcss which 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

📥 Commits

Reviewing files that changed from the base of the PR and between cc58369 and 29ba717.

📒 Files selected for processing (26)
  • astro.config.mjs
  • src/content/blog/ci-cd-for-amrit.mdx
  • src/content/blog/containerizing-amrit.mdx
  • src/content/blog/elk-stack.mdx
  • src/content/blog/local-env-setup.mdx
  • src/layouts/components/Community.astro
  • src/layouts/components/SuccessStories.astro
  • src/layouts/components/Testimonial.astro
  • src/layouts/components/blog/FeaturedBlog.astro
  • src/layouts/components/career/CareerBenifits.astro
  • src/layouts/components/career/CareerSidebar.astro
  • src/layouts/components/features/FeatureBanner.astro
  • src/layouts/components/features/FeatureService.astro
  • src/layouts/components/features/ProjecManagement.astro
  • src/layouts/function-components/CareerBenifits.jsx
  • src/layouts/function-components/Disqus.jsx
  • src/layouts/function-components/FeatureCard.jsx
  • src/layouts/function-components/IntegrateMedia.jsx
  • src/layouts/function-components/JobPosts.jsx
  • src/layouts/function-components/SigninSlider.jsx
  • src/layouts/function-components/TestimonialSlider.jsx
  • src/lib/utils/similarItems.ts
  • src/pages/404.astro
  • src/pages/categories/[category].astro
  • src/pages/programs.astro
  • src/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

Comment on lines +13 to +21
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()),
),
),
];

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 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}")
PY

Repository: 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 -n

Repository: PSMRI/AMRIT-Website

Length of output: 1961


🏁 Script executed:

# Find and examine the taxonomyFilter implementation
fd "taxonomyFilter" -t f

Repository: 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 -100

Repository: PSMRI/AMRIT-Website

Length of output: 3796


🏁 Script executed:

cat -n src/lib/utils/taxonomyFilter.ts

Repository: 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 -50

Repository: 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant