Seed Barista - v1.1.1

Update dependencies

This update bumps several dependencies to later/latest versions

Seed Barisa - v1.1.0

Update dependencies

For security!

Seed Barista - v1.0.4

Updates

jQuery wasn't mounting correct when Barista was being used in a Jest testing environment (specifically, Jest + Enzyme). I suspect this has to do with Enzyme's .mount() API, which (like Barista) also uses JSDOM.

This update adjusts how jQuery is initialized with Barista's .mount() method.

No changes are required for the end-user

Seed Barista - v1.0.1

Updates

Awww yiss! 100% test coverage!!

https://coveralls.io/github/helpscout/seed-barista?branch=master

Needed to make very minor changes to Barista's utils. Most of the changes were for tests.

Seed Barista - v1.0.0

Updates 🎉

Lots have been changed with Barista!

However, none of these changes should affect the end-user. All of the APIs remain the same. All of the updates take care of stuff under the hood.

• Refactor to ES6, converting Object prototypes to ES6 classes
• Abstract away Class logic to pure function utils (where possible)
• Add unit, integration, acceptance, and E2E tests!
• Add instanbul + nyc + coverall for test coverage. We're over 97%!
• Remove Genki as a dependency. Abstracting the functionality to a new DOM Class
• Speed bonus from better refactored logic and the latest JSDOM 🚀

This has been major version bumped, just in case any of the refactoring breaks things.

Resolves: #17

Seed Barista - v0.8.1

Updates

.prop() is an alias for jQuery's .css() method. The reason for adding this is to provide better consistency between standard and mounted APIs.

Resolves: #18

.prop()

.prop(property)

Argument	Type	Description
property	string	The CSS property to retrieve.

Returns

Type	Description
string	The CSS property retrieved. false is property doesn't exist.

Aliases

• css()

Examples

var output = barista({ ... }).mount();
var rule = output.find('.vote-pedro');

expect(rule.prop('position')).to.equal('absolute');

Seed Barista - v0.8.0

Updates

This new method allows you to find media queried rules within the output.css.
The .at() method accepts either a string (for specific searches) or an array (for keyword based searches).

.at()

.at(mediaQuery)

Argument	Type	Description
mediaQuery	string / array	The media query to find the CSS rule.

Returns

Type	Description
object	Barista Rule instance described in the media query. false if no Rule available.

Usage

Let's pretend the following is our CSS rule:

@media tv (min-width: 480px) and (max-width: 960px) and (orientation: landscape) {
  .vote-pedro { ... }
}
@media (min-width: 600px) {
  .pedro--medieval-warrior { ... }
}

Array

Passing media query as an array is the easiest way to find your rule.

The values in the array work like keywords. The Rule that is returned is the first one to match all of your specified keywords.

var output = barista({ ... }).mount();
var rule = output.rule('.vote-pedro').at(['min', '480px'])

expect(rule.prop('position')).to.equal('absolute');

Although the following example does work, it is best to avoid being overly vague with your .at([]) keywords.

var output = barista({ ... }).mount();
var rule = output.rule('.vote-pedro').at([4]); // 4 what?! Vote 4 Pedro perhaps?

expect(rule.prop('position')).to.equal('absolute');

String

Passing media query as a string allows you to be more specific with your search.

You may omitted parentheses from your string. However it must match the entire media query. If you have a longer media query, try using an array instead.

var output = barista({ ... }).mount();
var rule = output.rule('.pedro--medieval-warrior').at('min-width: 600px');

expect(rule.prop('display')).to.equal('block');

Changes

• Add .at() method in Rule class
• Add tests + docs

Seed Barista - v0.7.0

Updates

Add new .mediaQuery() API for standard testing

.mediaQuery()

Alias: .mq()

Returns

Type	Description
object	Data describing the media query. false if no media query available.

Data object

We have a .vote-pedro class with various media queries:

@media tv (min-width: 480px) and (max-width: 960px) and (orientation: landscape) {
  .vote-pedro { ... }
}

The result of output.rule('.vote-pedro').mq() will be:

{
  rule: '@media tv (min-width: 480px) and (max-width: 960px) and (orientation: landscape)',
  type: 'tv',
  not: false,
  props: [
    {
      modifier: 'min',
      feature: 'width',
      value: '480px'
    },
    {
      modifier: 'max',
      feature: 'width',
      value: '960px'
    },
    {
      modifier: undefined,
      feature: 'orientation',
      value: 'landscape'
    },
  ]
}

Note: .mq() works for parsing simpler media queries typically seen in web/mobile use. It may not be able to parse complicated media queries with a combination of nested comma separated rules.

Examples

var output = barista({ ... }).mount();
var rule = output.rule('.vote-pedro');
var mq = rule.mq();

expect(mq.type).to.equal('tv');
expect(mq.props[0].modifier).to.contain('min');
expect(mq.props[0].value).to.contain('480');

Changes

• Renames/refactors parser.js to rule.js (and it's related files)
• Fixes how rule.js finds selectors for media queries
• Add new .mediaQuery() (or .mq()) API to retreive media query data
• Add tests

Seed Barista - v0.6.0

Updates

• Updates dependencies to latest versions
• Adds .npmignore file

Seed Barista - v0.5.0

Updates 🚀

• Implements Genki, which uses JSDOM + jQuery for testing
• Add new BaristaOutput class to better handle Barista output + DOM methods
• Add new APIs, which become available after .mount()
  • .append()
  • .appendHTML()
  • .find()
  • .html()
  • .render()