My project has its source code in a subdirectory and tsconfig in that subdirectory. For example:

root
--project1
--project2
----tsconfig.json

I only use Typescript in project2. This works great. When adding this plugin, I don't get any errors, but it's also not activated. Here is my project2/tsconfig.json file

{
    "compilerOptions": {
        "outDir": "build/dist",
        "module": "commonjs",
        "target": "es5",
        "lib": ["es7", "dom"],
        "sourceMap": true,
        "allowJs": true,
        "jsx": "react",
        "moduleResolution": "node",
        "rootDir": "src",
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": false,
        "plugins": [
            {
                "name": "typescript-styled-plugin"
            }
        ]
    },
    "exclude": [
        "node_modules",
        "build",
        "scripts",
        "acceptance-tests",
        "webpack",
        "jest",
        "src/setupTests.ts",
        "coverage"
    ],
    "types": ["typePatches"]
}

I have tried adding typescript and typescript-styled-plugin to node_modules in both the root and subdirectory, but neither solved the issue.

Using this plugin with Atom TypeScript, error reporting works but hovers and suggestions do not. This may be an upstream issue with Atom TypeScript

I tried to use that plugin with Atom v1.25 and [email protected] but it doesn't work. I have no styled-related syntax highlighting for .ts/.tsx files and also have no code completion at all. I am also a bit confusing about language-babel requirement for TS project because that plugin doesn't support TS-files.

Steps to reproduce

1. For the code:

import * as styled from 'styled-components'

export const Button = styled.button`
    -trf:ro
`

2. Trigger suggest on -trf:ro

Expected

import * as styled from 'styled-components'

export const Button = styled.button`
    -webkit-transform: rotate(angle);
    -moz-transform: rotate(angle);
    -ms-transform: rotate(angle);
    -o-transform: rotate(angle);
    transform: rotate(angle);
`

Actual

import * as styled from 'styled-components'

export const Button = styled.button`
    -trf:transform: rotate(angle);
`

Thanks the work you've put into this! styled-components intellisense would be awesome!

Unfortunately, i can't seem to get it to work using vscode 1.16.1. i've set it up according to the docs, but there is no intellisense available. Additionally, the jsconfig.json looks like this:

typescript-styled-plugin 0.2.1
See microsoft/TypeScript#20304

Repro:

1. Install @types/react-router-dom
2. Enable plugin in tsconfig.json
3. Type Link in some file

I have a fairly long css property that prettier has decided should be spread onto multiple lines:

This compiles and works totally fine, but ts-styled-plugin seems to mistakenly think there are errors, as you can see by the red squiggly lines in the screenshot. The first "error" is semi-colon expected and the second is { expected

There are several CSS properties that are specific to React-Native that are supported by styled-components/native. For example the following properties are part of React-Native but appear as errors when using this plugin:

const Main = styled.View`
  shadow-color: black;
  shadow-opacity: 0.5;
  shadow-offset: 2px 2px;
`

Would React-Native specific properties be something to consider supporting?

I'm not sure I should file the issue in this repo – it's probably related to a dependency, and I don't which.

I get "Unknown property" warning when using scroll-snap-align css property in a styled component.

https://i.imgur.com/GtnWKeX.png

moving that line to a line other than the first one hides the error

For the code:

import * as styled from 'styled-components'

export const Button = styled.button`
    color: red;
    &:hover {
        color: |
    }
`;

Property name completions are currently returned:

I do employ a few complex selectors in my UI, unfortunately, and it seems that sometimes parsing seems to break, for example:

import React from 'react'
import styled from 'styled-components'
import fullWidth from '../../helpers/fullWidth'
import withTheme from '../../theme/withTheme'
import Button from './Button'

function ButtonGroup({ ...rest }) {
  return <div {...rest} />
}

const styledButtonGroup = styled(ButtonGroup)`
  display: flex;
  ${fullWidth()};

  ${Button} {
    width: 100%;
    
    &:not(:first-child):not(:last-child) {
      margin-left: 0;
      margin-right: 0;
      border-radius: 0;
    }
  }
`

export default withTheme(styledButtonGroup)

For the following code I get: [ts-styled-plugin] } expected (15, 13), however it compiles and works as expected

