wavebeem · December 7, 2017 00:59
diff --git a/.gitignore b/.gitignore
 node_modules/
 .cache/
 dist/
 *.log
diff --git a/.postcssrc b/.postcssrc
 {
  "modules": true
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Modules Test</title>
 </head>
 <body>
  <p id="root">Big red text</p>
  <script src="./main.js"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
 import S from "./styles.css";

 console.group("styles.css");
 console.log("object");
 console.log(S);
 console.log("keys");
 console.log(Object.keys(S));
 console.groupEnd("styles.css");

 document.querySelector("#root").classList.add(S.big, S.red);
diff --git a/package.json b/package.json
 {
  "name": "css-modules",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.0.2",
    "postcss-modules": "^1.1.0"
  }
 }
diff --git a/styles.css b/styles.css
 .big {
  font-size: bigger;
 }

 .red {
  color: red;
 }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS Modules Test</title>
	</head>
	<body>
	<p id="root">Big red text</p>
	<script src="./main.js"></script>
	</body>
	</html>
	import S from "./styles.css";

	console.group("styles.css");
	console.log("object");
	console.log(S);
	console.log("keys");
	console.log(Object.keys(S));
	console.groupEnd("styles.css");

	document.querySelector("#root").classList.add(S.big, S.red);
	{
	"name": "css-modules",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"start": "parcel index.html",
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"devDependencies": {
	"parcel-bundler": "^1.0.2",
	"postcss-modules": "^1.1.0"
	}
	}