feat: add a CSS example to the plugin template

Add some simple CSS to the plugin to show best practices and verify that
CSS works in webpack builds. Tweak some stylelint rules to allow
BEM-style selectors and PatternFly variable names.

.stylelintrc.yaml

@@ -7,8 +7,12 @@ rules:
   # https://patternfly-react-main.surge.sh/developer-resources/global-css-variables#global-css-variables
   color-named: never
   color-no-hex: true
+  # PatternFly CSS vars don't conform to stylelint's regex. Disable this rule.
+  custom-property-pattern: null
   function-disallowed-list:
     - rgb
+  # Disable the standard rule to allow BEM-style classnames with underscores.
+  selector-class-pattern: null
   # Disallow CSS classnames prefixed with .pf- or .co- as these prefixes are
   # reserved by PatternFly and OpenShift console.
   selector-disallowed-list:

src/components/ExamplePage.tsx

@@ -7,6 +7,7 @@ import {
   TextContent,
   Title,
 } from '@patternfly/react-core';
+import './example.css';
 
 export default function ExamplePage() {
   return (
@@ -20,7 +21,10 @@ export default function ExamplePage() {
         </PageSection>
         <PageSection variant="light">
           <TextContent>
-            <Text component="p">Nice! Your plugin is working.</Text>
+            <Text component="p">
+              <span className="console-plugin-template__nice">Nice!</span> Your
+              plugin is working.
+            </Text>
             <Text component="p">
               This is a custom page contributed by the console plugin template.
               The extension that adds the page is declared in

src/components/example.css

@@ -0,0 +1,7 @@
+/* Prefixing your CSS classes with your plugin name is a best practice to avoid
+ * collisions with other plugin styles. */
+.console-plugin-template__nice {
+  /* Use PF global vars for colors to support dark mode in OpenShift 4.11.
+   * https://patternfly-react-main.surge.sh/developer-resources/global-css-variables */
+  color: var(--pf-global--palette--blue-400);
+}