Merge pull request #36 from wordpress-mobile/feature/style-sass

Style using CSS Modules

.babelrc

@@ -21,6 +21,13 @@
           ".android.js"
         ]
       }
+    ],
+    "react-native-classname-to-style",
+    [
+      "react-native-platform-specific-extensions",
+      {
+        "extensions": ["css", "scss", "sass"]
+      }
     ]
   ],
   "env": {

.flowconfig

@@ -75,6 +75,7 @@ module.file_ext=.js
 module.file_ext=.jsx
 module.file_ext=.json
 module.file_ext=.ios.js
+module.file_ext=.scss
 
 munge_underscores=true
 
@@ -83,6 +84,9 @@ module.name_mapper='@gutenberg' -> '<PROJECT_ROOT>/gutenberg'
 module.name_mapper='@wordpress/element' -> '<PROJECT_ROOT>/gutenberg/element'
 module.name_mapper='@wordpress/utils' -> '<PROJECT_ROOT>/gutenberg/utils'
 
+; mock/ignore style files
+module.name_mapper='.*\(.scss\)' -> 'empty/object'
+
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps

__mocks__/styleMock.js

@@ -0,0 +1,3 @@
+/** @format */
+
+module.exports = {};

block-management/block-holder.android.scss

@@ -0,0 +1,27 @@
+/** @format */
+
+.block_code {
+	font-family: monospace;
+}
+
+.blockHolder {
+	flex: 1;
+}
+
+.blockContainer {
+	background-color: white;
+}
+
+.blockContent {
+	padding-left: 10;
+	padding-right: 10;
+	padding-top: 10;
+	padding-bottom: 10;
+}
+
+.blockTitle {
+	background-color: grey;
+	padding-left: 10;
+	padding-top: 4;
+	padding-bottom: 4;
+}

block-management/block-holder.ios.scss

@@ -0,0 +1,27 @@
+/** @format */
+
+.block_code {
+	font-family: courier;
+}
+
+.blockHolder {
+	flex: 1 1 auto;
+}
+
+.blockContainer {
+	background-color: white;
+}
+
+.blockContent {
+	padding-left: 10;
+	padding-right: 10;
+	padding-top: 10;
+	padding-bottom: 10;
+}
+
+.blockTitle {
+	background-color: grey;
+	padding-left: 10;
+	padding-top: 4;
+	padding-bottom: 4;
+}

block-management/block-holder.js

@@ -4,11 +4,13 @@
  */
 
 import React from 'react';
-import { StyleSheet, View, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, Text, TouchableWithoutFeedback } from 'react-native';
 import Toolbar from './toolbar';
 
 import type { BlockType } from '../store/';
 
+import styles from './block-holder.scss';
+
 // Gutenberg imports
 import { getBlockType } from '@gutenberg/blocks/api';
 
@@ -36,12 +38,18 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 		if ( blockType ) {
 			const Block = blockType.edit;
 
+			let style;
+			if ( blockType.name === 'core/code' ) {
+				style = styles.block_code;
+			}
+
 			// TODO: setAttributes needs to change the state/attributes
 			return (
 				<Block
 					attributes={ { ...this.props.attributes } }
 					// pass a curried version of onChanged with just one argument
 					setAttributes={ attrs => this.props.onChange( this.props.uid, attrs ) }
+					style={ style }
 				/>
 			);
 		}
@@ -66,21 +74,3 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 		);
 	}
 }
-
-const styles = StyleSheet.create( {
-	blockHolder: {
-		flex: 1,
-	},
-	blockContainer: {
-		backgroundColor: 'white',
-	},
-	blockContent: {
-		padding: 10,
-	},
-	blockTitle: {
-		backgroundColor: 'grey',
-		paddingLeft: 10,
-		paddingTop: 4,
-		paddingBottom: 4,
-	},
-} );

block-management/block-manager.js

@@ -4,13 +4,15 @@
  */
 
 import React from 'react';
-import { Platform, Switch, StyleSheet, Text, View, FlatList } from 'react-native';
+import { Platform, Switch, Text, View, FlatList } from 'react-native';
 import RecyclerViewList, { DataSource } from 'react-native-recyclerview-list';
 import BlockHolder from './block-holder';
 import { ToolbarButton } from './constants';
 
 import type { BlockType } from '../store/';
 
+import styles from './block-manager.scss';
+
 // Gutenberg imports
 import { getBlockType, serialize } from '@gutenberg/blocks/api';
 
@@ -166,24 +168,3 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		);
 	}
 }
-
-const styles = StyleSheet.create( {
-	container: {
-		flex: 1,
-		justifyContent: 'flex-start',
-		backgroundColor: '#caa',
-	},
-	list: {
-		flex: 1,
-		backgroundColor: '#ccc',
-	},
-	htmlView: {
-		flex: 1,
-		backgroundColor: '#fff',
-	},
-	switch: {
-		flexDirection: 'row',
-		justifyContent: 'flex-start',
-		alignItems: 'center',
-	},
-} );

block-management/block-manager.scss

@@ -0,0 +1,22 @@
+/** @format */
+
+.container {
+	flex: 1;
+	justify-content: flex-start;
+	background-color: #caa;
+}
+
+.list {
+	flex: 1;
+	background-color: #ccc;
+}
+
+.htmlView {
+	flex: 1;
+	background-color: #fff;
+}
+
+.switch {
+	flex-direction: row;
+	justify-content: flex-start;
+}