I have initially created styled-components/vscode-styled-components#50, but it looks like this issue should belong here

On the image element, resizeMode (resize-mode) is a valid property, but I get a warning:

However, this is a perfect valid property for the Image element.

Hello, I got this linting error in my VSCode editor specifically when I use CSS pseudo-classes in styled-components way (like hover in the screenshot below for example), I hope that this bug will be fixed soon to make this extension even better 🙂

Hey guys,

using vscode-styled-components I noticed that linting and IntelliSense aren't quite working for me when providing TypeScript declarations to a styled react-emotion component. I've already reported an issue, but was sent here for the IntelliSense part.

Do you have an idea for how to fix this?

Thanks a lot for your help!
Nicolas

Do you support Monaco editor, or do you plan to support it?

My environment:

1. Visual Studio Code under Mac, Version 1.19.2
2. "styled-components": "^2.4.0",
3. "stylelint": "^8.4.0",
4. "stylelint-config-standard": "^18.0.0",
5. "stylelint-config-styled-components": "^0.1.1",
6. "stylelint-processor-styled-components": "^1.2.1",
7. "typescript": "^2.6.2",
8. "typescript-styled-plugin": "^0.4.0"

stylelint.config.js is shown below with a rule of ignoreProperties: resize-mode

module.exports = {
  processors: ["stylelint-processor-styled-components"],
  extends: ["stylelint-config-standard", "stylelint-config-styled-components"],
  syntax: "scss",
  rules: {
    "property-no-unknown": [
      true,
      {
        ignoreProperties: ["/shadow/", "resize-mode"]
      }
    ]
  }
};

However, I still can see the error of "[ts-styled-plugin] Unknown property."

One nasty parts of using styled-components with TS is the lack of typing when you pass props to your style literal.

One solution can be found in styled-components-ts which wraps the styled-components function to expose correct types for props. Where you get:

const StyledComponents = styledComponentWithProps<MyProps>(styled.div)`
    ${props => props.myValue}
`

And there's no need to write ${(props: MyProps) => {...}} with type annotations every time.

Only problem is that this fairly neatly breaks vscode's syntax highlighting and typescript-styled-plugin.

Any way to resolve this...? I've tried adding styledComponentWithProps to tags under the extension configuration in tsconfig... no joy...

Steps to reproduce

1. Type this code

const navBarWidth = 15

interface ContainerProps {
  withNavBar?: boolean
}

const Container = styled.div`
  flex: 1;

  & > ${Content} {
    margin-left: ${({ withNavBar }: ContainerProps) => (withNavBar ? `${navBarWidth}em` : 0)};
  }

  & > ${StyledNavBar} {
    margin-left: ${({ withNavBar }: ContainerProps) =>
      withNavBar ? 0 : `-${navBarWidth}em`} !important;
  }
`

Expected

No error

Actual

The property value expected error is raised.

Problem
There are a number of libraries and frameworks that embed languages in js/ts template strings. Editors could all benefit from having proper editor support for these embedded languages and TypeScript server plugins provide a good way to implement this functionality. However implementing a TS plugin for a template string currently requires a lot of boilerplate code

Proposal
Split the generic template string logic from this plugin out into a new npm library that other plugin authors could consume. This plugin's code already maintains a fairly clean separation between the generic template string logic and the styled-component specific logic

From #33

Feature request to add support for emmet inside of styled components strings.

In styled-components it is possible to nest the selectors, just like in SCSS, so you can write &:hover { ... } or .wrapper & { ... } or even ${OtherComponent} { ... }. Unfortunately the autocompletion breaks inside the curly brackets.

When looking at this issue, I replaced the this.cssLanguageService.doComplete with this.scssLanguageService.doComplete in plugin source. Now, it can properly suggest css inside a nested selector. Downside of this solution is that now it also suggests all sort of SCSS functions which are not supported by the styled-components. Still better than having no autocomplete at all, but not enough to create a PR for that I guess.

I see two ways of resolving that problem. First: restrict the results returned from scssLanguageService.doComplete so they don't contain SCSS functions. Second: parse the code with SCSS and perform CSS version of doComplete only on the code part enclosed by current selector scope.

import styled from 'styled-components'

