fix: issue where variants would sometimes apply only once (#362)

.bin/build-watch.js

@@ -0,0 +1,13 @@
+import nodemon from 'nodemon'
+import process from 'process'
+
+nodemon(
+ [
+ // prettier-ignore
+ `--watch packages/core/src`,
+ `--watch packages/core/tests`,
+ `--watch packages/react/src`,
+ `--watch packages/react/tests`,
+ `--exec "clear; ${['npm', 'run', 'build'].concat(process.argv.slice(2)).join(' ')}"`,
+ ].join(' '),
+).on('quit', () => process.exit())

.bin/test-watch.js

@@ -0,0 +1,13 @@
+import nodemon from 'nodemon'
+import process from 'process'
+
+nodemon(
+ [
+ // prettier-ignore
+ `--watch packages/core/src`,
+ `--watch packages/core/tests`,
+ `--watch packages/react/src`,
+ `--watch packages/react/tests`,
+ `--exec "clear; ${['node', '.bin/test.js'].concat(process.argv.slice(2)).join(' ')}"`,
+ ].join(' '),
+).on('quit', () => process.exit())

package.json

@@ -7,14 +7,14 @@
  "scripts": {
  "bootstrap": "lerna bootstrap --use-workspaces",
  "build": "node .bin/build",
- "build:watch": "nodemon --watch packages/core/src --watch packages/core/tests --watch packages/react/src --watch packages/react/tests --exec \"clear; npm run build\"",
+ "build:watch": "node .bin/build-watch",
  "prerelease": "npm run build && npm run test",
  "release": "lerna publish",
  "release:canary": "npm run prerelease && lerna publish --dist-tag canary",
  "release:pack": "npm run prerelease && lerna exec -- npm pack",
  "postinstall": "run-s bootstrap",
  "test": "node .bin/test",
- "test:watch": "nodemon --watch packages/core/src --watch packages/core/tests --watch packages/react/src --watch packages/react/tests --exec \"clear; npm run test\""
+ "test:watch": "node .bin/test-watch"
  },
  "workspaces": [
  "packages/*",

packages/core/src/index.js

@@ -194,12 +194,14 @@ const createCss = (init) => {
 
  if (condition != null) {
  if (!conditionVariants[condition]) {
- const conditionalVariantClassName = (conditionVariants[condition] = variantClassName + '--' + getHashString('', condition))
+ const conditionalVariantClassName = variantClassName + '--' + getHashString('', condition)
  const conditionalVariantCssText = getComputedCss({ [condition]: { ['.' + conditionalVariantClassName]: variantStyle } })
 
- variantRules.addCss(conditionalVariantCssText)
- classNames.push(conditionalVariantClassName)
+ conditionVariants[condition] = [conditionalVariantCssText, conditionalVariantClassName]
  }
+
+ variantRules.addCss(conditionVariants[condition][0])
+ classNames.push(conditionVariants[condition][1])
  } else {
  variantRules.addCss(variantCssText)
  }
@@ -228,10 +230,11 @@ const createCss = (init) => {
 
  let expressClassNames = new Set(classNames())
 
- for (const propName in defaultVariants)
+ for (const propName in defaultVariants) {
  if (!(propName in props) && propName in variants) {
  props[propName] = defaultVariants[propName]
  }
+ }
 
  if (classProp in props) {
  String(props[classProp]).split(/\s+/).forEach(expressClassNames.add, expressClassNames)

packages/core/tests/variants.js

@@ -277,4 +277,23 @@ describe('Conditional variants', () => {
  expect(component({ size: { bp1: 'small', bp2: 'large' } }).className).toBe([componentClassName, componentSmallBp1ClassName, componentLargeBp2ClassName].join(' '))
  expect(toString()).toBe([componentSmallBp1CssText, componentLargeBp2CssText].join(''))
  })
+
+ test('Renders a component with a conditional variant repeatedly', () => {
+ const { css, toString } = createCss(config)
+ const component = css(componentConfig)
+ const componentClassName = `sx03kze`
+ const componentSmallBp1ClassName = `${componentClassName}tmy8g--size-small--5m2l7`
+ const componentLargeBp2ClassName = `${componentClassName}fhyhx--size-large--8c3r4`
+ const componentSmallBp1CssText = `@media (max-width: 767px){.${componentSmallBp1ClassName}{font-size:16px;}}`
+ const componentLargeBp2CssText = `@media (min-width: 768px){.sx03kzefhyhx--size-large--8c3r4{font-size:24px;}}`
+
+ expect(component({ size: { bp1: 'small', bp2: 'large' } }).className).toBe([componentClassName, componentSmallBp1ClassName, componentLargeBp2ClassName].join(' '))
+ expect(toString()).toBe([componentSmallBp1CssText, componentLargeBp2CssText].join(''))
+
+ expect(component({ size: { bp1: 'small', bp2: 'large' } }).className).toBe([componentClassName, componentSmallBp1ClassName, componentLargeBp2ClassName].join(' '))
+ expect(toString()).toBe([componentSmallBp1CssText, componentLargeBp2CssText].join(''))
+
+ expect(component({ size: { bp1: 'small', bp2: 'large' } }).className).toBe([componentClassName, componentSmallBp1ClassName, componentLargeBp2ClassName].join(' '))
+ expect(toString()).toBe([componentSmallBp1CssText, componentLargeBp2CssText].join(''))
+ })
 })