commit 8fcb0fa3aac032eb9e7d85e07a50703e54e0e8af
parent 7b03f0b94381932002dd5642ef26644d159f7de5
Author: Konstantin Tarkus <koistya@gmail.com>
Date: Wed, 18 May 2016 18:39:46 +0300
Add support for plain CSS (.css) files (#662)
Diffstat:
36 files changed, 719 insertions(+), 658 deletions(-)
diff --git a/.travis.yml b/.travis.yml
@@ -1,5 +1,6 @@
language: node_js
node_js:
+ - '6'
- '5'
env:
- CXX=g++-4.8
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
{
"private": true,
"engines": {
- "node": ">=5.0 <6",
+ "node": ">=5.0 <7",
"npm": ">=3.3 <4"
},
"dependencies": {
- "babel-polyfill": "6.8.0",
- "babel-runtime": "6.6.1",
- "bluebird": "3.3.5",
+ "babel-polyfill": "6.9.0",
+ "babel-runtime": "6.9.0",
+ "bluebird": "3.4.0",
"body-parser": "1.15.1",
"classnames": "2.2.5",
"cookie-parser": "1.4.1",
@@ -29,21 +29,21 @@
"node-fetch": "1.5.2",
"normalize.css": "4.1.1",
"passport": "0.3.2",
- "passport-facebook": "2.1.0",
+ "passport-facebook": "2.1.1",
"pretty-error": "2.0.0",
"react": "15.0.2",
"react-dom": "15.0.2",
- "sequelize": "^3.23.2",
+ "sequelize": "3.23.2",
"source-map-support": "0.4.0",
- "sqlite3": "^3.1.4",
+ "sqlite3": "3.1.4",
"universal-router": "1.2.1",
"whatwg-fetch": "1.0.0"
},
"devDependencies": {
"assets-webpack-plugin": "^3.4.0",
"autoprefixer": "^6.3.6",
- "babel-cli": "^6.8.0",
- "babel-core": "^6.8.0",
+ "babel-cli": "^6.9.0",
+ "babel-core": "^6.9.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
@@ -51,14 +51,14 @@
"babel-plugin-transform-react-constant-elements": "^6.8.0",
"babel-plugin-transform-react-inline-elements": "^6.8.0",
"babel-plugin-transform-react-remove-prop-types": "^0.2.6",
- "babel-plugin-transform-runtime": "^6.8.0",
- "babel-preset-es2015": "^6.6.0",
+ "babel-plugin-transform-runtime": "^6.9.0",
+ "babel-preset-es2015": "^6.9.0",
"babel-preset-node5": "^11.1.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
- "babel-register": "^6.8.0",
- "babel-template": "^6.8.0",
- "babel-types": "^6.8.1",
+ "babel-register": "^6.9.0",
+ "babel-template": "^6.9.0",
+ "babel-types": "^6.9.0",
"browser-sync": "^2.12.8",
"chai": "^3.5.0",
"css-loader": "^0.23.1",
@@ -80,18 +80,28 @@
"mkdirp": "^0.5.1",
"mocha": "^2.4.5",
"ncp": "^2.0.0",
+ "pixrem": "^3.0.0",
+ "pleeease-filters": "^3.0.0",
"postcss": "^5.0.21",
+ "postcss-calc": "^5.2.1",
+ "postcss-color-function": "^2.0.1",
+ "postcss-custom-media": "^5.0.1",
+ "postcss-custom-properties": "^5.0.1",
+ "postcss-custom-selectors": "^3.0.0",
"postcss-import": "^8.1.2",
"postcss-loader": "^0.9.1",
- "postcss-scss": "^0.1.8",
- "precss": "^1.4.0",
+ "postcss-media-minmax": "^2.1.2",
+ "postcss-nesting": "^2.3.1",
+ "postcss-pseudoelements": "^3.0.0",
+ "postcss-selector-matches": "^2.0.1",
+ "postcss-selector-not": "^2.0.0",
"raw-loader": "^0.5.1",
"react-addons-test-utils": "^15.0.2",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.2.4",
"sinon": "^2.0.0-pre",
- "stylelint": "^6.3.3",
+ "stylelint": "^6.4.1",
"stylelint-config-standard": "^7.0.0",
"url-loader": "^0.5.7",
"webpack": "^1.13.0",
@@ -138,7 +148,7 @@
},
"scripts": {
"eslint": "eslint src tools",
- "stylelint": "stylelint \"src/**/*.scss\" --syntax scss",
+ "stylelint": "stylelint \"src/**/*.css\"",
"lint": "npm run eslint && npm run stylelint",
"test": "mocha \"src/**/*.test.js\" --require test/setup.js --compilers js:babel-register",
"test:watch": "npm run test -- --reporter min --watch",
diff --git a/src/components/App/App.css b/src/components/App/App.css
@@ -0,0 +1,181 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+@import '../../../node_modules/normalize.css/normalize.css';
+
+/*! React Starter Kit | MIT License | https://www.reactstarterkit.com/ */
+
+@import '../variables.css';
+
+/*
+ * Base styles
+ * ========================================================================== */
+
+html {
+ color: #222;
+ font-weight: 100;
+ font-size: 1em; /* ~16px; */
+ font-family: var(--font-family-base);
+ line-height: 1.375; /* ~22px */
+}
+
+a {
+ color: #0074c2;
+}
+
+/*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * These selection rule sets have to be separate.
+ * Customize the background color to match your design.
+ */
+
+::-moz-selection {
+ background: #b3d4fc;
+ text-shadow: none;
+}
+
+::selection {
+ background: #b3d4fc;
+ text-shadow: none;
+}
+
+/*
+ * A better looking default horizontal rule
+ */
+
+hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+}
+
+/*
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+ vertical-align: middle;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+textarea {
+ resize: vertical;
+}
+
+/*
+ * Browser upgrade prompt
+ * ========================================================================== */
+
+:global(.browserupgrade) {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0;
+}
+
+/*
+ * Print styles
+ * Inlined to avoid the additional HTTP request:
+ * http://www.phpied.com/delay-loading-your-print-css/
+ * ========================================================================== */
+
+@media print {
+ *,
+ *::before,
+ *::after {
+ background: transparent !important;
+ color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+
+ a[href]::after {
+ content: ' (' attr(href) ')';
+ }
+
+ abbr[title]::after {
+ content: ' (' attr(title) ')';
+ }
+
+ /*
+ * Don't show links that are fragment identifiers,
+ * or use the `javascript:` pseudo protocol
+ */
+
+ a[href^='#']::after,
+ a[href^='javascript:']::after {
+ content: '';
+ }
+
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+
+ /*
+ * Printing Tables:
+ * http://css-discuss.incutio.com/wiki/Printing_Tables
+ */
+
+ thead {
+ display: table-header-group;
+ }
+
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+
+ img {
+ max-width: 100% !important;
+ }
+
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+}
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -9,7 +9,7 @@
import React, { Component, PropTypes } from 'react';
import emptyFunction from 'fbjs/lib/emptyFunction';
-import s from './App.scss';
+import s from './App.css';
import Header from '../Header';
import Feedback from '../Feedback';
import Footer from '../Footer';
diff --git a/src/components/App/App.scss b/src/components/App/App.scss
@@ -1,181 +0,0 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-@import '../../../node_modules/normalize.css/normalize.css';
-
-/*! React Starter Kit | MIT License | https://www.reactstarterkit.com/ */
-
-@import '../variables.scss';
-
-/*
- * Base styles
- * ========================================================================== */
-
-html {
- color: #222;
- font-weight: 100;
- font-size: 1em; /* ~16px; */
- font-family: $font-family-base;
- line-height: 1.375; /* ~22px */
-}
-
-a {
- color: #0074c2;
-}
-
-/*
- * Remove text-shadow in selection highlight:
- * https://twitter.com/miketaylr/status/12228805301
- *
- * These selection rule sets have to be separate.
- * Customize the background color to match your design.
- */
-
-::-moz-selection {
- background: #b3d4fc;
- text-shadow: none;
-}
-
-::selection {
- background: #b3d4fc;
- text-shadow: none;
-}
-
-/*
- * A better looking default horizontal rule
- */
-
-hr {
- display: block;
- height: 1px;
- border: 0;
- border-top: 1px solid #ccc;
- margin: 1em 0;
- padding: 0;
-}
-
-/*
- * Remove the gap between audio, canvas, iframes,
- * images, videos and the bottom of their containers:
- * https://github.com/h5bp/html5-boilerplate/issues/440
- */
-
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
- vertical-align: middle;
-}
-
-/*
- * Remove default fieldset styles.
- */
-
-fieldset {
- border: 0;
- margin: 0;
- padding: 0;
-}
-
-/*
- * Allow only vertical resizing of textareas.
- */
-
-textarea {
- resize: vertical;
-}
-
-/*
- * Browser upgrade prompt
- * ========================================================================== */
-
-:global(.browserupgrade) {
- margin: 0.2em 0;
- background: #ccc;
- color: #000;
- padding: 0.2em 0;
-}
-
-/*
- * Print styles
- * Inlined to avoid the additional HTTP request:
- * http://www.phpied.com/delay-loading-your-print-css/
- * ========================================================================== */
-
-@media print {
- *,
- *::before,
- *::after {
- background: transparent !important;
- color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
- box-shadow: none !important;
- text-shadow: none !important;
- }
-
- a,
- a:visited {
- text-decoration: underline;
- }
-
- a[href]::after {
- content: ' (' attr(href) ')';
- }
-
- abbr[title]::after {
- content: ' (' attr(title) ')';
- }
-
- /*
- * Don't show links that are fragment identifiers,
- * or use the `javascript:` pseudo protocol
- */
-
- a[href^='#']::after,
- a[href^='javascript:']::after {
- content: '';
- }
-
- pre,
- blockquote {
- border: 1px solid #999;
- page-break-inside: avoid;
- }
-
- /*
- * Printing Tables:
- * http://css-discuss.incutio.com/wiki/Printing_Tables
- */
-
- thead {
- display: table-header-group;
- }
-
- tr,
- img {
- page-break-inside: avoid;
- }
-
- img {
- max-width: 100% !important;
- }
-
- p,
- h2,
- h3 {
- orphans: 3;
- widows: 3;
- }
-
- h2,
- h3 {
- page-break-after: avoid;
- }
-}
diff --git a/src/components/Feedback/Feedback.css b/src/components/Feedback/Feedback.css
@@ -0,0 +1,40 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+@import '../variables.css';
+
+.root {
+ background: #f5f5f5;
+ color: #333;
+}
+
+.container {
+ margin: 0 auto;
+ padding: 20px 8px;
+ max-width: var(--max-content-width);
+ text-align: center;
+ font-size: 1.5em; /* ~24px */
+}
+
+.link,
+.link:active,
+.link:hover,
+.link:visited {
+ color: #333;
+ text-decoration: none;
+}
+
+.link:hover {
+ text-decoration: underline;
+}
+
+.spacer {
+ padding-right: 15px;
+ padding-left: 15px;
+}
diff --git a/src/components/Feedback/Feedback.js b/src/components/Feedback/Feedback.js
@@ -9,7 +9,7 @@
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './Feedback.scss';
+import s from './Feedback.css';
function Feedback() {
return (
diff --git a/src/components/Feedback/Feedback.scss b/src/components/Feedback/Feedback.scss
@@ -1,40 +0,0 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-@import '../variables.scss';
-
-.root {
- background: #f5f5f5;
- color: #333;
-}
-
-.container {
- margin: 0 auto;
- padding: 20px 8px;
- max-width: $max-content-width;
- text-align: center;
- font-size: 1.5em; /* ~24px */
-}
-
-.link,
-.link:active,
-.link:hover,
-.link:visited {
- color: #333;
- text-decoration: none;
-}
-
-.link:hover {
- text-decoration: underline;
-}
-
-.spacer {
- padding-right: 15px;
- padding-left: 15px;
-}
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
@@ -0,0 +1,52 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+@import '../variables.css';
+
+.root {
+ background: #333;
+ color: #fff;
+}
+
+.container {
+ margin: 0 auto;
+ padding: 20px 15px;
+ max-width: var(--max-content-width);
+ text-align: center;
+}
+
+.text {
+ color: rgba(255, 255, 255, 0.5);
+}
+
+.textMuted {
+ composes: text;
+ color: rgba(255, 255, 255, 0.3);
+}
+
+.spacer {
+ color: rgba(255, 255, 255, 0.3);
+}
+
+.text,
+.link {
+ padding: 2px 5px;
+ font-size: 1em;
+}
+
+.link,
+.link:active,
+.link:visited {
+ color: rgba(255, 255, 255, 0.6);
+ text-decoration: none;
+}
+
+.link:hover {
+ color: rgba(255, 255, 255, 1);
+}
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -9,7 +9,7 @@
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './Footer.scss';
+import s from './Footer.css';
import Link from '../Link';
function Footer() {
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
@@ -1,52 +0,0 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-@import '../variables.scss';
-
-.root {
- background: #333;
- color: #fff;
-}
-
-.container {
- margin: 0 auto;
- padding: 20px 15px;
- max-width: $max-content-width;
- text-align: center;
-}
-
-.text {
- color: rgba(255, 255, 255, 0.5);
-}
-
-.textMuted {
- composes: text;
- color: rgba(255, 255, 255, 0.3);
-}
-
-.spacer {
- color: rgba(255, 255, 255, 0.3);
-}
-
-.text,
-.link {
- padding: 2px 5px;
- font-size: 1em;
-}
-
-.link,
-.link:active,
-.link:visited {
- color: rgba(255, 255, 255, 0.6);
- text-decoration: none;
-}
-
-.link:hover {
- color: rgba(255, 255, 255, 1);
-}
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
@@ -0,0 +1,59 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+@import '../variables.css';
+
+:root {
+ --brand-color: #61dafb;
+}
+
+.root {
+ background: #373277;
+ color: #fff;
+}
+
+.container {
+ margin: 0 auto;
+ padding: 20px 0;
+ max-width: var(--max-content-width);
+}
+
+.brand {
+ color: color(var(--brand-color) lightness(+10%));
+ text-decoration: none;
+ font-size: 1.75em; /* ~28px */
+}
+
+.brandTxt {
+ margin-left: 10px;
+}
+
+.nav {
+ float: right;
+ margin-top: 6px;
+}
+
+.banner {
+ text-align: center;
+}
+
+.bannerTitle {
+ margin: 0;
+ padding: 10px;
+ font-weight: normal;
+ font-size: 4em;
+ line-height: 1em;
+}
+
+.bannerDesc {
+ padding: 0;
+ color: rgba(255, 255, 255, 0.5);
+ font-size: 1.25em;
+ margin: 0;
+}
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -9,7 +9,7 @@
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './Header.scss';
+import s from './Header.css';
import Link from '../Link';
import Navigation from '../Navigation';
import logoUrl from './logo-small.png';
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
@@ -1,57 +0,0 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-@import '../variables.scss';
-
-$brand-color: #61dafb;
-
-.root {
- background: #373277;
- color: #fff;
-}
-
-.container {
- margin: 0 auto;
- padding: 20px 0;
- max-width: $max-content-width;
-}
-
-.brand {
- color: color($brand-color lightness(+10%));
- text-decoration: none;
- font-size: 1.75em; /* ~28px */
-}
-
-.brandTxt {
- margin-left: 10px;
-}
-
-.nav {
- float: right;
- margin-top: 6px;
-}
-
-.banner {
- text-align: center;
-}
-
-.bannerTitle {
- margin: 0;
- padding: 10px;
- font-weight: normal;
- font-size: 4em;
- line-height: 1em;
-}
-
-.bannerDesc {
- padding: 0;
- color: rgba(255, 255, 255, 0.5);
- font-size: 1.25em;
- margin: 0;
-}
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.css
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
@@ -10,7 +10,7 @@
import React, { PropTypes } from 'react';
import cx from 'classnames';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './Navigation.scss';
+import s from './Navigation.css';
import Link from '../Link';
function Navigation({ className }) {
diff --git a/src/components/variables.css b/src/components/variables.css
@@ -0,0 +1,31 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+:root {
+ /*
+ * Typography
+ * ======================================================================== */
+
+ --font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
+
+ /*
+ * Layout
+ * ======================================================================== */
+
+ --max-content-width: 1000px;
+
+ /*
+ * Media queries breakpoints
+ * ======================================================================== */
+
+ --screen-xs-min: 480px; /* Extra small screen / phone */
+ --screen-sm-min: 768px; /* Small screen / tablet */
+ --screen-md-min: 992px; /* Medium screen / desktop */
+ --screen-lg-min: 1200px; /* Large screen / wide desktop */
+}
diff --git a/src/components/variables.scss b/src/components/variables.scss
@@ -1,31 +0,0 @@
-/*
- * Colors
- * ========================================================================== */
-
-$white-base: hsl(255, 255, 255);
-$gray-darker: color(black lightness(+13.5%)); /* #222 */
-$gray-dark: color(black lightness(+25%)); /* #404040 */
-$gray: color(black lightness(+33.5%)); /* #555 */
-$gray-light: color(black lightness(+46.7%)); /* #777 */
-$gray-lighter: color(black lightness(+93.5%)); /* #eee */
-
-/*
- * Typography
- * ========================================================================== */
-
-$font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
-
-/*
- * Layout
- * ========================================================================== */
-
-$max-content-width: 1000px;
-
-/*
- * Media queries breakpoints
- * ========================================================================== */
-
-$screen-xs-min: 480px; /* Extra small screen / phone */
-$screen-sm-min: 768px; /* Small screen / tablet */
-$screen-md-min: 992px; /* Medium screen / desktop */
-$screen-lg-min: 1200px; /* Large screen / wide desktop */
diff --git a/src/routes/contact/Contact.css b/src/routes/contact/Contact.css
@@ -0,0 +1,21 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+@import '../../components/variables.css';
+
+.root {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+.container {
+ margin: 0 auto;
+ padding: 0 0 40px;
+ max-width: var(--max-content-width);
+}
diff --git a/src/routes/contact/Contact.js b/src/routes/contact/Contact.js
@@ -9,7 +9,7 @@
import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './Contact.scss';
+import s from './Contact.css';
const title = 'Contact Us';
diff --git a/src/routes/contact/Contact.scss b/src/routes/contact/Contact.scss
@@ -1,21 +0,0 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-@import '../../components/variables.scss';
-
-.root {
- padding-left: 20px;
- padding-right: 20px;
-}
-
-.container {
- margin: 0 auto;
- padding: 0 0 40px;
- max-width: $max-content-width;
-}
diff --git a/src/routes/content/Content.css b/src/routes/content/Content.css
@@ -0,0 +1,21 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+@import '../../components/variables.css';
+
+.root {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+.container {
+ margin: 0 auto;
+ padding: 0 0 40px;
+ max-width: var(--max-content-width);
+}
diff --git a/src/routes/content/Content.js b/src/routes/content/Content.js
@@ -9,7 +9,7 @@
import React, { Component, PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './Content.scss';
+import s from './Content.css';
class Content extends Component {
diff --git a/src/routes/content/Content.scss b/src/routes/content/Content.scss
@@ -1,21 +0,0 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-@import '../../components/variables.scss';
-
-.root {
- padding-left: 20px;
- padding-right: 20px;
-}
-
-.container {
- margin: 0 auto;
- padding: 0 0 40px;
- max-width: $max-content-width;
-}
diff --git a/src/routes/error/ErrorPage.scss b/src/routes/error/ErrorPage.css
diff --git a/src/routes/error/ErrorPage.js b/src/routes/error/ErrorPage.js
@@ -9,7 +9,7 @@
import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './ErrorPage.scss';
+import s from './ErrorPage.css';
function ErrorPage({ error }, context) {
let title = 'Error';
diff --git a/src/routes/home/Home.css b/src/routes/home/Home.css
@@ -0,0 +1,39 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+@import '../../components/variables.css';
+
+.root {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+.container {
+ margin: 0 auto;
+ padding: 0 0 40px;
+ max-width: var(--max-content-width);
+}
+
+.news {
+ padding: 0;
+}
+
+.newsItem {
+ list-style-type: none;
+ padding-bottom: 6px;
+}
+
+.newsTitle {
+ font-size: 1.125em;
+}
+
+.newsTitle,
+.newsDesc {
+ display: block;
+}
diff --git a/src/routes/home/Home.js b/src/routes/home/Home.js
@@ -9,7 +9,7 @@
import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './Home.scss';
+import s from './Home.css';
const title = 'React Starter Kit';
diff --git a/src/routes/home/Home.scss b/src/routes/home/Home.scss
@@ -1,39 +0,0 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-@import '../../components/variables.scss';
-
-.root {
- padding-left: 20px;
- padding-right: 20px;
-}
-
-.container {
- margin: 0 auto;
- padding: 0 0 40px;
- max-width: $max-content-width;
-}
-
-.news {
- padding: 0;
-}
-
-.newsItem {
- list-style-type: none;
- padding-bottom: 6px;
-}
-
-.newsTitle {
- font-size: 1.125em;
-}
-
-.newsTitle,
-.newsDesc {
- display: block;
-}
diff --git a/src/routes/login/Login.css b/src/routes/login/Login.css
@@ -0,0 +1,157 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+@import '../../components/variables.css';
+
+.root {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+.container {
+ margin: 0 auto;
+ padding: 0 0 40px;
+ max-width: 380px;
+}
+
+.lead {
+ font-size: 1.25em;
+}
+
+.formGroup {
+ margin-bottom: 15px;
+}
+
+.label {
+ display: inline-block;
+ margin-bottom: 5px;
+ max-width: 100%;
+ font-weight: 700;
+}
+
+.input {
+ display: block;
+ box-sizing: border-box;
+ padding: 10px 16px;
+ width: 100%;
+ height: 46px;
+ outline: 0;
+ border: 1px solid #ccc;
+ border-radius: 0;
+ background: #fff;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+ color: #616161;
+ font-size: 18px;
+ line-height: 1.3333333;
+ transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+
+.input:focus {
+ border-color: #0074c2;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
+}
+
+.button {
+ display: block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 10px 16px;
+ width: 100%;
+ outline: 0;
+ border: 1px solid #373277;
+ border-radius: 0;
+ background: #373277;
+ color: #fff;
+ text-align: center;
+ text-decoration: none;
+ font-size: 18px;
+ line-height: 1.3333333;
+ cursor: pointer;
+}
+
+.button:hover {
+ background: rgba(54, 50, 119, 0.8);
+}
+
+.button:focus {
+ border-color: #0074c2;
+ box-shadow: 0 0 8px rgba(0, 116, 194, 0.6);
+}
+
+.facebook {
+ border-color: #3b5998;
+ background: #3b5998;
+ composes: button;
+}
+
+.facebook:hover {
+ background: #2d4373;
+}
+
+.google {
+ border-color: #dd4b39;
+ background: #dd4b39;
+ composes: button;
+}
+
+.google:hover {
+ background: #c23321;
+}
+
+.twitter {
+ border-color: #55acee;
+ background: #55acee;
+ composes: button;
+}
+
+.twitter:hover {
+ background: #2795e9;
+}
+
+.icon {
+ display: inline-block;
+ margin: -2px 12px -2px 0;
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ fill: currentColor;
+}
+
+.lineThrough {
+ position: relative;
+ z-index: 1;
+ display: block;
+ margin-bottom: 15px;
+ width: 100%;
+ color: #757575;
+ text-align: center;
+ font-size: 80%;
+}
+
+.lineThrough::before {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ z-index: -1;
+ margin-top: -5px;
+ margin-left: -20px;
+ width: 40px;
+ height: 10px;
+ background-color: #fff;
+ content: '';
+}
+
+.lineThrough::after {
+ position: absolute;
+ top: 49%;
+ z-index: -2;
+ display: block;
+ width: 100%;
+ border-bottom: 1px solid #ddd;
+ content: '';
+}
diff --git a/src/routes/login/Login.js b/src/routes/login/Login.js
@@ -9,7 +9,7 @@
import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './Login.scss';
+import s from './Login.css';
const title = 'Log In';
diff --git a/src/routes/login/Login.scss b/src/routes/login/Login.scss
@@ -1,157 +0,0 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-@import '../../components/variables.scss';
-
-.root {
- padding-left: 20px;
- padding-right: 20px;
-}
-
-.container {
- margin: 0 auto;
- padding: 0 0 40px;
- max-width: 380px;
-}
-
-.lead {
- font-size: 1.25em;
-}
-
-.formGroup {
- margin-bottom: 15px;
-}
-
-.label {
- display: inline-block;
- margin-bottom: 5px;
- max-width: 100%;
- font-weight: 700;
-}
-
-.input {
- display: block;
- box-sizing: border-box;
- padding: 10px 16px;
- width: 100%;
- height: 46px;
- outline: 0;
- border: 1px solid #ccc;
- border-radius: 0;
- background: #fff;
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
- color: #616161;
- font-size: 18px;
- line-height: 1.3333333;
- transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-
- &:focus {
- border-color: #0074c2;
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
- }
-}
-
-.button {
- display: block;
- box-sizing: border-box;
- margin: 0;
- padding: 10px 16px;
- width: 100%;
- outline: 0;
- border: 1px solid #373277;
- border-radius: 0;
- background: #373277;
- color: #fff;
- text-align: center;
- text-decoration: none;
- font-size: 18px;
- line-height: 1.3333333;
- cursor: pointer;
-
- &:hover {
- background: rgba(54, 50, 119, 0.8);
- }
-
- &:focus {
- border-color: #0074c2;
- box-shadow: 0 0 8px rgba(0, 116, 194, 0.6);
- }
-}
-
-.facebook {
- border-color: #3b5998;
- background: #3b5998;
- composes: button;
-
- &:hover {
- background: #2d4373;
- }
-}
-
-.google {
- border-color: #dd4b39;
- background: #dd4b39;
- composes: button;
-
- &:hover {
- background: #c23321;
- }
-}
-
-.twitter {
- border-color: #55acee;
- background: #55acee;
- composes: button;
-
- &:hover {
- background: #2795e9;
- }
-}
-
-.icon {
- display: inline-block;
- margin: -2px 12px -2px 0;
- width: 20px;
- height: 20px;
- vertical-align: middle;
- fill: currentColor;
-}
-
-.lineThrough {
- position: relative;
- z-index: 1;
- display: block;
- margin-bottom: 15px;
- width: 100%;
- color: #757575;
- text-align: center;
- font-size: 80%;
-
- &::before {
- position: absolute;
- top: 50%;
- left: 50%;
- z-index: -1;
- margin-top: -5px;
- margin-left: -20px;
- width: 40px;
- height: 10px;
- background-color: #fff;
- content: '';
- }
-
- &::after {
- position: absolute;
- top: 49%;
- z-index: -2;
- display: block;
- width: 100%;
- border-bottom: 1px solid #ddd;
- content: '';
- }
-}
diff --git a/src/routes/register/Register.css b/src/routes/register/Register.css
@@ -0,0 +1,21 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+@import '../../components/variables.css';
+
+.root {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+.container {
+ margin: 0 auto;
+ padding: 0 0 40px;
+ max-width: var(--max-content-width);
+}
diff --git a/src/routes/register/Register.js b/src/routes/register/Register.js
@@ -9,7 +9,7 @@
import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './Register.scss';
+import s from './Register.css';
const title = 'New User Registration';
diff --git a/src/routes/register/Register.scss b/src/routes/register/Register.scss
@@ -1,21 +0,0 @@
-/**
- * React Starter Kit (https://www.reactstarterkit.com/)
- *
- * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-@import '../../components/variables.scss';
-
-.root {
- padding-left: 20px;
- padding-right: 20px;
-}
-
-.container {
- margin: 0 auto;
- padding: 0 0 40px;
- max-width: $max-content-width;
-}
diff --git a/tools/webpack.config.js b/tools/webpack.config.js
@@ -74,20 +74,27 @@ const config = {
},
},
{
- test: /\.scss$/,
+ test: /\.css/,
loaders: [
'isomorphic-style-loader',
`css-loader?${JSON.stringify({
sourceMap: DEBUG,
-
// CSS Modules https://github.com/css-modules/css-modules
modules: true,
localIdentName: DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
-
// CSS Nano http://cssnano.co/options/
minimize: !DEBUG,
})}`,
- 'postcss-loader?parser=postcss-scss',
+ 'postcss-loader?pack=default',
+ ],
+ },
+ {
+ test: /\.scss$/,
+ loaders: [
+ 'isomorphic-style-loader',
+ `css-loader?${JSON.stringify({ sourceMap: DEBUG, minimize: !DEBUG })}`,
+ 'postcss-loader?pack=sass',
+ 'sass-loader',
],
},
{
@@ -142,11 +149,52 @@ const config = {
},
postcss(bundler) {
- return [
- require('postcss-import')({ addDependencyTo: bundler }),
- require('precss')(),
- require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
- ];
+ return {
+ default: [
+ // Transfer @import rule by inlining content, e.g. @import 'normalize.css'
+ // https://github.com/postcss/postcss-import
+ require('postcss-import')({ addDependencyTo: bundler }),
+ // W3C variables, e.g. :root { --color: red; } div { background: var(--color); }
+ // https://github.com/postcss/postcss-custom-properties
+ require('postcss-custom-properties')(),
+ // W3C CSS Custom Media Queries, e.g. @custom-media --small-viewport (max-width: 30em);
+ // https://github.com/postcss/postcss-custom-media
+ require('postcss-custom-media')(),
+ // CSS4 Media Queries, e.g. @media screen and (width >= 500px) and (width <= 1200px) { }
+ // https://github.com/postcss/postcss-media-minmax
+ require('postcss-media-minmax')(),
+ // W3C CSS Custom Selectors, e.g. @custom-selector :--heading h1, h2, h3, h4, h5, h6;
+ // https://github.com/postcss/postcss-custom-selectors
+ require('postcss-custom-selectors')(),
+ // W3C calc() function, e.g. div { height: calc(100px - 2em); }
+ // https://github.com/postcss/postcss-calc
+ require('postcss-calc')(),
+ // Allows you to nest one style rule inside another
+ // https://github.com/jonathantneal/postcss-nesting
+ require('postcss-nesting')(),
+ // W3C color() function, e.g. div { background: color(red alpha(90%)); }
+ // https://github.com/postcss/postcss-color-function
+ require('postcss-color-function')(),
+ // Convert CSS shorthand filters to SVG equivalent, e.g. .blur { filter: blur(4px); }
+ // https://github.com/iamvdo/pleeease-filters
+ require('pleeease-filters')(),
+ // Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; }
+ // https://github.com/robwierzbowski/node-pixrem
+ require('pixrem')(),
+ // W3C CSS Level4 :matches() pseudo class, e.g. p:matches(:first-child, .special) { }
+ // https://github.com/postcss/postcss-selector-matches
+ require('postcss-selector-matches')(),
+ // Transforms :not() W3C CSS Level 4 pseudo class to :not() CSS Level 3 selectors
+ // https://github.com/postcss/postcss-selector-not
+ require('postcss-selector-not')(),
+ // Add vendor prefixes to CSS rules using values from caniuse.com
+ // https://github.com/postcss/autoprefixer
+ require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
+ ],
+ sass: [
+ require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
+ ],
+ };
},
};
