├── .gitignore ├── README.md ├── config.js ├── index.html ├── package.json └── src ├── a.css ├── b.css ├── backgrounds.css ├── main.css └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | jspm_packages 2 | build.js 3 | build.js.map 4 | node_modules 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Using CSS Modules with JSPM 2 | 3 | To get this running: 4 | 5 | - clone the project 6 | - install JSPM with `npm install -g jspm` if you haven't already 7 | - run `jspm install` 8 | - load the directory in your web browser ([http-server](https://www.npmjs.com/package/http-server) is an easy way to do that) 9 | 10 | You should see something like: 11 | 12 | ![](https://dl.dropboxusercontent.com/spa/a9i2yebxv7pg2ex/yyfouy0h.png) 13 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | System.config({ 2 | defaultJSExtensions: true, 3 | transpiler: "babel", 4 | babelOptions: { 5 | "optional": [ 6 | "runtime" 7 | ] 8 | }, 9 | paths: { 10 | "github:*": "jspm_packages/github/*", 11 | "npm:*": "jspm_packages/npm/*" 12 | }, 13 | trace: true, 14 | 15 | map: { 16 | "babel": "npm:babel-core@5.8.33", 17 | "babel-runtime": "npm:babel-runtime@5.8.29", 18 | "colors.css": "npm:colors.css@2.3.0", 19 | "core-js": "npm:core-js@1.2.5", 20 | "css": "npm:jspm-loader-css-modules@1.0.1-beta1", 21 | "css-global": "npm:jspm-loader-css@1.0.0", 22 | "path": "npm:path@0.11.14", 23 | "postcss-safe-parser": "npm:postcss-safe-parser@1.0.1", 24 | "github:jspm/nodelibs-assert@0.1.0": { 25 | "assert": "npm:assert@1.3.0" 26 | }, 27 | "github:jspm/nodelibs-buffer@0.1.0": { 28 | "buffer": "npm:buffer@3.5.1" 29 | }, 30 | "github:jspm/nodelibs-path@0.1.0": { 31 | "path-browserify": "npm:path-browserify@0.0.0" 32 | }, 33 | "github:jspm/nodelibs-process@0.1.2": { 34 | "process": "npm:process@0.11.2" 35 | }, 36 | "github:jspm/nodelibs-util@0.1.0": { 37 | "util": "npm:util@0.10.3" 38 | }, 39 | "npm:amdefine@1.0.0": { 40 | "fs": "github:jspm/nodelibs-fs@0.1.2", 41 | "module": "github:jspm/nodelibs-module@0.1.0", 42 | "path": "github:jspm/nodelibs-path@0.1.0", 43 | "process": "github:jspm/nodelibs-process@0.1.2" 44 | }, 45 | "npm:assert@1.3.0": { 46 | "util": "npm:util@0.10.3" 47 | }, 48 | "npm:babel-runtime@5.8.29": { 49 | "process": "github:jspm/nodelibs-process@0.1.2" 50 | }, 51 | "npm:buffer@3.5.1": { 52 | "base64-js": "npm:base64-js@0.0.8", 53 | "ieee754": "npm:ieee754@1.1.6", 54 | "is-array": "npm:is-array@1.0.1" 55 | }, 56 | "npm:colors.css@2.3.0": { 57 | "process": "github:jspm/nodelibs-process@0.1.2" 58 | }, 59 | "npm:core-js@1.2.5": { 60 | "fs": "github:jspm/nodelibs-fs@0.1.2", 61 | "path": "github:jspm/nodelibs-path@0.1.0", 62 | "process": "github:jspm/nodelibs-process@0.1.2", 63 | "systemjs-json": "github:systemjs/plugin-json@0.1.0" 64 | }, 65 | "npm:css-modules-loader-core@0.0.12": { 66 | "fs": "github:jspm/nodelibs-fs@0.1.2", 67 | "path": "github:jspm/nodelibs-path@0.1.0", 68 | "postcss": "npm:postcss@4.1.16", 69 | "postcss-modules-extract-imports": "npm:postcss-modules-extract-imports@0.0.5", 70 | "postcss-modules-local-by-default": "npm:postcss-modules-local-by-default@0.0.9", 71 | "postcss-modules-scope": "npm:postcss-modules-scope@0.0.8" 72 | }, 73 | "npm:css-modules-loader-core@1.0.0": { 74 | "fs": "github:jspm/nodelibs-fs@0.1.2", 75 | "icss-replace-symbols": "npm:icss-replace-symbols@1.0.2", 76 | "path": "github:jspm/nodelibs-path@0.1.0", 77 | "postcss": "npm:postcss@5.0.10", 78 | "postcss-modules-extract-imports": "npm:postcss-modules-extract-imports@1.0.0", 79 | "postcss-modules-local-by-default": "npm:postcss-modules-local-by-default@1.0.0", 80 | "postcss-modules-scope": "npm:postcss-modules-scope@1.0.0", 81 | "postcss-modules-values": "npm:postcss-modules-values@1.1.0" 82 | }, 83 | "npm:css-selector-tokenizer@0.4.1": { 84 | "fastparse": "npm:fastparse@1.1.1" 85 | }, 86 | "npm:css-selector-tokenizer@0.5.4": { 87 | "cssesc": "npm:cssesc@0.1.0", 88 | "fastparse": "npm:fastparse@1.1.1" 89 | }, 90 | "npm:debounce@1.0.0": { 91 | "date-now": "npm:date-now@1.0.1" 92 | }, 93 | "npm:es6-promise@2.3.0": { 94 | "assert": "github:jspm/nodelibs-assert@0.1.0", 95 | "process": "github:jspm/nodelibs-process@0.1.2", 96 | "util": "github:jspm/nodelibs-util@0.1.0" 97 | }, 98 | "npm:fastparse@1.1.1": { 99 | "process": "github:jspm/nodelibs-process@0.1.2" 100 | }, 101 | "npm:has-flag@1.0.0": { 102 | "process": "github:jspm/nodelibs-process@0.1.2" 103 | }, 104 | "npm:inherits@2.0.1": { 105 | "util": "github:jspm/nodelibs-util@0.1.0" 106 | }, 107 | "npm:js-base64@2.1.9": { 108 | "buffer": "github:jspm/nodelibs-buffer@0.1.0" 109 | }, 110 | "npm:jspm-loader-css-modules@1.0.1-beta1": { 111 | "jspm-loader-css": "npm:jspm-loader-css@1.0.1-beta1" 112 | }, 113 | "npm:jspm-loader-css@1.0.0": { 114 | "css-modules-loader-core": "npm:css-modules-loader-core@0.0.12", 115 | "debounce": "npm:debounce@1.0.0", 116 | "path": "npm:path@0.12.7", 117 | "toposort": "npm:toposort@0.2.12" 118 | }, 119 | "npm:jspm-loader-css@1.0.1-beta1": { 120 | "css-modules-loader-core": "npm:css-modules-loader-core@1.0.0", 121 | "debounce": "npm:debounce@1.0.0", 122 | "path": "npm:path@0.12.7", 123 | "toposort": "npm:toposort@0.2.12" 124 | }, 125 | "npm:path-browserify@0.0.0": { 126 | "process": "github:jspm/nodelibs-process@0.1.2" 127 | }, 128 | "npm:path@0.11.14": { 129 | "fs": "github:jspm/nodelibs-fs@0.1.2", 130 | "process": "github:jspm/nodelibs-process@0.1.2", 131 | "util": "github:jspm/nodelibs-util@0.1.0" 132 | }, 133 | "npm:path@0.12.7": { 134 | "process": "npm:process@0.11.2", 135 | "util": "npm:util@0.10.3" 136 | }, 137 | "npm:postcss-modules-extract-imports@0.0.5": { 138 | "postcss": "npm:postcss@4.1.16", 139 | "process": "github:jspm/nodelibs-process@0.1.2" 140 | }, 141 | "npm:postcss-modules-extract-imports@1.0.0": { 142 | "postcss": "npm:postcss@5.0.10", 143 | "process": "github:jspm/nodelibs-process@0.1.2" 144 | }, 145 | "npm:postcss-modules-local-by-default@0.0.9": { 146 | "css-selector-tokenizer": "npm:css-selector-tokenizer@0.4.1", 147 | "postcss": "npm:postcss@4.1.16" 148 | }, 149 | "npm:postcss-modules-local-by-default@1.0.0": { 150 | "css-selector-tokenizer": "npm:css-selector-tokenizer@0.5.4", 151 | "postcss": "npm:postcss@5.0.10" 152 | }, 153 | "npm:postcss-modules-scope@0.0.8": { 154 | "css-selector-tokenizer": "npm:css-selector-tokenizer@0.5.4", 155 | "postcss": "npm:postcss@4.1.16", 156 | "process": "github:jspm/nodelibs-process@0.1.2" 157 | }, 158 | "npm:postcss-modules-scope@1.0.0": { 159 | "css-selector-tokenizer": "npm:css-selector-tokenizer@0.5.4", 160 | "postcss": "npm:postcss@5.0.10", 161 | "process": "github:jspm/nodelibs-process@0.1.2" 162 | }, 163 | "npm:postcss-modules-values@1.1.0": { 164 | "icss-replace-symbols": "npm:icss-replace-symbols@1.0.2", 165 | "postcss": "npm:postcss@5.0.10" 166 | }, 167 | "npm:postcss-safe-parser@1.0.1": { 168 | "postcss": "npm:postcss@5.0.10" 169 | }, 170 | "npm:postcss@4.1.16": { 171 | "es6-promise": "npm:es6-promise@2.3.0", 172 | "fs": "github:jspm/nodelibs-fs@0.1.2", 173 | "js-base64": "npm:js-base64@2.1.9", 174 | "path": "github:jspm/nodelibs-path@0.1.0", 175 | "process": "github:jspm/nodelibs-process@0.1.2", 176 | "source-map": "npm:source-map@0.4.4", 177 | "systemjs-json": "github:systemjs/plugin-json@0.1.0" 178 | }, 179 | "npm:postcss@5.0.10": { 180 | "fs": "github:jspm/nodelibs-fs@0.1.2", 181 | "js-base64": "npm:js-base64@2.1.9", 182 | "path": "github:jspm/nodelibs-path@0.1.0", 183 | "process": "github:jspm/nodelibs-process@0.1.2", 184 | "source-map": "npm:source-map@0.5.3", 185 | "supports-color": "npm:supports-color@3.1.2", 186 | "systemjs-json": "github:systemjs/plugin-json@0.1.0" 187 | }, 188 | "npm:process@0.11.2": { 189 | "assert": "github:jspm/nodelibs-assert@0.1.0" 190 | }, 191 | "npm:source-map@0.4.4": { 192 | "amdefine": "npm:amdefine@1.0.0", 193 | "process": "github:jspm/nodelibs-process@0.1.2" 194 | }, 195 | "npm:source-map@0.5.3": { 196 | "process": "github:jspm/nodelibs-process@0.1.2" 197 | }, 198 | "npm:supports-color@3.1.2": { 199 | "has-flag": "npm:has-flag@1.0.0", 200 | "process": "github:jspm/nodelibs-process@0.1.2" 201 | }, 202 | "npm:toposort@0.2.12": { 203 | "assert": "github:jspm/nodelibs-assert@0.1.0", 204 | "process": "github:jspm/nodelibs-process@0.1.2" 205 | }, 206 | "npm:util@0.10.3": { 207 | "inherits": "npm:inherits@2.0.1", 208 | "process": "github:jspm/nodelibs-process@0.1.2" 209 | } 210 | } 211 | }); 212 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Modules & JSPM 6 | 7 | 8 |
9 | 10 | 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "jspm": { 3 | "dependencies": { 4 | "colors.css": "npm:colors.css@^2.3.0", 5 | "css": "npm:jspm-loader-css-modules@1.0.1-beta1", 6 | "css-global": "npm:jspm-loader-css@^1.0.0", 7 | "path": "npm:path@^0.11.14", 8 | "postcss-safe-parser": "npm:postcss-safe-parser@^1.0.1" 9 | }, 10 | "devDependencies": { 11 | "babel": "npm:babel-core@^5.8.24", 12 | "babel-runtime": "npm:babel-runtime@^5.8.24", 13 | "core-js": "npm:core-js@^1.1.4" 14 | } 15 | }, 16 | "devDependencies": { 17 | "jspm": "^0.16.6" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/a.css: -------------------------------------------------------------------------------- 1 | .whiteBorder { 2 | border: 1px solid white; 3 | } 4 | -------------------------------------------------------------------------------- /src/b.css: -------------------------------------------------------------------------------- 1 | .fontSize24pt { 2 | font-size: 1.5rem; 3 | } 4 | 5 | .dashed-border { 6 | border-style: dashed; 7 | border-width: 4px; 8 | } 9 | -------------------------------------------------------------------------------- /src/backgrounds.css: -------------------------------------------------------------------------------- 1 | @value light-blue #0074D9; 2 | 3 | .lightBlueBackground { 4 | composes: whiteBorder from "./a.css"; 5 | background: light-blue; 6 | } 7 | -------------------------------------------------------------------------------- /src/main.css: -------------------------------------------------------------------------------- 1 | @value darkblue: #001f3f; 2 | 3 | body { 4 | margin: 0; 5 | background: darkblue; 6 | display: flex; 7 | } 8 | 9 | .lol { 10 | composes: lightBlueBackground from "./backgrounds.css"; 11 | composes: fontSize24pt dashed-border from "./b.css"; 12 | color: white; 13 | padding: 2rem; 14 | margin: 1rem; 15 | border-width: 1px; 16 | } 17 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import styles from './main.css!' 2 | 3 | document.querySelector('main#outlet').innerHTML = ` 4 |
JSPM and CSS Modules = <3
5 | ` 6 | 7 | export let __hotReload = true 8 | --------------------------------------------------------------------------------