Merge pull request #132 from ryuran/feature/prefixed-vars

Prefixed vars

package.json

@@ -1,6 +1,6 @@
 {
   "name": "colette-kss-builder",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "The Colette’s Twig.js builder for kss-node.",
   "author": "20 Minutes <web-tech@20minutes.fr>",
   "license": "MIT",
@@ -14,9 +14,7 @@
   "scripts": {
     "test": "./node_modules/.bin/eslint .",
     "prepack": "npm run build",
-    "build:css": "./node_modules/.bin/stylus src/styl/co-styles.styl -o kss-assets/co-styles.min.css -c --include-css",
-    "build:js": "./node_modules/.bin/webpack",
-    "build": "npm run build:js && npm run build:css"
+    "build": "./node_modules/.bin/webpack"
   },
   "engines": {
     "node": ">=8.10.0"
@@ -31,6 +29,7 @@
     "babel-loader": "^8.0.6",
     "colette": "^5.0.0-alpha.0",
     "core-js": "^3.3.5",
+    "css-loader": "^3.2.0",
     "eslint": "^6.6.0",
     "eslint-config-20minutes": "^1.0.8",
     "eslint-config-airbnb": "^18.0.1",
@@ -40,8 +39,12 @@
     "eslint-plugin-react": "^7.16.0",
     "headroom.js": "^0.10.3",
     "highlight.js": "^9.15.10",
+    "mini-css-extract-plugin": "^0.8.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-variables-prefixer": "0.0.0-alpha.1",
     "scrollspy-js": "^0.1.3",
     "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10"
   },

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'postcss-variables-prefixer': {
+      prefix: 'co-',
+    },
+  },
+}

src/js/kss.js

@@ -5,6 +5,7 @@ import kssStateGenerator from './modules/kssStateGenerator'
 import KssDarkModeSwitch from './modules/kssDarkModeSwitch'
 import kssNav from './modules/kssNav'
 import 'details-element-polyfill' // polyfill for details elements
+import '../styl/co-styles.styl' // css
 
 const kss = {}
 

src/styl/_components/_color.styl

@@ -15,8 +15,8 @@
         border-radius .25em
         flex 1
         margin-top 0
-        background-color var(--co-color-bg-base)
-        color var(--co-color-min)
+        background-color var(--color-bg-base)
+        color var(--color-min)
         text-align center
         padding .25em
 
@@ -28,4 +28,4 @@
         display block
         font-size .9em
         text-transform uppercase
-        color var(--co-color-theme-text)
+        color var(--color-theme-text)

src/styl/_components/_footerbar.styl

@@ -1,9 +1,9 @@
-@require 'node_modules/colette/src/styl/_components/_footerbar'
+@require 'colette/src/styl/_components/_footerbar'
 
 /* footer */
 .footerbar
-    --footer-color: var(--co-color-theme)
-    --footer-color-foreground: var(--co-color-theme-foreground)
+    --footer-color: var(--color-theme)
+    --footer-color-foreground: var(--color-theme-foreground)
 
     a
-        color var(--co-color-base)
+        color var(--color-base)

src/styl/_components/_header.styl

@@ -1,7 +1,7 @@
 .header
     _p(4 0 3)
-    background-color var(--co-color-theme-bg)
-    color var(--co-color-max)
+    background-color var(--color-theme-bg)
+    color var(--color-max)
 
     a
         color inherit
@@ -15,7 +15,7 @@
         margin 0 auto
         font-weight normal
         font-size 4.8em
-        color var(--co-color-max)
+        color var(--color-max)
         line-height 1
 
         strong

src/styl/_components/_symbol.styl

@@ -13,5 +13,5 @@
         display block
         border-radius .25em
         padding .25em
-        background-color var(--co-color-bg-base)
-        color var(--co-color-min)
+        background-color var(--color-bg-base)
+        color var(--color-min)

src/styl/_components/_symbols.styl

@@ -3,7 +3,7 @@
     padding 0
     margin 0
     padding 0
-    border-bottom 1px solid var(--co-color-theme-borders)
+    border-bottom 1px solid var(--color-theme-borders)
     list-style none
     display flex
     flex-wrap wrap
@@ -26,4 +26,4 @@
             margin 0 0 _rem(12px) 0
             font-weight bold
             font-size 1.4em
-            border-bottom 1px solid var(--co-color-theme-borders)
+            border-bottom 1px solid var(--color-theme-borders)

src/styl/_components/_tabpanel.styl

@@ -1,4 +1,4 @@
-@require 'node_modules/colette/src/styl/_components/_tabpanel'
+@require 'colette/src/styl/_components/_tabpanel'
 
 .tabpanel-list
-    color var(--co-color-theme)
+    color var(--color-theme)