wavebeem/.gitignore

## .gitignore
node_modules/
.cache/
dist/
*.log

## .postcssrc
{
  "modules": true
}

## 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>

## 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);

## 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"
  }
}

## 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"
	}
	}