Fixes the header and css modules kabob-case issues

AgnosticUI · Sep 11, 2020 · 84e4c01 · 84e4c01
1 parent 8850b77
commit 84e4c01
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 47 deletions.
diff --git a/agnosticui-vue/README.md b/agnosticui-vue/README.md
@@ -7,4 +7,22 @@ This is the [Vue version](https://github.com/AgnosticUI/agnosticui/tree/master/a
 ## Project setup
 ```
 yarn && yarn start 
+```
+
+## Requirements
+
+Using AgnosticUI requires opting in to CSS Modules in your project. However, please note that we've opted to use kabob case like `header-nav` so if you set your vue.config.js or webpack.config.js to only allow camel case you'll break AgnosticUI:
+
+```js
+    loaderOptions: {
+      css: {
+        // Note: the following config format is different between Vue CLI v4 and v3
+        // For Vue CLI v3 users, please refer to css-loader v1 documentations
+        // https://github.com/webpack-contrib/css-loader/tree/v1.0.1
+        modules: {
+          localIdentName: '[name]-[hash]'
+        },
+        // DO NOT ADD THIS LINE
+        // localsConvention: 'camelCaseOnly'
+      }
 ```
diff --git a/showcase/src/App.vue b/showcase/src/App.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="app">
-    <div class="layout">
+    <div :class="$style.layout">
       <AppHeader />
-      <main class="main">
+      <main :class="$style.main">
         <SystemCards />
         <InputCards />
         <LayoutCards />
@@ -85,7 +85,7 @@ export default {
 };
 </script>
 
-<style>
+<style module>
 .layout {
   display: flex;
   min-height: 100vh;
@@ -95,31 +95,6 @@ export default {
 .main {
   width: var(--app-width-initial);
   margin: 0 auto;
-}
-
-.main {
-  margin: 0 auto;
   flex: 1 1 auto;
 }
-
-.copy-link {
-  position: absolute;
-  top: 36px;
-  left: -96px;
-  background: transparent;
-  border: none;
-  outline: none;
-  font-size: 18px;
-  cursor: pointer;
-  opacity: 0;
-  padding-right: 300px;
-  color: var(--gray);
-}
-
-.copy-link:hover {
-  opacity: 1;
-}
-.copy-link.confirming {
-  color: var(--mint-green);
-}
 </style>
diff --git a/showcase/src/partials/Typography.vue b/showcase/src/partials/Typography.vue
@@ -9,13 +9,13 @@
       </p>
       <div :class="$style.tipcontent">
         Please consider heeding Black's 6 rules for web design:
-        <ul>
-          <li>Bigger is better</li>
-          <li>Color your world — sparingly</li>
-          <li>Faster beats fancier</li>
-          <li>Content is king</li>
-          <li>Small bytes go down easier</li>
-          <li>If you don’t have something good to say, don’t say anything</li>
+        <ul :class="$style.ul">
+          <li :class="$style.li">Bigger is better</li>
+          <li :class="$style.li">Color your world — sparingly</li>
+          <li :class="$style.li">Faster beats fancier</li>
+          <li :class="$style.li">Content is king</li>
+          <li :class="$style.li">Small bytes go down easier</li>
+          <li :class="$style.li">If you don’t have something good to say, don’t say anything</li>
         </ul>
       </div>
     </div>
@@ -31,10 +31,10 @@
 .tipcontent {
   composes: tipcontent from "./partials.module.css";
 }
-ul {
+.ul {
   margin-top: 16px;
 }
-li {
+.li {
   list-style-type: circle;
   margin-left: 40px;
 }

diff --git a/showcase/src/views/AppHeader.vue b/showcase/src/views/AppHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <Header>
+  <Header css="HeaderOverrides">
     <template v-slot:logoleft>
       <a class="logo" href="/">
         <svg
@@ -15,7 +15,7 @@
           />
         </svg>
       </a>
-      <HeaderNav>
+      <HeaderNav css="HeaderNavOverrides">
         <ul class="menu">
           <li>
             <a href="#" class="pre-pipe">Theming</a>
@@ -51,21 +51,21 @@ export default {
 };
 </script>
 
-<style scoped>
-.pre-pipe {
+<style>
+.HeaderNavOverrides .pre-pipe {
   margin-right: 32px;
 }
-.pipe {
+.HeaderNavOverrides .pipe {
   display: inline;
   padding: 0;
   border-left: solid 1px var(--gray);
 }
-.logo,
-.menu a {
-  background: initial; /* overrides the link linear gradients */
+.HeaderOverrides .logo,
+.HeaderNavOverrides .menu a {
+  background: initial;
   font-weight: 300;
 }
-.logo {
+.HeaderOverrides .logo {
   line-height: 0;
 }
 </style>
diff --git a/showcase/vue.config.js b/showcase/vue.config.js
@@ -10,7 +10,8 @@ module.exports = {
         modules: {
           localIdentName: '[name]-[hash]'
         },
-        localsConvention: 'camelCaseOnly'
+        // DO NOT ADD THIS OR YOU BREAK agnosticui-vue modules which use kebob case!
+        // localsConvention: 'camelCaseOnly'
       }
     }
   },