wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-15 11:26:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support standard css variables, dynamically set spacing-unit

Browse Source
This commit is contained in:
Chi Vinh Le
2018-07-12 03:19:14 -03:00
parent 1a08aba969
commit ff41fabb37
14 changed files with 499 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/paths.js
+1
View File
@@ -53,6 +53,7 @@ module.exports = {
appTsconfig: resolveApp("src/core/client/tsconfig.json"),
appLocales: resolveApp("src/locales"),
appThemeVariables: resolveApp("src/core/client/ui/theme/variables.ts"),
appThemeGlobalCSS: resolveApp("src/core/client/ui/theme/global.css"),
testsSetup: resolveApp("src/setupTests.js"),
appNodeModules: resolveApp("node_modules"),
config/postcss.config.js
+37 -8
View File
@@ -1,30 +1,59 @@
// Allow importing typescript files.
require("ts-node/register");
const precss = require("precss");
const autoprefixer = require("autoprefixer");
const fontMagician = require("postcss-font-magician");
const kebabCase = require("lodash/kebabCase");
const mapKeys = require("lodash/mapKeys");
const mapValues = require("lodash/mapValues");
const pickBy = require("lodash/pickBy");
const flat = require("flat");
const flexbugsFixes = require("postcss-flexbugs-fixes");
const paths = require("./paths");
const autoprefixer = require("autoprefixer");
const postcssFontMagician = require("postcss-font-magician");
const postcssFlexbugsFixes = require("postcss-flexbugs-fixes");
const postcssVariables = require("postcss-css-variables");
const postcssPresetEnv = require("postcss-preset-env");
const postcssNested = require("postcss-nested");
const postcssImport = require("postcss-import");
const postcssPrependImports = require("postcss-prepend-imports");
const postcssAdvancedVariables = require("postcss-advanced-variables");
delete require.cache[paths.appThemeVariables];
const variables = require(paths.appThemeVariables).default;
const flatKebabVariables = mapKeys(
flat(variables, { delimiter: "-" }),
mapValues(flat(variables, { delimiter: "-" }), v => v.toString()),
(_, k) => kebabCase(k)
);
// These are the default css standard variables.
const cssVariables = pickBy(
flatKebabVariables,
(v, k) => !k.startsWith("breakpoints-")
);
// These are sass style variables used in media queries.
const mediaQueryVariables = mapValues(
pickBy(flatKebabVariables, (v, k) => k.startsWith("breakpoints-")),
v => `${v}px`
);
module.exports = {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: "postcss",
plugins: [
precss({ variables: flatKebabVariables }),
fontMagician(),
flexbugsFixes,
postcssPrependImports({
path: "",
files: [paths.appThemeGlobalCSS],
}),
postcssImport(),
postcssNested(),
// Sass style variables to be used in media queries.
postcssAdvancedVariables({ variables: mediaQueryVariables }),
// CSS standard variables for everything else.
postcssVariables({ variables: cssVariables }),
postcssPresetEnv(),
postcssFontMagician(),
postcssFlexbugsFixes,
autoprefixer({
browsers: [
">1%",
package-lock.json
Generated
+379 -43
View File
@@ -1772,6 +1772,7 @@
"version": "16.4.2",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.2.tgz",
"integrity": "sha512-oVcVteCDNiVc/fkDjowRfAZQDEOR76j3CJ3FvwXNvfV6zJguhghy1lMgpAzYox+9AZsWch+JPV6Imml3wvIUeg==",
"dev": true,
"requires": {
"csstype": "^2.2.0"
}
@@ -1795,6 +1796,7 @@
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/react-responsive/-/react-responsive-3.0.1.tgz",
"integrity": "sha512-ti7MKe0AuWCGpNkRzRsRB8ExS7NZotXtDtD27rX4HiZML37SetbIp3cw5FDXIeqIC7a3TzWuPjv/I9Qcu4YL3w==",
"dev": true,
"requires": {
"@types/react": "*"
}
@@ -6331,9 +6333,9 @@
"dev": true
},
"cssdb": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/cssdb/-/cssdb-1.6.0.tgz",
"integrity": "sha512-KBxrzWDyY0aFA3DkAH0SDWhIKp1or83pBLqacXq4VWNrOCwf/G9An+VDXIW8qAGJz11o9nO8mQezq1ZJOdaF8A==",
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/cssdb/-/cssdb-3.1.0.tgz",
"integrity": "sha512-9+ASPG9O+d876YfZJjStXszOGn3EEOp5scMeCwZb/+TwTZfadQFshz/Vsh1vGET9HzaXvsfV+1O0ShFb52DddA==",
"dev": true
},
"cssesc": {
@@ -6484,7 +6486,8 @@
"csstype": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.5.tgz",
"integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA=="
"integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA==",
"dev": true
},
"currently-unhandled": {
"version": "0.4.1",
@@ -14156,13 +14159,32 @@
}
},
"postcss-attribute-case-insensitive": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-2.0.0.tgz",
"integrity": "sha1-lNxCLI+QmX8WvTOjZUu77AhJY7Q=",
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-3.0.1.tgz",
"integrity": "sha512-X/viSS9YrAoDnRa2R4sElsAmW+scOWeVW11FjWQN8m+FW1YY0jdIA9fuBSSF1pKsJTYXJXGJ1oAjFHl8cqcmKw==",
"dev": true,
"requires": {
"postcss": "^6.0.0",
"postcss-selector-parser": "^2.2.3"
"postcss": "^6.0.23",
"postcss-selector-parser": "^4.0.0"
},
"dependencies": {
"cssesc": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz",
"integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==",
"dev": true
},
"postcss-selector-parser": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz",
"integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
"dev": true,
"requires": {
"cssesc": "^1.0.1",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
}
}
}
},
"postcss-calc": {
@@ -14226,6 +14248,16 @@
}
}
},
"postcss-color-functional-notation": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-1.0.1.tgz",
"integrity": "sha512-8ECwUd75SwcjLMzFdRVRBqjVoHwGeWpLQKCNIQo9T+QeCrUNKI1NJ6rgpni5vo7iZ7MZy21qKqUieMM3D0wHYQ==",
"dev": true,
"requires": {
"postcss": "^6.0.22",
"postcss-values-parser": "^1.5.0"
}
},
"postcss-color-hex-alpha": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-3.0.0.tgz",
@@ -14411,6 +14443,17 @@
}
}
},
"postcss-css-variables": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.9.0.tgz",
"integrity": "sha512-pSNj57bdBaFnyDzt96SZOidMMWY7Q5OySQdKsTxaxehYO6EtNC5SAKIwjah/poh5vUmNthkrlOd03bP+HNGuCA==",
"dev": true,
"requires": {
"escape-string-regexp": "^1.0.3",
"extend": "^3.0.1",
"postcss": "^6.0.8"
}
},
"postcss-custom-media": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz",
@@ -14441,22 +14484,28 @@
}
},
"postcss-dir-pseudo-class": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-3.0.0.tgz",
"integrity": "sha512-iEVgue59Xs6vz9CQZtlyonW/BmVfpqWglcUyIP2rQaBpH1a2T8Iax61eXY2NjTAq5r3Xjxwk4lrA84acoAiWHw==",
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-4.0.0.tgz",
"integrity": "sha512-ZAeXMIyZukHHeDt5IFchWB+okPzasb8YnpkXIgTiJl4216X1IplMrODjihZIBDXNE2RdJRBCAOx8uGzCnGSxTA==",
"dev": true,
"requires": {
"postcss": "^6.0.20",
"postcss-selector-parser": "^3.1.1"
"postcss": "^6.0.22",
"postcss-selector-parser": "^4.0.0"
},
"dependencies": {
"cssesc": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz",
"integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==",
"dev": true
},
"postcss-selector-parser": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
"integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=",
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz",
"integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
"dev": true,
"requires": {
"dot-prop": "^4.1.1",
"cssesc": "^1.0.1",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
}
@@ -14759,6 +14808,16 @@
}
}
},
"postcss-env-function": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-1.0.0.tgz",
"integrity": "sha512-UVkdbVCRAEr79XkS6uxMRWIHYrFNuhXmjw6gxyesCBXzzHIvYOoz5UKTWM39xX3j9vGO5waVzxq/VzEiZgsM0g==",
"dev": true,
"requires": {
"postcss": "^6.0.22",
"postcss-values-parser": "^1.5.0"
}
},
"postcss-extend-rule": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/postcss-extend-rule/-/postcss-extend-rule-1.1.0.tgz",
@@ -14838,14 +14897,23 @@
}
},
"postcss-focus-visible": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-2.0.0.tgz",
"integrity": "sha512-nJaq5CK2YBWB1fu1SeK0qXAk0TJncY3Ms7iwFov+J3sNetecvTeCQuSxQCf9U9T9Vjusnb3zzThBs5XwP/eb/g==",
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-3.0.0.tgz",
"integrity": "sha512-6i3HsOrWNelxBYPh/HWAXF9lPwCFAfFVlUTZqsLRXYMPhcXH1eXdItozRBvT9l5pYF4ddJJbgk4JOp0au0QToA==",
"dev": true,
"requires": {
"postcss": "^6.0"
}
},
"postcss-focus-within": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-2.0.0.tgz",
"integrity": "sha512-LTbT/dxZ3FahpOv1XZMyRLNnBk5QWVU4HL/p82iFkzoPNVhNQazaYIujHXTOAKea5clgjbj6GdFj7mU7qzy1kQ==",
"dev": true,
"requires": {
"postcss": "^6.0.21"
}
},
"postcss-font-family-system-ui": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-font-family-system-ui/-/postcss-font-family-system-ui-3.0.0.tgz",
@@ -14876,6 +14944,37 @@
"postcss": "^6.0.1"
}
},
"postcss-gap-properties": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-1.0.0.tgz",
"integrity": "sha512-snL2k0Nie72J0uCsKgfO2Sd5rs3Wlhsk+k9uVzyMaeBH9gouNPPY7tZ4bopRJmBISbZEUtvF8Gchat6nOFQHdg==",
"dev": true,
"requires": {
"postcss": "^6.0.22"
}
},
"postcss-image-set-function": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-2.0.0.tgz",
"integrity": "sha512-2bpCIj2wFhIhpyM1G/ZZgBJM8K/VKbEcQ0SX5MI9MTGv4giPMnuXMa/sX3bHXHhi1PL4v2WRfqD1+w5T9EhFqg==",
"dev": true,
"requires": {
"postcss": "^6.0.22",
"postcss-values-parser": "^1.5.0"
}
},
"postcss-import": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-11.1.0.tgz",
"integrity": "sha512-5l327iI75POonjxkXgdRCUS+AlzAdBx4pOvMEhTKTCjb1p8IEeVR9yx3cPbmN7LIWJLbfnIXxAhoB4jpD0c/Cw==",
"dev": true,
"requires": {
"postcss": "^6.0.1",
"postcss-value-parser": "^3.2.3",
"read-cache": "^1.0.0",
"resolve": "^1.1.7"
}
},
"postcss-initial": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-2.0.0.tgz",
@@ -14886,6 +14985,17 @@
"postcss": "^6.0.1"
}
},
"postcss-lab-function": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-1.0.1.tgz",
"integrity": "sha512-kxaHXTRjlBLDpJUMsrGM0GnVgBrMqQz1HfaXdv3VNpz2EwwUhrU9uVfqv/NAtiWt6ZkD7IK2MUlncRoj024lIA==",
"dev": true,
"requires": {
"@csstools/convert-colors": "^1.4.0",
"postcss": "^6.0.22",
"postcss-values-parser": "^1.5.0"
}
},
"postcss-load-config": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-1.2.0.tgz",
@@ -15740,6 +15850,15 @@
}
}
},
"postcss-overflow-shorthand": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-1.0.1.tgz",
"integrity": "sha512-QeJk23W8dLP2DrWYSKTwfFfh4Tcy5Msr58vuuxCPcCijX/07jva0OGNKtUH9vZ6NnXB2WEsnfIIg5M0ScPEWeQ==",
"dev": true,
"requires": {
"postcss": "^6.0.22"
}
},
"postcss-page-break": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-1.0.0.tgz",
@@ -15749,39 +15868,125 @@
"postcss": "^6.0.16"
}
},
"postcss-preset-env": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-3.5.0.tgz",
"integrity": "sha512-1I7ve+XzmNLJMZDORLOjSpY28t2H1qADEUcp2tQzuLBxAsbWMBUTDpSPsCKBduoqd4zWuH4bI/04W4T4hveHQw==",
"postcss-place": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-3.0.1.tgz",
"integrity": "sha512-6Cg0z39zBU4FOS85Z6+Us+GCIW7UqKdOGH/9j26LwMzZ3L909wG7NP3BF+L12AEeIL5XfI8Q5SWu9Or3nJTS8g==",
"dev": true,
"requires": {
"@csstools/postcss-image-set-function": "^1.0.0",
"browserslist": "^3.2.4",
"caniuse-lite": "^1.0.30000823",
"cssdb": "^1.6.0",
"postcss": "^6.0.21",
"postcss-apply": "^0.9.0",
"postcss-attribute-case-insensitive": "^2.0.0",
"postcss": "^6.0.22",
"postcss-values-parser": "^1.5.0"
}
},
"postcss-prepend-imports": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/postcss-prepend-imports/-/postcss-prepend-imports-1.0.1.tgz",
"integrity": "sha1-v0WBiAhcM/82mVzJbJFojWSYjig=",
"dev": true,
"requires": {
"postcss": "^5.0.0"
},
"dependencies": {
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
"ansi-styles": "^2.2.1",
"escape-string-regexp": "^1.0.2",
"has-ansi": "^2.0.0",
"strip-ansi": "^3.0.0",
"supports-color": "^2.0.0"
},
"dependencies": {
"supports-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
"dev": true
}
}
},
"has-flag": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
"integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
"dev": true
},
"postcss": {
"version": "5.2.18",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
"integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
"dev": true,
"requires": {
"chalk": "^1.1.3",
"js-base64": "^2.1.9",
"source-map": "^0.5.6",
"supports-color": "^3.2.3"
}
},
"supports-color": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
"integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
"dev": true,
"requires": {
"has-flag": "^1.0.0"
}
}
}
},
"postcss-preset-env": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-5.2.1.tgz",
"integrity": "sha512-zsGFBKtTyCY5YxOq6Q/WR4oa9/LOKawEWMxJ7UpMtfj1t50OWeGZadRQp/i7DSSWjKus+eJKLIHDxLaobwhidQ==",
"dev": true,
"requires": {
"autoprefixer": "^8.6.3",
"browserslist": "^3.2.8",
"caniuse-lite": "^1.0.30000859",
"cssdb": "^3.1.0",
"postcss": "^6.0.23",
"postcss-attribute-case-insensitive": "^3.0.1",
"postcss-color-functional-notation": "^1.0.1",
"postcss-color-hex-alpha": "^3.0.0",
"postcss-color-mod-function": "^2.4.2",
"postcss-color-rebeccapurple": "^3.0.0",
"postcss-color-rgb": "^2.0.0",
"postcss-color-rebeccapurple": "^3.1.0",
"postcss-custom-media": "^6.0.0",
"postcss-custom-properties": "^7.0.0",
"postcss-custom-selectors": "^4.0.1",
"postcss-dir-pseudo-class": "^3.0.0",
"postcss-focus-visible": "^2.0.0",
"postcss-dir-pseudo-class": "^4.0.0",
"postcss-env-function": "^1.0.0",
"postcss-focus-visible": "^3.0.0",
"postcss-focus-within": "^2.0.0",
"postcss-font-family-system-ui": "^3.0.0",
"postcss-font-variant": "^3.0.0",
"postcss-gap-properties": "^1.0.0",
"postcss-image-set-function": "^2.0.0",
"postcss-initial": "^2.0.0",
"postcss-lab-function": "^1.0.1",
"postcss-logical": "^1.1.1",
"postcss-media-minmax": "^3.0.0",
"postcss-nesting": "^4.2.1",
"postcss-nesting": "^6.0.0",
"postcss-overflow-shorthand": "^1.0.1",
"postcss-page-break": "^1.0.0",
"postcss-pseudo-class-any-link": "^4.0.0",
"postcss-place": "^3.0.1",
"postcss-pseudo-class-any-link": "^5.0.0",
"postcss-replace-overflow-wrap": "^2.0.0",
"postcss-selector-matches": "^3.0.1",
"postcss-selector-not": "^3.0.1"
},
"dependencies": {
"postcss-nesting": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-6.0.0.tgz",
"integrity": "sha512-Yoglsy6eZbDCbRIXoYSmnIt9ao4xyg07iFwVBd7WyIkDzMSeRxIqUk8xEAdkeJQ7eGfWo6RufrTU7FSUjZ22fg==",
"dev": true,
"requires": {
"postcss": "^6.0.22"
}
}
}
},
"postcss-property-lookup": {
@@ -15796,13 +16001,32 @@
}
},
"postcss-pseudo-class-any-link": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-4.0.0.tgz",
"integrity": "sha1-kVKgYT00UHIFE+iJKFS65C0O5o4=",
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-5.0.0.tgz",
"integrity": "sha512-rA5grdRhLLMMI654eOZVuKGr4fUBQNGSH0K+7j5839CiBA/IvNt/Ewt7aIrkGZPySKI3nqzs34HefO8U0Fxahg==",
"dev": true,
"requires": {
"postcss": "^6.0.1",
"postcss-selector-parser": "^2.2.3"
"postcss": "^6.0.22",
"postcss-selector-parser": "^4.0.0"
},
"dependencies": {
"cssesc": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-1.0.1.tgz",
"integrity": "sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA==",
"dev": true
},
"postcss-selector-parser": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz",
"integrity": "sha512-5h+MvEjnzu1qy6MabjuoPatsGAjjDV9B24e7Cktjl+ClNtjVjmvAXjOFQr1u7RlWULKNGYaYVE4s+DIIQ4bOGA==",
"dev": true,
"requires": {
"cssesc": "^1.0.1",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
}
}
}
},
"postcss-reduce-idents": {
@@ -16255,6 +16479,101 @@
"postcss-nested": "^3.0.0",
"postcss-preset-env": "^3.2.2",
"postcss-property-lookup": "^2.0.0"
},
"dependencies": {
"cssdb": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/cssdb/-/cssdb-1.6.0.tgz",
"integrity": "sha512-KBxrzWDyY0aFA3DkAH0SDWhIKp1or83pBLqacXq4VWNrOCwf/G9An+VDXIW8qAGJz11o9nO8mQezq1ZJOdaF8A==",
"dev": true
},
"postcss-attribute-case-insensitive": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-2.0.0.tgz",
"integrity": "sha1-lNxCLI+QmX8WvTOjZUu77AhJY7Q=",
"dev": true,
"requires": {
"postcss": "^6.0.0",
"postcss-selector-parser": "^2.2.3"
}
},
"postcss-dir-pseudo-class": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-3.0.0.tgz",
"integrity": "sha512-iEVgue59Xs6vz9CQZtlyonW/BmVfpqWglcUyIP2rQaBpH1a2T8Iax61eXY2NjTAq5r3Xjxwk4lrA84acoAiWHw==",
"dev": true,
"requires": {
"postcss": "^6.0.20",
"postcss-selector-parser": "^3.1.1"
},
"dependencies": {
"postcss-selector-parser": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
"integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=",
"dev": true,
"requires": {
"dot-prop": "^4.1.1",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
}
}
}
},
"postcss-focus-visible": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-2.0.0.tgz",
"integrity": "sha512-nJaq5CK2YBWB1fu1SeK0qXAk0TJncY3Ms7iwFov+J3sNetecvTeCQuSxQCf9U9T9Vjusnb3zzThBs5XwP/eb/g==",
"dev": true,
"requires": {
"postcss": "^6.0"
}
},
"postcss-preset-env": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-3.5.0.tgz",
"integrity": "sha512-1I7ve+XzmNLJMZDORLOjSpY28t2H1qADEUcp2tQzuLBxAsbWMBUTDpSPsCKBduoqd4zWuH4bI/04W4T4hveHQw==",
"dev": true,
"requires": {
"@csstools/postcss-image-set-function": "^1.0.0",
"browserslist": "^3.2.4",
"caniuse-lite": "^1.0.30000823",
"cssdb": "^1.6.0",
"postcss": "^6.0.21",
"postcss-apply": "^0.9.0",
"postcss-attribute-case-insensitive": "^2.0.0",
"postcss-color-hex-alpha": "^3.0.0",
"postcss-color-mod-function": "^2.4.2",
"postcss-color-rebeccapurple": "^3.0.0",
"postcss-color-rgb": "^2.0.0",
"postcss-custom-media": "^6.0.0",
"postcss-custom-properties": "^7.0.0",
"postcss-custom-selectors": "^4.0.1",
"postcss-dir-pseudo-class": "^3.0.0",
"postcss-focus-visible": "^2.0.0",
"postcss-font-family-system-ui": "^3.0.0",
"postcss-font-variant": "^3.0.0",
"postcss-initial": "^2.0.0",
"postcss-logical": "^1.1.1",
"postcss-media-minmax": "^3.0.0",
"postcss-nesting": "^4.2.1",
"postcss-page-break": "^1.0.0",
"postcss-pseudo-class-any-link": "^4.0.0",
"postcss-replace-overflow-wrap": "^2.0.0",
"postcss-selector-matches": "^3.0.1",
"postcss-selector-not": "^3.0.1"
}
},
"postcss-pseudo-class-any-link": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-4.0.0.tgz",
"integrity": "sha1-kVKgYT00UHIFE+iJKFS65C0O5o4=",
"dev": true,
"requires": {
"postcss": "^6.0.1",
"postcss-selector-parser": "^2.2.3"
}
}
}
},
"prelude-ls": {
@@ -17072,6 +17391,23 @@
"react-is": "^16.4.1"
}
},
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
"integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
"dev": true,
"requires": {
"pify": "^2.3.0"
},
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
}
},
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
package.json
+8 -2
View File
@@ -24,7 +24,6 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
"@types/react-responsive": "^3.0.1",
"apollo-server-express": "^1.3.6",
"bunyan": "^1.8.12",
"convict": "^4.3.0",
@@ -71,8 +70,8 @@
"@types/ioredis": "^3.2.8",
"@types/jest": "^23.1.1",
"@types/joi": "^13.0.8",
"@types/lodash": "^4.14.109",
"@types/jsdom": "^11.0.6",
"@types/lodash": "^4.14.109",
"@types/luxon": "^0.5.3",
"@types/mongodb": "^3.0.19",
"@types/node": "^10.3.1",
@@ -80,6 +79,7 @@
"@types/query-string": "^6.1.0",
"@types/react-dom": "^16.0.6",
"@types/react-relay": "github:coralproject/patched#types/react-relay",
"@types/react-responsive": "^3.0.1",
"@types/react-test-renderer": "^16.0.1",
"@types/recompose": "^0.26.1",
"@types/relay-runtime": "github:coralproject/patched#types/relay-runtime",
@@ -117,9 +117,15 @@
"jsdom": "^11.11.0",
"loader-utils": "^1.1.0",
"npm-run-all": "^4.1.3",
"postcss-advanced-variables": "^2.3.3",
"postcss-css-variables": "^0.9.0",
"postcss-flexbugs-fixes": "^3.3.1",
"postcss-font-magician": "^2.2.1",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.1.5",
"postcss-nested": "^3.0.0",
"postcss-preset-env": "^5.2.1",
"postcss-prepend-imports": "^1.0.1",
"precss": "^3.1.2",
"prettier": "^1.13.4",
"query-string": "^6.1.0",
src/core/client/stream/components/Comment.css
+2 -3
View File
@@ -1,11 +1,10 @@
.root {
width: 400px;
}
.gutterBottom {
margin-bottom: calc(2px * $spacing-unit);
margin-bottom: calc(1px * var(--spacing-unit));
}
.topBar {
margin-bottom: calc(1px * $spacing-unit);
margin-bottom: calc(0.5px * var(--spacing-unit));
}
src/core/client/stream/components/Indent.css
+2 -2
View File
@@ -1,8 +1,8 @@
.root {
border-left: 3px solid;
padding-left: calc(2px * $spacing-unit);
padding-left: calc(1px * var(--spacing-unit));
}
.level0 {
border-color: $palette-secondary-darkest;
border-color: var(--palette-secondary-darkest);
}
src/core/client/stream/components/PostCommentForm.css
+4 -3
View File
@@ -3,11 +3,12 @@
display: block;
height: 100px;
width: 400px;
margin-bottom: calc(2px * $spacing-unit);
width: 100%;
box-sizing: border-box;
margin-bottom: calc(1px * var(--spacing-unit));
}
.postButtonContainer {
display: flex;
justify-content: flex-end;
}
}
src/core/client/stream/components/Stream.css
+4
View File
@@ -0,0 +1,4 @@
.root {
width: 100%;
max-width: 400px;
}
src/core/client/stream/components/Stream.tsx
+2 -1
View File
@@ -8,6 +8,7 @@ import CommentContainer from "../containers/CommentContainer";
import PostCommentFormContainer from "../containers/PostCommentFormContainer";
import ReplyListContainer from "../containers/ReplyListContainer";
import Logo from "./Logo";
import * as styles from "./Stream.css";
export interface StreamProps {
assetID: string;
@@ -20,7 +21,7 @@ export interface StreamProps {
const Stream: StatelessComponent<StreamProps> = props => {
return (
<div>
<div className={styles.root}>
<Logo gutterBottom />
<PostCommentFormContainer assetID={props.assetID} />
<div id="talk-comments-stream-log" role="log" aria-live="polite">
src/core/client/ui/components/Button/Button.css
+19 -19
View File
@@ -4,7 +4,7 @@
&:enabled,
&:disabled {
padding: 5px 20px;
border-radius: $round-corners;
border-radius: var(--round-corners);
background-color: transparent;
/* TODO: hover styles for the default button */
}
@@ -24,70 +24,70 @@
.primary:enabled,
.primary:disabled {
background-color: $palette-primary-main;
background-color: var(--palette-primary-main);
color: #fff;
}
.primary:enabled {
&:hover {
background-color: $palette-primary-light;
background-color: var(--palette-primary-light);
}
&:active {
background-color: $palette-primary-lighter;
background-color: var(--palette-primary-lighter);
}
}
.primary:enabled.invert,
.primary:disabled.invert {
background-color: transparent;
border: 1px solid $palette-primary-main;
color: $palette-primary-main;
border: 1px solid var(--palette-primary-main);
color: var(--palette-primary-main);
}
.primary:enabled.invert {
&:hover {
border-color: $palette-primary-light;
color: $palette-primary-light;
border-color: var(--palette-primary-light);
color: var(--palette-primary-light);
}
&:active {
border-color: $palette-primary-lighter;
color: $palette-primary-lighter;
border-color: var(--palette-primary-lighter);
color: var(--palette-primary-lighter);
}
}
.secondary:enabled,
.secondary:disabled {
background-color: $palette-secondary-main;
background-color: var(--palette-secondary-main);
color: #fff;
}
.secondary:enabled {
&:hover {
background-color: $palette-secondary-light;
background-color: var(--palette-secondary-light);
}
&:active {
background-color: $palette-secondary-lighter;
background-color: var(--palette-secondary-lighter);
}
}
.secondary:enabled.invert,
.secondary:disabled.invert {
background-color: transparent;
border: 1px solid $palette-secondary-main;
color: $palette-secondary-main;
border: 1px solid var(--palette-secondary-main);
color: var(--palette-secondary-main);
}
.secondary:enabled.invert {
&:hover {
border-color: $palette-secondary-light;
color: $palette-secondary-light;
border-color: var(--palette-secondary-light);
color: var(--palette-secondary-light);
}
&:active {
border-color: $palette-secondary-lighter;
color: $palette-secondary-lighter;
border-color: var(--palette-secondary-lighter);
color: var(--palette-secondary-lighter);
}
}
src/core/client/ui/components/Typography/Typography.css
+10 -10
View File
@@ -11,19 +11,19 @@
composes: heading2 from "talk-ui/shared/typography.css";
}
.heading3 {
.heading3 {
composes: heading3 from "talk-ui/shared/typography.css";
}
.heading4 {
.heading4 {
composes: heading4 from "talk-ui/shared/typography.css";
}
.subtitle1 {
.subtitle1 {
composes: subtitle1 from "talk-ui/shared/typography.css";
}
.subtitle2 {
.subtitle2 {
composes: subtitle2 from "talk-ui/shared/typography.css";
}
@@ -31,7 +31,7 @@
composes: body1 from "talk-ui/shared/typography.css";
}
.body2 {
.body2 {
composes: body2 from "talk-ui/shared/typography.css";
}
@@ -70,7 +70,7 @@
}
.paragraph {
margin-bottom: calc(2px * $spacing-unit);
margin-bottom: calc(1px * var(--spacing-unit));
}
.colorInherit {
@@ -78,17 +78,17 @@
}
.colorPrimary {
color: $palette-primary-main;
color: var(--palette-primary-main);
}
.colorSecondary {
color: $palette-secondary-main;
color: var(--palette-secondary-main);
}
.colorTextSecondary {
color: $palette-text-secondary;
color: var(--palette-text-secondary);
}
.colorError {
color: $palette-error-main;
color: var(--palette-error-main);
}
src/core/client/ui/shared/typography.css
+25 -21
View File
@@ -1,59 +1,63 @@
.heading1 {
font-size: calc(24rem / $rem-base);
font-weight: $font-weight-medium;
font-size: calc(24rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: "Manuale";
line-height: calc(32em / 24);
letter-spacing: calc(0.2em / 16);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.heading2 {
font-size: calc(20rem / $rem-base);
font-weight: $font-weight-medium;
font-size: calc(20rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: "Manuale";
line-height: calc(24em / 20);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.heading3 {
font-size: calc(18rem / $rem-base);
font-weight: $font-weight-medium;
font-size: calc(18rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: "Manuale";
line-height: calc(20em / 18);
letter-spacing: calc(0.2em / 16);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.heading4 {
font-size: calc(16rem / $rem-base);
font-weight: $font-weight-medium;
font-size: calc(16rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: "Manuale";
line-height: calc(18em / 16);
letter-spacing: calc(0.2em / 16);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.subtitle1 {}
.subtitle1 {
}
.subtitle2 {}
.subtitle2 {
}
.body2 {}
.body2 {
}
.body1 {
font-size: calc(16rem / $rem-base);
font-weight: $font-weight-regular;
font-size: calc(16rem / var(--rem-base));
font-weight: var(--font-weight-regular);
font-family: "Source Sans Pro";
line-height: calc(18em / 16);
letter-spacing: calc(0.2em / 16);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.button {
color: $palette-text-secondary;
color: var(--palette-text-secondary);
font-family: "Source Sans Pro";
font-weight: $font-weight-medium;
font-weight: var(--font-weight-medium);
font-size: 16px;
letter-spacing: calc(0.57em / 16);
}
.overline {}
.overline {
}
src/core/client/ui/theme/global.css
+5
View File
@@ -0,0 +1,5 @@
@media (max-width: $breakpoints-sm) {
:root {
--spacing-unit: calc(0.5 * var(--spacing-unit));
}
}
src/core/client/ui/theme/variables.ts
+1 -1
View File
@@ -58,7 +58,7 @@ const variables = {
},
},
/* gitter and spacing */
spacingUnit: 5,
spacingUnit: 10,
/* Borders */
roundCorners: "2px",
/* Typography */