prefix classes

libs/remix-ui/search/src/lib/components/Exclude.tsx

@@ -17,7 +17,7 @@ export const Exclude = props => {
 
   return (
     <>
-      <div className="find-part">
+      <div className="search_plugin_find-part">
         <label>exclude</label>
         <input
           id='search_exclude'

libs/remix-ui/search/src/lib/components/Find.tsx

@@ -17,16 +17,16 @@ export const Find = props => {
 
   return (
     <>
-      <div className="find-part">
+      <div className="search_plugin_find-part">
         <label>search</label>
-        <div className="search-input">
+        <div className="search_plugin_search-input">
           <input
             id='search_input'
             placeholder="Search"
             className="form-control"
             onChange={change}
           ></input>
-          <div className="controls">
+          <div className="search_plugin_controls">
             <div
               data-id='search_case_sensitive'
               title="Match Case"

libs/remix-ui/search/src/lib/components/Include.tsx

@@ -13,7 +13,7 @@ export const Include = props => {
 
   return (
     <>
-      <div className="find-part">
+      <div className="search_plugin_find-part">
         <label>include</label>
         <input
           id='search_include'

libs/remix-ui/search/src/lib/components/OverWriteCheck.tsx

@@ -10,7 +10,7 @@ export const OverWriteCheck = props => {
 
   return (
     <>
-      <div className="find-part">
+      <div className="search_plugin_find-part">
         <div className="mb-2 remixui_nightlyBuilds custom-control custom-checkbox">
           <input
             className="mr-2 custom-control-input"

libs/remix-ui/search/src/lib/components/Replace.tsx

@@ -11,7 +11,7 @@ export const Replace = props => {
 
   return (
     <>
-      <div className="find-part">
+      <div className="search_plugin_find-part">
       <label>replace</label>
         <input
           id='search_replace'

libs/remix-ui/search/src/lib/components/Search.tsx

@@ -14,7 +14,7 @@ const plugin = props.plugin
 
 return (
     <>
-    <div className="search_tab pl-2 pr-2">
+    <div className="search_plugin_search_tab pl-2 pr-2">
       <SearchProvider plugin={plugin}>
         <Find></Find>
         <Replace></Replace>

libs/remix-ui/search/src/lib/components/results/ResultFileName.tsx

@@ -18,9 +18,9 @@ export const ResultFileName = (props: ResultItemProps) => {
   return (
     <>
       {icon ? <div className={`${icon} caret caret_tv`}></div> : null}
-      <div title={props.file.filename} className="search_file_name ml-2">
+      <div title={props.file.filename} className="search_plugin_search_file_name ml-2">
         {path.basename(props.file.path)}
-        <span className='dirname pl-1 text-muted text-lowercase'>{path.dirname(props.file.path)}</span>
+        <span className='pl-1 text-muted text-lowercase'>{path.dirname(props.file.path)}</span>
       </div>
     </>
   )

libs/remix-ui/search/src/lib/components/results/ResultItem.tsx

@@ -66,7 +66,7 @@ export const ResultItem = (props: ResultItemProps) => {
     <>
       {lines && lines.length ? (
         <>
-          <div onClick={toggleClass} className="search_result_item_title">
+          <div onClick={toggleClass} className="search_plugin_search_result_item_title">
             <button className="btn">
               <i
                 className={`fas ${
@@ -76,15 +76,15 @@ export const ResultItem = (props: ResultItemProps) => {
               ></i>
             </button>{' '}
             <ResultFileName file={props.file} />
-            <div className="result_count">
+            <div className="search_plugin_result_count">
-              <div className="result_count_number badge badge-pill badge-secondary">
+              <div className="search_plugin_result_count_number badge badge-pill badge-secondary">
                 {props.file.count}
               </div>
             </div>
           </div>
           {loading ? <div className="loading">Loading...</div> : null}
           {!toggleExpander && !loading ? (
-            <div className="p-1 wrap_summary">
+            <div className="p-1 search_plugin_wrap_summary">
               {lines.map((line, index) => (
                 <ResultSummary
                   setLoading={setLoading}

libs/remix-ui/search/src/lib/components/results/ResultSummary.tsx

@@ -37,21 +37,21 @@ export const ResultSummary = (props: ResultSummaryProps) => {
   return (
     <>
       {props.line.lines.map((lineItem, index) => (
-        <div className='search_line_container' key={index}>
+        <div className='search_plugin_search_line_container' key={index}>
         <div
           onClick={async () => {
             selectLine(lineItem)
           }}
           data-id={`${props.searchResult.filename}-${lineItem.position.start.line}-${lineItem.position.start.column}`}
           key={props.searchResult.filename}
-          className='search_line  pb-1'
+          className='search_plugin_search_line  pb-1'
         >
-          <div className='summary_left'>{lineItem.left.substring(lineItem.left.length - 20).trimStart()}</div>
+          <div className='search_plugin_summary_left'>{lineItem.left.substring(lineItem.left.length - 20).trimStart()}</div>
-          <mark className={`summary_center ${state.replace? 'replace_strike':''}`}>{lineItem.center}</mark>
+          <mark className={`search_plugin_summary_center ${state.replace? 'search_plugin_replace_strike':''}`}>{lineItem.center}</mark>
-          {state.replace? <mark className='replacement'>{state.replace}</mark>:<></>}
+          {state.replace? <mark className='search_plugin_replacement'>{state.replace}</mark>:<></>}
-          <div className='summary_right'>{lineItem.right.substring(0, 100)}</div>
+          <div className='search_plugin_summary_right'>{lineItem.right.substring(0, 100)}</div>
         </div>
-        <div className='search_control'>
+        <div className='search_plugin_search_control'>
         <div title="Replace" data-id={`replace-${props.searchResult.filename}-${lineItem.position.start.line}-${lineItem.position.start.column}`} onClick={async () => {
             replace(lineItem)
           }} className="codicon codicon-find-replace" role="button" aria-label="Replace" aria-disabled="false"></div>

libs/remix-ui/search/src/lib/components/results/Results.tsx

@@ -6,7 +6,7 @@ export const Results = () => {
   const { state } = useContext(SearchContext)
   return (
     <div data-id='search_results'>
-      {state.find ? <div className='result_count_number badge badge-pill badge-secondary'>{state.count} results</div>: null}
+      {state.find ? <div className='search_plugin_result_count_number badge badge-pill badge-secondary'>{state.count} results</div>: null}
       {state.count < state.maxResults && state.searchResults &&
         state.searchResults.map((result, index) => {
           return <ResultItem key={index} file={result} />

libs/remix-ui/search/src/lib/search.css

@@ -1,4 +1,4 @@
-.search_result_item_title {
+.search_plugin_search_result_item_title {
     display: flex;
     -webkit-user-select: none; /* Safari */        
     -moz-user-select: none; /* Firefox */
@@ -8,7 +8,7 @@
     align-items: center;
 }
 
-.wrap_summary {
+.search_plugin_wrap_summary {
     overflow: hidden;
     white-space: nowrap;
     -webkit-user-select: none; /* Safari */        
@@ -18,89 +18,89 @@
     cursor: pointer;
 }
 
-.find-part {
+.search_plugin_find-part {
     display: flex;
     flex-direction: column;
     padding: 2px;
 }
 
-.controls {
+.search_plugin_controls {
     display: flex;
 }
 
-.search_tab .search_line_container {
+.search_plugin_search_tab .search_plugin_search_line_container {
     display: flex;
     flex-direction: row;
     position: relative;
 }
 
-.search_tab .search_line {
+.search_plugin_search_tab .search_plugin_search_line {
     width: 100%;
     overflow: hidden;
     display: flex;
 }
 
-.search_tab .search_control {
+.search_plugin_search_tab .search_plugin_search_control {
     flex-grow: 0;
     position: absolute;
     right: 0px;
     top: 0px;
 }
 
-.summary_right {
+.search_plugin_summary_right {
     min-width: 0;
     white-space: pre;
     text-overflow: ellipsis;
     overflow: hidden;
 }
 
-.search_tab .replace_strike {
+.search_plugin_search_tab .search_plugin_replace_strike {
     text-decoration: line-through;
 }
 
-.summary_left {
+.search_plugin_summary_left {
     white-space: pre;
 }
 
-.search_tab mark {
+.search_plugin_search_tab mark {
     padding: 0;
 }
 
-.search_tab .search_line_container .search_control {
+.search_plugin_search_tab .search_plugin_search_line_container .search_plugin_search_control {
     display: none;
 }
 
-.search_tab .search_line_container:hover .search_control {
+.search_plugin_search_tab .search_plugin_search_line_container:hover .search_plugin_search_control {
     display: block;
 }
 
-.search_tab .search_line_container:hover .search_line {
+.search_plugin_search_tab .search_plugin_search_line_container:hover .search_plugin_search_line {
     width: 93%;
 }
 
-.search-input {
+.search_plugin_search-input {
     display: flex;
     flex-direction: row;
     align-items: center;
 }
 
-.search_tab .checked {
+.search_plugin_search_tab .checked {
     background-color: var(--secondary);
 }
 
-.search_tab .search_file_name {
+.search_plugin_search_tab .search_plugin_search_file_name {
     text-overflow: ellipsis;
     overflow: hidden;
     text-transform: uppercase;
 }
 
-.search_tab  .result_count {
+.search_plugin_search_tab  .search_plugin_result_count {
     flex-grow: 1;
     text-align: right;
     display: flex;
     justify-content: flex-end;
 }
 
-.search_tab .result_count_number {
+.search_plugin_search_tab .search_plugin_result_count_number {
     font-size: x-small;
 }