Brett Jankord bjankord

Component Features

Cross-Browser Support
LTR/RTL Support
Responsive Support
Mobile Support
Adherence to Design Standard
Internationalization (I18n) Support
Translation Support

Please fill out the below template as best you can.

Description of Issue

Describe the issue as best you can. We love screenshots!

###System Configuration

Component Version

Browser and Version

Example: https://www.webpackbin.com/bins/-Ki2nECMzZC9_V_UEObo

When rendering <Button /> and <Button primary/> components, there are CSS properties that are duplicated across instances. Looking at the rendered-styles.css file, you can see the duplication. Looking at the markup, it looks like there are a couple ways styles could be mapped to avoid duplicated CSS rules, however I'm not sure what implementation considerations/constraints this would involve.

With the rendered markup styled-components creates in the rendered-html example, I assume the rendered CSS most developers who frequently write CSS would expect is something like:

.sc-bdVaJa {
  font-size: 1em;

Eighties Next
mersi
pastels on dark
brackets dark
Monokai Spacegray Eighties
Predawn Monokai
Piatto Dark
Today

	"scripts": {
	"compile": "node ../../scripts/compile.js",
	"lint": "node ../../scripts/lint.js",
	"pretest": "node ../../scripts/pretest.js",
	"release:major": "npm test && npm run compile && npm version major -m \"Released version %s\" && npm publish && git push",
	"release:minor": "npm test && npm run compile && npm version minor -m \"Released version %s\" && npm publish && git push",
	"release:patch": "npm test && npm run compile && npm version patch -m \"Released version %s\" && npm publish && git push",
	"test": "node ../../scripts/test.js"
	}

	const list = ['apple', 'orange', 'bananna'];


	function isThemableIcon(value) {
	return ['orange', 'bananna'].indexOf(value) >= 0;
	}

	const themableIcons = list.filter(isThemableIcon);
	const staticIcons = list.filter(x => !isThemableIcon(x));

	var nav = document.querySelector('.nav__toggle');
	var toggleState = function (elem, one, two) {
	var elem = document.querySelector(elem);
	elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
	};

	nav.onclick = function (e) {
	toggleState('.nav ul', 'closed', 'open');
	e.preventDefault();
	};

	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
	<!-- Generated by: TmTheme-Editor -->
	<!-- ============================================ -->
	<!-- app: http://tmtheme-editor.herokuapp.com -->
	<!-- code: https://github.com/aziz/tmTheme-Editor -->
	<plist version="1.0">
	<dict>
	<key>name</key>
	<string>Monokaish</string>

	# Inspired by http://www.codeography.com/2011/08/05/project-specific-git-author.html
	git config --global alias.homeprofile '!git config user.name "Brett Jankord" && git config user.email "[email protected]" && git config github.user "bjankord"'

	.foo {
	background: #f00;
	}