Skip to content

media attribute contents are missing in the AST #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
romainmenke opened this issue Sep 3, 2022 · 4 comments
Open

media attribute contents are missing in the AST #70

romainmenke opened this issue Sep 3, 2022 · 4 comments

Comments

@romainmenke
Copy link
Contributor

romainmenke commented Sep 3, 2022 •
edited
Loading

I might be overlooking something but it seems that media attribute contents of style tags are missing in the AST.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.foo {
			color: red;
		}
	</style>
	<style media="(min-width: 500px)">
		.foo {
			color: green;
		}
	</style>
</head>
<body>
</body>
</html>

I would expect the media contents (min-width: 500px) to be present in the AST.
They are there as part of raws.codeBefore but this is a raw string.

To add support for Document and postcss-html in postcss-preset-env we need to be able to distinguish unconditional from conditional style tags.

Is this something that can be added?

This might need to be part of the PostCSS API, so we don't need to have syntax plugin specific code in postcss-preset-env.

AST

[
  <ref *2> Root {
    raws: {
      semicolon: false,
      after: '\n',
      codeBefore: '<!DOCTYPE html>\n' +
        '<html lang="en">\n' +
        '<head>\n' +
        '\t<meta charset="UTF-8">\n' +
        '\t<meta http-equiv="X-UA-Compatible" content="IE=edge">\n' +
        '\t<meta name="viewport" content="width=device-width, initial-scale=1.0">\n' +
        '\t<title>Document</title>\n' +
        '\t<style>\n'
    },
    type: 'root',
    nodes: [ [Rule] ],
    source: {
      input: [Input],
      start: [Object],
      inline: false,
      lang: 'css',
      syntax: [Object]
    },
    lastEach: 1,
    indexes: {},
    document: <ref *1> Document {
      raws: {},
      type: 'document',
      nodes: [Array],
      source: [Object],
      proxyCache: [Circular *1],
      [Symbol(isClean)]: true,
      [Symbol(my)]: true
    },
    proxyCache: [Circular *2],
    [Symbol(isClean)]: false,
    [Symbol(my)]: true
  },
  <ref *3> Root {
    raws: {
      semicolon: false,
      after: '\n',
      codeBefore: '\t</style>\n\t<style media="(min-width: 500px)">\n',
      codeAfter: '\t</style>\n</head>\n<body>\n</body>\n</html>\n'
    },
    type: 'root',
    nodes: [ [Rule] ],
    source: {
      input: [Input],
      start: [Object],
      inline: false,
      lang: 'css',
      syntax: [Object]
    },
    lastEach: 1,
    indexes: {},
    document: <ref *1> Document {
      raws: {},
      type: 'document',
      nodes: [Array],
      source: [Object],
      proxyCache: [Circular *1],
      [Symbol(isClean)]: true,
      [Symbol(my)]: true
    },
    proxyCache: [Circular *3],
    [Symbol(isClean)]: false,
    [Symbol(my)]: true
  }
]
@romainmenke romainmenke mentioned this issue Sep 3, 2022
Closed
3 tasks
@ota-meshi
Copy link
Owner

Thank you for posting the report.

Hmm... I think it might be difficult to include the media attribute in the node with the current design.
Perhaps we need to separate the attribute information from raws.codeBefore and make stringify work well even if the attribute is edited.

@romainmenke
Copy link
Contributor Author

make stringify work well even if the attribute is edited.

We do not have an immediate need to edit the contents.
We do have to know if the style tag is conditional or not.

There currently already exists an inline flag which is true for <div style=".."> but false for <style>...

A conditional flag would be true for <style media="...">...

    source: {
      input: [Input],
      start: [Object],
      inline: false,
      conditional: true,
      lang: 'css',
      syntax: [Object]
    },

@ota-meshi
Copy link
Owner

If we don't consider stringify, we just attach attribute information to the root node. I will try to work on it when I have time 👍
However, if you're in a hurry to fix it, PRs are welcome!

@romainmenke
Copy link
Contributor Author

This is very low prio for us and totally fine if it can't be done :)

It would be nice if users of postcss-html can use every plugin from postcss-preset-env, but nothing is broken without this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@romainmenke @ota-meshi