@jjlmoya/utils-developer 1.4.0 → 1.6.0

package/src/tool/duplicateCssRemover/i18n/it.ts

@@ -0,0 +1,167 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { DuplicateCssRemoverUI } from '../ui';
+
+const slug = 'rimozione-css-duplicato';
+const title = 'Rimuovi CSS Duplicati Online. Unifica e Ottimizza i Tuoi Fogli di Stile';
+const description =
+  'Strumento gratuito per ripulire e purificare il codice CSS duplicato. Unifica i selettori ridondanti, rispetta la cascade e riduce immediatamente le dimensioni del file direttamente nel browser.';
+
+const faqData = [
+  {
+    question: 'Cosa succede quando i selettori CSS sono duplicati?',
+    answer:
+      'Quando lo stesso selettore compare più volte, il browser applica tutte le regole, ma l\'ultima dichiarazione di ogni proprietà sovrascrive quelle precedenti. Il risultato sono file più pesanti del necessario, senza alcun beneficio reale per il risultato visivo.',
+  },
+  {
+    question: 'Si perdono proprietà durante la rimozione dei duplicati?',
+    answer:
+      'No. L\'algoritmo rispetta scrupolosamente la cascade CSS: in caso di conflitti sullo stesso selettore, mantiene sempre l\'ultima proprietà dichiarata. Le proprietà univoche di ogni blocco vengono unite sotto un unico selettore unificato.',
+  },
+  {
+    question: 'Funziona con CSS minificato o con commenti?',
+    answer:
+      'Lo strumento rimuove automaticamente i commenti CSS prima di elaborare il codice e funziona correttamente anche con codice su una singola riga. Per CSS con nesting avanzato o at-rules complesse, si consiglia di separare prima i blocchi.',
+  },
+  {
+    question: 'Il mio CSS viene inviato a qualche server?',
+    answer:
+      'No. Tutta l\'elaborazione avviene direttamente nel browser tramite JavaScript locale. Nessuna parte del tuo CSS viene trasmessa a server esterni, garantendo la massima privacy del tuo codice.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Incolla il tuo CSS',
+    text: 'Copia il contenuto del tuo file CSS con selettori ripetuti e incollalo nel campo di sinistra "Dirty / Duplicate CSS".',
+  },
+  {
+    name: 'Avvia la pulizia',
+    text: 'Clicca su "Pulisci e Unifica CSS". Lo strumento analizzerà tutti i selettori, unirà le proprietà e rimuoverà i blocchi ridondanti.',
+  },
+  {
+    name: 'Controlla i risultati e copia',
+    text: 'Verifica il risparmio in byte ottenuto e copia il CSS ottimizzato con il pulsante "Copia Codice" per usarlo direttamente nel tuo progetto.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'it',
+};
+
+const ui: DuplicateCssRemoverUI = {
+  labelInput: 'CSS Sporco / Duplicato',
+  labelOutput: 'CSS Pulito',
+  placeholderInput: '.btn { padding: 10px; color: red; }\n.btn { margin: 5px; color: blue; }',
+  placeholderOutput: 'Il CSS ottimizzato e unificato apparirà qui...',
+  btnClean: 'Pulisci e Unifica CSS',
+  btnCopy: 'Copia Codice',
+  btnCopied: 'Copiato!',
+  statBytesOriginal: 'Byte Originali',
+  statBytesClean: 'Byte Puliti',
+  statSaving: 'Risparmio',
+};
+
+export const content: ToolLocaleContent<DuplicateCssRemoverUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Domande Frequenti',
+  faq: faqData,
+  bibliographyTitle: 'Riferimenti e Documentazione',
+  bibliography: [
+    {
+      name: 'Web Vitals: impatto del CSS su Render-Blocking e FCP',
+      url: 'https://web.dev/articles/render-blocking-resources',
+    },
+    {
+      name: 'Specifica W3C: Cascade e Ereditarietà CSS',
+      url: 'https://www.w3.org/TR/css-cascade-4/',
+    },
+    {
+      name: 'Clean CSS: libreria e metodologie per la minificazione CSS',
+      url: 'https://github.com/clean-css/clean-css',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Perché il codice CSS si duplica?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Nella manutenzione di progetti web a lungo termine o nel lavoro con codice ereditato (<em>legacy code</em>), è molto comune che più sviluppatori scrivano regole CSS sovrapposte. Spesso, per paura di rompere un design esistente, si preferisce aggiungere una nuova regola ridondante in fondo al documento piuttosto che modificare o rifattorizzare quella originale.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Il risultato è un file inefficiente con decine di selettori dichiarati più volte, che penalizzano la leggibilità del codice e aumentano notevolmente il peso scaricato dalla pagina web.',
+    },
+    {
+      type: 'title',
+      text: 'L\'impatto nascosto sulle prestazioni web (Web Vitals)',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'I file di stile bloccano il rendering naturale del browser (sono risorse <strong>Render-Blocking</strong>). Finché il browser non scarica e costruisce il CSSOM completo, lo schermo rimane bianco.',
+    },
+    {
+      type: 'tip',
+      html: 'Eliminare gli stili ridondanti non è solo una questione di pulizia: è un miglioramento misurabile e immediato di metriche fondamentali come il <strong>First Contentful Paint (FCP)</strong>.',
+    },
+    {
+      type: 'title',
+      text: 'Come unifichiamo le regole duplicate',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Questo strumento agisce come un assemblatore intelligente. Invece di limitarsi a comprimere gli spazi bianchi come farebbe un minifier tradizionale, scansiona ricorsivamente il testo alla ricerca di selettori identici.',
+    },
+    {
+      type: 'list',
+      items: [
+        'Immagina di avere la regola <code>.box { color: red; }</code> e cento righe dopo un <code>.box { padding: 10px; color: blue; }</code>. Lo strumento unirà entrambi i blocchi sotto lo stesso selettore <code>.box</code>, combinando il padding.',
+        '<strong>Conservazione della Cascade CSS:</strong> In caso di conflitti diretti, l\'algoritmo mantiene scrupolosamente l\'ultima proprietà dichiarata. Questo garantisce che il tuo layout originale non si rompa durante la pulizia.',
+      ],
+    },
+    {
+      type: 'paragraph',
+      html: 'Smetti di inviare kilobyte di testo inutile ai dispositivi mobili dei tuoi utenti. Unifica il tuo codice in millisecondi, completamente offline, direttamente dal browser.',
+    },
+  ],
+};

