Tailwind CSS as a templating language in JS and CSS-in-JS

  • By Arthur Petrie
  • Last update: Nov 26, 2022
  • Comments: 17

tailwindcssinjs

This repo contains a collection of packages that makes the integration of Tailwind with CSS-in-JS libraries easier.

Why does this exist?

You may have encountered some of these problems when using Tailwind with CSS-in-JS libraries.

  • You have to use PurgeCSS to get the minimal CSS file, PurgeCSS relies on string matching
  • No warnings when misspelling, refactoring or using a class that doesn't exist
  • Inline classes can get very long and hard to read
  • You have to specify the variants for utility classes in tailwind.config.js

Features / Goals

  • Solve all of the above problems
  • Automatically compatible with latest Tailwind version 2.X.X
  • New syntax to apply variants to multiple utility classes md:hover[text-xs font-normal]
  • Reacts to changes in made in tailwind.config.js
  • Great developer experience with VS Code extension or typescript-xwind-plugin
  • No runtime impact all transformations happen during build time
  • Plugins to support any/your favorite CSS-in-JS syntax

Support for all Tailwind features:

  • All utility and component classes
  • All variant utility classes enabled
  • Full support for custom classes and tailwind.config.js customization
  • Supports Tailwind plugins (@tailwindcss/typography, @tailwindcss/forms, ...)

Packages

xwind

xwind uses a babel plugin that transforms Tailwind classes into CSS object styles or a classes string. The CSS object styles output can be used with your favorite CSS-in-JS library like emotion, styled-components ... The classes string output can be used with the xwind cli to generate a minimal css file of the used Tailwind classes.

Output mode "objectstyles" example

import xw from "xwind";

const styles = xw`text-red-100 hover:text-green-100 hover:bg-blue-200`;
// OR (with custom array syntax)
const styles = xw`text-red-100 hover[text-green-100 bg-blue-200]`;

Transforms by default into Postcss-js / JSS compatible syntax:

const styles = {
  "--text-opacity": "1",
  color: ["#fde8e8", "rgba(253, 232, 232, var(--text-opacity))"],
  "&:hover": {
    "--text-opacity": "1",
    "--bg-opacity": "1",
    color: ["#def7ec", "rgba(222, 247, 236, var(--text-opacity))"],
    backgroundColor: ["#c3ddfd", "rgba(195, 221, 253, var(--bg-opacity))"],
  },
};

Transform to CSS string syntax with the css plugin:

const styles = `
  --text-opacity: 1;
  color: #fde8e8;
  color: rgba(253, 232, 232, var(--text-opacity));
  &:hover {
    --text-opacity: 1;
    --bg-opacity: 1;
    color: #def7ec;
    color: rgba(222, 247, 236, var(--text-opacity));
    background-color: #c3ddfd;
    background-color: rgba(195, 221, 253, var(--bg-opacity));
  }
`;

objectstyles plugins make it possible to support any CSS-in-JS library syntax.

Output mode "classes" example

import xw from "xwind";

const styles = xw`text-red-100 hover:text-green-100 hover:bg-blue-200`;
// OR (with custom array syntax)
const styles = xw`text-red-100 hover[text-green-100 bg-blue-200]`;

Transforms into a classes string:

const styles = "text-red-100 hover:text-green-100 hover:bg-blue-200";

Generate the css output with with the xwind cli:

npx run xwind

Output file "/src/styles/xwind.css":

/*! Generated with xwind | https://github.com/arthie/xwind */
.hover\:bg-blue-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
}
.text-red-100 {
  --tw-text-opacity: 1;
  color: rgba(254, 226, 226, var(--tw-text-opacity));
}
.hover\:text-green-100:hover {
  --tw-text-opacity: 1;
  color: rgba(220, 252, 231, var(--tw-text-opacity));
}

Full xwind package documentation

typescript-xwind-plugin

This package is a typescript language service plugin that adds editor support for xwind tagged template syntax: xw`...` or tw`...`

autocomplete

xwind VS Code extension

This extension activates typescript-xwind-plugin inside VS Code's Typescript language service.

