feat: custom variant support

Author: andreypopp

src/CSSPseudoClassList.js

@@ -0,0 +1,33 @@
+/**
+ * @copyright 2016-present, React CSS Components team
+ * @flow
+ */
+
+let CSSPseudoClassList: {[name: string]: boolean} = {
+  focus: true,
+  hover: true,
+  active: true,
+  checked: true,
+  default: true,
+  disabled: true,
+  empty: true,
+  enabled: true,
+  firstChild: true,
+  fullscreen: true,
+  indeterminate: true,
+  invalid: true,
+  lastChild: true,
+  left: true,
+  link: true,
+  onlyChild: true,
+  optional: true,
+  required: true,
+  right: true,
+  root: true,
+  scope: true,
+  target: true,
+  valid: true,
+  visited: true,
+};
+
+export default CSSPseudoClassList;

src/HTMLTagList.js

@@ -3,7 +3,7 @@
  * @flow
  */
 
-let HTMLTagList: {[name: string]: ?boolean} = {
+let HTMLTagList: {[name: string]: boolean} = {
   'a': true,
   'abbr': true,
   'acronym': true,

src/__tests__/fixtures/complex-selector.css

@@ -1,3 +1,3 @@
-.Label > .Hint,.Paragraph,.X:hover {
+.Label > .Hint,.Paragraph,.X:hover,.X__hover {
     color: red
 }

src/__tests__/fixtures/complex-selector.js

@@ -1,18 +1,30 @@
 import React from "react";
 import styles from "css";
-export function Label(props) {
-  return React.createElement("div", { ...props, className: styles.Label
+export function Label({
+  variant,
+  ...props }) {
+  let className = styles.Label;
+  return React.createElement("div", { ...props, className
   });
 }
-export function Hint(props) {
-  return React.createElement("div", { ...props, className: styles.Hint
+export function Hint({
+  variant,
+  ...props }) {
+  let className = styles.Hint;
+  return React.createElement("div", { ...props, className
   });
 }
-export function Paragraph(props) {
-  return React.createElement("div", { ...props, className: styles.Paragraph
+export function Paragraph({
+  variant,
+  ...props }) {
+  let className = styles.Paragraph;
+  return React.createElement("div", { ...props, className
   });
 }
-export function X(props) {
-  return React.createElement("div", { ...props, className: styles.X
+export function X({
+  variant,
+  ...props }) {
+  let className = styles.X + (variant.hover ? ' ' + styles.X__hover : '');
+  return React.createElement("div", { ...props, className
   });
 }

src/__tests__/fixtures/custom-base.js

@@ -1,6 +1,9 @@
 import React from "react";
 import styles from "css";
-export function Label(props) {
-  return React.createElement("span", { ...props, className: styles.Label
+export function Label({
+  variant,
+  ...props }) {
+  let className = styles.Label;
+  return React.createElement("span", { ...props, className
   });
 }

src/__tests__/fixtures/custom-variant-complex.css

@@ -0,0 +1,6 @@
+.Label__important > span {
+    color: red
+}
+.Label,.Label__shadow {
+    color: white
+}

src/__tests__/fixtures/custom-variant-complex.js

@@ -0,0 +1,9 @@
+import React from "react";
+import styles from "css";
+export function Label({
+  variant,
+  ...props }) {
+  let className = styles.Label + (variant.important ? ' ' + styles.Label__important : '') + (variant.shadow ? ' ' + styles.Label__shadow : '');
+  return React.createElement("div", { ...props, className
+  });
+}

src/__tests__/fixtures/custom-variant-complex.react.css

@@ -0,0 +1,6 @@
+Label:important > span {
+  color: red;
+}
+Label, Label:shadow {
+  color: white;
+}

src/__tests__/fixtures/custom-variant.css

@@ -0,0 +1,3 @@
+.Label__important {
+    color: red
+}

src/__tests__/fixtures/custom-variant.js

@@ -0,0 +1,9 @@
+import React from "react";
+import styles from "css";
+export function Label({
+  variant,
+  ...props }) {
+  let className = styles.Label + (variant.important ? ' ' + styles.Label__important : '');
+  return React.createElement("div", { ...props, className
+  });
+}

src/__tests__/fixtures/custom-variant.react.css

@@ -0,0 +1,3 @@
+Label:important {
+  color: red;
+}

src/__tests__/fixtures/imported-base-named.js

@@ -1,7 +1,10 @@
 import React from "react";
 import styles from "css";
 import { Label as Label__Base } from "lib";
-export function Label(props) {
-  return React.createElement(Label__Base, { ...props, className: styles.Label
+export function Label({
+  variant,
+  ...props }) {
+  let className = styles.Label;
+  return React.createElement(Label__Base, { ...props, className
   });
 }

src/__tests__/fixtures/imported-base.js

@@ -1,7 +1,10 @@
 import React from "react";
 import styles from "css";
 import { default as Label__Base } from "somelib/Label";
-export function Label(props) {
-  return React.createElement(Label__Base, { ...props, className: styles.Label
+export function Label({
+  variant,
+  ...props }) {
+  let className = styles.Label;
+  return React.createElement(Label__Base, { ...props, className
   });
 }

src/__tests__/fixtures/only-pseudo.css

@@ -1,3 +1,3 @@
-.Label:hover {
+.Label:hover,.Label__hover {
     color: red
 }

src/__tests__/fixtures/only-pseudo.js

@@ -1,6 +1,9 @@
 import React from "react";
 import styles from "css";
-export function Label(props) {
-  return React.createElement("div", { ...props, className: styles.Label
+export function Label({
+  variant,
+  ...props }) {
+  let className = styles.Label + (variant.hover ? ' ' + styles.Label__hover : '');
+  return React.createElement("div", { ...props, className
   });
 }

src/__tests__/fixtures/separate-pseduo.css

@@ -1,6 +1,6 @@
 .Label {
     color: red
 }
-.Label:hover {
+.Label:hover,.Label__hover {
     color: red
 }

src/__tests__/fixtures/separate-pseduo.js

@@ -1,6 +1,9 @@
 import React from "react";
 import styles from "css";
-export function Label(props) {
-  return React.createElement("div", { ...props, className: styles.Label
+export function Label({
+  variant,
+  ...props }) {
+  let className = styles.Label + (variant.hover ? ' ' + styles.Label__hover : '');
+  return React.createElement("div", { ...props, className
   });
 }

src/__tests__/fixtures/simple.js

@@ -1,6 +1,9 @@
 import React from "react";
 import styles from "css";
-export function Label(props) {
-  return React.createElement("div", { ...props, className: styles.Label
+export function Label({
+  variant,
+  ...props }) {
+  let className = styles.Label;
+  return React.createElement("div", { ...props, className
   });
 }

src/__tests__/fixtures/within-media.js

@@ -1,6 +1,9 @@
 import React from "react";
 import styles from "css";
-export function Label(props) {
-  return React.createElement("div", { ...props, className: styles.Label
+export function Label({
+  variant,
+  ...props }) {
+  let className = styles.Label;
+  return React.createElement("div", { ...props, className
   });
 }