package/src/tool/duplicateCssRemover/i18n/ja.ts

@@ -0,0 +1,168 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { DuplicateCssRemoverUI } from '../ui';
+
+const slug = 'duplicate-css-remover';
+const title = 'CSSの重複を削除するオンラインツール。スタイルシートを整理して最適化';
+const description =
+  '重複したCSSコードを無料でクリーンアップできるツール。冗長なセレクターを統合し、カスケードを維持しながら、ブラウザ上でファイルサイズを即座に削減します。';
+
+const faqData = [
+  {
+    question: 'CSSセレクターが重複しているとどうなりますか？',
+    answer:
+      '同じセレクターが複数回登場すると、ブラウザはすべてのルールを適用しますが、各プロパティの最後の宣言が前の宣言を上書きします。これにより、見た目に何の差もないまま、ファイルが必要以上に大きくなってしまいます。',
+  },
+  {
+    question: '重複を削除するとプロパティが失われますか？',
+    answer:
+      'いいえ。このアルゴリズムはCSSカスケードを厳密に尊重します。同じセレクター内でプロパティが競合する場合は、常に最後に宣言されたものが保持されます。各ブロック固有のプロパティは、ひとつに統合されたセレクターの下にまとめられます。',
+  },
+  {
+    question: 'ミニファイ済みのCSSやコメント付きのCSSでも使えますか？',
+    answer:
+      'はい。ツールは処理前にCSSコメントを自動的に削除し、1行にまとまったコードでも正しく動作します。高度なネストや複雑なアットルールが含まれるCSSには、あらかじめブロックを分割してから使用することをお勧めします。',
+  },
+  {
+    question: 'CSSのデータはサーバーに送信されますか？',
+    answer:
+      'いいえ。すべての処理はブラウザ内のローカルJavaScriptで完結します。CSSの一部も外部サーバーに送信されることはなく、コードのプライバシーは完全に守られます。',
+  },
+];
+
+const howToData = [
+  {
+    name: 'CSSを貼り付ける',
+    text: '重複セレクターを含むCSSファイルの内容をコピーして、左側の「Dirty / Duplicate CSS」フィールドに貼り付けます。',
+  },
+  {
+    name: 'クリーンアップを実行する',
+    text: '「CSSをクリーンアップして統合」ボタンをクリックします。ツールがすべてのセレクターを解析し、プロパティをマージして冗長なブロックを削除します。',
+  },
+  {
+    name: '結果を確認してコピーする',
+    text: '削減されたバイト数を確認し、「コードをコピー」ボタンで最適化済みのCSSをコピーして、プロジェクトに直接活用しましょう。',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'ja',
+};
+
+const ui: DuplicateCssRemoverUI = {
+  labelInput: '重複CSS（クリーニング前）',
+  labelOutput: 'クリーン済みCSS',
+  placeholderInput: '.btn { padding: 10px; color: red; }\n.btn { margin: 5px; color: blue; }',
+  placeholderOutput: '最適化・統合されたCSSがここに表示されます...',
+  btnClean: 'CSSをクリーンアップして統合',
+  btnCopy: 'コードをコピー',
+  btnCopied: 'コピーしました！',
+  statBytesOriginal: '元のサイズ（バイト）',
+  statBytesClean: 'クリーン後のサイズ',
+  statSaving: '削減量',
+};
+
+export const content: ToolLocaleContent<DuplicateCssRemoverUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'よくある質問',
+  faq: faqData,
+  bibliographyTitle: '参考資料とドキュメント',
+  bibliography: [
+    {
+      name: 'Web Vitals：CSSがRender-BlockingとFCPに与える影響',
+      url: 'https://web.dev/articles/render-blocking-resources',
+    },
+    {
+      name: 'W3C仕様：CSSカスケードと継承',
+      url: 'https://www.w3.org/TR/css-cascade-4/',
+    },
+    {
+      name: 'Clean CSS：CSSミニファイのライブラリと手法',
+      url: 'https://github.com/clean-css/clean-css',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'CSSコードが重複してしまう原因',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: '長期プロジェクトのメンテナンスやレガシーコードの作業では、複数の開発者が重複したCSSルールを書いてしまうことがよくあります。既存のデザインを壊すのが怖いため、元のコードを修正・リファクタリングするよりも、ドキュメントの末尾に新しいルールを追加する方を選びがちです。',
+    },
+    {
+      type: 'paragraph',
+      html: 'その結果、何十もの重複セレクターを抱えた非効率なファイルが生まれ、可読性を損なうだけでなく、Webページのダウンロードサイズも大幅に増加させてしまいます。',
+    },
+    {
+      type: 'title',
+      text: 'Webパフォーマンス（Web Vitals）への隠れた影響',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'スタイルシートファイルはブラウザのレンダリングをブロックします（<strong>Render-Blocking</strong>リソース）。完全なCSSOMをダウンロードして構築し終えるまで、画面は真っ白なままです。',
+    },
+    {
+      type: 'tip',
+      html: '冗長なスタイルを削除することは、コードの整理整頓だけの話ではありません。<strong>First Contentful Paint（FCP）</strong>などの重要なパフォーマンス指標を、即座に、数値として改善できます。',
+    },
+    {
+      type: 'title',
+      text: '重複ルールを統合する仕組み',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'このツールはインテリジェントなアセンブラーとして機能します。従来のミニファイアのように空白を圧縮するだけでなく、テキストを再帰的にスキャンして同一のセレクターパターンを検出します。',
+    },
+    {
+      type: 'list',
+      items: [
+        '<code>.box { color: red; }</code>というルールがあり、100行後に<code>.box { padding: 10px; color: blue; }</code>がある場合を想像してください。このツールは両方のブロックを同じ<code>.box</code>セレクターの下に統合し、paddingをマージします。',
+        '<strong>CSSカスケードの保全：</strong>直接的な競合がある場合、アルゴリズムは最後に宣言されたプロパティを厳密に保持します。これにより、ドキュメントをクリーンアップしても元のレイアウトが崩れません。',
+      ],
+    },
+    {
+      type: 'paragraph',
+      html: 'ユーザーのスマートフォンに無駄なキロバイトを送り続けるのはもう終わりにしましょう。ブラウザ上で、完全オフラインで、ミリ秒単位でコードを統合できます。',
+    },
+  ],
+};
+

