Generated CSS file using steps from README

atom-dark-syntax.css

atom-text-editor {
  background-color: #1d1f21;
  color: #c5c8c6;
}
atom-text-editor .invisible-character {
  color: rgba(197, 200, 198, 0.2);
}
atom-text-editor .indent-guide {
  color: rgba(197, 200, 198, 0.2);
}
atom-text-editor .wrap-guide {
  background-color: rgba(197, 200, 198, 0.1);
}
atom-text-editor .gutter {
  background-color: #292c2f;
}
atom-text-editor .gutter .cursor-line {
  background-color: rgba(255, 255, 255, 0.14);
}
atom-text-editor .line-number.cursor-line-no-selection {
  background-color: rgba(255, 255, 255, 0.14);
}
atom-text-editor .gutter .line-number.folded,
atom-text-editor .gutter .line-number:after,
atom-text-editor .fold-marker:after {
  color: #fba0e3;
}
atom-text-editor .invisible {
  color: #c5c8c6;
}
atom-text-editor .cursor {
  border-color: white;
}
atom-text-editor .selection .region {
  background-color: #444;
}
atom-text-editor .bracket-matcher .region {
  border-bottom: 1px solid #f8de7e;
  margin-top: -1px;
  opacity: .7;
}
atom-text-editor .syntax--source.syntax--gfm {
  color: #999;
}
atom-text-editor .syntax--gfm .syntax--markup.syntax--heading {
  color: #eee;
}
atom-text-editor .syntax--gfm .syntax--link {
  color: #555;
}
atom-text-editor .syntax--gfm .syntax--variable.syntax--list,
atom-text-editor .syntax--gfm .syntax--support.syntax--quote {
  color: #555;
}
atom-text-editor .syntax--gfm .syntax--link .syntax--entity {
  color: #ddd;
}
atom-text-editor .syntax--gfm .syntax--raw {
  color: #aaa;
}
atom-text-editor .syntax--markdown .syntax--paragraph {
  color: #999;
}
atom-text-editor .syntax--markdown .syntax--heading {
  color: #eee;
}
atom-text-editor .syntax--markdown .syntax--raw {
  color: #aaa;
}
atom-text-editor .syntax--markdown .syntax--link {
  color: #555;
}
atom-text-editor .syntax--markdown .syntax--link .syntax--string {
  color: #555;
}
atom-text-editor .syntax--markdown .syntax--link .syntax--string.syntax--title {
  color: #ddd;
}
.syntax--comment {
  color: #7C7C7C;
}
.syntax--entity {
  color: #FFD2A7;
}
.syntax--entity.syntax--name.syntax--type {
  text-decoration: underline;
  color: #FFFFB6;
}
.syntax--entity.syntax--other.syntax--inherited-class {
  color: #9B5C2E;
}
.syntax--keyword {
  color: #96CBFE;
}
.syntax--keyword.syntax--control {
  color: #96CBFE;
}
.syntax--keyword.syntax--operator {
  color: #EDEDED;
}
.syntax--storage {
  color: #CFCB90;
}
.syntax--storage.syntax--modifier {
  color: #96CBFE;
}
.syntax--constant {
  color: #99CC99;
}
.syntax--constant.syntax--numeric {
  color: #FF73FD;
}
.syntax--variable {
  color: #C6C5FE;
}
.syntax--invalid.syntax--deprecated {
  text-decoration: underline;
  color: #FD5FF1;
}
.syntax--invalid.syntax--illegal {
  color: #FD5FF1;
  background-color: rgba(86, 45, 86, 0.75);
}
.syntax--string .syntax--source,
.syntax--string .syntax--meta.syntax--embedded.syntax--line {
  color: #EDEDED;
}
.syntax--string .syntax--punctuation.syntax--section.syntax--embedded {
  color: #00A0A0;
}
.syntax--string .syntax--punctuation.syntax--section.syntax--embedded .syntax--source {
  color: #00A0A0;
}
.syntax--string {
  color: #A8FF60;
}
.syntax--string .syntax--constant {
  color: #00A0A0;
}
.syntax--string.syntax--regexp {
  color: #E9C062;
}
.syntax--string.syntax--regexp .syntax--constant.syntax--character.syntax--escape,
.syntax--string.syntax--regexp .syntax--source.syntax--ruby.syntax--embedded,
.syntax--string.syntax--regexp .syntax--string.syntax--regexp.syntax--arbitrary-repetition {
  color: #FF8000;
}
.syntax--string.syntax--regexp.syntax--group {
  color: #C6A24F;
  background-color: rgba(255, 255, 255, 0.06);
}
.syntax--string.syntax--regexp.syntax--character-class {
  color: #B18A3D;
}
.syntax--string .syntax--variable {
  color: #8A9A95;
}
.syntax--support {
  color: #FFFFB6;
}
.syntax--support.syntax--function {
  color: #DAD085;
}
.syntax--support.syntax--constant {
  color: #FFD2A7;
}
.syntax--support.syntax--type.syntax--property-name.syntax--css {
  color: #EDEDED;
}
.syntax--source .syntax--entity.syntax--name.syntax--tag,
.syntax--source .syntax--punctuation.syntax--tag {
  color: #96CBFE;
}
.syntax--source .syntax--entity.syntax--other.syntax--attribute-name {
  color: #C6C5FE;
}
.syntax--entity.syntax--other.syntax--attribute-name {
  color: #C6C5FE;
}
.syntax--entity.syntax--name.syntax--tag.syntax--namespace,
.syntax--entity.syntax--other.syntax--attribute-name.syntax--namespace {
  color: #E18964;
}
.syntax--meta.syntax--preprocessor.syntax--c {
  color: #8996A8;
}
.syntax--meta.syntax--preprocessor.syntax--c .syntax--keyword {
  color: #AFC4DB;
}
.syntax--meta.syntax--cast {
  color: #676767;
}
.syntax--meta.syntax--sgml.syntax--html .syntax--meta.syntax--doctype,
.syntax--meta.syntax--sgml.syntax--html .syntax--meta.syntax--doctype .syntax--entity,
.syntax--meta.syntax--sgml.syntax--html .syntax--meta.syntax--doctype .syntax--string,
.syntax--meta.syntax--xml-processing,
.syntax--meta.syntax--xml-processing .syntax--entity,
.syntax--meta.syntax--xml-processing .syntax--string {
  color: #494949;
}
.syntax--meta.syntax--tag .syntax--entity,
.syntax--meta.syntax--tag > .syntax--punctuation,
.syntax--meta.syntax--tag.syntax--inline .syntax--entity {
  color: #C6C5FE;
}
.syntax--meta.syntax--tag .syntax--name,
.syntax--meta.syntax--tag.syntax--inline .syntax--name,
.syntax--meta.syntax--tag > .syntax--punctuation {
  color: #96CBFE;
}
.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--name.syntax--tag {
  text-decoration: underline;
  color: #96CBFE;
}
.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--other.syntax--attribute-name.syntax--tag.syntax--pseudo-class {
  color: #8F9D6A;
}
.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--other.syntax--attribute-name.syntax--id {
  color: #8B98AB;
}
.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--other.syntax--attribute-name.syntax--class {
  color: #62B1FE;
}
.syntax--meta.syntax--property-group .syntax--support.syntax--constant.syntax--property-value.syntax--css,
.syntax--meta.syntax--property-value .syntax--support.syntax--constant.syntax--property-value.syntax--css {
  color: #F9EE98;
}
.syntax--meta.syntax--preprocessor.syntax--at-rule .syntax--keyword.syntax--control.syntax--at-rule {
  color: #8693A5;
}
.syntax--meta.syntax--property-value .syntax--support.syntax--constant.syntax--named-color.syntax--css,
.syntax--meta.syntax--property-value .syntax--constant {
  color: #87C38A;
}
.syntax--meta.syntax--constructor.syntax--argument.syntax--css {
  color: #8F9D6A;
}
.syntax--meta.syntax--diff,
.syntax--meta.syntax--diff.syntax--header {
  color: #F8F8F8;
  background-color: #0E2231;
}
.syntax--meta.syntax--separator {
  color: #60A633;
  background-color: #242424;
}
.syntax--meta.syntax--line.syntax--entry.syntax--logfile,
.syntax--meta.syntax--line.syntax--exit.syntax--logfile {
  background-color: rgba(238, 238, 238, 0.16);
}
.syntax--meta.syntax--line.syntax--error.syntax--logfile {
  background-color: #751012;
}