block-management/toolbar.js

@@ -2,9 +2,11 @@
  * @format */
 
 import React from 'react';
-import { StyleSheet, View, Button } from 'react-native';
+import { View, Button } from 'react-native';
 import { ToolbarButton } from './constants';
 
+import styles from './toolbar.scss';
+
 type PropsType = {
 	uid: string,
 	onButtonPressed: ( button: number, uid: string ) => void,
@@ -42,17 +44,3 @@ export default class Toolbar extends React.Component<PropsType> {
 		);
 	}
 }
-
-const styles = StyleSheet.create( {
-	toolbar: {
-		height: 34,
-		backgroundColor: 'white',
-		flexDirection: 'row',
-		justifyContent: 'space-between',
-		paddingLeft: 20,
-		paddingRight: 20,
-	},
-	toolbarButton: {
-		padding: 4,
-	},
-} );

block-management/toolbar.scss

@@ -0,0 +1,17 @@
+/** @format */
+
+.toolbar {
+	height: 34;
+	background-color: white;
+	flex-direction: row;
+	justify-content: space-between;
+	padding-left: 20;
+	padding-right: 20;
+}
+
+.toolbarButton {
+	padding-top: 4;
+	padding-right: 4;
+	padding-bottom: 4;
+	padding-left: 4;
+}

jest.config.js

@@ -33,6 +33,9 @@ module.exports = {
 		'@wordpress/i18n': '<rootDir>/gutenberg/i18n',
 		'@wordpress/utils': '<rootDir>/gutenberg/utils',
 		'@gutenberg': '<rootDir>/gutenberg',
+
+		// Mock the CSS modules. See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets
+		'\\.(scss)$': '<rootDir>/__mocks__/styleMock.js',
 	},
 	haste: {
 		defaultPlatform: rnPlatform,

package.json

@@ -3,15 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "config": {
-    "jsfiles": "index.js app/*.js app/**/*.js block-management/*.js block-management/**/*.js store/*.js store/**/*.js"
+    "jsfiles": "index.js app/*.js app/**/*.js block-management/*.js block-management/**/*.js store/*.js store/**/*.js",
+    "scssfiles": "app/*.scss app/**/*.scss block-management/*.scss block-management/**/*.scss store/*.scss store/**/*.scss"
   },
   "devDependencies": {
     "@wordpress/babel-preset-default": "^1.1.2",
     "babel-eslint": "^8.2.2",
+    "babel-plugin-react-native-classname-to-style": "^1.2.1",
+    "babel-plugin-react-native-platform-specific-extensions": "^1.0.1",
     "babel-plugin-react-require": "^3.0.0",
     "babel-plugin-transform-async-generator-functions": "^6.24.1",
     "babel-preset-react-native-stage-0": "^1.0.1",
     "cross-env": "^5.1.4",
+    "empty": "^0.10.1",
     "eslint": "^4.19.1",
     "eslint-config-wordpress": "^2.0.0",
     "eslint-plugin-flowtype": "^2.46.1",
@@ -21,10 +25,12 @@
     "eslint-plugin-react-native": "^3.2.1",
     "eslint-plugin-wordpress": "git+https://github.com/WordPress-Coding-Standards/eslint-plugin-wordpress.git#1774343f6226052a46b081e01db3fca8793cc9f1",
     "flow-bin": "0.56.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^22.4.3",
     "jest-react-native": "^18.0.0",
     "prettier": "git+https://github.com/Automattic/calypso-prettier.git#calypso-1.9",
     "react-dom": "^16.2.0",
+    "react-native-sass-transformer": "^1.1.1",
     "react-test-renderer": "16.2.0",
     "remote-redux-devtools": "^0.5.12"
   },
@@ -35,8 +41,8 @@
     "test": "cross-env NODE_ENV=test node node_modules/jest/bin/jest.js --verbose --config jest.config.js",
     "test:debug": "cross-env NODE_ENV=test node --inspect-brk node_modules/jest/bin/jest.js --runInBand --verbose --config jest.config.js",
     "flow": "flow",
-    "prettier": "prettier --write $npm_package_config_jsfiles",
-    "prettier:check": "prettier -l $npm_package_config_jsfiles",
+    "prettier": "prettier --write $npm_package_config_jsfiles $npm_package_config_scssfiles",
+    "prettier:check": "prettier -l $npm_package_config_jsfiles $npm_package_config_scssfiles",
     "clean": "yarn test --clearCache; watchman watch-del-all; rm -rf node_modules; rm -f yarn.lock; rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/metro-cache-*; rm -rf $TMPDIR/jest_*",
     "clean:install": "yarn clean; yarn",
     "lint": "eslint $npm_package_config_jsfiles",
@@ -49,6 +55,7 @@
     "js-beautify": "^1.7.5",
     "jsx-to-string": "^1.3.1",
     "memize": "^1.0.5",
+    "node-sass": "^4.8.3",
     "react": "16.2.0",
     "react-native": "0.52.0",
     "react-native-recyclerview-list": "git+https://github.com/wordpress-mobile/react-native-recyclerview-list.git#bfccbaab6b5954e18f8b0ed441ba38275853b79c",

rn-cli.config.js

@@ -0,0 +1,10 @@
+/** @format */
+
+module.exports = {
+	getTransformModulePath() {
+		return require.resolve( 'react-native-sass-transformer' );
+	},
+	getSourceExts() {
+		return [ 'scss', 'sass' ];
+	},
+};