stylelint --fix removing content of all js files

[srghma]

minimal example

Used command:
"lint:css": "stylelint '**/*.js'",

What I do

 ~/projects/ran   beta  yr lint:css -- --fix
yarn run v0.28.4
$ stylelint '**/*.js' "--fix"

app/components/Theme.js
  8:13  ✖  Expected single space after "{" of a single-line block                                      block-opening-brace-space-after
           (block-opening-backtick-space-after)
  8:31  ✖  Expected single space before "}" of a single-line block                                     block-closing-brace-space-before
           (block-closing-backtick-space-before)
 29:34  ✖  Expected a leading zero                                                                     number-leading-zero

app/containers/Header/styles.js
 4:13  ✖  Expected single space after "{" of a single-line block (block-opening-backtick-space-after)  block-opening-brace-space-after
 4:32  ✖  Expected single space before "}" of a single-line block                                      block-closing-brace-space-before
          (block-closing-backtick-space-before)

app/containers/PostList/styles.js
 4:14  ✖  Expected single space after "{" of a single-line block (block-opening-backtick-space-after)  block-opening-brace-space-after
 4:34  ✖  Expected single space before "}" of a single-line block                                      block-closing-brace-space-before
          (block-closing-backtick-space-before)

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

File before (app/Theme.js)

import styled from 'styled-components'

export const App = styled.div`
  background-color: ${({ theme }) => theme.colors.background};
  color: ${({ theme }) => theme.colors.text};
`

export const A = styled.a`color: ${({ theme }) => theme.colors.main};`

export const P = styled.p`
  font-size: ${({ theme }) => theme.font.sizes.normal};
  line-height: ${({ theme }) => theme.font.sizes.bigger};
`

export const Article = styled.article`
  margin: ${({ theme }) => theme.alignment.horizontalcenter};
  max-width: 650px;
`

export const Button = styled.button`
  align-items: center;
  background-color: ${({ theme }) => theme.colors.main};
  border: 0;
  color: ${({ theme }) => theme.colors.textAlt};
  display: flex;
  padding: ${({ theme }) => theme.spacing.smaller};
  &:active {
    background-color: ${({ theme }) =>
      theme.helper(theme.colors.main).darken(0.2).string()};
    transition: background-color .3s;
  }
  &:focus {
    outline: none;
  }
`

After

.selector1 {
  background-color: $dummyValue;
  color: $dummyValue;
}

.selector2 {color: $dummyValue;}

.selector3 {
  font-size: $dummyValue;
  line-height: $dummyValue;
}

.selector4 {
  margin: $dummyValue;
  max-width: 650px;
}

.selector5 {
  align-items: center;
  background-color: $dummyValue;
  border: 0;
  color: $dummyValue;
  display: flex;
  padding: $dummyValue;

  &:active {
    background-color: $dummyValue;
    transition: background-color .3s;
  }

  &:focus {
    outline: none;
  }
}l

and all js files without styled are empty

related brumbrum-it/styled-components-stylefmt#1

[emilgoldsmith]

Seems like this is not supported by stylelint: stylelint/stylelint#2592 so you should take it up there before we can implement it. (if you have any information I don't have feel free to comment and we'll reopen the issue)