Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

replace postcs-module-values with postcss-constants

Browse Source
This commit is contained in:
Sérgio Ramos 2016-10-28 15:14:35 +01:00
parent 9793440e09
commit efebd9c2b9
22 changed files with 225 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/package.json
View File

@ -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",

2
ui/src/components/avatar/style.css
View File

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

28
ui/src/components/base/style.css
View File

@ -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 {

16
ui/src/components/column/style.css
View File

@ -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;
}
}

20
ui/src/components/container/style.css
View File

@ -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);
}
}

2
ui/src/components/radio/style.css
View File

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

17
ui/src/components/row/style.css
View File

@ -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;
}
}

2
ui/src/components/tab/style.css
View File

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

8
ui/src/constants/breakpoints.css
View File

@ -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 */

13
ui/src/constants/colors.css
View File

@ -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);

5
ui/src/constants/forms.css
View File

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

13
ui/src/constants/links.css
View File

@ -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);

38
ui/src/constants/sizes.css
View File

@ -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);

7
ui/src/constants/tables.css
View File

@ -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);

11
ui/src/constants/typography.css
View File

@ -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);

0
ui/src/util/composers.css → ui/src/shared/composers.css
View File

117
ui/src/shared/constants.js Normal file
View File

@ -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;
});

16
ui/src/shared/functions.js Normal file
View File

@ -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;
}
};

0
ui/src/util/mixins.css → ui/src/shared/mixins.css
View File

6
ui/test/index.js
View File

@ -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);
});

18
ui/webpack/base.js
View File

@ -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')()

41
ui/yarn.lock
View File

@ -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"