Style using CSS Modules

.babelrc

@@ -21,6 +21,13 @@
           ".android.js"
         ]
       }
+    ],
+    "react-native-classname-to-style",
+    [
+      "react-native-platform-specific-extensions",
+      {
+        "extensions": ["native.scss", "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
 

__mocks__/styleMock.js

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

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-holder.scss

@@ -0,0 +1,25 @@
+.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-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,20 @@
+.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;
+}

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

@@ -8,6 +8,8 @@
   "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",
@@ -21,10 +23,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"
   },
@@ -49,6 +53,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' ];
+	},
+};