expected-atom-dark.css

.editor-colors {
  background-color: #1d1f21;
  color: #c5c8c6;
}
.editor .invisible-character {
  color: rgba(197, 200, 198, 0.2);
}
.editor .indent-guide {
  color: rgba(197, 200, 198, 0.2);
}
.editor .wrap-guide {
  background-color: rgba(197, 200, 198, 0.1);
}
.editor .gutter {
  background-color: #292c2f;
}
.editor .gutter .cursor-line {
  background-color: rgba(255, 255, 255, 0.14);
}
.editor .line-number.cursor-line-no-selection {
  background-color: rgba(255, 255, 255, 0.14);
}
.editor .gutter .line-number.folded,
.editor .gutter .line-number:after,
.editor .fold-marker:after {
  color: #fba0e3;
}
.editor .invisible {
  color: #c5c8c6;
}
.editor .cursor {
  border-color: #ffffff;
}
.editor .selection .region {
  background-color: #444444;
}
.editor .source.gfm {
  color: #999;
}
.editor .gfm .markup.heading {
  color: #eee;
}
.editor .gfm .link {
  color: #555;
}
.editor .gfm .variable.list,
.editor .gfm .support.quote {
  color: #555;
}
.editor .gfm .link .entity {
  color: #ddd;
}
.editor .gfm .raw {
  color: #aaa;
}
.editor .markdown .paragraph {
  color: #999;
}
.editor .markdown .heading {
  color: #eee;
}
.editor .markdown .raw {
  color: #aaa;
}
.editor .markdown .link {
  color: #555;
}
.editor .markdown .link .string {
  color: #555;
}
.editor .markdown .link .string.title {
  color: #ddd;
}
.editor .search-results .marker .region {
  background-color: transparent;
  border: 1px solid #888888;
}
.editor .search-results .marker.current-result .region {
  border: 1px solid #ffffff;
}
.bracket-matcher {
  border-bottom: 1px solid #f8de7e;
  margin-top: -1px;
  opacity: .7;
}
.comment {
  color: #7C7C7C;
}
.entity {
  color: #FFD2A7;
}
.entity.name.type {
  text-decoration: underline;
  color: #FFFFB6;
}
.entity.other.inherited-class {
  color: #9B5C2E;
}
.keyword {
  color: #96CBFE;
}
.keyword.control {
  color: #96CBFE;
}
.keyword.operator {
  color: #EDEDED;
}
.storage {
  color: #CFCB90;
}
.storage.modifier {
  color: #96CBFE;
}
.constant {
  color: #99CC99;
}
.constant.numeric {
  color: #FF73FD;
}
.variable {
  color: #C6C5FE;
}
.invalid.deprecated {
  text-decoration: underline;
  color: #FD5FF1;
}
.invalid.illegal {
  color: #FD5FF1;
  background-color: rgba(86, 45, 86, 0.75);
}
.source .string .source,
.source .string .meta.embedded.line {
  color: #EDEDED;
}
.source .string .punctuation.section.embedded {
  color: #00A0A0;
}
.source .string .punctuation.section.embedded .source {
  color: #00A0A0;
}
.string {
  color: #A8FF60;
}
.string .constant {
  color: #00A0A0;
}
.string.regexp {
  color: #E9C062;
}
.string.regexp .constant.character.escape,
.string.regexp .source.ruby.embedded,
.string.regexp .string.regexp.arbitrary-repitition {
  color: #FF8000;
}
.string.regexp.group {
  color: #C6A24F;
  background-color: rgba(255, 255, 255, 0.06);
}
.string.regexp.character-class {
  color: #B18A3D;
}
.string .variable {
  color: #8A9A95;
}
.support {
  color: #FFFFB6;
}
.support.function {
  color: #DAD085;
}
.support.constant {
  color: #FFD2A7;
}
.support.type.property-name.css {
  color: #EDEDED;
}
.source .entity.name.tag,
.source .entity.other.attribute-name,
.meta.tag.inline,
.meta.tag.inline .entity {
  color: #96CBFE;
}
.entity.other.attribute-name {
  color: #FFD7B1;
}
.entity.name.tag.namespace,
.entity.other.attribute-name.namespace {
  color: #E18964;
}
.meta.preprocessor.c {
  color: #8996A8;
}
.meta.preprocessor.c .keyword {
  color: #AFC4DB;
}
.meta.cast {
  color: #676767;
}
.meta.sgml.html .meta.doctype,
.meta.sgml.html .meta.doctype .entity,
.meta.sgml.html .meta.doctype .string,
.meta.xml-processing,
.meta.xml-processing .entity,
.meta.xml-processing .string {
  color: #494949;
}
.meta.tag,
.meta.tag .entity {
  color: #96CBFE;
}
.meta.selector.css .entity.name.tag {
  text-decoration: underline;
  color: #96CBFE;
}
.meta.selector.css .entity.other.attribute-name.tag.pseudo-class {
  color: #8F9D6A;
}
.meta.selector.css .entity.other.attribute-name.id {
  color: #8B98AB;
}
.meta.selector.css .entity.other.attribute-name.class {
  color: #62B1FE;
}
.meta.property-group .support.constant.property-value.css,
.meta.property-value .support.constant.property-value.css {
  color: #F9EE98;
}
.meta.preprocessor.at-rule .keyword.control.at-rule {
  color: #8693A5;
}
.meta.property-value .support.constant.named-color.css,
.meta.property-value .constant {
  color: #87C38A;
}
.meta.constructor.argument.css {
  color: #8F9D6A;
}
.meta.diff,
.meta.diff.header {
  color: #F8F8F8;
  background-color: #0E2231;
}
.meta.separator {
  color: #60A633;
  background-color: #242424;
}
.meta.line.entry.logfile,
.meta.line.exit.logfile {
  background-color: rgba(238, 238, 238, 0.16);
}
.meta.line.error.logfile {
  background-color: #751012;
}

