artifact appears as an element before

[paxarpp]

Hello, (0.0.1-alpha.60) again I’m talking about bugs from my program, if after viewing Divider -> Divider, to choose to watch the button SVGButton -> SVGButton large, then the artifact appears as an element before

[lttb]

hi @paxarpp, could you provide the code for your Divider please?

If it's the same as the example here: https://github.com/lttb/reshadow/issues/24#issuecomment-498113398, so this code has a small bug:

const isEnd = ({ end }) => end && css`flex: 20}`;

the css`flex: 20}` was returned, which leads to closing bracket in mixin, and this is why the pseudo :before and :after became not nested

here is an example with fixed code: https://codesandbox.io/s/reshadowstyled-kv7qq, and there is no global pseudo there

[paxarpp]

hi,

const Divider = ({ children, max, end, start, ...props }) => (
  <Wrap max={max} end={end} start={start} {...props}>
    {children}
  </Wrap>
);
Divider.propTypes = {
  /** width = 100% */
  max: PropTypes.bool,
  /** what render on divider (text etc) */
  children: PropTypes.any,
  /** children located in the end divider */
  end: PropTypes.bool,
  /** children located in the start divider */
  start: PropTypes.bool
};
const style = css`
  content: '';
  background-color: #e0e0e0;
  height: 1px;
  flex: 1;
`;
const isStart = ({ start }) => start && css`flex: 20}`;
const isEnd = ({ end }) => end && css`flex: 20}`;

const Wrap = styled.h4`
  display: flex;
  margin: 0 auto;
  width: ${({ max }) => (max ? '100%' : '80%')};
  align-items: center;
  :after {
    ${style};
    ${isStart}
  }
  :before {
    ${style};
    ${isEnd}
  }
`;
export default Divider;

[lttb]

thank you! so yeah, there is a mistake:

- const isStart = ({ start }) => start && css`flex: 20}`;
+ const isStart = ({ start }) => start && css`flex: 20`;
- const isStart = ({ start }) => start && css`flex: 20}`;
+ const isEnd = ({ end }) => end && css`flex: 20`;

[paxarpp]

thanks and offended that I myself did not notice this

[lttb]

thanks and offended that I myself did not notice this

no worries, it happens 🙂

[lttb]

BTW, I think that something like https://github.com/styled-components/stylelint-processor-styled-components could be useful to avoid such bugs

[paxarpp]

yes, for SC installed

[lttb]

so you can try to set this plugin like this (I hope it will work 😄 )

{
  "processors": [
    [
      "stylelint-processor-styled-components",
      {
        "moduleName": "@reshadow/styled"
      }
    ]
  ]
}

[paxarpp]

there is still code that does not work the same as in SC (:hover and animation) in button (need add new issue? or can here?

[lttb]

I think it would be simpler for navigation to close this issue and create the new. Thank you very much!

[paxarpp]

ок