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!
npm i -S @helious/emotion-mirror@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.
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,
});This is what you can expect when using styled and there are issues in your component's styles:
@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.
@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.