magento · zetlen · May 27, 2020 · May 27, 2020 · May 27, 2020
diff --git a/packages/peregrine/lib/targets/peregrine-intercept.js b/packages/peregrine/lib/targets/peregrine-intercept.js
@@ -13,7 +13,10 @@ function TalonWrapperConfig(addTransforms) {
         wrapWith: wrapperModule =>
             addTransforms({
                 type: 'source',
-                fileToTransform: path.join('./lib/talons/', talonFile),
+                fileToTransform: path.join(
+                    '@magento/peregrine/lib/talons/',
+                    talonFile
+                ),
                 transformModule:
                     '@magento/pwa-buildpack/lib/WebpackTools/loaders/wrap-esm-loader',
                 options: {

diff --git a/packages/pwa-buildpack/lib/WebpackTools/ModuleTransformConfig.js b/packages/pwa-buildpack/lib/WebpackTools/ModuleTransformConfig.js
@@ -63,13 +63,18 @@ class ModuleTransformConfig {
         }
         if (path.isAbsolute(fileToTransform)) {
             throw this._traceableError(
-                `Invalid fileToTransform path "${fileToTransform}": Extensions are not allowed to provide absolute fileToTransform paths! This transform request from "${requestor}" must provide a relative path to one of its own files.`
+                `Invalid fileToTransform path "${fileToTransform}": Extensions are not allowed to provide absolute fileToTransform paths! This transform request from "${requestor}" must provide a relative path to one of its own files, or to a file within the project's local source code.`
             );
         }
-        // make module-absolute if relative
-        return fileToTransform.startsWith(requestor)
-            ? fileToTransform
-            : path.join(requestor, fileToTransform);
+        const belongsToRequestor = fileToTransform.startsWith(requestor);
+        const isRelative = fileToTransform.startsWith('.');
+
+        if (!belongsToRequestor && !isRelative) {
+            throw this._traceableError(
+                `Invalid fileToTransform path "${fileToTransform}": Cannot transform a file provided by another module! This transform request from "${requestor}" must provide a module-relative path to one of its own files, e.g. "${requestor}/some/file", or to a file within the project's local source code, e.g. "./index.css".`
+            );
+        }
+        return fileToTransform;
     }
     /**
      *
@@ -93,7 +98,11 @@ class ModuleTransformConfig {
         );
         // Capturing in the sync phase so that a resolve failure is traceable.
         const resolveError = this._traceableError(
-            `ModuleTransformConfig could not resolve ${toResolve} in order to transform it with ${transformModule}.`
+            `ModuleTransformConfig could not resolve ${toResolve} in order to transform it with ${transformModule}. Resolver options: ${JSON.stringify(
+                this._resolver.config,
+                null,
+                2
+            )})`
         );
         // push the promise, so we don't run a bunch of resolves all at once
         this._reqs.push(
@@ -117,6 +126,7 @@ class ModuleTransformConfig {
     async toLoaderOptions() {
         const byType = {
             babel: {},
+            postcss: {},
             source: {}
         };
         // Some reqs may still be outstanding!

diff --git a/packages/pwa-buildpack/lib/WebpackTools/configureWebpack/getModuleRules.js b/packages/pwa-buildpack/lib/WebpackTools/configureWebpack/getModuleRules.js
@@ -95,36 +95,83 @@ getModuleRules.js = async ({
  * @returns Rule object for Webpack `module` configuration which parses
  *   CSS files
  */
-getModuleRules.css = async ({ paths, hasFlag }) => ({
-    test: /\.css$/,
-    oneOf: [
-        {
-            test: [paths.src, ...hasFlag('cssModules')],
-            use: [
-                'style-loader',
-                {
-                    loader: 'css-loader',
-                    options: {
-                        localIdentName: '[name]-[local]-[hash:base64:3]',
-                        modules: true
-                    }
+getModuleRules.css = async ({ mode, paths, hasFlag, transformRequests }) => {
+    const styleLoader = {
+        loader: 'style-loader'
+    };
+
+    const nonModuleRule = {
+        include: /node_modules/,
+        use: [
+            styleLoader,
+            {
+                loader: 'css-loader',
+                options: {
+                    modules: false
                 }
-            ]
-        },
-        {
-            include: /node_modules/,
-            use: [
-                'style-loader',
-                {
-                    loader: 'css-loader',
-                    options: {
-                        modules: false
-                    }
+            }
+        ]
+    };
+
+    const cssModuleLoader = {
+        loader: 'css-loader',
+        options: {
+            sourceMap: mode === 'development',
+            localIdentName: '[name]-[local]-[hash:base64:3]',
+            modules: true
+        }
+    };
+
+    const moduleRule = {
+        test: [paths.src, ...hasFlag('cssModules')],
+        use: [styleLoader, cssModuleLoader]
+    };
+
+    const oneOf = [moduleRule, nonModuleRule];
+
+    const postCssTransformedModules = new Map();
+    Object.entries(transformRequests.postcss).forEach(
+        ([plugin, requestsByFile]) => {
+            const pluginFactory = require(plugin);
+            Object.entries(requestsByFile).forEach(([filename, requests]) => {
+                let pluginsForFile = postCssTransformedModules.get(filename);
+                if (!pluginsForFile) {
+                    pluginsForFile = [];
+                    postCssTransformedModules.set(filename, pluginsForFile);
                 }
-            ]
+                pluginsForFile.push([pluginFactory, requests]);
+            });
         }
-    ]
-});
+    );
+    if (postCssTransformedModules.size > 0) {
+        const postCssLoader = {
+            loader: 'postcss-loader',
+            ident: 'buildpack-postcss-loader',
+            options: {
+                ident: 'buildpack-postcss-loader',
+                plugins: loader => {
+                    const pluginsForFile =
+                        postCssTransformedModules.get(loader.resourcePath) ||
+                        [];
+                    return pluginsForFile.map(([plugin, options]) =>
+                        plugin(options)
+                    );
+                },
+                sourceMap: mode === 'development' && 'inline'
+            }
+        };
+        const transformedModuleRule = {
+            include: [...postCssTransformedModules.keys()],
+            use: [styleLoader, cssModuleLoader, postCssLoader]
+        };
+        oneOf.unshift(transformedModuleRule);
+    }
+
+    return {
+        test: /\.css$/,
+        oneOf
+    };
+};
 
 /**
  * @param {Buildpack/WebpackTools~WebpackConfigHelper} helper

diff --git a/packages/pwa-buildpack/package.json b/packages/pwa-buildpack/package.json
@@ -81,6 +81,8 @@
   "peerDependencies": {
     "babel-loader": "~8.0.5",
     "css-loader": "~2.1.1",
+    "postcss": "~7.0.26",
+    "postcss-loader": "~3.0.0",
     "terser-webpack-plugin": "~1.2.3",
     "webpack": "~4.38.0",
     "workbox-webpack-plugin": "5.1.3"

diff --git a/packages/venia-concept/package.json b/packages/venia-concept/package.json
@@ -24,6 +24,8 @@
     "prettier:fix": "yarn run -s prettier -- --write",
     "start": "node server.js",
     "start:debug": "node --inspect-brk ./node_modules/.bin/webpack-dev-server --progress --color --env.mode development",
+    "storybook": "echo 'Venia component stories have moved to @magento/venia-ui. Trying to run in sibling directory...' && (cd ../venia-ui && yarn run storybook:build)",
+    "storybook:build": "yarn run storybook",
     "test": "yarn run -s prettier:check && yarn run -s lint && jest",
     "validate-queries": "yarn run download-schema && graphql validate-magento-pwa-queries --project venia",
     "watch": "webpack-dev-server --progress --color --env.mode development"
@@ -94,6 +96,8 @@
     "lodash.over": "~4.7.0",
     "memoize-one": "~5.0.0",
     "memory-fs": "~0.4.1",
+    "postcss": "~7.0.26",
+    "postcss-loader": "~3.0.0",
     "prettier": "~1.16.4",
     "prop-types": "~15.7.2",
     "react": "~16.9.0",

diff --git a/packages/venia-concept/src/index.css b/packages/venia-concept/src/index.css
@@ -8,7 +8,7 @@
     --venia-anim-out: cubic-bezier(0.4, 0, 1, 1);
     --venia-anim-standard: cubic-bezier(0.4, 0, 0.2, 1);
     --venia-background-color: 255, 255, 255;
-    --venia-border: 224, 224, 224;
+    --venia-foreground-color: 33, 33, 33;
     --venia-error: 192, 18, 63;
     --venia-error-alt: 255, 226, 234;
     --venia-font: Muli, -apple-system, BlinkMacSystemFont, sans-serif;
@@ -20,7 +20,10 @@
     --venia-teal-alt: 224, 240, 241;
     --venia-teal-dark: 0, 104, 108;
     --venia-teal-light: 212, 243, 238;
-    --venia-text: 33, 33, 33;
+    --venia-border: var(--venia-grey);
+    --venia-border-alt: var(--venia-grey-dark);
+    --venia-disabled: var(--venia-grey-dark);
+    --venia-text: var(--venia-foreground-color);
     --venia-text-alt: var(--venia-grey-darker);
     --venia-text-hint: 158, 158, 158;
     --venia-text-spot: 255, 99, 51;
@@ -29,7 +32,7 @@
 }
 
 html {
-    background-color: white;
+    background-color: rgb(var(--venia-background-color));
     font-size: 100%;
     font-weight: 400;
     line-height: 1;
@@ -38,7 +41,7 @@ html {
 }
 
 body {
-    background-color: white;
+    background-color: rgb(var(--venia-background-color));
     color: rgb(var(--venia-text));
     margin: 0;
     padding: 0;
@@ -102,6 +105,7 @@ dt {
 
 button {
     background: none;
+    color: rgb(var(--venia-foreground-color));
     border: 0;
     cursor: pointer;
     font-family: var(--venia-font);

diff --git a/packages/venia-ui/lib/RootComponents/Category/category.css b/packages/venia-ui/lib/RootComponents/Category/category.css
@@ -27,9 +27,9 @@
     margin-left: 0.5rem;
     display: inline-block;
     padding: 0.75rem 2rem;
-    border: 1px solid black;
+    border: 1px solid rgb(var(--venia-foreground-color));
     border-radius: 3px;
-    color: black;
+    color: rgb(var(--venia-foreground-color));
     outline: none;
 }
 

diff --git a/packages/venia-ui/lib/components/AuthBar/authBar.css b/packages/venia-ui/lib/components/AuthBar/authBar.css
@@ -1,6 +1,6 @@
 .root {
     align-items: center;
-    background-color: white;
+    background-color: rgb(var(--venia-background-color));
     display: grid;
     gap: 0.75rem;
     grid-auto-flow: column;

diff --git a/packages/venia-ui/lib/components/Button/button.css b/packages/venia-ui/lib/components/Button/button.css
@@ -17,7 +17,7 @@
 
 .filled {
     background-color: rgb(var(--color));
-    color: white;
+    color: rgb(var(--venia-background-color));
 }
 
 .root:hover {
@@ -39,7 +39,7 @@
 
 .root:disabled {
     pointer-events: none;
-    --color: var(--venia-grey-dark);
+    --color: var(--venia-disabled);
 }
 
 .content {

diff --git a/packages/venia-ui/lib/components/ButtonGroup/button.css b/packages/venia-ui/lib/components/ButtonGroup/button.css
@@ -1,7 +1,7 @@
 .root {
     composes: root from '../clickable.css';
-    background: none white;
-    border: 1px solid rgb(var(--venia-grey-dark));
+    background: none rgb(var(--venia-background-color));
+    border: 1px solid rgb(var(--venia-border-alt));
     color: rgb(var(--venia-text));
     font-size: 0.75rem;
     font-weight: 600;
@@ -30,8 +30,8 @@
 }
 
 .root:disabled {
-    border-color: rgb(var(--venia-grey-dark));
-    color: rgb(var(--venia-grey-dark));
+    border-color: rgb(var(--venia-disabled));
+    color: rgb(var(--venia-grey-disabled));
 }
 
 .root:nth-of-type(1) {

diff --git a/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/editModal.css b/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/editModal.css
@@ -1,5 +1,5 @@
 .root {
-    background-color: white;
+    background-color: rgb(var(--venia-background-color));
     bottom: 0;
     display: grid;
     grid-template-rows: auto 1fr;

diff --git a/packages/venia-ui/lib/components/CartPage/ProductListing/quantity.css b/packages/venia-ui/lib/components/CartPage/ProductListing/quantity.css
@@ -25,8 +25,8 @@
 
 .button {
     align-items: center;
-    background-color: white;
-    border: 1px solid rgb(var(--venia-grey-darker));
+    background-color: rgb(var(--venia-background-color));
+    border: 1px solid rgb(var(--venia-text-alt));
     border-radius: 50%;
     display: inline-flex;
     height: 2.25rem;
@@ -35,8 +35,8 @@
 }
 
 .button:disabled {
-    border-color: rgb(var(--venia-grey-darker)) !important;
-    background-color: #d0d0d0 !important;
+    border-color: rgb(var(--venia-text-alt)) !important;
+    background-color: rgb(var(--venia-disabled)) !important;
     opacity: 0.5;
     cursor: not-allowed;
 }

diff --git a/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.css b/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.css
@@ -21,4 +21,5 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    color: rgb(var(--venia-foreground-color));
 }
diff --git a/packages/venia-ui/lib/components/Checkout/Receipt/receipt.css b/packages/venia-ui/lib/components/Checkout/Receipt/receipt.css
@@ -1,5 +1,5 @@
 .root {
-    background-color: white;
+    background-color: rgb(var(--venia-background-color));
     display: grid;
     grid-template-rows: 1fr auto;
     height: 100vh;
@@ -29,7 +29,7 @@
 }
 
 .orderId {
-    color: #22a1a8;
+    color: rgb(var(--venia-teal-dark));
     text-decoration: underline;
 }
 

diff --git a/packages/venia-ui/lib/components/Checkout/addressForm.css b/packages/venia-ui/lib/components/Checkout/addressForm.css
@@ -15,7 +15,7 @@
 
 /* fields */
 .textInput {
-    background: white;
+    background: rgb(var(--venia-background-color));
     border: 1px solid rgb(var(--venia-text-alt));
     border-radius: 2px;
     color: rgb(var(--venia-text));

diff --git a/packages/venia-ui/lib/components/Checkout/checkoutButton.css b/packages/venia-ui/lib/components/Checkout/checkoutButton.css
@@ -1,4 +1,4 @@
 .icon {
     composes: root from '../Icon/icon.css';
-    --stroke: white;
+    --stroke: rgb(var(--venia-background-color));
 }
diff --git a/packages/venia-ui/lib/components/Checkout/flow.css b/packages/venia-ui/lib/components/Checkout/flow.css
@@ -3,7 +3,7 @@
 }
 
 .heading {
-    background-color: white;
+    background-color: rgb(var(--venia-background-color));
     font-size: 0.875rem;
     font-weight: 600;
     grid-column-end: span 2;
@@ -20,7 +20,7 @@
     animation-duration: 224ms;
     animation-iteration-count: 1;
     animation-name: enter;
-    background-color: white;
+    background-color: rgb(var(--venia-background-color));
     bottom: 5rem;
     box-shadow: 0 -1px rgb(var(--venia-border));
     display: grid;
@@ -35,7 +35,7 @@
 
 .footer {
     align-items: center;
-    background-color: white;
+    background-color: rgb(var(--venia-background-color));
     display: grid;
     grid-auto-columns: min-content;
     grid-auto-flow: column;