Merge pull request #649 from no-chris/configure-postcss

Configure postcss

package.json

@@ -20,9 +20,12 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "generate-changelog": "^1.8.0",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-localstorage-mock": "^2.4.26",
+    "jest-text-transformer": "^1.0.4",
     "lerna": "^8.0.2",
     "long": "^5.2.3",
+    "postcss-preset-env": "^9.4.0",
     "prettier": "^3.2.4",
     "regenerator-runtime": "^0.14.1",
     "size-limit": "^11.0.2",
@@ -47,8 +50,6 @@
     "test": "jest"
   },
   "dependencies": {
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-text-transformer": "^1.0.4"
   },
   "workspaces": [
     "packages/*"

packages/chord-chart-studio/css/global.css

@@ -0,0 +1,9 @@
+:root {
+	--space-xxs: 4px;
+	--space-xs: 8px;
+	--space-s: 12px;
+	--space-m: 16px;
+	--space-l: 24px;
+	--space-xl: 32px;
+	--space-xxl: 48px;
+}

packages/chord-chart-studio/postcss.config.js

@@ -0,0 +1,18 @@
+/* eslint-env node */
+const postcssPresetEnv = require('postcss-preset-env');
+
+module.exports = {
+	plugins: [
+		postcssPresetEnv({
+			stage: 3,
+			features: {
+				'nesting-rules': [
+					'auto',
+					{
+						noIsPseudoSelector: false,
+					},
+				],
+			},
+		}),
+	],
+};

packages/chord-chart-studio/src/app.js

@@ -1,3 +1,4 @@
+import '../css/global.css';
 import '../scss/styles.scss';
 
 import { createStore } from './state/store';

packages/chord-chart-studio/src/components/button/Button.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 export default function Button({ children, onClick }) {
 	return (
 		<div className={styles.button} onClick={onClick}>
-			{children}
+			<div className={styles.buttonContent}>{children}</div>
 		</div>
 	);
 }

packages/chord-chart-studio/src/components/button/Button.module.css

@@ -1,4 +1,9 @@
 .button {
 	font-weight: bold;
 	background-color: red;
+
+	.buttonContent {
+		background-color: blueviolet;
+		padding: var(--space-xxl);
+	}
 }