Developer packages

Want to create Tailwind tools with javascript? Have a look at these packages they make the xwind and typescript-xwind-plugin possible.

@xwind/class-utilities

The class-utilities package contains flexible utilities to compose and parse Tailwind classes.

@xwind/core (WIP)

The core package uses Tailwind internals to extracts/generate all the data you could want from Tailwind. It provides the data in a structured way with the necessary utilities to create and manipulate this data.

Non-Affiliation disclaimer

This project is not affiliated, associated, authorized, endorsed by, or in any way officially connected with Tailwind Labs Inc., or any of its subsidiaries or its affiliates. The name Tailwind as well as related names, marks, emblems and images are registered trademarks of their respective owners.

The official Tailwind website can be found at https://tailwindcss.com/.

Please contact the project ower if there are any concerns regarding: Tailwind CSS brand assets and usage guidelines.

License

MIT. Copyright (c) 2020 Arthur Petrie.

Github

https://github.com/Arthie/tailwindcssinjs

Comments(17)

  • 1

    Support for experimental dark mode

    Hi there,

    When I try to use experimental dark mode, I get an error:

    Error: Utility with variant class 'dark' not found"
    at @tailwindcssinjs/tailwindcss-data/lib/transformers/getGenerateTwClassSubstituteRoot.js:52:27

    Here's the snippet:

    tw`dark[from-blue-400 via-pink-500 to-red-400 bg-gradient-to-tr]`

    Here's the config file:

    module.exports = {
  experimental: {
    darkModeVariant: true
  },
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  },
  purge: {
    content: ['./src/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}']
  },
  important: true,
  dark: 'class',
  plugins: [
    require('@tailwindcss/typography')({
      modifiers: []
    }),
    require('@tailwindcss/ui')
  ]
}

    Interestingly, the vscode plugin renders a tooltip correctly: Screen Shot 2020-09-21 at 5 30 25 PM

    Any thoughts? :)

  • 2

    Font weight not generated with removeFallbacks plugin

    With the removeFallbacks plugin, font-weight is not generated anymore since the update to tailwindcss 2.0 and xwind.

    With the removeFallbacks plugin, twfont-bold emits an empty fontWeight object

  • 3

    v14.1 broken path for tailwindcss-data

    error - ./node_modules/@tailwindcssinjs/macro/lib/tailwindcssinjs.js:9:0
Module not found: Can't resolve '../../tailwindcss-data/lib/utilities'

    After upgrading from v13 to v14 now getting this coming from macros

  • 4

    Allow customizable tailwind config file location

    First off, thanks for making this library @Arthie! Really great work.

    I'm using this package with create-react-app and emotion. I'd like to be able to import my tailwind config and pass it to emotion's theme provider. In order to do this with create-react-app however, the tailwind config has to be under the src folder.

    This PR adds the ability to specify a custom config file path using babel-plugin-macros' config option. This allows the user to specify a configFilePath under the tailwindcssinjs config. For example, in package.json you can do:

    "babelMacros": {
 "tailwindcssinjs": {
    "configFilePath": "src/tailwind.config.js"
  }
}

    Let me know what you think! 🙂 If you are okay with this change I can include updated documentation on this PR as well.

  • 5

    [BABEL] Error unknown: Preset

    i am trying to add @tailwindcssinjs/macro to existing nextjs app with ant design and i got this error

    ./pages/index.js
MacroError: /home/darwis/dev/with-ant-design-app/pages/index.js: Error: @tailwindcssinjs/macro - [BABEL] unknown: Preset /* your preset */ requires a filename to be set when babel is called directly,

babel.transform(code, { filename: 'file.ts', presets: [/* your preset */] });

