@helious/emotion-mirror

Welcome to @helious/emotion-mirror - a way for us to utilize @emotion/react's styled that allows for self-reflection on the styles it creates. @helious/emotion-mirror's wrapped styled will allow you to get real-time feedback on invalid (or lint issues, all via stylelint) CSS styles at runtime via the browser console when rendering your Styled Components!

Install

npm i @helious/emotion-mirror

Usage

@helious/emotion-mirror is intended to provide a direct replacement for @emotion/react's styled.

More documentation is available at https://emotion.sh/docs/styled.

stylelint Configuration

You may add any of the available stylelint rules and/or add overrides for the default rules using configureRules:

import { configureRules } from "@helious/emotion-mirror";

configureRules({
    "unit-allowed-list": ["%", "px"],
    // Additional stylelint rules and/or overrides
    // ...
});

These are the default stylelint rules used:

• annotation-no-unknown
• at-rule-no-unknown
• block-no-empty
• color-no-invalid-hex
• comment-no-empty
• declaration-block-no-duplicate-custom-properties
• declaration-block-no-duplicate-properties
• declaration-block-no-shorthand-property-overrides
• font-family-no-duplicate-names
• function-calc-no-unspaced-operator
• function-linear-gradient-no-nonstandard-direction
• function-no-unknown
• keyframe-block-no-duplicate-selectors
• keyframe-declaration-no-important
• media-feature-name-no-unknown
• named-grid-areas-no-invalid
• no-duplicate-selectors
• no-invalid-double-slash-comments
• no-irregular-whitespace
• property-no-unknown
• selector-pseudo-class-no-unknown
• selector-pseudo-element-no-unknown
• string-no-newline
• unit-no-unknown

Here is how you would disable any of the default stylelint rules:

import { configureRules } from "@helious/emotion-mirror";

configureRules({
    "annotation-no-unknown": null,
});

Example Output

This is what you can expect when using styled and there are issues in your component's styles:

Production Mode

@helious/emotion-mirror is currently configured to only run Styled Components through stylelint when process.env.NODE_ENV is not set to "production". When process.env.NODE_ENV is "production", @helious/emotion-mirror's styled will fall back to using @emotion/react's styled.

Contributors

@helious/emotion-mirror is maintained by @helious and volunteers. Without the code contributions from all these fantastic people, @helious/emotion-mirror would not exist. Become a contributor.