replace postcs-module-values with postcss-constants

ui/package.json

@@ -13,15 +13,19 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
+    "color": "^0.11.3",
     "invariant": "^2.2.1",
     "lodash.find": "^4.6.0",
     "lodash.first": "^3.0.0",
     "lodash.flatten": "^4.4.0",
     "lodash.get": "^4.4.2",
+    "lodash.isfunction": "^3.0.8",
     "lodash.isundefined": "^3.0.1",
     "param-case": "^2.1.0",
     "react": "^15.3.2",
-    "react-a11y": "^0.3.3"
+    "react-a11y": "^0.3.3",
+    "reduce-css-calc": "^1.3.0",
+    "traverse": "^0.6.6"
   },
   "devDependencies": {
     "ava": "^0.16.0",
@@ -52,6 +56,7 @@
     "nyc": "^8.3.1",
     "param-case": "^2.1.0",
     "postcss-at-rules-variables": "0.0.25",
+    "postcss-constants": "^0.2.0",
     "postcss-cssnext": "^2.8.0",
     "postcss-for": "^2.1.1",
     "postcss-functions": "^2.1.1",

ui/src/components/avatar/style.css

@@ -14,5 +14,5 @@
 .picture {
   max-width: 60%;
 
-  composes: verticle_align_center from '../../util/composers.css';
+  composes: verticle_align_center from '../../shared/composers.css';
 }

ui/src/components/base/style.css

@@ -9,22 +9,22 @@
  * github.com/necolas/normalize.css
  */
 
-@value cursor-disabled from "../../constants/forms.css";
+~forms: "../../shared/constants.js";
-@value link-color, link-decoration, link-hover-color, link-hover-decoration from "../../constants/links.css";
+~links: "../../shared/constants.js";
-@value table-bg, table-cell-padding from "../../constants/tables.css";
+~tables: "../../shared/constants.js";
-@value dt-font-weight, text-muted, abbr-border-color from "../../constants/typography.css";
+~typography: "../../shared/constants.js";
 
 :root {
-  --cursor-disabled: cursor-disabled;
+  --cursor-disabled: ~forms.cursorDisabled;
-  --link-color: link-color;
+  --link-color: ~links.linkColor;
-  --link-decoration: link-decoration;
+  --link-decoration: ~links.linkDecoration;
-  --link-hover-color: link-hover-color;
+  --link-hover-color: ~links.linkHoverColor;
-  --link-hover-decoration: link-hover-decoration;
+  --link-hover-decoration: ~links.linkHoverDecoration;
-  --table-bg: table-bg;
+  --table-bg: ~tables.tableBg;
-  --table-cell-padding: table-cell-padding;
+  --table-cell-padding: ~tables.tableCellPadding;
-  --dt-font-weight: dt-font-weight;
+  --dt-font-weight: ~typography.dtFontWeight;
-  --text-muted: text-muted;
+  --text-muted: ~typography.textMuted;
-  --abbr-border-color: abbr-border-color;
+  --abbr-border-color: ~typography.abbrBorderColor;
 }
 
 .base {

ui/src/components/column/style.css

@@ -3,14 +3,18 @@
  * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
  */
 
-@value half-gutter-width from "../../constants/sizes.css";
+~sizes: "../../shared/constants.js";
-@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
+~breakpoints: "../../shared/constants.js";
 
 :root {
-  --half-gutter-width: half-gutter-width;
+  --half-gutter-width: ~sizes.halfGutterWidth;
   --grid-columns: 12; /* Cannot import values and use them within the loop */
 }
 
+@custom-media --sm-viewport ~breakpoints.sm;
+@custom-media --md-viewport ~breakpoints.md;
+@custom-media --lg-viewport ~breakpoints.lg;
+
 @define-mixin viewport $size {
   &.$(size) {
     flex-grow: 1;
@@ -44,15 +48,15 @@
 
   @mixin viewport xs;
 
-  @media sm-viewport {
+  @media (--sm-viewport) {
     @mixin viewport sm;
   }
 
-  @media md-viewport {
+  @media (--md-viewport) {
     @mixin viewport md;
   }
 
-  @media lg-viewport {
+  @media (--lg-viewport) {
     @mixin viewport lg;
   }
 }

ui/src/components/container/style.css

@@ -3,14 +3,20 @@
  * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
  */
 
-@value outer-margin, container-sm, container-md, container-lg from "../../constants/sizes.css";
+~sizes: "../../shared/constants.js";
-@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
+~breakpoints: "../../shared/constants.js";
 
 :root {
-  --outer-margin: outer-margin;
+  --outer-margin: ~sizes.outerMargin;
-  --container-sm: container-sm;
+  --container-sm: ~sizes.containerSm;
 }
 
+
+@custom-media --sm-viewport ~breakpoints.sm;
+@custom-media --md-viewport ~breakpoints.md;
+@custom-media --lg-viewport ~breakpoints.lg;
+
+
 .container-fluid, .container {
   margin-right: auto;
   margin-left: auto;
@@ -22,15 +28,15 @@
 }
 
 .container {
-  @media sm-viewport {
+  @media (--sm-viewport) {
     width: var(--container-sm, 46rem);
   }
 
-  @media md-viewport {
+  @media (--md-viewport) {
     width: var(--container-md, 61rem);
   }
 
-  @media lg-viewport {
+  @media (--lg-viewport) {
     width: var(--container-lg, 71rem);
   }
 }

ui/src/components/radio/style.css

@@ -1,4 +1,4 @@
-@import '../../util/mixins.css';
+@import '../../shared/mixins.css';
 
 :root {
   --radio-radius: 20px;

ui/src/components/row/style.css

@@ -3,14 +3,17 @@
  * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
  */
 
-@value gutter-compensation from "../../constants/sizes.css";
+~sizes: "../../shared/constants.js";
-@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
+~breakpoints: "../../shared/constants.js";
 
 :root {
-  --outer-margin: outer-margin;
+  --gutter-compensation: ~sizes.gutterCompensation;
-  --gutter-compensation: gutter-compensation;
 }
 
+@custom-media --sm-viewport ~breakpoints.sm;
+@custom-media --md-viewport ~breakpoints.md;
+@custom-media --lg-viewport ~breakpoints.lg;
+
 @define-mixin viewport $size {
   &.start-$(size) {
     justify-content: flex-start;
@@ -71,15 +74,15 @@
 
   @mixin viewport xs;
 
-  @media sm-viewport {
+  @media (--sm-viewport) {
     @mixin viewport sm;
   }
 
-  @media md-viewport {
+  @media (--md-viewport) {
     @mixin viewport md;
   }
 
-  @media lg-viewport {
+  @media (--lg-viewport) {
     @mixin viewport lg;
   }
 }

ui/src/components/tab/style.css

@@ -1,4 +1,4 @@
-@import '../../util/mixins.css';
+@import '../../shared/mixins.css';
 
 .tab {
   display: inline;

ui/src/constants/breakpoints.css

@@ -1,8 +0,0 @@
-/*
- * based on
- * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
- */
-
-@value sm-viewport: only screen and (min-width: 48em); /* 768px */
-@value md-viewport: only screen and (min-width: 64em); /* 1024px */
-@value lg-viewport: only screen and (min-width: 75em); /* 1200px */

ui/src/constants/colors.css

@@ -1,13 +0,0 @@
-@value brand-primary from "./colors.css";
-
-:root {
-  --brand-primary: #0275d8;
-  --brand-secondary: #160D42;
-  --gray-light: #818a91;
-  --confirmation: #38C647;
-}
-
-@value brand-primary: var(--brand-primary);
-@value brand-secondary: var(--brand-secondary);
-@value gray-light: var(--gray-light);
-@value confirmation: var(--confirmation);

ui/src/constants/forms.css

@@ -1,5 +0,0 @@
-:root {
-  --cursor-disabled: not-allowed;
-}
-
-@value cursor-disabled: var(--cursor-disabled);

ui/src/constants/links.css

@@ -1,13 +0,0 @@
-@value brand-primary from "./colors.css";
-
-:root {
-  --link-color: brand-primary;
-  --link-decoration: none;
-  --link-hover-color: darken(var(--link-color), 15%);
-  --link-hover-decoration: underline;
-}
-
-@value link-color: var(--link-color);
-@value link-decoration: var(--link-decoration);
-@value link-hover-color: var(--link-hover-color);
-@value link-hover-decoration: var(--link-hover-decoration);

ui/src/constants/sizes.css

@@ -1,38 +0,0 @@
-/*
- * based on
- * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
- */
-
-:root {
-  --gutter-width: 1rem;
-  --outer-margin: 2rem;
-  --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
-  --half-gutter-width: calc((var(--gutter-width) * 0.5));
-  --xs-min: 30;
-  --sm-min: 48;
-  --md-min: 64;
-  --lg-min: 75;
-  --screen-xs-min: var(--xs-min)em;
-  --screen-sm-min: var(--sm-min)em;
-  --screen-md-min: var(--md-min)em;
-  --screen-lg-min: var(--lg-min)em;
-  --container-sm: calc(var(--sm-min) + var(--gutter-width));
-  --container-md: calc(var(--md-min) + var(--gutter-width));
-  --container-lg: calc(var(--lg-min) + var(--gutter-width));
-}
-
-@value gutter-width: var(--gutter-width);
-@value outer-margin: var(--outer-margin);
-@value gutter-compensation: var(--gutter-compensation);
-@value half-gutter-width: var(--half-gutter-width);
-@value xs-min: var(--xs-min);
-@value sm-min: var(--sm-min);
-@value md-min: var(--md-min);
-@value lg-min: var(--lg-min);
-@value screen-xs-min: var(--screen-xs-min);
-@value screen-sm-min: var(--screen-sm-min);
-@value screen-md-min: var(--screen-md-min);
-@value screen-lg-min: var(--screen-lg-min);
-@value container-sm: var(--container-sm);
-@value container-md: var(--container-md);
-@value container-lg: var(--container-lg);

ui/src/constants/tables.css

@@ -1,7 +0,0 @@
-:root {
-  --table-bg: transparent;
-  --table-cell-padding: .75rem;
-}
-
-@value table-bg: var(--table-bg);
-@value table-cell-padding: var(--table-cell-padding);

ui/src/constants/typography.css

@@ -1,11 +0,0 @@
-@value gray-light from "./colors.css";
-
-:root {
-  --dt-font-weight: bold;
-  --text-muted: gray-light;
-  --abbr-border-color: gray-light;
-}
-
-@value dt-font-weight: var(--dt-font-weight);
-@value text-muted: var(--text-muted);
-@value abbr-border-color: var(--abbr-border-color);

ui/src/shared/constants.js

@@ -0,0 +1,117 @@
+const calc = require('reduce-css-calc');
+const traverse = require('traverse');
+const isFunction = require('lodash.isfunction');
+const Color = require('color');
+
+const tables = {
+  tableBg: 'transparent',
+  tableCellPadding: '.75rem'
+};
+
+// github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
+const sizes = {
+  gutterWidth: '1rem',
+  outerMargin: '2rem',
+  gutterCompensation: ({
+    gutterWidth
+  }) => {
+    return calc(`calc((${gutterWidth} * 0.5) * -1)`);
+  },
+  halfGutterWidth: ({
+    gutterWidth
+  }) => {
+    return calc(`calc(${gutterWidth} * 0.5)`);
+  },
+  xsMin: 30,
+  smMin: 48,
+  mdMin: 64,
+  lgMin: 75,
+  screenXsMin: ({
+    xsMin
+  }) => {
+    return `${xsMin}em`;
+  },
+  screenSmMin: ({
+    smMin
+  }) => {
+    return `${smMin}em`;
+  },
+  screenMdMin: ({
+    mdMin
+  }) => {
+    return `${mdMin}em`;
+  },
+  screenLgMin: ({
+    lgMin
+  }) => {
+    return `${lgMin}em`;
+  },
+  containerSm: ({
+    gutterWidth,
+    smMin
+  }) => {
+    return calc(`calc(${smMin} + ${gutterWidth})`);
+  },
+  containerMd: ({
+    gutterWidth,
+    mdMin
+  }) => {
+    return calc(`calc(${mdMin} + ${gutterWidth})`);
+  },
+  containerLg: ({
+    gutterWidth,
+    lgMin
+  }) => {
+    return calc(`calc(${lgMin} + ${gutterWidth})`);
+  }
+};
+
+const forms = {
+  cursorDisabled: 'not-allowed'
+};
+
+const colors = {
+  brandPrimary: '#0275d8',
+  brandSecondary: '#160D42',
+  grayLight: '#818a91',
+  confirmation: '#38C647'
+};
+
+const typography = {
+  dtFontWeight: 'bold',
+  abbrBorderColor: colors.grayLight,
+  textMuted: colors.grayLight
+};
+
+const links = {
+  linkColor: colors.brandPrimary,
+  linkDecoration: 'none',
+  linkHoverColor: ({
+    linkColor
+  }) => {
+    return Color(linkColor).darken('0.15').hexString();
+  },
+  linkHoverDecoration: 'underline'
+};
+
+// github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
+const breakpoints = {
+  // >= 768px
+  sm: 'only screen and (min-width: 48em)',
+  // >= 1024px
+  md: 'only screen and (min-width: 64em)',
+  // >= 1200px
+  lg: 'only screen and (min-width: 75em)'
+};
+
+module.exports = traverse({
+  breakpoints,
+  colors,
+  forms,
+  links,
+  sizes,
+  tables,
+  typography
+}).map(function(x) {
+  return isFunction(x) ? x(this.parent.node) : x;
+});

ui/src/shared/functions.js

@@ -0,0 +1,16 @@
+module.exports = {
+  remCalc: function(values) {
+    values = values.replace('px', '');
+    values = values.split(' ');
+
+    let outputRems = '';
+    const base = 16;
+
+    values.forEach( (value, i) => {
+      const remValue = value / base;
+      outputRems += i === 0 ? `${remValue}rem` : ` ${remValue}rem`;
+    });
+
+    return outputRems;
+  }
+};

ui/test/index.js

@@ -6,8 +6,8 @@ const {
   shallow
 } = enzyme;
 
-test('renders <Button> without exploding', (t) => {
+test('renders <Base> without exploding', (t) => {
-  const Button = require('../src/components/button');
+  const Base = require('../src/components/base');
-  const wrapper = shallow(<Button />);
+  const wrapper = shallow(<Base />);
   t.deepEqual(wrapper.length, 1);
 });

ui/webpack/base.js

@@ -13,23 +13,9 @@ const plugins = {
       postcss: {
         plugins: [
           require('postcss-import')(),
+          require('postcss-constants')({}),
           require('postcss-at-rules-variables')(),
-          require('postcss-modules-values'),
+          require('postcss-functions')(require('../src/shared/functions')),
-          require('postcss-functions')({
-            functions: {
-              remCalc: function(values) {
-                values = values.replace('px', '');
-                values = values.split(' ');
-                let outputRems = '';
-                const base = 16;
-                values.forEach( (value, i) => {
-                  const remValue = value / base;
-                  outputRems += i === 0 ? `${remValue}rem` : ` ${remValue}rem`;
-                });
-                return outputRems;
-              }
-            },
-          }),
           require('postcss-mixins')(),
           require('postcss-for'),
           require('postcss-cssnext')()

ui/yarn.lock

@@ -1470,6 +1470,14 @@ code-point-at@^1.0.0:
   dependencies:
     number-is-nan "^1.0.0"
 
+color, color@^0.11.0:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-0.11.3.tgz#4bad1d0d52499dd00dbd6f0868442467e49394e6"
+  dependencies:
+    clone "^1.0.2"
+    color-convert "^1.3.0"
+    color-string "^0.3.0"
+
 color-convert@^0.5.3, color-convert@0.5.x:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
@@ -1505,14 +1513,6 @@ color@^0.10.1:
     color-convert "^0.5.3"
     color-string "^0.3.0"
 
-color@^0.11.0:
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/color/-/color-0.11.3.tgz#4bad1d0d52499dd00dbd6f0868442467e49394e6"
-  dependencies:
-    clone "^1.0.2"
-    color-convert "^1.3.0"
-    color-string "^0.3.0"
-
 color@^0.7.3:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/color/-/color-0.7.3.tgz#ab3ae4bc6cb8cfadb5d749c40f34aea088104f89"
@@ -2020,6 +2020,10 @@ dot-prop@^3.0.0:
   dependencies:
     is-obj "^1.0.0"
 
+dotty@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/dotty/-/dotty-0.0.2.tgz#e1de8d46267b62fade12b5b58c21ca514c4a7aa1"
+
 duplexer2@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
@@ -3486,6 +3490,10 @@ lodash.indexof@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
 
+lodash.isfunction:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.8.tgz#4db709fc81bc4a8fd7127a458a5346c5cdce2c6b"
+
 lodash.isundefined:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz#23ef3d9535565203a66cefd5b830f848911afb48"
@@ -3545,6 +3553,10 @@ lodash.words@^3.0.0:
   dependencies:
     lodash._root "^3.0.0"
 
+lodash@^3.10.0:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+
 lodash@^4.0.0, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.16.2, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
   version "4.16.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.4.tgz#01ce306b9bad1319f2a5528674f88297aeb70127"
@@ -4316,6 +4328,15 @@ postcss-colormin@^2.1.8:
     postcss "^5.0.13"
     postcss-value-parser "^3.2.3"
 
+postcss-constants:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-constants/-/postcss-constants-0.2.0.tgz#245fb78b2d5b42d7337848a1c58cd82fc64e0f8d"
+  dependencies:
+    dotty "0.0.2"
+    lodash "^3.10.0"
+    postcss "^5.0.12"
+    resolve "^1.1.6"
+
 postcss-convert-values@^2.3.4:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.4.1.tgz#45dce4d4e33b7d967b97a4d937f270ea98d2fe7a"
@@ -5082,7 +5103,7 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
-reduce-css-calc@^1.2.6, reduce-css-calc@^1.2.7:
+reduce-css-calc, reduce-css-calc@^1.2.6, reduce-css-calc@^1.2.7:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
   dependencies:
@@ -5713,7 +5734,7 @@ tough-cookie@~2.3.0:
   dependencies:
     punycode "^1.4.1"
 
-traverse@^0.6.6:
+traverse, traverse@^0.6.6:
   version "0.6.6"
   resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"