See https://babeljs.io/docs/en/options#filename for more information.

    its working when using macro from tailwind.macro

  • 6

    Styled-components doesn't support fallbacks (Wrong compiled colors with tailwind >1.4.x)

    Hey!

    I just tried your library because it supports the latest versions of tailwind out of the box. However, I've had some issue with colors being wrongly generated.

    I have the following styled component:

    const SelectableRowContainer = styled.div<SelectableRowProps>`
  ${props => (props.selected ? tw`border-yellow-500` : tw`border-gray-300`)};
  ${tw`border-solid border-2 w-full cursor-pointer flex`};
`

    When compiling it with Babel, it generates the following:

    var SelectableRowContainer = _styledComponents["default"].div.withConfig({
  displayName: "SelectableRow__SelectableRowContainer",
  componentId: "sc-1rdb9br-0"
})(["", ";", ";"], function (props) {
  return props.selected ? {
    "--border-opacity": "1",
    "borderColor": ["#ecc94b", "rgba(236, 201, 75, var(--border-opacity))"]
  } : {
    "--border-opacity": "1",
    "borderColor": ["#e2e8f0", "rgba(226, 232, 240, var(--border-opacity))"]
  };
}, {
  "borderStyle": "solid",
  "borderWidth": "2px",
  "width": "100%",
  "cursor": "pointer",
  "display": "flex"
});

    The --border-opacity variable shouldn't be there. This generates the css: border-color: #e2e8f0", "rgba(226, 232, 240, var(--border-opacity)) which is invalid. I had the same issue with a background-color.

    I'm using @tailwindcssinjs/macro 0.3.1 and tailwindcss 1.4.4

  • 7

    typescript-xwind-plugin: Auto complete not working without VS Code xwind plugin

    Firstly thanks for the project @Arthie , it is easy to setup and make developer experience better IMO.

    I wanted to enable auto complete for tw classes without installing xwind VS Code Extension. I followed the steps in typescript-xwind-plugin page but I couldn't make it work.

    Checklist:

    • [x] Typescript configured in with-tailwindcss-emotion setup as explained nextjs official document
    • [x] VS Code uses the same TS version as the workspace which is 4.1.3
    • [x] Absolute filepath to tailwind config in tsconfig.json : C:/Users/tkaplan/Documents/projects/xwind-test/react-app/tailwind.config.js (also tried ./tailwind.config.js)
    • [x] Restarted VS Code.
  • 8

    Changes to the tailwind.config.js not taking effect in the xw types

    I adjusted the tailwindcss theme, but my changes are not showing on the xw types and it logs errors

    // tailwind.config.js
module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        green: "#00AF54",
        "yellow-dark": "#FBAF00",
        "yellow-light": "#FFD639",
        pink: "#FFA3AF",
        blue: "#007CBE",
      },
    },
  },
  variants: {},
  plugins: [],
  // xwind options
  xwind: {
    mode: "objectstyles",
  },
};

     <div
      css={xw`h-screen bg-gray-800 flex justify-center items-center bg-yellow-dark`}
    >

    the error says "bg-yellow-dark is not a tailwind class, but its still works on the browser

    I got the template from nextjs template for emotion and tailwindcss

    Please help out🥺🥺

  • 9

    nextjs example run error

    current document example err "Codesandbox with Typescript, Nextjs and Emotion"

    event - build page: /
Warning: viewport meta tags should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-viewport-meta
Could not find files for / in .next/build-manifest.json
Could not find files for / in .next/build-manifest.json
Warning: viewport meta tags should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-viewport-meta
Could not find files for / in .next/build-manifest.json
Could not find files for / in .next/build-manifest.json
error - ./node_modules/fs.realpath/index.js:8:0
Module not found: Can't resolve 'fs'
null

    and https://github.com/vercel/next.js/blob/canary/examples/with-tailwindcss-emotion/README.md

    example run same error

  • 10

    help with tailwindcss-data usage

    Hey folks,

    I'm interested in building a tailwind cheatsheet which should be able to programmatically generate a list of tailwind classes given a config. I think tailwindcss-data might be able to help me with this, but I don't quite get how it all fits together. It seems that, based on the usage inside macro and the typescript, it's not a simple procedure and requires lots of deeper postcss knowledge.

    Would you be willing help me out with a concise example on how to go from tailwindData(config, corePlugins) to a list of generated classnames?

    Thanks in advance!

  • 11

    css flicker

    Hello! Thanks for the great plugin, loving xwind so far (with nextjs). However, I'm getting some flicker (see https://easyblog-72jw8j77y.vercel.app), which is based off the nextjs starter. You can see the buttons flicker into position from lower to higher. https://www.loom.com/share/754773e26397462f852001c9b9fbb91d (here's a video if it's not showing on your end).

    I tried to inline critical css to see if that would help, but emotion doesn't seem to be pulling any styles, not sure if it's trying to pull them before they're processed by xwind?

    I created a _document.js with the following to extract critical. Any ideas? Thanks!

    import Document, { Html, Head, Main, NextScript } from 'next/document'