to-be-styled.html

<!-- was run through http://codebeautify.org/htmlviewer/ to make it prettier; not sure if mangled -->
<pre class="editor editor-colors">
	<div class="line">
		<span class="source js">
			<span class="storage modifier js">
				<span>const</span>
			</span>
			<span>&nbsp;</span>
			<span class="constant other js">
				<span>StatelessComponent</span>
			</span>
			<span>&nbsp;</span>
			<span class="keyword operator assignment js">
				<span>=</span>
			</span>
			<span>&nbsp;</span>
			<span class="meta function arrow js">
				<span class="meta parameters js">
					<span class="punctuation definition parameters begin bracket round js">
						<span>(</span>
					</span>
					<span class="variable parameter function js">
						<span>props</span>
					</span>
					<span class="punctuation definition parameters end bracket round js">
						<span>)</span>
					</span>
				</span>
				<span>&nbsp;</span>
				<span class="storage type function arrow js">
					<span>=&gt;</span>
				</span>
			</span>
			<span>&nbsp;</span>
			<span class="punctuation definition function body begin bracket curly js">
				<span>{</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span>&nbsp;&nbsp;</span>
			<span class="keyword control js">
				<span>return</span>
			</span>
			<span>&nbsp;</span>
			<span class="meta brace round js">
				<span>(</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
			<span class="keyword operator comparison js">
				<span>&lt;</span>
			</span>
			<span>div</span>
			<span class="keyword operator comparison js">
				<span>&gt;</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I</span>
			<span class="string quoted single js">
				<span class="punctuation definition string begin js">
					<span>'</span>
				</span>
				<span class="invalid illegal string js">
					<span>am&nbsp;a&nbsp;stateless&nbsp;component&nbsp;that&nbsp;accept&nbsp;children</span>
				</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span class="string quoted single js">
				<span class="invalid illegal string js">
					<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;props.children&nbsp;}</span>
				</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span class="string quoted single js">
				<span class="invalid illegal string js">
					<span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;</span>
				</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span class="string quoted single js">
				<span class="invalid illegal string js">
					<span>&nbsp;&nbsp;)</span>
				</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span class="string quoted single js">
				<span class="invalid illegal string js">
					<span>}</span>
				</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span class="string quoted single js">
				<span>&nbsp;</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span class="string quoted single js">
				<span class="invalid illegal string js">
					<span>//&nbsp;...</span>
				</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span class="string quoted single js">
				<span>&nbsp;</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span class="string quoted single js">
				<span class="invalid illegal string js">
					<span>&nbsp;&nbsp;return&nbsp;(</span>
				</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span class="string quoted single js">
				<span class="invalid illegal string js">
					<span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;StatelessComponent&gt;</span>
				</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span class="string quoted single js">
				<span class="invalid illegal string js">
					<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Example&nbsp;of&nbsp;child</span>
				</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span class="string quoted single js">
				<span class="invalid illegal string js">
					<span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/StatelessComponent&gt;</span>
				</span>
			</span>
		</span>
	</div>
	<div class="line">
		<span class="source js">
			<span class="string quoted single js">
				<span class="invalid illegal string js">
					<span>&nbsp;&nbsp;)</span>
				</span>
			</span>
		</span>
	</div>
</pre>