custom media extensions

Author: albertstill

packages/react-scripts/config/webpack.config.dev.js

@@ -55,7 +55,7 @@ const postcssApplyRuleSets = {
  font-size: var(--h1-mobile-font-size);
  line-height: var(--h1-mobile-line-height);
 
- @media (min-width: var(--tablet-min-width)) {
+ @media (--tablet-min-width) {
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  }
@@ -74,6 +74,11 @@ const postcssApplyRuleSets = {
  `,
 };
 
+const postcssCustomMediaExtensions = {
+ // var(--tablet-min-width) did not work
+ '--tablet-min-width': `(min-width: ${theme.global.tabletMinWidth})`,
+};
+
 const postCSSLoaderOptions = {
  ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
  plugins: loader => [
@@ -98,6 +103,9 @@ const postCSSLoaderOptions = {
  applyRule: {
  sets: postcssApplyRuleSets,
  },
+ customMedia: {
+ extensions: postcssCustomMediaExtensions,
+ },
  },
  }),
  ],

packages/react-scripts/template/src/components/example/index.css

@@ -31,7 +31,11 @@
 
 .appLogo {
  animation: spin infinite 20s linear;
- height: 80px;
+ height: 50px;
+
+ @media (--tablet-min-width) {
+ height: 80px;
+ }
 }