feat(CSS): export individual CSS files for all components (#3588)

* feat(CSS): export individual CSS files for all components

* docs: update radio-tile

* build: add buildComponentCSS

* test: fix error tests

* docs: update import guide for Accordion and VisuallyHidden

* build: used postcss-prune-var and postcss-discard-empty

* build: remove exclude

* build: lint-ts

* fix: add notes in RangeSlider less

docs/components/CodeView/CopyCodeButton.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { FaCheck, FaCopy } from 'react-icons/fa';
+
+import { IconButton, IconButtonProps } from 'rsuite';
+import copy from 'copy-to-clipboard';
+
+interface CopyCodeButtonProps extends IconButtonProps {
+  code: string;
+}
+
+function CopyCodeButton(props: CopyCodeButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const { code, ...rest } = props;
+
+  const handleClick = () => {
+    setCopied(true);
+
+    copy(code);
+
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  return (
+    <IconButton
+      {...rest}
+      appearance="subtle"
+      circle
+      size="xs"
+      className="copy-code-button"
+      onClick={handleClick}
+      icon={copied ? <FaCheck /> : <FaCopy />}
+    />
+  );
+}
+
+export default CopyCodeButton;

docs/components/CodeView/StaticCodeView.tsx

@@ -0,0 +1,34 @@
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import bash from 'highlight.js/lib/languages/bash';
+import CopyCodeButton from './CopyCodeButton';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('bash', bash);
+
+function highlightCode(code: string, language = 'javascript') {
+  return hljs.highlight(code, { language, ignoreIllegals: true }).value;
+}
+
+interface StaticCodeViewProps {
+  code: string;
+  language?: 'javascript' | 'bash';
+}
+
+function StaticCodeView(props: StaticCodeViewProps) {
+  const { code, language = 'javascript' } = props;
+  return (
+    <div className="static-code-view">
+      <div className="rcv-highlight">
+        <pre
+          dangerouslySetInnerHTML={{
+            __html: `<code class="${language}">` + highlightCode(code, language) + '</code>'
+          }}
+        />
+        <CopyCodeButton code={code} />
+      </div>
+    </div>
+  );
+}
+
+export default StaticCodeView;

docs/components/CodeView/styles.less

@@ -0,0 +1,2 @@
+.copy-code-button {
+}

docs/components/ImportGuide/ImportGuide.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Nav } from 'rsuite';
+import StaticCodeView from '../CodeView/StaticCodeView';
+
+const unstyledComponents = [
+  'Schema',
+  'DOMHelper',
+  'Whisper',
+  'SafeAnchor',
+  'Affix',
+  'utils',
+  'internals',
+  'CustomProvider',
+  'locales',
+  'MaskedInput'
+];
+
+const defaultCommands = {
+  main: '',
+  individual: ''
+};
+
+interface ImportGuideProps {
+  name?: string;
+  activeCommand?: keyof typeof defaultCommands;
+  components?: string[];
+  hasCssComponents?: string[];
+}
+
+function individualCode(components: string[], hasCssComponents: string[], name = 'rsuite') {
+  let individual = components
+    .map(component => `import ${component} from '${name}/${component}';`)
+    .join('\r\n');
+
+  if (hasCssComponents.length > 0) {
+    individual +=
+      '\r\n\r\n// (Optional) Import component styles. If you are using Less, import the `index.less` file. \r\n' +
+      hasCssComponents
+        .map(component => `import '${name}/${component}/styles/index.css';`)
+        .join('\r\n');
+  }
+
+  return individual;
+}
+
+function mainCode(components: string[], name = 'rsuite') {
+  return `import { ${components.join(', ')} } from '${name}';`;
+}
+
+const ImportGuide = (props: ImportGuideProps) => {
+  const {
+    name = 'rsuite',
+    activeCommand,
+    components,
+    hasCssComponents: hasCssComponentsProp
+  } = props;
+  const [active, setActive] = React.useState(activeCommand || 'main');
+
+  const hasCssComponents =
+    hasCssComponentsProp || components.filter(component => !unstyledComponents.includes(component));
+
+  const main = mainCode(components, name);
+  const individual = individualCode(components, hasCssComponents, name);
+  const commands = { main, individual };
+
+  return (
+    <div style={{ marginTop: 16 }}>
+      <Nav appearance="subtle" activeKey={active} onSelect={setActive}>
+        <Nav.Item eventKey="main">Main</Nav.Item>
+        <Nav.Item eventKey="individual">Individual</Nav.Item>
+      </Nav>
+
+      <StaticCodeView code={commands[active]} language="javascript" />
+    </div>
+  );
+};
+
+export default ImportGuide;

docs/components/ImportGuide/index.ts

@@ -0,0 +1,3 @@
+import ImportGuide from './ImportGuide';
+
+export default ImportGuide;

docs/components/InstallGuide/InstallGuide.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Nav } from 'rsuite';
 import { Icon } from '@rsuite/icons';
 import { SiPnpm, SiNpm, SiYarn } from 'react-icons/si';