styled.button`
    boarder: 1px solid hotpink; 
`

Should show an error since boarder is not a known property name

Support is currently disabled for template strings that use any placeholder values:

import styled from 'styled-components'

const color = '#f0f'
styled.button`
    color: ${color};
`

Example:

I don't think this should be a valid warning.

As shown here, regular CSS properties work, but nested classes fail with a syntax error.

const Wrapper = styled.div`
  .some-class {
    /* etc */
  }
`

For some reason, my typescript-styled-plugin is triggering, but not displaying most autocompletion items.

Typescript version 2.6.1
VSCode version 1.18.1
typescript-styled-plugin version 0.2.2

From @tenjojeremy on February 24, 2018 3:10

Copied from original issue: styled-components/vscode-styled-components#64

When I import a literal string from one of my npm libraries it gives an error
semi-color expected and colon-excpected

I tried the same object structure but without module and it works fine.

(As referenced from styled-components/vscode-styled-components#67)

Trying to set appearance: none on VS Code generates warning message:
[ts-styled-plugin]: Unknown property: 'appearance'

For the following code:

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'react-emotion';

const StyledButton = styled('button')`
  appearance: none;

  &:hover {
    color: pink;
  }
`;

const Button = ({ children, ...rest }) => (
  <StyledButton {...rest}>{children}</StyledButton>
);

Button.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Button;

I believe Visual Studio supports TypeScript server plugins as well, but after installing the plugin and configuring my tsconfig.json, I did not see the plugin being activated

// cc @RyanCavanaugh

The e2e tests do not run on TypeScript 2.5. The root cause is: microsoft/TypeScript#18623

The vscode css language service provides quick fixes for property misspellings:

microsoft/typescript-template-language-service-decorator#4 just added support for quick fixes in template strings. We should hook these up

I've tried to set this plugin with VS Code in my project, but couldn't make it for whatever reasons, wondering if that's a bug or I'm doing something wrong.

Having an example app set up in this repo (unless we get the VS Code extension #10) would definitely be helpful in such cases.

Thanks!

https://i.imgur.com/sWpIzvc.png

const StyledTabNavigationWrapper = styled.div`
  position: relative;
  overflow-x: hidden;

  @-moz-document url-prefix() {
    max-height: 32px;
    overflow-y: hidden;
  }
`;

We have an experimental means for a VS Code extension to contribute TypeScript plugins. This would have a few benefits:

1. Simplified installation
2. No jsconfig or tsconfig configuration required.
3. No need to npm install the plugin into each workspace or put it in your package.json
4. Will work with loose js/ts files (files that are not part of any js/tsconfig project)
5. Extension can also contribute other goodness, such as syntax highlighting

To be clear, the TypeScript server plugin itself would continue to work across all editors that use the TypeScript language service. This issue merely tracks bundling up the plugin into a VS Code extension

I'm encountering a false-positive from ts-styled-plugin when using thevscode-styled-components plugin for which this plugin is a dependency. The error is thrown up by the use of interpolation in a declaration name.

Code

Alternative Example

Error Message:

[ts-styled-plugin] } expected

vscode-styled-components 0.0.18 < typescript-styled-plugin0.6.3
babel-javascript: 0.0.14
vscode 1.23.0 (1.23.0)

Link to original issue on vscode-styled-components to track.

Hey,
I'm getting this error: [ts-styled-plugin] property value expected

const activeClassName = 'active-nav-link'

const Link = styled(NavLink).attrs({ activeClassName })`
  &.${activeClassName} {
    background-color: ${color.lightest};
  }

  &:hover {
    background-color: ${color.lightest};
  }
`

I get an error above. But not in the code below.

const activeClassName = 'active-nav-link'

const Link = styled(NavLink).attrs({ activeClassName })`
  &:hover {
    background-color: ${color.lightest};
  }  

  &.${activeClassName} {
    background-color: ${color.lightest};
  }
`

It works just fine when:

import styled from 'styled-components'

const Button = styled.a`
    color: blue;
`

export default Button;

But when it comes to:

import styled from 'styled-components'

export default styled.a`
    color: blue;
`;

The plugin seems not working at this time.

ts: 2.5.3
vscode: 1.16.1

Steps to reproduce

1. For the code

   import * as styled from 'styled-components'
   
   export const Button = styled.button`
       bdlw
   `

2. Trigger suggest on bdlw

Expected

import * as styled from 'styled-components'

export const Button = styled.button`
    border-left-width: |;
`

Where | is the cursor

Actual

import * as styled from 'styled-components'

export const Button = styled.button`
    border-left-width: ;|
`

For the code:

import styled, {css} from 'styled-components'

const Button = styled.a`;`

We currently hit:

Error: Debug Failure. False expression.

I noticed a bug recently. I got an error like this:

The code is available here: https://gist.github.com/ApacheEx/e1242d762a3fc98926d1605f1e8c6e77

My Environment:

• Editor: VSCode 1.23.1
• Extension: vscode-styled-components 0.0.18
• OS: macOS Hight Sierra 10.13.4

Works when interpolating after:

Broken when interpolated before:

Both are valid. Happy to provide more information if necessary 🙂

See note in https://github.com/Microsoft/typescript-styled-plugin#emmet-in-completion-list for more details

Steps

1. Start typing an emmet completion such as m. See margin: ;
2. Type t so text is now mt

Bug
Completion for margin: ; still shown

Currently the e2e tests only run properly on node 7.x. They fail non-deterministically when using node 8.x and 9.x

Hi there, great plugin. Only issue I've run into is that I have to jump through a few hoops to get it to work with styled components themes since they require some type composition using the & operator. This means wrapping the ES6 string template in a function which seems to break the plugin's syntax highlighting.

Take the following example where Spinner gets syntax highlighting properly but Spinner2 does not:

import themed, { withProps, keyframes } from './themed-components';

interface IProps {
  active?: boolean;
}

// Any html styled components can go here
// Req'd due to: 
const styled = {
  div: withProps<IProps>()(themed.div)
};

// take a type and a string, return a styled component

export const Rotate360 = keyframes`
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
`;

export const Spinner = styled.div`
  animation: ${Rotate360} 1.1s infinite linear;
  border-color: ${props => props.theme.color.blue400} ${props =>
  props.theme.color.blue400} ${props => props.theme.color.blue400} ${props =>
  props.theme.color.blue200};
  border-radius: 50%;
  border-style: solid;
  border-width: 1.1em;
  display: inline-block;
  font-size: 10px;
  height: 10em;
  margin: 60px auto;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  transform: translateZ(0);
  width: 10em;
`;

export const Spinner2 = withProps<IProps>()(themed.div)`
animation: ${Rotate360} 1.1s infinite linear;
border-color: ${props => props.theme.color.blue400} ${props =>
props.theme.color.blue400} ${props => props.theme.color.blue400} ${props =>
props.theme.color.blue200};
border-radius: 50%;
border-style: solid;
border-width: 1.1em;
display: inline-block;
font-size: 10px;
height: 10em;
margin: 60px auto;
overflow: hidden;
position: relative;
text-indent: -9999px;
transform: translateZ(0);
width: 10em;
`;

themed-components looks like this:

import * as styledComponents from 'styled-components';

import { ThemedStyledComponentsModule } from 'styled-components';
import { ThemedStyledFunction } from 'styled-components';

import { ITheme } from './theme/standard';

function withProps<U>() {
    return <P,T,O>(
        fn: ThemedStyledFunction<P, T, O>
    ): ThemedStyledFunction<P & U, T, O & U> => fn
}

const {
  default: styled,
  css,
  injectGlobal,
  keyframes,
  ThemeProvider,
  withTheme,
} = styledComponents as ThemedStyledComponentsModule<ITheme>;

export {
  css,
  injectGlobal,
  keyframes,
  ThemeProvider,
  withProps,
  ITheme,
  withTheme,
};
export default styled;

Effectively I am just wrapping styled-components in themed-components so that I can provide a theme using ThemeProvider. It actually works really well but there is one caveat, the vs code plugin requires that I have this broken out in my file because it seems not to like composition around the styled template tag:

const styled = {
  div: withProps<IProps>()(themed.div)
};

If I try to inline those lines in the string template like in Spinner2 then css formatting is gone. It seems like it really wants styled.div syntax right by the template syntax.