build: downgrade to PostCSSv7to and watch css files using Storybook

Due to compatibility reason, we should currently work with PostCSSv7, because Storybook is not up-to-date and use this version.

Using v8 causes some instabilities in the stack.

Cf: storybookjs/storybook#13491

package.json

@@ -21,7 +21,7 @@
     "bootstrap": "lerna bootstrap",
     "build": "lerna run build",
     "format": "lerna run format",
-    "postinstall": "husky install",
+    "postinstall": "npx husky install",
     "lint": "lerna run lint",
     "lint:fix": "lerna run lint:fix",
     "pack": "lerna run pack",
@@ -48,7 +48,6 @@
     "@storybook/addon-essentials": "^6.1.11",
     "@storybook/addon-links": "^6.1.11",
     "@storybook/html": "^6.1.11",
-    "autoprefixer": "^10.1.0",
     "babel-loader": "^8.2.2",
     "chokidar-cli": "^2.1.0",
     "cross-env": "^7.0.3",
@@ -58,9 +57,9 @@
     "lerna": "^3.22.1",
     "lint-staged": "^10.5.3",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.2.1",
-    "postcss-cli": "^8.3.1",
-    "postcss-import": "^14.0.0",
+    "postcss-cli": "^7.1.2",
+    "postcss-import": "^12.0.0",
+    "postcss-loader": "^4.1.0",
     "prettier": "^2.2.1"
   },
   "licenses": [

packages/css/.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   stories: [
     '../src/stories/*.stories.(mdx|js)',
@@ -9,4 +11,29 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-storysource',
   ],
+  webpackFinal: async (config) => {
+    // Remove the current rules on CSS files ...
+    config.module.rules = config.module.rules.filter(({ test }) => !test.test(".css"));
+
+    // ... and replace by a new one, using postcss + our configuration for tailwind etc.
+    config.module.rules.push({
+      test: /\.css$/i,
+      use: [
+        "style-loader",
+        "css-loader",
+        "postcss-loader"
+      ],
+    });
+
+    // Add custom aliases
+
+    config.resolve = {
+      alias: {
+        "~": path.resolve(__dirname, "..")
+      }
+    };
+
+    // Return the altered config
+    return config;
+  },
 };

packages/css/.storybook/preview-head.html

@@ -6,7 +6,6 @@
   href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,700&display=swap"
   rel="stylesheet"
 />
-<link href="./index.css" rel="stylesheet" />
 
 <style>
   .block {

packages/css/package.json

@@ -5,12 +5,9 @@
   "author": "Decathlon <[email protected]>",
   "homepage": "https://github.com/Decathlon/vitamin-web#readme",
   "scripts": {
-    "dev": "npm run watch:storybook",
+    "dev": "start-storybook -p 6006",
     "build": "cross-env NODE_ENV=production npm run build:tailwind",
     "build:tailwind": "postcss src/index.css -o lib/index.css",
-    "watch:tailwind": "chokidar 'src/**/*.css' 'src/**/*.mdx' '*.js' -c 'npm run build:tailwind'",
-    "watch:storybook": "npm-run-all build:tailwind --parallel watch:tailwind start:storybook",
-    "start:storybook": "start-storybook -p 6006 -s lib",
     "build:storybook": "build-storybook --docs"
   },
   "directories": {
@@ -37,6 +34,9 @@
     }
   ],
   "dependencies": {
-    "tailwindcss": "^2.0.2"
+    "@tailwindcss/postcss7-compat": "^2.0.2",
+    "autoprefixer": "^9.8.6",
+    "postcss": "^7.0.35",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
   }
 }

packages/css/src/index.css

@@ -5,10 +5,10 @@
 @import 'tailwindcss/screens';
 
 /* Common */
-@import 'common/variables.css';
+@import 'common/variables';
 
 /* Components */
-@import 'components/buttons.css';
+@import 'components/buttons';
 
 /* Utilities */
-@import 'utilities/typography.css';
+@import 'utilities/typography';

packages/css/src/stories/components/buttons/buttons.stories.js

@@ -6,6 +6,8 @@ import secondaryReversed from './examples/secondary-reversed.html';
 import ghost from './examples/ghost.html';
 import conversion from './examples/conversion.html';
 
+import '~/src/index.css';
+
 export default {
   title: 'Components / Buttons',
 };