+import StaticCodeView from '../CodeView/StaticCodeView';
 
 const defaultCommands = {
   npm: 'npm install rsuite --save',
@@ -32,11 +33,7 @@ const InstallGuide = (props: InstallGuideProps) => {
         </Nav.Item>
       </Nav>
       <div>
-        <div className="rcv-highlight">
-          <pre>
-            <code className="bash">{commands[active]}</code>
-          </pre>
-        </div>
+        <StaticCodeView code={commands[active]} language="bash" />
       </div>
     </div>
   );

docs/less/code-view.less

@@ -1,43 +1,55 @@
 @import '~react-code-view/styles/react-code-view.css';
 
 .rcv-highlight {
-  background-color: #f5f5f5;
+  position: relative;
+  background-color: @doc-highlight-bg;
   padding: 10px;
   margin: 1em 0;
+  border-radius: 6px;
   pre {
     margin: 0;
   }
   code,
   .hljs-title {
     padding: 0 !important;
     margin: 0 !important;
-    color: var(--rs-text-primary) !important;
   }
 
   .rs-theme-dark &,
   .rs-theme-high-contrast & {
-    background-color: #1e1e1e;
+    background-color: @doc-highlight-bg;
+  }
+
+  .copy-code-button {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    color: #858b94;
   }
 }
 
 code:not(.rcv-highlight) {
   border-radius: 2px;
-  color: #e96900;
   font-size: 0.8rem;
   margin: 0 2px;
   padding: 3px 5px;
   white-space: pre-wrap;
-  background-color: @doc-highlight-bg;
   font-family: Roboto Mono, Monaco, courier, monospace;
 
+  color: rgb(236, 80, 96);
+
   .rs-theme-dark &,
   .rs-theme-high-contrast & {
-    background-color: #1e1e1e;
+    background-color: @doc-highlight-bg;
   }
 }
 
+code.bash {
+  background-color: @doc-highlight-bg;
+  color: #eee;
+}
+
 a code {
-  color: var(--rs-primary-500) !important;
   background: none !important;
 }
 
@@ -67,11 +79,7 @@ a code {
   padding: 0;
   border-color: @code-view-wrapper-border-color;
   background-color: @code-view-wrapper-bg;
-  border-radius: 4px;
-
-  &:hover {
-    border: 1px dashed var(--rs-primary-500);
-  }
+  border-radius: 6px;
 
   .CodeMirror {
     margin: 0;

docs/less/themes/dark.less

@@ -7,7 +7,7 @@
 @sidebar-wrapper-bg: var(--rs-bg-card);
 @code-view-wrapper-bg: var(--rs-bg-card);
 @code-view-wrapper-border-color: @code-view-wrapper-bg;
-@doc-highlight-bg: #1e1e1e;
+@doc-highlight-bg: #282c34;
 @code-view-blockquote-color: #169de0;
 
 .document-nav {

docs/less/themes/default.less

@@ -9,7 +9,7 @@
 @code-view-wrapper-bg: var(--rs-bg-card);
 @code-view-wrapper-border-color: #f1f1f1;
 @code-view-wrapper-hr-color: @code-view-wrapper-border-color;
-@doc-highlight-bg: #f5f5f5;
+@doc-highlight-bg: #282c34;
 @code-view-blockquote-color: var(--rs-primary-500);
 
 #preventOverflowContainer {