From f1bd921d03a56843201a1870d3c550f3abac17f1 Mon Sep 17 00:00:00 2001 From: Alexander Alemayhu Date: Mon, 30 Sep 2019 05:33:50 +0200 Subject: [PATCH] Use CSS modules CSS modules make it easier to scope classes. Your style sheets can be modular and reusable. To learn more about CSS modules, see[0]. I would like to start using single file components where all of the code required for a specific components is provided inside of a single Imba file. Using CSS modules is just a step towards that. Related-to: https://github.com/imba/imba/issues/220 [0]: https://github.com/css-modules/css-modules --- README.md | 8 ++- dist/index.html | 3 +- package.json | 2 + src/client.imba | 8 +-- {dist => src/styles}/index.css | 4 +- webpack.config.js | 23 ++++++- yarn.lock | 116 ++++++++++++++++++++++++++++++++- 7 files changed, 148 insertions(+), 16 deletions(-) rename {dist => src/styles}/index.css (98%) diff --git a/README.md b/README.md index cf321e0..cbe9907 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,7 @@ # Hello World Imba -Tiny template for testing out Imba. Click [Use this -template](https://github.com/imba/hello-world-imba/generate) on GitHub to -create a new repository with this template. +Tiny template for testing out Imba using [CSS modules][0]. Click [Use this +template][1] on GitHub to create a new repository with this template. ## Getting started @@ -27,3 +26,6 @@ yarn run dev # npm run dev ``` ./node_modules/.bin/imba src/server.imba ``` + +[0]: https://github.com/css-modules/css-modules +[1]: https://github.com/imba/hello-world-imba/generate diff --git a/dist/index.html b/dist/index.html index 71afa4f..061debc 100644 --- a/dist/index.html +++ b/dist/index.html @@ -3,9 +3,8 @@ Hello World - - \ No newline at end of file + diff --git a/package.json b/package.json index 5993fa9..ea51cba 100644 --- a/package.json +++ b/package.json @@ -25,8 +25,10 @@ }, "license": "MIT", "dependencies": { + "css-loader": "^3.2.0", "express": "^4.17.1", "imba": "^1.4.8", + "style-loader": "^1.0.0", "webpack": "^4.39.3", "webpack-dev-server": "^3.8.0" }, diff --git a/src/client.imba b/src/client.imba index 2c8ae4d..e7b83ad 100644 --- a/src/client.imba +++ b/src/client.imba @@ -1,3 +1,4 @@ +var styles = require('./styles/index.css') var store = { title: "" @@ -19,12 +20,11 @@ tag App item:completed = !item:completed def render - +