search

pranaygp / vscode-css-peek

A vscode extension for peeking at CSS definitions from a class or id tag in HTML
MIT License
146 stars 32 forks source link

No definition found for 'test' #16

Closed ghost closed 6 years ago

ghost commented 6 years ago

System OS: Linux VS Code version: 1.19.0 CSS Peek version: 2.0.2

 

Issue When Shift+F12 is pressed, the actual code it should refer to is not shown, which, in this example is:

.test {
  color: green;
}

 

Other information ezgif com-video-to-gif

pranaygp commented 6 years ago

@emeydoubletee I would need a little more information for this.

Most importantly, what does your project directory structure look like? The extensions currently doesn't work with css styling within the HTML file, so you need to have an independent .css file somewhere in the same workspace as the HTML file for it to work.

I can't tell from your gif how the styling is done

ghost commented 6 years ago

I'm using an external CSS file.

Here's the tree:

.
├── assets
├── css
│   └── master.css
├── index.html

HTML file:

<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/media/d1/data/gitlab/fcc-portfolio/css/master.css">
</head>

<body>
  <h1 class="test">Test Successful</h1>
</body>

</html>

CSS file:

body {
  background-color: black;
}

.test {
  color: green;
}
pranaygp commented 6 years ago

I replicated your setup and it seems to work for me:

kapture 2017-12-17 at 18 37 20

I can't think of why it wouldn't work on Linux, but that could potentially be the issue?

Can you try opening the Output console in vs code, set the stream to "css-peek", try the peek again (like from your demo) and send me the output. here's an example of me doing it (an example where it works)

css peek output demo

ghost commented 6 years ago

I created a different directory and the extension works except after adding comments in the HTML header.

Test directory

.
├── css
│   └── master.css
└── index.html

1 directory, 2 files

Demo normal

 

Issue

Adding <!--comments--> results in the following:

I'm using the same directory and the same external CSS. The only changes are within the HTML file itself.

Demo issue

pranaygp commented 6 years ago

Closing this as a duplicate of #14