Svelte have a more or less similar syntax to vue, but it can have style attributes with {dynamicProperties} wrapped within single {}s (and it doesn't use the <template> tag).

Is it possible to support it without affecting other languages?

Would changing a bit the onStyleAttribute conditional to something like the code below make sense?

	function onStyleAttribute (style) {
		if (/\{{1,2}[\s\S]*?\}{1,2}/g.test(style.content)) {
			...
		} else {
			...
		}
		...
	}

Original conditional

The conditional assumes that if a {{thing}} or a {thing} is matched, the style attribute lang is custom-template.

Problem

const postcss = require('postcss');
const postcssHtml = require('postcss-html');

const valid = postcss().process('# Hi\n```css\na{}\n```\n', {
  syntax: postcssHtml,
  from: 'exmaple.md'
});

valid.error; //=> undefined

The code above works fine. But, when source contains no code blocks, such as

const invalid = postcss().process('# Hi\n', {
  syntax: postcssHtml,
  from: 'exmaple.md'
});

invalid.error; //=> CssSyntaxError { reason: 'Unknown word', line: 1, column: 1, ...}

it tries to parse the entire file contents # Hi as CSS and returns a result with CssSyntaxError.

Expected result

Even if the Markdown file doesn't include any code blocks, the PostCSS process should return a result with no errors.

'use strict';

const postcss = require('postcss'); // v6.0.21
const postcssHtml = require('postcss-html'); // v0.19.0 (commit 5f90c59b9a2c4b211bac699ed4847ec216b8efa0)

const source = `
\`\`\`js
<div style={{ }} />
\`\`\`
`;

const result = postcss().process(source, {
  syntax: postcssHtml,
  from: 'example.md'
});

console.log(result.error);

The code above prints:

CssSyntaxError {
  name: 'CssSyntaxError',
  reason: 'Unclosed block',
  file: '/Users/shinnn/github/postcss-html-bug/example.md',
  source: '{{',
  line: 3,
  column: 13,
  message: '/Users/shinnn/github/postcss-html-bug/example.md:3:13: Unclosed block',
  input: 
   { line: 3,
     column: 13,
     source: '{{',
     file: '/Users/shinnn/github/postcss-html-bug/example.md' } }

According to the error message, postcss-html seem to parse an inline style of a React component as a string even if it's actually an Object.

I understand that it can be very useful to also lint inline styles, but there are some stylelint rules that aren't much friendly with them.

For example, no-missing-end-of-source-newline:

Is there a way to disable the inline style linting?

Problem

'use strict';

const postcss = require('postcss');
const postcssHtml = require('postcss-html');

const result = postcss().process('<', {
  syntax: postcssHtml,
  from: 'exmaple.html'
});

console.log(result.error);

When I run the code above, it prints,

CssSyntaxError {
  name: 'CssSyntaxError',
  reason: 'Unknown word',
  file: '/Users/shinnn/test/exmaple.html',
  source: '<',
  line: 1,
  column: 1,
  message: '/Users/shinnn/test/exmaple.html:1:1: Unknown word',
  input: 
   { line: 1,
     column: 1,
     source: '<',
     file: '/Users/shinnn/test/exmaple.html' } }

This result is confusion for users: < actually causes a syntax error, but an HTML syntax error. The error name is CssSyntaxError though.

Expected result

• In this case I expect postcss-html not to cause any errors, as the HTML < does not include any <style> tags.

What CSS is needed to reproduce this issue?

<template>
  <div> content </div>
</template>
<style lang="less" src="./style.less" scoped></style>

What did you expect to happen?
maybe ignore for the style tag has an src attribute in vue files?

stylelint/stylelint#3314
https://vue-loader.vuejs.org/spec.html#src-imports

I get the next exception when try to preload an HTML file with PostCSS

× Building project failed
./src/svelte/main.html
Module build failed: TypeError: root.stringify is not a function
    at document.nodes.forEach.root (D:\Work\Projects_Fabrica\neutrino-preset-fabrika\node_modules\postcss-html\lib\stringify.js:10:9)
    at Array.forEach (native)
    at Function.stringify (D:\Work\Projects_Fabrica\neutrino-preset-fabrika\node_modules\postcss-html\lib\stringify.js:7:18)
    at MapGenerator.generate (D:\Work\Projects_Fabrica\neutrino-preset-fabrika\node_modules\postcss\lib\map-generator.js:311:18)
    at LazyResult.stringify (D:\Work\Projects_Fabrica\neutrino-preset-fabrika\node_modules\postcss\lib\lazy-result.js:290:24)
    at Root.toResult (D:\Work\Projects_Fabrica\neutrino-preset-fabrika\node_modules\postcss\lib\root.js:105:21)
    at lintPostcssResult (D:\Work\Projects_Fabrica\neutrino-preset-fabrika\node_modules\stylelint\lib\lintSource.js:107:6)
    at getConfig.then.result (D:\Work\Projects_Fabrica\neutrino-preset-fabrika\node_modules\stylelint\lib\lintSource.js:75:16)
 @ ./src/index.js 6:0-38
 @ multi ./src/index

I inspected the root object in stringify.js and looks like it doesn't have such method. It inherits from these interfaces:

Rule {}

Container {
  push: [Function: push],
  each: [Function: each],
  walk: [Function: walk],
  walkDecls: [Function: walkDecls],
  walkRules: [Function: walkRules],
  walkAtRules: [Function: walkAtRules],
  walkComments: [Function: walkComments],
  append: [Function: append],
  prepend: [Function: prepend],
  cleanRaws: [Function: cleanRaws],
  insertBefore: [Function: insertBefore],
  insertAfter: [Function: insertAfter],
  removeChild: [Function: removeChild],
  removeAll: [Function: removeAll],
  replaceValues: [Function: replaceValues],
  every: [Function: every],
  some: [Function: some],
  index: [Function: index],
  normalize: [Function: normalize],
  rebuild: [Function: rebuild] }

Node {
  error: [Function: error],
  warn: [Function: warn],
  remove: [Function: remove],
  toString: [Function: toString],
  clone: [Function: clone],
  cloneBefore: [Function: cloneBefore],
  cloneAfter: [Function: cloneAfter],
  replaceWith: [Function: replaceWith],
  moveTo: [Function: moveTo],
  moveBefore: [Function: moveBefore],
  moveAfter: [Function: moveAfter],
  next: [Function: next],
  prev: [Function: prev],
  before: [Function: before],
  after: [Function: after],
  toJSON: [Function: toJSON],
  raw: [Function: raw],
  root: [Function: root],
  cleanRaws: [Function: cleanRaws],
  positionInside: [Function: positionInside],
  positionBy: [Function: positionBy] }

Is this module compatible with PostCSS 6?

Hey there. I was intrigued by this PostCSS syntax as I was looking for a well-organized HTML parser that could generate a good AST. Upon looking further into the project, I found that the only nodes that are placed into nodes are style tags (and style attributes from tags). The description and documentation doesn't mention that limitation. The README doesn't really do a very good job of explaining what the module is and how it should be used - it's quite vague.

For the sake of other users that might happen across your project, I'd like to request a better description of the project along with describing its limitations.

I'm confused by the readme. Why would we want to parse HTML/etc for PostCSS?

Problem

'use strict';

const postcss = require('postcss');
const postcssHtml = require('postcss-html');

const source = `hi

\`\`\`css

\`\`\`
`;
const result = postcss().process(source, {
  syntax: postcssHtml,
  from: 'example.md'
});

console.log(result.error);

When I run the code above, it prints the following error:

CssSyntaxError {
  name: 'CssSyntaxError',
  reason: 'Unknown word',
  file: '/Users/shinnn/test/example.md',
  source: '```css\n\n',
  line: 3,
  column: 1,
  message: '/Users/shinnn/test/example.md:3:1: Unknown word',
  input: 
   { line: 3,
     column: 1,
     source: '```css\n\n',
     file: '/Users/shinnn/test/example.md' } }

This is unexpected result, becuase

1. Actually there is no Unknown word in the CSS code block as it's empty.
2. The error position is line: 3 column: 1 but it doesn't point CSS but the beginning of triple backticks.

Expected result

I expect postcss-html not to cause any errors in this case.

Note that the source has at least 1 character, for exmaple

const source = `hi

\`\`\`css
a {}
\`\`\`
`;

there is no unexpected CssSyntaxError.

I made a demo for js with template literals (where it works) and for the same code in a
script tag in html where it does not work.
test-js-html.zip

Test.html (won't show errors)

<script>
  function test() {
    return `
      <style>
        .selector {
          --property: value;;
        }
      </style>
    `;
  }
</script>

Test.js (shows errors)

function test() {
  return `
    <style>
      .selector {
        --property: value;;
      }
    </style>
  `;
}

Log:

$ npm run test:js

> [email protected] test:js /vagrant/new/test-js-html
> stylelint Test.js


Test.js
 3:10  ✖  Unexpected extra semicolon   no-extra-semicolons

$ npm run test:html

> [email protected] test:html /vagrant/new/test-js-html
> stylelint Test.html

I guess I will need to do something as it's probably not the default use case... but I'm not sure what as with processors it won't work as well...

In v0.11.0, I get the following error when running a postcss gulp task which leverages postcss-html and postcss-import:

Message:
Cannot read property 'append' of undefined
Details:
fileName: C:\Users\kjaveri\Desktop\postcss-html-test\index.html
domainEmitter: [object Object]
domain: [object Object]
domainThrown: false
Stack:
TypeError: Cannot read property 'append' of undefined
at Root.document.append (C:\Users\kjaveri\Desktop\postcss-html-test\node_modules\postcss-html\lib\parser.js:60:12)
at stmt.nodes.forEach.node (C:\Users\kjaveri\Desktop\postcss-html-test\node_modules\postcss-import\index.js:122:16)
at Array.forEach ()
at bundle.forEach.stmt (C:\Users\kjaveri\Desktop\postcss-html-test\node_modules\postcss-import\index.js:120:18)
at Array.forEach ()
at applyStyles (C:\Users\kjaveri\Desktop\postcss-html-test\node_modules\postcss-import\index.js:112:10)
at parseStyles.then.bundle (C:\Users\kjaveri\Desktop\postcss-html-test\node_modules\postcss-import\index.js:55:7)
at

It complains about this.last being undefined hence causing the append to fail.

Attached is the sample code to help reproduce this issue. Run npm intall and then npm test which would invoke the gulp task.
postcss-html-test.zip

Thanks!