package/src/tool/duplicateCssRemover/i18n/ko.ts

@@ -0,0 +1,168 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { DuplicateCssRemoverUI } from '../ui';
+
+const slug = 'duplicate-css-remover';
+const title = 'CSS 중복 제거 온라인 도구. 스타일시트를 정리하고 최적화하세요';
+const description =
+  '중복된 CSS 코드를 깔끔하게 정리하는 무료 도구입니다. 불필요한 셀렉터를 통합하고, 캐스케이드를 유지하면서 브라우저에서 즉시 파일 크기를 줄여드립니다.';
+
+const faqData = [
+  {
+    question: 'CSS 셀렉터가 중복되면 어떻게 되나요?',
+    answer:
+      '같은 셀렉터가 여러 번 등장하면 브라우저는 모든 규칙을 적용하지만, 각 속성의 마지막 선언이 이전 선언을 덮어씁니다. 그 결과 시각적인 차이도 없이 파일만 쓸데없이 무거워집니다.',
+  },
+  {
+    question: '중복을 제거하면 속성이 사라지지 않나요?',
+    answer:
+      '아닙니다. 알고리즘은 CSS 캐스케이드를 엄격히 따릅니다. 같은 셀렉터 아래 속성이 충돌하면 항상 마지막에 선언된 것을 유지합니다. 각 블록의 고유한 속성은 하나의 통합 셀렉터 아래로 합쳐집니다.',
+  },
+  {
+    question: '압축된 CSS나 주석이 있는 CSS에서도 작동하나요?',
+    answer:
+      '네. 도구는 처리 전에 CSS 주석을 자동으로 제거하며 한 줄짜리 코드에서도 정상 작동합니다. 고급 중첩이나 복잡한 at-rule이 포함된 CSS는 미리 블록을 분리한 뒤 사용하는 것을 권장합니다.',
+  },
+  {
+    question: '내 CSS가 서버로 전송되나요?',
+    answer:
+      '아닙니다. 모든 처리는 로컬 JavaScript를 통해 브라우저 안에서 직접 이루어집니다. CSS의 어떤 부분도 외부 서버로 전송되지 않으며, 코드의 완전한 프라이버시가 보장됩니다.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'CSS 붙여넣기',
+    text: '반복된 셀렉터가 포함된 CSS 파일 내용을 복사해 왼쪽 "중복 CSS" 필드에 붙여넣으세요.',
+  },
+  {
+    name: '정리 실행',
+    text: '"CSS 정리 및 통합" 버튼을 클릭하세요. 도구가 모든 셀렉터를 스캔하고 속성을 병합하며 불필요한 블록을 제거합니다.',
+  },
+  {
+    name: '결과 확인 후 복사',
+    text: '절약된 바이트를 확인한 뒤 "코드 복사" 버튼으로 최적화된 CSS를 복사해 프로젝트에 바로 사용하세요.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'ko',
+};
+
+const ui: DuplicateCssRemoverUI = {
+  labelInput: '중복 CSS (정리 전)',
+  labelOutput: '정리된 CSS',
+  placeholderInput: '.btn { padding: 10px; color: red; }\n.btn { margin: 5px; color: blue; }',
+  placeholderOutput: '최적화·통합된 CSS가 여기에 나타납니다...',
+  btnClean: 'CSS 정리 및 통합',
+  btnCopy: '코드 복사',
+  btnCopied: '복사됨!',
+  statBytesOriginal: '원본 바이트',
+  statBytesClean: '정리 후 바이트',
+  statSaving: '절약량',
+};
+
+export const content: ToolLocaleContent<DuplicateCssRemoverUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: '자주 묻는 질문',
+  faq: faqData,
+  bibliographyTitle: '참고 자료 및 문서',
+  bibliography: [
+    {
+      name: 'Web Vitals: CSS가 Render-Blocking과 FCP에 미치는 영향',
+      url: 'https://web.dev/articles/render-blocking-resources',
+    },
+    {
+      name: 'W3C 명세: CSS 캐스케이드와 상속',
+      url: 'https://www.w3.org/TR/css-cascade-4/',
+    },
+    {
+      name: 'Clean CSS: CSS 압축 라이브러리와 방법론',
+      url: 'https://github.com/clean-css/clean-css',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'CSS 코드는 왜 중복될까요?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: '장기 웹 프로젝트를 유지하거나 레거시 코드를 다룰 때, 여러 개발자가 겹치는 CSS 규칙을 작성하는 일은 매우 흔합니다. 기존 디자인을 건드릴까 봐 두려운 나머지, 원래 코드를 수정하거나 리팩터링하는 대신 문서 끝에 새 규칙을 덧붙이는 방식을 선택하곤 하죠.',
+    },
+    {
+      type: 'paragraph',
+      html: '그 결과는 수십 개의 셀렉터가 반복 선언된 비효율적인 파일이며, 가독성을 해치고 웹 페이지의 다운로드 무게를 크게 늘립니다.',
+    },
+    {
+      type: 'title',
+      text: '웹 성능(Web Vitals)에 미치는 숨겨진 영향',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '스타일시트 파일은 브라우저의 자연스러운 렌더링을 막습니다(<strong>Render-Blocking</strong> 리소스). 브라우저가 완전한 CSSOM을 다운로드하고 구성하기 전까지는 화면이 텅 빈 상태로 남아 있습니다.',
+    },
+    {
+      type: 'tip',
+      html: '불필요한 스타일을 제거하는 것은 단순히 코드를 깔끔하게 만드는 일이 아닙니다. <strong>First Contentful Paint(FCP)</strong> 같은 핵심 지표를 즉각적이고 수치적으로 개선할 수 있습니다.',
+    },
+    {
+      type: 'title',
+      text: '중복 규칙을 통합하는 방법',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '이 도구는 지능형 어셈블러처럼 작동합니다. 전통적인 압축 도구처럼 공백만 줄이는 게 아니라, 텍스트를 재귀적으로 스캔하여 동일한 셀렉터 패턴을 찾아냅니다.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<code>.box { color: red; }</code> 규칙이 있고 100줄 아래에 <code>.box { padding: 10px; color: blue; }</code>가 있다고 상상해보세요. 이 도구는 두 블록을 같은 <code>.box</code> 셀렉터 아래로 통합하고 padding을 합칩니다.',
+        '<strong>CSS 캐스케이드 보존:</strong> 직접적인 충돌이 있을 경우, 알고리즘은 마지막에 선언된 속성을 엄격히 보존합니다. 덕분에 정리 작업 후에도 원래 레이아웃이 무너지지 않습니다.',
+      ],
+    },
+    {
+      type: 'paragraph',
+      html: '사용자의 스마트폰에 쓸모없는 수 킬로바이트를 계속 전송하는 일은 이제 그만하세요. 브라우저에서 완전 오프라인으로, 밀리초 단위로 코드를 통합하세요.',
+    },
+  ],
+};
+

