feat(CSS): rename selector across references (#137)

.changeset/afraid-lions-watch.md

@@ -0,0 +1,5 @@
+---
+"react-ts-css": patch
+---
+
+feat(CSS): rename selector across references

examples/react-app/src/test/SyntaxHighlight.tsx

@@ -9,5 +9,6 @@ export default function SyntaxHighlight() {
     <h2 className={TestStyles1['sibling-child']}></h2>
     <button className={styles.snake_case}></button>
     <span className={TestStyles['test-container-test-suffix']}></span>
+    <p className={TestStyles["test-sibling"]}></p>
   </div>;
 }

examples/react-app/src/test/VariousSelectors/VariousSelectors.tsx

@@ -7,5 +7,6 @@ export const VariousSelector = () => {
     <div className={styles['mixin-decl-selector']}></div>
     <div className={styles['mixin-reference-selector']}></div>
     <div className={styles['nested-mixin-reference-selector']}></div>
+    <div className={styles['normal-selector-suffix-nested-suffix']}></div>
   </div>;
 };

package.json

@@ -142,6 +142,12 @@
           "title": "Code Lens for selectors",
           "default": false,
           "description": "Codelenses to references of selectors"
+        },
+        "reactTsScss.renameSelector": {
+          "type": "boolean",
+          "title": "Rename Selector",
+          "default": true,
+          "description": "Rename selectors across multiple locations"
         }
       }
     },
@@ -161,6 +167,7 @@
     "watch-tests": "tsc -p . -w --outDir out",
     "pretest": "npm run compile-tests && npm run compile && npm run lint",
     "lint": "eslint src --ext ts",
+    "lint:fix": "eslint src --fix --ext ts",
     "test": "node ./out/test/runTest.js",
     "publish:vscode": "vsce publish",
     "publish:openvsx": "ovsx publish",

src/extension.ts

@@ -7,20 +7,21 @@ import {
   languages,
   extensions,
 } from "vscode";
+import Settings, { EXT_NAME, getSettings } from "./settings";
+import Store from "./store/Store";
 import { DefnitionProvider } from "./providers/ts/definitions";
 import { HoverProvider } from "./providers/ts/hover";
 import {
   SelectorsCompletionProvider,
   ImportCompletionProvider,
 } from "./providers/ts/completion";
-import Settings, { EXT_NAME, getSettings } from "./settings";
-import Store from "./store/Store";
 import { DiagnosticCodeAction } from "./providers/ts/code-actions";
 import { CssDocumentColorProvider } from "./providers/css/colors";
 import { CssVariablesCompletion } from "./providers/css/completion";
 import { CssDefinitionProvider } from "./providers/css/definition";
 import { ReferenceProvider } from "./providers/css/references";
 import { ReferenceCodeLensProvider } from "./providers/css/codelens";
+import { RenameSelectorProvider } from "./providers/css/rename-selector";
 
 const documentSelector = [
   { scheme: "file", language: "typescriptreact" },
@@ -150,6 +151,10 @@ export async function activate(context: ExtensionContext): Promise<void> {
       cssModulesDocumentSelector,
       new ReferenceCodeLensProvider()
     );
+    const _cssRenameSelectorProvider = languages.registerRenameProvider(
+      cssModulesDocumentSelector,
+      new RenameSelectorProvider()
+    );
 
     context.subscriptions.push(_selectorsCompletionProvider);
     context.subscriptions.push(_importsCompletionProvider);
@@ -161,6 +166,7 @@ export async function activate(context: ExtensionContext): Promise<void> {
     context.subscriptions.push(_cssDefinitionProvider);
     context.subscriptions.push(_cssReferenceProvider);
     context.subscriptions.push(_cssCodeLensProvider);
+    context.subscriptions.push(_cssRenameSelectorProvider);
   } catch (e) {
     console.error(e);
     window.showWarningMessage(

src/parser/utils.ts

@@ -88,3 +88,7 @@ export const isNormal = (selector: string) => {
 export const isCombination = (selector: string) => {
   return selector.indexOf(".") > -1;
 };
+
+export const stripSelectHelpers = (str: string) => {
+  return str.replace(/(\&\.)|(\&\-)|(&\s.)|&|^\./gm, "");
+};

src/parser/v2/css.ts

@@ -95,6 +95,7 @@ export type Selector = {
   range: Range;
   content: string;
   selectionRange: Range;
+  rule: string;
 };
 
 export type Variable = {
@@ -133,6 +134,7 @@ export const getSelectors = (ast: Stylesheet, document: TextDocument) => {
       range,
       content: parentNode.getText(),
       selectionRange,
+      rule: selectorNode.getText(),
     });
   };