import { extractCritical } from '@emotion/server'

class MyDocument extends Document {

    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        const page = await ctx.renderPage()
        const styles = extractCritical(page.html)
        return { ...initialProps, ...page, ...styles }
    }

    render() {
        return (
            <Html lang="en">
                <Head>
                    <style
                        data-emotion-css={this.props.ids.join(' ')}
                        dangerouslySetInnerHTML={{ __html: this.props.css }}
                    />`
               </Head>
                       <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument
  • 12

    Bump json5 from 2.1.3 to 2.2.3

    Bumps json5 from 2.1.3 to 2.2.3.

    Release notes

    Sourced from json5's releases.

    v2.2.3

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)
    Changelog

    Sourced from json5's changelog.

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)
    Commits
    • c3a7524 2.2.3
    • 94fd06d docs: update CHANGELOG for v2.2.3
    • 3b8cebf docs(security): use GitHub security advisories
    • f0fd9e1 docs: publish a security policy
    • 6a91a05 docs(template): bug -> bug report
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 13

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 14

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 15

    Bump minimatch from 3.0.4 to 3.1.2

    Bumps minimatch from 3.0.4 to 3.1.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 16

    Bump jsdom from 16.4.0 to 16.7.0

    Bumps jsdom from 16.4.0 to 16.7.0.

    Release notes

    Sourced from jsdom's releases.

    Version 16.7.0

    • Added AbortSignal.abort(). (ninevra)
    • Added dummy x and y properties to the return value of getBoundingClientRect(). (eiko)
    • Implemented wrapping for textareaEl.value if the wrap="" attribute is specified. (ninevra)
    • Changed newline normalization in <textarea>s according to recent HTML Standard updates. (ninevra)
    • Fixed some bad cascade computation in getComputedStyle(). (romain-trotard)

    Version 16.6.0

    • Added parentNode.replaceChildren(). (@​ninevra)
    • Fixed jsdom's handling of when code running inside the jsdom throws null or undefined as an exception. (@​mbest)
    • Removed the dependency on the deprecated request package, in the process fixing several issues with the XMLHttpRequest implementation around header processing. Thanks go to @​tobyhinloopen, @​andrewaylett, and especially @​vegardbb, for completing this months-long effort!

    Version 16.5.3

    • Fixed infinite recursion when using MutationObservers to observe elements inside a MutationObserver callback.

    Version 16.5.2

    • Fixed Access-Control-Allow-Headers: * to work with XMLHttpRequest. (silviot)
    • Fixed xhr.response to strip any leading BOM when xhr.responseType is "json".
    • Fixed new Text() and new Comment() constructors to properly set the resulting node's ownerDocument.
    • Fixed customElements.whenDefined() to resolve its returned promise with the custom element constructor, per recent spec updates. (ExE-Boss)
    • Fixed parsing to ensure that <svg>\<template></template></svg> does not throw an exception, but instead correctly produces a SVG-namespace \<template> element.
    • Fixed domParser.parseFromString() to treat <noscript> elements appropriately.
    • Fixed form control validity checking when the control was outside the <form> element and instead associated using the form="" attribute.
    • Fixed legendEl.form to return the correct result based on its parent <fieldset>.
    • Fixed optionEl.text to exclude <script> descendants.
    • Fixed radio buttons and checkboxes to not fire input and change events when disconnected.
    • Fixed inputEl.indeterminate to reset to its previous value when canceling a click event on a checkbox or radio button.
    • Fixed the behavior of event handler attributes (e.g. onclick="...code...") when there were global variables named element or formOwner. (ExE-Boss)
    • On Node.js v14.6.0+ where WeakRefs are available, fixed NodeIterator to no longer stop working when more than ten NodeIterator instances are created, and to use less memory due to inactive NodeIterators sticking around. (ExE-Boss)

    Version 16.5.1

    • Fixed a regression that broke customElements.get() in v16.5.0. (fdesforges)
    • Fixed window.event to have a setter which overwrites the window.event property with the given value, per the specification. This fixes an issue where after upgrading to jsdom v16.5.0 you would no longer be able to set a global variable named event in the jsdom context.

    Version 16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.
    • Fixed <input type=checkbox> and <input type=radio> to be mutable even when disabled, per a spec update.
    • Fixed XMLHttpRequest to not fire a redundant final progress event if a progress event was previously fired with the same loaded value. This would usually occur with small files.
    • Fixed XMLHttpRequest to expose the Content-Length header on cross-origin responses.
    • Fixed xhr.response to return null for failures that occur during the middle of the download.
    • Fixed edge cases around passing callback functions or event handlers. (ExE-Boss)
    • Fixed edge cases around the properties of proxy-like objects such as localStorage or dataset. (ExE-Boss)

    ... (truncated)

    Changelog

    Sourced from jsdom's changelog.

    16.7.0

    • Added AbortSignal.abort(). (ninevra)
    • Added dummy x and y properties to the return value of getBoundingClientRect(). (eiko)
    • Implemented wrapping for textareaEl.value if the wrap="" attribute is specified. (ninevra)
    • Changed newline normalization in <textarea>s according to recent HTML Standard updates. (ninevra)
    • Fixed some bad cascade computation in getComputedStyle(). (romain-trotard)

    16.6.0

    • Added parentNode.replaceChildren(). (ninevra)
    • Fixed jsdom's handling of when code running inside the jsdom throws null or undefined as an exception. (mbest)
    • Removed the dependency on the deprecated request package, in the process fixing several issues with the XMLHttpRequest implementation around header processing. Special thanks to vegardbb for completing this months-long effort!

    16.5.3

    • Fixed infinite recursion when using MutationObservers to observe elements inside a MutationObserver callback.

    16.5.2

    • Fixed Access-Control-Allow-Headers: * to work with XMLHttpRequest. (silviot)
    • Fixed xhr.response to strip any leading BOM when xhr.responseType is "json".
    • Fixed new Text() and new Comment() constructors to properly set the resulting node's ownerDocument.
    • Fixed customElements.whenDefined() to resolve its returned promise with the custom element constructor, per recent spec updates. (ExE-Boss)
    • Fixed parsing to ensure that <svg>\<template></template></svg> does not throw an exception, but instead correctly produces a SVG-namespace \<template> element.
    • Fixed domParser.parseFromString() to treat <noscript> elements appropriately.
    • Fixed form control validity checking when the control was outside the <form> element and instead associated using the form="" attribute.
    • Fixed legendEl.form to return the correct result based on its parent <fieldset>.
    • Fixed optionEl.text to exclude <script> descendants.
    • Fixed radio buttons and checkboxes to not fire input and change events when disconnected.
    • Fixed inputEl.indeterminate to reset to its previous value when canceling a click event on a checkbox or radio button.
    • Fixed the behavior of event handler attributes (e.g. onclick="...code...") when there were global variables named element or formOwner. (ExE-Boss)
    • On Node.js v14.6.0+ where WeakRefs are available, fixed NodeIterator to no longer stop working when more than ten NodeIterator instances are created, and to use less memory due to inactive NodeIterators sticking around. (ExE-Boss)

    16.5.1

    • Fixed a regression that broke customElements.get() in v16.5.0. (fdesforges)
    • Fixed window.event to have a setter which overwrites the window.event property with the given value, per the specification. This fixes an issue where after upgrading to jsdom v16.5.0 you would no longer be able to set a global variable named event in the jsdom context.

    16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 17

    Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

Popular Tag

Related