Unexpected token: ';'

[emilos]

Seems to work correctly, but shows an error in the console:

<style>
  div[class*="status-"]::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat:  no-repeat;
    background-position: bottom center;
    background-size: contain;
    opacity: 0.1;
  }
  .status-400::after {
    background-image: url('/assets/images/400.svg');
  }
  .status-401::after {
    background-image: url('/assets/images/401.svg');
  }
  .status-403::after {
    background-image: url('/assets/images/403.svg');
  }
  .status-404::after {
    background-image: url('/assets/images/404.svg');
  }
  .status-500::after {
    background-image: url('/assets/images/500.svg');
  }
</style>

[inikonorov]

can you share what version of node do you test? I use 14.11.0 - everything is ok (screen below).

[inikonorov]

@emilos hey, can you comment this?)

[emilos]

@inikonorov I'm trying to reproduce this again, but without much luck :) going to try again now.

[emilos]

@inikonorov ok, I've found it. I've added a skipped spec here c1e570d if you want to have a look :) thanks!

[inikonorov]

I play with code and found something
I think, that problem is if-condition (35-37 rows) in prerun function in plugins/DataPlugin.js
I made some tests:

• 1 test (current if-condition and template from c1e570d commit
  

• 2 test (current if-condition and my template based on template from 1st test
  

• 3 test (changed if-condition and template from 1st test)
  

I think, that when optimizeNode function finds curly brackets in style tag, she thinks that in curly brackets there is some JS code. So 2nd test works correctly, because in curly brackets there is a real JS code.
I don't know is 3rd test's if-condition right and I can do pull request with this solution, so I wait your opinion about this :)

[emilos]

@inikonorov this makes a lot of sense, good find! This seems to be a wider problem, I think same issue would happen if we would have a script tag defined with something inside of it (or any other tag that can take in code).

I think the right solution for this, is to do something like this inside of the DataPlugin

const CODE_TAGS = ['style', 'script']

// ...

if (CODE_TAGS.includes(tag)) {
   fragment.children.forEach(node => {
     node.skipDataOptimization = true
   })
}

// ...

if (this.variables.length > 0 && !fragment.skipDataOptimization) {
  // ...
}

[inikonorov]

okay, 'll do this today :)

[inikonorov]

#667