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
This commit is contained in:
Alexander Alemayhu
Sindre Aarsaether
parent
82cc63cb89
commit
f1bd921d03
|
|
@ -1,8 +1,7 @@
|
||||||
# Hello World Imba
|
# Hello World Imba
|
||||||
|
|
||||||
Tiny template for testing out Imba. Click [Use this
|
Tiny template for testing out Imba using [CSS modules][0]. Click [Use this
|
||||||
template](https://github.com/imba/hello-world-imba/generate) on GitHub to
|
template][1] on GitHub to create a new repository with this template.
|
||||||
create a new repository with this template.
|
|
||||||
|
|
||||||
## Getting started
|
## Getting started
|
||||||
|
|
||||||
|
|
@ -27,3 +26,6 @@ yarn run dev # npm run dev
|
||||||
```
|
```
|
||||||
./node_modules/.bin/imba src/server.imba
|
./node_modules/.bin/imba src/server.imba
|
||||||
```
|
```
|
||||||
|
|
||||||
|
[0]: https://github.com/css-modules/css-modules
|
||||||
|
[1]: https://github.com/imba/hello-world-imba/generate
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,8 @@
|
||||||
<head>
|
<head>
|
||||||
<title>Hello World</title>
|
<title>Hello World</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel="stylesheet" href="index.css" media="screen">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script src="client.js"></script>
|
<script src="client.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -25,8 +25,10 @@
|
||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"css-loader": "^3.2.0",
|
||||||
"express": "^4.17.1",
|
"express": "^4.17.1",
|
||||||
"imba": "^1.4.8",
|
"imba": "^1.4.8",
|
||||||
|
"style-loader": "^1.0.0",
|
||||||
"webpack": "^4.39.3",
|
"webpack": "^4.39.3",
|
||||||
"webpack-dev-server": "^3.8.0"
|
"webpack-dev-server": "^3.8.0"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
var styles = require('./styles/index.css')
|
||||||
|
|
||||||
var store = {
|
var store = {
|
||||||
title: ""
|
title: ""
|
||||||
|
|
@ -19,12 +20,11 @@ tag App
|
||||||
item:completed = !item:completed
|
item:completed = !item:completed
|
||||||
|
|
||||||
def render
|
def render
|
||||||
<self.vbox>
|
<self.{styles:vbox}>
|
||||||
<header>
|
<header>
|
||||||
<input[data:title] placeholder="New..." :keyup.enter.addItem>
|
<input[data:title] placeholder="New..." :keyup.enter.addItem>
|
||||||
<button :tap.addItem> 'Add item'
|
<button :tap.addItem> 'Add item'
|
||||||
<ul> for item in data:items
|
<ul> for item in data:items
|
||||||
<li .completed=item:completed :tap.completeItem(item)> item:title
|
<li .{item:completed and styles:completed} :tap.completeItem(item)> item:title
|
||||||
|
|
||||||
|
Imba.mount <App[store]>
|
||||||
Imba.mount <App[store]>
|
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ body {
|
||||||
|
|
||||||
:focus { outline: none !important; }
|
:focus { outline: none !important; }
|
||||||
|
|
||||||
.App {
|
:global .App {
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -95,4 +95,4 @@ li {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1px solid whitesmoke;
|
border-bottom: 1px solid whitesmoke;
|
||||||
}
|
}
|
||||||
|
|
@ -1,15 +1,32 @@
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
test: /\.imba$/,
|
test: /\.imba$/,
|
||||||
loader: 'imba/loader',
|
loader: 'imba/loader',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
loader: 'style-loader'
|
||||||
|
}, {
|
||||||
|
test: /\.css$/,
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
modules: {
|
||||||
|
mode: 'local',
|
||||||
|
localIdentName: '[path][name]__[local]--[hash:base64:5]',
|
||||||
|
context: path.resolve(__dirname, 'src'),
|
||||||
|
hashPrefix: 'my-custom-hash',
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: [".imba",".js", ".json"]
|
extensions: [".imba", ".js", ".json", ".css"]
|
||||||
},
|
},
|
||||||
entry: "./src/client.imba",
|
entry: "./src/client.imba",
|
||||||
output: { path: __dirname + '/dist', filename: "client.js" }
|
output: { path: __dirname + '/dist', filename: "client.js" }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
116
yarn.lock
116
yarn.lock
|
|
@ -568,12 +568,12 @@ cache-base@^1.0.1:
|
||||||
union-value "^1.0.0"
|
union-value "^1.0.0"
|
||||||
unset-value "^1.0.0"
|
unset-value "^1.0.0"
|
||||||
|
|
||||||
camelcase@^5.0.0:
|
camelcase@^5.0.0, camelcase@^5.3.1:
|
||||||
version "5.3.1"
|
version "5.3.1"
|
||||||
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
|
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
|
||||||
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
|
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
|
||||||
|
|
||||||
chalk@2.4.2:
|
chalk@2.4.2, chalk@^2.4.2:
|
||||||
version "2.4.2"
|
version "2.4.2"
|
||||||
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
|
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
|
||||||
integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
|
integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
|
||||||
|
|
@ -835,6 +835,29 @@ crypto-browserify@^3.11.0:
|
||||||
randombytes "^2.0.0"
|
randombytes "^2.0.0"
|
||||||
randomfill "^1.0.3"
|
randomfill "^1.0.3"
|
||||||
|
|
||||||
|
css-loader@^3.2.0:
|
||||||
|
version "3.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.2.0.tgz#bb570d89c194f763627fcf1f80059c6832d009b2"
|
||||||
|
integrity sha512-QTF3Ud5H7DaZotgdcJjGMvyDj5F3Pn1j/sC6VBEOVp94cbwqyIBdcs/quzj4MC1BKQSrTpQznegH/5giYbhnCQ==
|
||||||
|
dependencies:
|
||||||
|
camelcase "^5.3.1"
|
||||||
|
cssesc "^3.0.0"
|
||||||
|
icss-utils "^4.1.1"
|
||||||
|
loader-utils "^1.2.3"
|
||||||
|
normalize-path "^3.0.0"
|
||||||
|
postcss "^7.0.17"
|
||||||
|
postcss-modules-extract-imports "^2.0.0"
|
||||||
|
postcss-modules-local-by-default "^3.0.2"
|
||||||
|
postcss-modules-scope "^2.1.0"
|
||||||
|
postcss-modules-values "^3.0.0"
|
||||||
|
postcss-value-parser "^4.0.0"
|
||||||
|
schema-utils "^2.0.0"
|
||||||
|
|
||||||
|
cssesc@^3.0.0:
|
||||||
|
version "3.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
|
||||||
|
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
|
||||||
|
|
||||||
cyclist@~0.2.2:
|
cyclist@~0.2.2:
|
||||||
version "0.2.2"
|
version "0.2.2"
|
||||||
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
|
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
|
||||||
|
|
@ -1644,6 +1667,13 @@ iconv-lite@0.4.24, iconv-lite@^0.4.4:
|
||||||
dependencies:
|
dependencies:
|
||||||
safer-buffer ">= 2.1.2 < 3"
|
safer-buffer ">= 2.1.2 < 3"
|
||||||
|
|
||||||
|
icss-utils@^4.0.0, icss-utils@^4.1.1:
|
||||||
|
version "4.1.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
|
||||||
|
integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
|
||||||
|
dependencies:
|
||||||
|
postcss "^7.0.14"
|
||||||
|
|
||||||
ieee754@^1.1.4:
|
ieee754@^1.1.4:
|
||||||
version "1.1.8"
|
version "1.1.8"
|
||||||
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
|
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
|
||||||
|
|
@ -1678,6 +1708,11 @@ imurmurhash@^0.1.4:
|
||||||
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
|
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
|
||||||
integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
|
integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
|
||||||
|
|
||||||
|
indexes-of@^1.0.1:
|
||||||
|
version "1.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
|
||||||
|
integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
|
||||||
|
|
||||||
infer-owner@^1.0.3:
|
infer-owner@^1.0.3:
|
||||||
version "1.0.4"
|
version "1.0.4"
|
||||||
resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
|
resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
|
||||||
|
|
@ -2696,6 +2731,62 @@ posix-character-classes@^0.1.0:
|
||||||
version "0.1.1"
|
version "0.1.1"
|
||||||
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
|
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
|
||||||
|
|
||||||
|
postcss-modules-extract-imports@^2.0.0:
|
||||||
|
version "2.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
|
||||||
|
integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
|
||||||
|
dependencies:
|
||||||
|
postcss "^7.0.5"
|
||||||
|
|
||||||
|
postcss-modules-local-by-default@^3.0.2:
|
||||||
|
version "3.0.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.2.tgz#e8a6561be914aaf3c052876377524ca90dbb7915"
|
||||||
|
integrity sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==
|
||||||
|
dependencies:
|
||||||
|
icss-utils "^4.1.1"
|
||||||
|
postcss "^7.0.16"
|
||||||
|
postcss-selector-parser "^6.0.2"
|
||||||
|
postcss-value-parser "^4.0.0"
|
||||||
|
|
||||||
|
postcss-modules-scope@^2.1.0:
|
||||||
|
version "2.1.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.0.tgz#ad3f5bf7856114f6fcab901b0502e2a2bc39d4eb"
|
||||||
|
integrity sha512-91Rjps0JnmtUB0cujlc8KIKCsJXWjzuxGeT/+Q2i2HXKZ7nBUeF9YQTZZTNvHVoNYj1AthsjnGLtqDUE0Op79A==
|
||||||
|
dependencies:
|
||||||
|
postcss "^7.0.6"
|
||||||
|
postcss-selector-parser "^6.0.0"
|
||||||
|
|
||||||
|
postcss-modules-values@^3.0.0:
|
||||||
|
version "3.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz#5b5000d6ebae29b4255301b4a3a54574423e7f10"
|
||||||
|
integrity sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==
|
||||||
|
dependencies:
|
||||||
|
icss-utils "^4.0.0"
|
||||||
|
postcss "^7.0.6"
|
||||||
|
|
||||||
|
postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
|
||||||
|
version "6.0.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
|
||||||
|
integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
|
||||||
|
dependencies:
|
||||||
|
cssesc "^3.0.0"
|
||||||
|
indexes-of "^1.0.1"
|
||||||
|
uniq "^1.0.1"
|
||||||
|
|
||||||
|
postcss-value-parser@^4.0.0:
|
||||||
|
version "4.0.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
|
||||||
|
integrity sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==
|
||||||
|
|
||||||
|
postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.5, postcss@^7.0.6:
|
||||||
|
version "7.0.18"
|
||||||
|
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.18.tgz#4b9cda95ae6c069c67a4d933029eddd4838ac233"
|
||||||
|
integrity sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==
|
||||||
|
dependencies:
|
||||||
|
chalk "^2.4.2"
|
||||||
|
source-map "^0.6.1"
|
||||||
|
supports-color "^6.1.0"
|
||||||
|
|
||||||
process-nextick-args@~1.0.6:
|
process-nextick-args@~1.0.6:
|
||||||
version "1.0.7"
|
version "1.0.7"
|
||||||
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
|
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
|
||||||
|
|
@ -3019,6 +3110,14 @@ schema-utils@^1.0.0:
|
||||||
ajv-errors "^1.0.0"
|
ajv-errors "^1.0.0"
|
||||||
ajv-keywords "^3.1.0"
|
ajv-keywords "^3.1.0"
|
||||||
|
|
||||||
|
schema-utils@^2.0.0, schema-utils@^2.0.1:
|
||||||
|
version "2.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.2.0.tgz#48a065ce219e0cacf4631473159037b2c1ae82da"
|
||||||
|
integrity sha512-5EwsCNhfFTZvUreQhx/4vVQpJ/lnCAkgoIHLhSpp4ZirE+4hzFvdJi0FMub6hxbFVBJYSpeVVmon+2e7uEGRrA==
|
||||||
|
dependencies:
|
||||||
|
ajv "^6.10.2"
|
||||||
|
ajv-keywords "^3.4.1"
|
||||||
|
|
||||||
select-hose@^2.0.0:
|
select-hose@^2.0.0:
|
||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
|
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
|
||||||
|
|
@ -3380,6 +3479,14 @@ strip-json-comments@~2.0.1:
|
||||||
version "2.0.1"
|
version "2.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
|
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
|
||||||
|
|
||||||
|
style-loader@^1.0.0:
|
||||||
|
version "1.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.0.0.tgz#1d5296f9165e8e2c85d24eee0b7caf9ec8ca1f82"
|
||||||
|
integrity sha512-B0dOCFwv7/eY31a5PCieNwMgMhVGFe9w+rh7s/Bx8kfFkrth9zfTZquoYvdw8URgiqxObQKcpW51Ugz1HjfdZw==
|
||||||
|
dependencies:
|
||||||
|
loader-utils "^1.2.3"
|
||||||
|
schema-utils "^2.0.1"
|
||||||
|
|
||||||
supports-color@6.1.0, supports-color@^6.1.0:
|
supports-color@6.1.0, supports-color@^6.1.0:
|
||||||
version "6.1.0"
|
version "6.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
|
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
|
||||||
|
|
@ -3520,6 +3627,11 @@ union-value@^1.0.0:
|
||||||
is-extendable "^0.1.1"
|
is-extendable "^0.1.1"
|
||||||
set-value "^2.0.1"
|
set-value "^2.0.1"
|
||||||
|
|
||||||
|
uniq@^1.0.1:
|
||||||
|
version "1.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
|
||||||
|
integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
|
||||||
|
|
||||||
unique-filename@^1.1.1:
|
unique-filename@^1.1.1:
|
||||||
version "1.1.1"
|
version "1.1.1"
|
||||||
resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
|
resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue