transformer.js

/** @format */

// For React Native version 0.52 or later
var upstreamTransformer = require( 'metro/src/transformer' );

// For React Native version 0.47-0.51
// var upstreamTransformer = require("metro-bundler/src/transformer");

// For React Native version 0.46
// var upstreamTransformer = require("metro-bundler/build/transformer");

var sassTransformer = require( 'react-native-sass-transformer' );

var fs = require( 'fs' );

var rootDir = __dirname;

var editPostStylesDir = rootDir + '/' + 'gutenberg/edit-post/assets/stylesheets/';

var assetNames = [
	'_colors',
	'_admin-schemes',
	'_breakpoints',
	'_font-variables.native',
	'_variables',
	'_mixins',
	'_animations',
	'_z-index',
];

// try to load any platform specific file
assetNames = assetNames.map( name => {
	return (
		name +
		[ '.native.scss', '.android.scss', '.ios.scss', '.scss' ].filter( ext =>
			fs.existsSync( editPostStylesDir + name + ext )
		)[ 0 ]
	);
} );

var imports =
	'@import "' +
	editPostStylesDir +
	assetNames.join( '";\n@import "' + editPostStylesDir ) +
	'";\n\n';

module.exports.transform = function( { src, filename, options } ) {
	if ( filename.endsWith( '.scss' ) || filename.endsWith( '.sass' ) ) {
		// "auto-import" the stylesheets the GB webpack config imports
		src = imports + src;
		return sassTransformer.transform( { src, filename, options } );
	}
	return upstreamTransformer.transform( { src, filename, options } );
};