View react-native-shim.js
/**
* This module is aliased to 'react-native' in our webpack config.
* RNW currently uses inline styles. Our existing CSS – written using `css-modules`
* and processed by `post-css` – needs to override RNW's default component styles
* when RNW is being used to render the app. A postcss transform was added to our
* webpack config to append `!important` to (almost) every CSS declaration.
*/
import findNodeHandle from 'react-native-web/dist/modules/findNodeHandle';
View button.js
import styles from './styles.css';
import testIDs from './testIDs';
export render = (text) => (
<button className={styles.button} data-test-id={testsIDs.button}>
<span className={styles.icon}></span>
{text}
</button>
);
View CustomView.jsx
import ReactWebStyle, {WebComponent} from 'react-web-style';
import React, {PropTypes} from 'react';
import {Text, View} from 'react-web-sdk';
const styles = {
root: {
borderColor: 'red',
padding: '10px',
position: 'absolute',
View Button.jsx
import React from 'react';
import styles from './styles.css.js';
class Button extends React.Component{
render() {
return (
<button className={styles.button}>
<span className={styles.icon} />
Button
</button>
View production.css
.abcd {
align-items: center;
}
.efgh {
background: blue;
}
.ijkl {
color: red;
View Component.js
'use strict';
/**
* Base component driver
*
* Related docs:
* https://theintern.github.io/leadfoot/Command.html
* https://theintern.github.io/leadfoot/Element.html
*
* @param {leadfoot/Command} remote
View intern.config.js
/**
* Functional and Unit test configuration
*
* This configuration file has to work in both Node.js and browser environments.
* Therefore, this config is a template that is used to build the Intern config
* used to run the tests. The packages and suites are automatically defined.
*
* Learn more about configuring Intern at:
* https://github.com/theintern/intern/wiki/Configuring-Intern
*/
View webpack-pre-css-loader.js
var path = require('path');
/**
* CSS transform dependencies
*/
var autoprefixer = require('autoprefixer-core');
var calc = require('rework-calc');
var color = require('rework-color-function');
var conformance = require('rework-suit-conformance');
View output-after-css-change.md

about/index.css was changed. color: black -> color: blue.

Issues with output:

  • Same hash
  • Same chunkhash (messes with cache invalidation of CSS)
  • Another different publicPath coming from file-loader in the extracted CSS.

Webpack

View flight-groups.js
var TweetBox = defineComponent(function() {
this.attributes({
charLimit: 140
withGeoControl: false;
});
if (withGeoControl === true) {
// attach to a sub node
this.child(GeoControl).attachTo('.GeoControl');
}