:art: getting postcss imports working nicely

package.json

@@ -25,8 +25,5 @@
     "pug-plain-loader": "^1.1.0",
     "sugarss": "^3.0.3",
     "vite": "^2.2.3"
-  },
-  "resolutions": {
-    "postcss": "8.2.13"
   }
 }

src/App.vue

@@ -13,7 +13,7 @@ import card from '@/components/card.vue'
 export default {
     components: { card, helloWorld },
     setup() {
-    
+        
         const cards = ref([
             { name: 'jwick' },
             { name: 'hwick' },
@@ -35,6 +35,11 @@ export default {
 </script>
 
 <style lang="postcss">
+@import './sss/partials/_reset.sss'
+@import './sss/partials/_ratios.sss'
+@import './sss/partials/_helpers.sss'
+@import './sss/partials/_typography.sss'
+
 @import './sss/theme.sss'
 @import './sss/variables.sss'
 
@@ -44,6 +49,6 @@ export default {
     text-align: center
     color: $primary
     font-family: $sans
-    margin-top: $ms-2
+    padding: $ms-0
     background-color: $secondary
 </style>

src/components/card.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.card
+.card.f-col
     header
         p {{ card.name }}
 
@@ -36,25 +36,25 @@ const close = e => {
 </script>
 
 <style lang="postcss">
-
-$pad: 0.5vw
+@import '@/sss/theme.sss'
+@import '@/sss/variables.sss'
 
 .card
-    background-color: rebeccapurple
+    background-color: $primary
     opacity: 0.8
-    width: calc($pad * 20)
-    height: calc($pad * 40)
-    border-radius: $pad
-    margin-bottom: -5vh
-    display: flex
+    width: $ms-4
+    height: $ms-5
+    border-radius: $ms-0
+    margin: 0 $ms-0 0 0
     border: 1px solid black
-    flex-direction: column
+    transition: $transition
     header, main, footer
+        color: $dark
         text-align: left
-        padding: 0 $pad
+        padding: 0 $ms-1
     header
-        padding-top: $pad
+        padding-top: $ms-1
     footer
-        padding-bottom: $pad
+        padding-bottom: $ms-1
 
 </style>

src/sss/index.js

@@ -1,21 +0,0 @@
-import '@/sss/partials/_helpers.sss'
-import '@/sss/partials/_typography.sss'
-import '@/sss/partials/_reset.sss'
-
-import layoutVars from '@/sss/variables.sss'
-import themeVars from '@/sss/theme.sss'
-
-const splitVars = varsFromSSS => {
-    return varsFromSSS.split('\n').map(line => line.split(':')).reduce((vars, pair) => {
-        if(pair[0][0] !== '$') return vars
-        const varname = pair[0].replace('$', '')
-        vars[varname] = pair[1].replace(' ', '')
-        vars[varname] = vars[varname].replace(/[\n\r]/g, '')
-        return vars
-    }, {})
-}
-
-const size = splitVars(layoutVars)
-const theme = splitVars(themeVars)
-
-export { size, theme }

src/sss/theme.sss

@@ -4,13 +4,13 @@
   * Colors
 */
 $hue: 200
-$bg: calc($hue * $ms-1)
+$bg: calc($hue * $cs-1)
 $bright: 50%
 $opacity: 1
 
-$primary: hsla($hue, 20%, calc($bright * $ms-1), $opacity)
-$secondary: hsla($bg, 20%, calc($bright * $ms-1), $opacity)
-$hilite: hsla($hue, 50%, calc($bright * $ms-0), $opacity)
+$primary: hsla($hue, 20%, calc($bright * $cs-1), $opacity)
+$secondary: hsla($bg, 20%, calc($bright * $cs-1), $opacity)
+$hilite: hsla($hue, 50%, calc($bright * $cs-0), $opacity)
 
-$light: hsla(255, 50%, calc($bright * $ms-0), $opacity)
-$dark: hsla(001, 50%, calc($bright * $ms-0), $opacity)
+$light: hsla(255, 50%, calc($bright * $cs-0), $opacity)
+$dark: hsla(001, 50%, calc($bright * $cs-0), $opacity)

src/sss/variables.sss

@@ -34,4 +34,15 @@ $ms-5: calc($ms-4 * $scale)
 $ms-6: calc($ms-5 * $scale)
 $ms-7: calc($ms-6 * $scale)
 $ms-8: calc($ms-7 * $scale)
-$ms-9: calc($ms-8 * $scale)
+$ms-9: calc($ms-8 * $scale)
+
+/**
+  * Color Scale
+  */
+$cbase: 1
+$cs-0: calc($cbase)
+$cs-1: calc($cs-0 * $scale)
+$cs-2: calc($cs-1 * $scale)
+$cs-3: calc($cs-2 * $scale)
+$cs-4: calc($cs-3 * $scale)
+$cs-5: calc($cs-4 * $scale)