csstools / css-has-pseudo Goto Github PK

Since we can't modify CSS rules in those stylesheets anyway, it is probably better to skip them when walking through document.styleSheets. Otherwise, css-has-pseudo will encounter an exception and stop.

Steps to reproduce

• Add the following stylesheet to the HTML:

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&amp;display=swap" rel="stylesheet" />

• Executes cssHasPseudo(document);

Expected Result

The same-domain stylesheets should be parsed normally.

Actual Result

Nothing happens, as the script encounters the following exception, and silently stops.

DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

I have no idea how to get this plugin up and running in a NuxtJS project.

When doing this in nuxt.config.js:

build: {
  postcss: {
    plugins: {
      'css-has-pseudo': {},
    },
  },
},

I get the following error:

window.setImmediate is a non-standard feature.

Maybe include a polyfill like setAsap?

I am trying to use css-has-pseudo in my vite (see vitejs.dev) project using React, Typscript and CSS Modules.
Though, postcss-preset-env is working just fine, css-has-pseudo/postcss is not.

postcss.config.js

const postcssPresetEnv  = require('postcss-preset-env');
const postcssHasPseudo = require('css-has-pseudo/postcss');

module.exports = {
  plugins: [
    postcssHasPseudo,
    postcssPresetEnv({ stage: 1 }),
  ]
}

RadioCard.module.css

.label:has(> .radio) {
  background-color: var(--colors-accent-base);
  border: 3px solid pink;
}

RadioCard.tsx

<label htmlFor={id} className={styles.label}>
  <input type="radio" id={id} className={styles.radio} name="test" />
</label>

package.json

{
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@vitejs/plugin-react": "^1.0.0",
    "css-has-pseudo": "^2.0.0",
    "postcss-preset-env": "^6.7.0",
    "typescript": "^4.3.2",
    "vite": "^2.6.4",
    "vite-plugin-svgr": "^0.4.0",
    "vite-tsconfig-paths": "^3.3.17"
  }
}

Requesting Google fonts via gatsby-plugin-typhography inserts:

<link href="//fonts.googleapis.com/css?family=Source+Serif+Pro:600|Source+Sans+Pro:400,400i,700" rel="stylesheet" type="text/css">

which results in the following error:

Uncaught (in promise) DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at walkStyleSheet

First: Thank you for this nice PostCSS plugin!

Unfortunately there's no selectorText property on CSSMediaRule objects.

It contains an array of cssRules instead, e.g.:

n.cssText
> "@media (max-width: 48em) {
>   .hPECmK { font-size: 2rem; }
> }

n.cssRules[0].selectorText
> ".hPECmK"

I tried to target a figure in a div via:

div:has(> figure) { border: 1px solid red; }

The (broken) HTML looks like this:

<div class="sc-bZQynM habWLe" :has(=""><figure>

I stepped into it with DevTools and saw:

cssText: "div[\:has\(\%3e\%20figure\)] { border: 1px solid red; }"

which happens here via encodeURICompnent I guess.

Is this encoding necessary?

EDIT: Scratch that; of course encoding > is necessary.. but somehow the HTML gets mangled though.