Cell Query

Lucid implements Cell-Query (CQ), which is a representation of stylistic decisions in the form of plain keys and values, with relation to Modules and Components. This means that Lucid Modules can be styled purely by plain keys and values, as opposed to, say, some styles that use functions and operators, like so:

const styles = {
  myComponent: {
    ...
  },

  anotherComponent: ({ state }) => ({
    color: state.active ? 'red' : 'blue',
    ...
  })
}

Using CQ, this could be re-written as JSON:

{
  "myComponent": {
    ...
  },

  "anotherComponent": {
    "color": "blue",

    "is-active": {
      "red"
    }
    ...
  }
}

See the CQ Expressions section for available expressions within the keys

CQ is ideal to store in your module's configuration (which should just be plain keys and values), where Lucid can read the configuration and subsequently apply any CQ as inline styles.

See CQ in action with more context:

• Using State
• Using Context