package/src/tool/duplicateCssRemover/i18n/nl.ts

@@ -0,0 +1,167 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { DuplicateCssRemoverUI } from '../ui';
+
+const slug = 'dubbele-css-verwijderen';
+const title = 'Dubbele CSS online verwijderen. Stylesheets samenvoegen en opschonen';
+const description =
+  'Gratis tool om dubbele CSS-code op te schonen en te verwijderen. Voegt redundante selectors samen, respecteert de cascade en verkleint je bestandsgrootte direct in de browser.';
+
+const faqData = [
+  {
+    question: 'Wat gebeurt er als CSS-selectors worden gedupliceerd?',
+    answer:
+      'Wanneer dezelfde selector meerdere keren voorkomt, past de browser alle regels toe, maar de laatste declaratie van elke eigenschap overschrijft de eerdere. Het resultaat zijn onnodig zware bestanden zonder enig visueel voordeel.',
+  },
+  {
+    question: 'Gaan er eigenschappen verloren bij het verwijderen van duplicaten?',
+    answer:
+      'Nee. Het algoritme respecteert de CSS-cascade strikt: bij conflicterende eigenschappen onder dezelfde selector wordt altijd de laatste gedeclareerde bewaard. Unieke eigenschappen uit elk blok worden samengevoegd onder één geünificeerde selector.',
+  },
+  {
+    question: 'Werkt het met geminificeerde CSS of CSS met commentaar?',
+    answer:
+      'De tool verwijdert CSS-commentaar automatisch vóór de verwerking en werkt correct met code op één regel. Voor CSS met geavanceerde nesting of complexe at-rules wordt aanbevolen de blokken eerst te scheiden.',
+  },
+  {
+    question: 'Wordt mijn CSS naar een server gestuurd?',
+    answer:
+      'Nee. Alle verwerking vindt direct in je browser plaats via lokaal JavaScript. Geen enkel deel van je CSS wordt naar een externe server gestuurd, wat de volledige privacy van je code garandeert.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Plak je CSS',
+    text: 'Kopieer de inhoud van je CSS-bestand met herhaalde selectors en plak het in het linkerveld "Dirty / Duplicate CSS".',
+  },
+  {
+    name: 'Start de opschoning',
+    text: 'Klik op "CSS opschonen en samenvoegen". De tool doorzoekt alle selectors, voegt eigenschappen samen en verwijdert redundante blokken.',
+  },
+  {
+    name: 'Bekijk de resultaten en kopieer',
+    text: 'Controleer de behaalde bytebesparing en kopieer de geoptimaliseerde CSS met de knop "Code kopiëren" voor direct gebruik in je project.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'nl',
+};
+
+const ui: DuplicateCssRemoverUI = {
+  labelInput: 'Vuile / Dubbele CSS',
+  labelOutput: 'Opgeschoonde CSS',
+  placeholderInput: '.btn { padding: 10px; color: red; }\n.btn { margin: 5px; color: blue; }',
+  placeholderOutput: 'Geoptimaliseerde en samengevoegde CSS verschijnt hier...',
+  btnClean: 'CSS opschonen en samenvoegen',
+  btnCopy: 'Code kopiëren',
+  btnCopied: 'Gekopieerd!',
+  statBytesOriginal: 'Originele bytes',
+  statBytesClean: 'Opgeschoonde bytes',
+  statSaving: 'Besparing',
+};
+
+export const content: ToolLocaleContent<DuplicateCssRemoverUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Veelgestelde vragen',
+  faq: faqData,
+  bibliographyTitle: 'Referenties en documentatie',
+  bibliography: [
+    {
+      name: 'Web Vitals: de invloed van CSS op Render-Blocking en FCP',
+      url: 'https://web.dev/articles/render-blocking-resources',
+    },
+    {
+      name: 'W3C-specificatie: CSS Cascade en Overerving',
+      url: 'https://www.w3.org/TR/css-cascade-4/',
+    },
+    {
+      name: 'Clean CSS: bibliotheek en methoden voor CSS-minificatie',
+      url: 'https://github.com/clean-css/clean-css',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Waarom raakt CSS-code gedupliceerd?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Bij het onderhouden van langlopende webprojecten of het werken met legacy-code komt het heel vaak voor dat meerdere ontwikkelaars overlappende CSS-regels schrijven. Uit angst om een bestaand ontwerp te breken, voegt een ontwikkelaar liever een nieuwe redundante regel toe aan het einde van het document dan de originele te bewerken of te refactoren.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Het resultaat is een inefficiënt bestand met tientallen herhaaldelijk gedeclareerde selectors, wat de leesbaarheid verslechtert en het downloadgewicht van je webpagina aanzienlijk vergroot.',
+    },
+    {
+      type: 'title',
+      text: 'De verborgen impact op webprestaties (Web Vitals)',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Stylesheetbestanden blokkeren de natuurlijke weergave van de browser (een <strong>Render-Blocking</strong>-bron). Zolang de browser het volledige CSSOM niet heeft gedownload en opgebouwd, blijft het scherm leeg.',
+    },
+    {
+      type: 'tip',
+      html: 'Overbodige stijlen verwijderen gaat niet alleen om codenetjes — het is een meetbare en directe verbetering van vitale metrics zoals de <strong>First Contentful Paint (FCP)</strong>.',
+    },
+    {
+      type: 'title',
+      text: 'Hoe we dubbele regels samenvoegen',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Deze tool werkt als een intelligente assembler. In plaats van alleen witruimte te comprimeren (zoals een traditionele minifier), doorzoekt hij de tekst recursief op zoek naar identieke selectorpatronen.',
+    },
+    {
+      type: 'list',
+      items: [
+        'Stel je voor dat je de regel <code>.box { color: red; }</code> hebt en honderd regels later een <code>.box { padding: 10px; color: blue; }</code>. De tool voegt beide blokken samen onder dezelfde selector <code>.box</code>, inclusief de padding.',
+        '<strong>Behoud van de CSS-cascade:</strong> Bij directe conflicten bewaart het algoritme strikt de als laatste gedeclareerde eigenschap. Zo blijft je oorspronkelijke opmaak intact na het opschonen.',
+      ],
+    },
+    {
+      type: 'paragraph',
+      html: 'Stop met het sturen van kilobytes dode tekst naar de telefoons van je gebruikers. Voeg je code samen in milliseconden, volledig offline vanuit je browser.',
+    },
+  ],
+};