replace postcs-module-values with postcss-constants

2024-11-10 21:30:06 +02:00 · 2016-10-28 15:14:35 +01:00 · 2016-10-28 15:14:35 +01:00 · efebd9c2b9
commit efebd9c2b9
parent 9793440e09
22 changed files with 225 additions and 162 deletions
--- a/ui/package.json
+++ b/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",
--- a/ui/src/components/avatar/style.css
+++ b/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';
 }
--- a/ui/src/components/base/style.css
+++ b/ui/src/components/base/style.css
@ -9,22 +9,22 @@
 * github.com/necolas/normalize.css
 */

-@value cursor-disabled from "../../constants/forms.css";
-@value link-color, link-decoration, link-hover-color, link-hover-decoration from "../../constants/links.css";
-@value table-bg, table-cell-padding from "../../constants/tables.css";
-@value dt-font-weight, text-muted, abbr-border-color from "../../constants/typography.css";
+~forms: "../../shared/constants.js";
+~links: "../../shared/constants.js";
+~tables: "../../shared/constants.js";
+~typography: "../../shared/constants.js";

 :root {
-  --cursor-disabled: cursor-disabled;
-  --link-color: link-color;
-  --link-decoration: link-decoration;
-  --link-hover-color: link-hover-color;
-  --link-hover-decoration: link-hover-decoration;
-  --table-bg: table-bg;
-  --table-cell-padding: table-cell-padding;
-  --dt-font-weight: dt-font-weight;
-  --text-muted: text-muted;
-  --abbr-border-color: abbr-border-color;
+  --cursor-disabled: ~forms.cursorDisabled;
+  --link-color: ~links.linkColor;
+  --link-decoration: ~links.linkDecoration;
+  --link-hover-color: ~links.linkHoverColor;
+  --link-hover-decoration: ~links.linkHoverDecoration;
+  --table-bg: ~tables.tableBg;
+  --table-cell-padding: ~tables.tableCellPadding;
+  --dt-font-weight: ~typography.dtFontWeight;
+  --text-muted: ~typography.textMuted;
+  --abbr-border-color: ~typography.abbrBorderColor;
 }

 .base {
--- a/ui/src/components/column/style.css
+++ b/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";
-@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
+~sizes: "../../shared/constants.js";
+~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;
  }
 }
--- a/ui/src/components/container/style.css
+++ b/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";
-@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
+~sizes: "../../shared/constants.js";
+~breakpoints: "../../shared/constants.js";

 :root {
-  --outer-margin: outer-margin;
-  --container-sm: container-sm;
+  --outer-margin: ~sizes.outerMargin;
+  --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);
  }
 }
--- a/ui/src/components/radio/style.css
+++ b/ui/src/components/radio/style.css
@ -1,4 +1,4 @@
-@import '../../util/mixins.css';
+@import '../../shared/mixins.css';

 :root {
  --radio-radius: 20px;
--- a/ui/src/components/row/style.css
+++ b/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";
-@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
+~sizes: "../../shared/constants.js";
+~breakpoints: "../../shared/constants.js";

 :root {
-  --outer-margin: outer-margin;
-  --gutter-compensation: gutter-compensation;
+  --gutter-compensation: ~sizes.gutterCompensation;
 }

+@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;
  }
 }
--- a/ui/src/components/tab/style.css
+++ b/ui/src/components/tab/style.css
@ -1,4 +1,4 @@
-@import '../../util/mixins.css';
+@import '../../shared/mixins.css';

 .tab {
  display: inline;
--- a/ui/src/constants/breakpoints.css
+++ b/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 */
--- a/ui/src/constants/colors.css
+++ b/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);
--- a/ui/src/constants/forms.css
+++ b/ui/src/constants/forms.css
@ -1,5 +0,0 @@
-:root {
-  --cursor-disabled: not-allowed;
-}
-
-@value cursor-disabled: var(--cursor-disabled);
--- a/ui/src/constants/links.css
+++ b/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);
--- a/ui/src/constants/sizes.css
+++ b/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);
--- a/ui/src/constants/tables.css
+++ b/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);
--- a/ui/src/constants/typography.css
+++ b/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);
--- a/ui/src/shared/composers.css
+++ b/ui/src/shared/composers.css
--- a/ui/src/shared/constants.js
+++ b/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;
+});
--- a/ui/src/shared/functions.js
+++ b/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;
+  }
+};
--- a/ui/src/shared/mixins.css
+++ b/ui/src/shared/mixins.css
--- a/ui/test/index.js
+++ b/ui/test/index.js
@ -6,8 +6,8 @@ const {
  shallow
 } = enzyme;

-test('renders <Button> without exploding', (t) => {
-  const Button = require('../src/components/button');
-  const wrapper = shallow(<Button />);
+test('renders <Base> without exploding', (t) => {
+  const Base = require('../src/components/base');
+  const wrapper = shallow(<Base />);
  t.deepEqual(wrapper.length, 1);
 });
--- a/ui/webpack/base.js
+++ b/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')({
-            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-functions')(require('../src/shared/functions')),
          require('postcss-mixins')(),
          require('postcss-for'),
          require('postcss-cssnext')()
--- a/ui/yarn.lock
+++ b/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"