From f5248c48da6af323a133d9eb627077645fc71f62 Mon Sep 17 00:00:00 2001 From: Kacper Kozak Date: Sat, 6 Aug 2016 16:30:20 +0200 Subject: [PATCH 1/2] fix: variants and pseudo with a dash in name --- .../fixtures/custom-variant-with-dash.css | 3 +++ .../fixtures/custom-variant-with-dash.js | 26 +++++++++++++++++++ .../custom-variant-with-dash.react.css | 3 +++ src/__tests__/fixtures/pseudo.css | 3 +++ src/__tests__/fixtures/pseudo.js | 26 +++++++++++++++++++ src/__tests__/fixtures/pseudo.react.css | 3 +++ src/index.js | 9 +++++-- 7 files changed, 71 insertions(+), 2 deletions(-) create mode 100644 src/__tests__/fixtures/custom-variant-with-dash.css create mode 100644 src/__tests__/fixtures/custom-variant-with-dash.js create mode 100644 src/__tests__/fixtures/custom-variant-with-dash.react.css create mode 100644 src/__tests__/fixtures/pseudo.css create mode 100644 src/__tests__/fixtures/pseudo.js create mode 100644 src/__tests__/fixtures/pseudo.react.css diff --git a/src/__tests__/fixtures/custom-variant-with-dash.css b/src/__tests__/fixtures/custom-variant-with-dash.css new file mode 100644 index 0000000..dc5de38 --- /dev/null +++ b/src/__tests__/fixtures/custom-variant-with-dash.css @@ -0,0 +1,3 @@ +.Label__veryLargeText { + font-size: 3em +} diff --git a/src/__tests__/fixtures/custom-variant-with-dash.js b/src/__tests__/fixtures/custom-variant-with-dash.js new file mode 100644 index 0000000..f48d4e1 --- /dev/null +++ b/src/__tests__/fixtures/custom-variant-with-dash.js @@ -0,0 +1,26 @@ +var React = require("react"); + +var styles = require("css"); + +function reconcileProps(props, className) { + var nextProps = {}; + + for (var k in props) { + if (k === 'variant') { + continue; + } + + if (props.hasOwnProperty(k)) { + nextProps[k] = props[k]; + } + } + + nextProps.className = className; + return nextProps; +} + +module.exports.Label = function Label(props) { + var variant = props.variant || {}; + var className = styles.Label + (variant.veryLargeText ? ' ' + styles.Label__veryLargeText : ''); + return React.createElement("div", reconcileProps(props, className)); +}; diff --git a/src/__tests__/fixtures/custom-variant-with-dash.react.css b/src/__tests__/fixtures/custom-variant-with-dash.react.css new file mode 100644 index 0000000..c7f183f --- /dev/null +++ b/src/__tests__/fixtures/custom-variant-with-dash.react.css @@ -0,0 +1,3 @@ +Label:very-large-text { + font-size: 3em; +} diff --git a/src/__tests__/fixtures/pseudo.css b/src/__tests__/fixtures/pseudo.css new file mode 100644 index 0000000..01e1fa0 --- /dev/null +++ b/src/__tests__/fixtures/pseudo.css @@ -0,0 +1,3 @@ +.Label:first-child,.Label__firstChild { + color: red +} diff --git a/src/__tests__/fixtures/pseudo.js b/src/__tests__/fixtures/pseudo.js new file mode 100644 index 0000000..f0938d0 --- /dev/null +++ b/src/__tests__/fixtures/pseudo.js @@ -0,0 +1,26 @@ +var React = require("react"); + +var styles = require("css"); + +function reconcileProps(props, className) { + var nextProps = {}; + + for (var k in props) { + if (k === 'variant') { + continue; + } + + if (props.hasOwnProperty(k)) { + nextProps[k] = props[k]; + } + } + + nextProps.className = className; + return nextProps; +} + +module.exports.Label = function Label(props) { + var variant = props.variant || {}; + var className = styles.Label + (variant.firstChild ? ' ' + styles.Label__firstChild : ''); + return React.createElement("div", reconcileProps(props, className)); +}; diff --git a/src/__tests__/fixtures/pseudo.react.css b/src/__tests__/fixtures/pseudo.react.css new file mode 100644 index 0000000..fa106f7 --- /dev/null +++ b/src/__tests__/fixtures/pseudo.react.css @@ -0,0 +1,3 @@ +Label:first-child { + color: red; +} diff --git a/src/index.js b/src/index.js index c457449..c8ab7af 100644 --- a/src/index.js +++ b/src/index.js @@ -56,6 +56,10 @@ function hash(value) { return hasher.digest('hex'); } +function dashToCamelCase(name: String) { + return name.replace(/-([a-z])/g, word => word[1].toUpperCase()); +} + function parseSelector(selector) { let parser = createSelectorParser(); return parser.process(selector).res; @@ -181,7 +185,7 @@ function localizeComponentRule(node) { let prev = selector.parent.nodes[idx - 1]; if (prev && prev.type === 'tag' && componentNames.indexOf(prev.value) > -1) { let componentName = prev.value; - let variantName = selector.value.slice(1); + let variantName = dashToCamelCase(selector.value.slice(1)); if (CSSPseudoClassList[variantName]) { selector.parent.parent.append(className({value: componentName + '__' + variantName})); } else { @@ -194,7 +198,7 @@ function localizeComponentRule(node) { let idx = parent.nodes.indexOf(selector); let prev = parent.nodes[idx - 1]; let componentName = prev.value; - let variantName = selector.value.slice(1); + let variantName = dashToCamelCase(selector.value.slice(1)); if (selector.value === PROP_VARIANT_NAME) { let expression = node.selector.slice( selector.source.start.column + PROP_VARIANT_NAME.length, @@ -316,6 +320,7 @@ function renderToJS(source: string, config: RenderConfig): string { let className = expr`styles.${identifier(componentName)}`; for (let variantName in component.variants) { let variant = component.variants[variantName]; + variantName = dashToCamelCase(variantName); if (variant.expression) { className = expr` ${className} + (${variant.expression} From 2ae35a6fcfb7c927e3f0d691945f304e372ff80d Mon Sep 17 00:00:00 2001 From: Kacper Kozak Date: Sat, 6 Aug 2016 16:38:03 +0200 Subject: [PATCH 2/2] fix: argument type --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index c8ab7af..52db650 100644 --- a/src/index.js +++ b/src/index.js @@ -56,7 +56,7 @@ function hash(value) { return hasher.digest('hex'); } -function dashToCamelCase(name: String) { +function dashToCamelCase(name: string) { return name.replace(/-([a-z])/g, word => word[1].toUpperCase()); }