Repository: tkh44/emotion (js)

Issue:
Off by one error in css var names [extract mode]
The for loop here

https://github.com/tkh44/emotion/blob/master/src/index.js#L22-L25

is not taking into account the number of `composes` interpolations.

If you have 1 compose interpolation

```
const BlueH1 = styled('h1')`
  composes: ${cssB};
  color: ${p => p.pink ? '#EA33C3' : '#e67700'};
`
```
The css var will be suffixed with `1` instead of `0`

2
```
const BlueH1 = styled('h1')`
  composes: ${cssB} ${cssC};
  color: ${p => p.pink ? '#EA33C3' : '#e67700'};
`
```

The css var will be suffixed with `2` instead of `0`

Pull request:
Fix composes with dynamic values in extract mode
<!--
Thanks for your interest in the project. I appreciate bugs filed and PRs submitted!

Please make sure that you are familiar with and follow the Code of Conduct for
this project (found in the CODE_OF_CONDUCT.md file).

Also, please make sure you're familiar with and follow the instructions in the
contributing guidelines (found in the CONTRIBUTING.md file).

If you're new to contributing to open source projects, you might find this free
video course helpful: http://kcd.im/pull-request

Please fill out the information below to expedite the review and (hopefully)
merge of your pull request!
-->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->
**What**:

Fix the wrong css vars being set when there is a composes.

<!-- Why are these changes necessary? -->
**Why**:

#143 

<!-- How were these changes implemented? -->
**How**:

Minus the number of composes from the matched placeholder number when replacing the placeholders with vars in the parser.

<!-- Have you done all of these things?  -->
**Checklist**:
<!-- add "N/A" to the end of each line that's irrelevant to your changes -->
<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
- [ ] Documentation N/A
- [x] Tests
- [x] Code complete

<!-- feel free to add additional comments -->


Closes #143 

Patch:
diff --git a/src/parser.js b/src/parser.js
index 5767dd8e..a19bd064 100644
--- a/src/parser.js
+++ b/src/parser.js
@@ -78,7 +78,7 @@ export function parseCSS (
   if (!options.inlineMode && vars === options.matches && !hasCssFunction) {
     root.walkDecls(decl => {
       decl.value = decl.value.replace(/xxx(\d+)xxx/gm, (match, p1) => {
-        return `var(--${options.name}-${options.hash}-${p1})`
+        return `var(--${options.name}-${options.hash}-${p1 - composes})`
       })
     })
   }


Test patch:
diff --git a/test/babel/__snapshots__/css.test.js.snap b/test/babel/__snapshots__/css.test.js.snap
index 30fbb58d..01e1ed44 100644
--- a/test/babel/__snapshots__/css.test.js.snap
+++ b/test/babel/__snapshots__/css.test.js.snap
@@ -16,10 +16,10 @@ exports[`babel css extract composes 2`] = `
           -ms-flex-pack: center;
           -webkit-box-pack: center;
           justify-content: center;
-          -webkit-align-items: var(--css-cls2-1fsihoz-1);
-          -ms-flex-align: var(--css-cls2-1fsihoz-1);
-          -webkit-box-align: var(--css-cls2-1fsihoz-1);
-          align-items: var(--css-cls2-1fsihoz-1) }"
+          -webkit-align-items: var(--css-cls2-1fsihoz-0);
+          -ms-flex-align: var(--css-cls2-1fsihoz-0);
+          -webkit-box-align: var(--css-cls2-1fsihoz-0);
+          align-items: var(--css-cls2-1fsihoz-0) }"
 `;
 
 exports[`babel css extract composes no dynamic 1`] = `
diff --git a/test/babel/__snapshots__/styled.test.js.snap b/test/babel/__snapshots__/styled.test.js.snap
index fd732149..edc8329b 100644
--- a/test/babel/__snapshots__/styled.test.js.snap
+++ b/test/babel/__snapshots__/styled.test.js.snap
@@ -29,11 +29,11 @@ const H1 = styled('h1', ['css-H1-13ogl0z', cls1], [fontSize + 'px', props => pro
 exports[`babel styled component extract composes 2`] = `
 ".css-cls1-1ltut9y { width: 20px; }
 .css-H1-13ogl0z {
-        font-size: var(--css-H1-13ogl0z-1);
+        font-size: var(--css-H1-13ogl0z-0);
         height: 20px;
-        -webkit-transform: translateX(var(--css-H1-13ogl0z-2));
-        -ms-transform: translateX(var(--css-H1-13ogl0z-2));
-        transform: translateX(var(--css-H1-13ogl0z-2)); }"
+        -webkit-transform: translateX(var(--css-H1-13ogl0z-1));
+        -ms-transform: translateX(var(--css-H1-13ogl0z-1));
+        transform: translateX(var(--css-H1-13ogl0z-1)); }"
 `;
 
 exports[`babel styled component extract no dynamic 1`] = `
diff --git a/test/extract/__snapshots__/extract.test.js.snap b/test/extract/__snapshots__/extract.test.js.snap
index 7b33f602..df273dc7 100644
--- a/test/extract/__snapshots__/extract.test.js.snap
+++ b/test/extract/__snapshots__/extract.test.js.snap
@@ -136,7 +136,7 @@ exports[`styled writes the correct css 1`] = `
 .css-cls2-y5rq6p {
       height: 64px; }
 .css-H1-1pnnqpk {
-      font-size: var(--css-H1-1pnnqpk-1); }
+      font-size: var(--css-H1-1pnnqpk-0); }
 .css-H2-idm3bz { font-size: 32px; }
 .css-Content-rs9k70 { font-size: var(--css-Content-rs9k70-0); }
 .css-squirtle-blue-bg-135ox65 {
diff --git a/test/extract/extract.test.emotion.css b/test/extract/extract.test.emotion.css
index a83d4411..9e26fe85 100644
--- a/test/extract/extract.test.emotion.css
+++ b/test/extract/extract.test.emotion.css
@@ -11,7 +11,7 @@
 .css-cls2-y5rq6p {
       height: 64px; }
 .css-H1-1pnnqpk {
-      font-size: var(--css-H1-1pnnqpk-1); }
+      font-size: var(--css-H1-1pnnqpk-0); }
 .css-H2-idm3bz { font-size: 32px; }
 .css-Content-rs9k70 { font-size: var(--css-Content-rs9k70-0); }
 .css-squirtle-blue-bg-135ox65 {