Add TailwindCSS type definitions #50921

dolanmiu · 2021-01-29T21:08:01Z

Please fill in this template.

Use a meaningful title for the pull request. Include the name of the package modified.
Test the change in your own code. (Compile and run.)
Add or edit tests to reflect the change.
Follow the advice from the readme.
Avoid common mistakes.
Run npm test <package to test>.

Select one of these and delete the others:

If adding a new definition:

The package does not already provide its own types, or cannot have its .d.ts files generated via --declaration
If this is for an npm package, match the name. If not, do not conflict with the name of an npm package.
Create it with dts-gen --dt, not by basing it on an existing project.
Represents shape of module/library correctly
tslint.json should contain { "extends": "dtslint/dt.json" }, and no additional rules.
tsconfig.json should have noImplicitAny, noImplicitThis, strictNullChecks, and strictFunctionTypes set to true.

Documentation for why:

https://tailwindcss.com/docs/configuration#referencing-in-java-script

See "Referencing in JavaScript"

typescript-bot · 2021-01-29T21:08:36Z

@dolanmiu Thank you for submitting this PR!

This is a live comment which I will keep updated.

1 package in this PR

tailwindcss (new!) on npm, on unpkg
- 1 added owner: ✎@dolanmiu

Code Reviews

This PR adds a new definition, so it needs to be reviewed by a DT maintainer before it can be merged.

Status

✅ No merge conflicts
✅ Continuous integration tests have passed
❌ Only a DT maintainer can approve changes when there are new packages added

Once every item on this list is checked, I'll ask you for permission to merge and publish the changes.

Diagnostic Information: What the bot saw about this PR

{
  "type": "info",
  "now": "-",
  "pr_number": 50921,
  "author": "dolanmiu",
  "headCommitOid": "3b1d1f5606b2c4285967613d183139d4d083226f",
  "lastPushDate": "2021-03-01T22:40:14.000Z",
  "lastActivityDate": "2021-03-01T22:57:05.000Z",
  "maintainerBlessed": false,
  "hasMergeConflict": false,
  "isFirstContribution": false,
  "popularityLevel": "Well-liked by everyone",
  "pkgInfo": [
    {
      "name": "tailwindcss",
      "kind": "add",
      "files": [
        {
          "path": "types/tailwindcss/colors.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/tailwindcss/defaultTheme.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/tailwindcss/index.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/tailwindcss/resolveConfig.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/tailwindcss/tailwind-config.d.ts",
          "kind": "definition"
        },
        {
          "path": "types/tailwindcss/tailwindcss-tests.ts",
          "kind": "test"
        },
        {
          "path": "types/tailwindcss/tsconfig.json",
          "kind": "package-meta-ok"
        },
        {
          "path": "types/tailwindcss/tslint.json",
          "kind": "package-meta-ok"
        }
      ],
      "owners": [],
      "addedOwners": [
        "dolanmiu"
      ],
      "deletedOwners": [],
      "popularityLevel": "Well-liked by everyone"
    }
  ],
  "reviews": [
    {
      "type": "stale",
      "reviewer": "amcasey",
      "date": "2021-03-01T22:33:15.000Z",
      "abbrOid": "8d91a82"
    },
    {
      "type": "stale",
      "reviewer": "themagickoala",
      "date": "2021-02-18T23:08:45.000Z",
      "abbrOid": "8d91a82"
    },
    {
      "type": "stale",
      "reviewer": "aivenkimmob",
      "date": "2021-02-18T12:19:24.000Z",
      "abbrOid": "8d91a82"
    },
    {
      "type": "stale",
      "reviewer": "peterblazejewicz",
      "date": "2021-02-14T19:50:05.000Z",
      "abbrOid": "8d91a82"
    },
    {
      "type": "stale",
      "reviewer": "sheetalkamat",
      "date": "2021-01-29T22:55:24.000Z",
      "abbrOid": "2049749"
    }
  ],
  "ciResult": "pass"
}

typescript-bot · 2021-01-29T21:08:37Z

🔔 @dolanmiu — you're the only owner, but it would still be good if you find someone to review this PR in the next few days, otherwise a maintainer will look at it. (And if you do find someone, maybe even recruit them to be a second owner to make future changes easier...)

danger-public · 2021-01-29T21:12:09Z

Inspecting the JavaScript source for this package found some properties that are not in the .d.ts files.
The check for missing properties isn't always right, so take this list as advice, not a requirement.

tailwindcss (`unpkg`)

was missing the following properties:

postcss

Generated by 🚫 dangerJS against 8d91a82

typescript-bot · 2021-01-29T21:15:26Z

👋 Hi there! I’ve run some quick measurements against master and your PR. These metrics should help the humans reviewing this PR gauge whether it might negatively affect compile times or editor responsiveness for users who install these typings.

Let’s review the numbers, shall we?

These typings are for a package that doesn’t yet exist on master, so I don’t have anything to compare against yet! In the future, I’ll be able to compare PRs to tailwindcss with its source on master.

Comparison details 📊

Batch compilation
Type count	3825
Assignability cache size	396

Language service measurements
Samples taken	522
Identifiers in tests	522
`getCompletionsAtPosition`
Mean duration (ms)	72.8
Mean CV	16.2%
Worst duration (ms)	108.1
Worst identifier	opacity
`getQuickInfoAtPosition`
Mean duration (ms)	74.8
Mean CV	14.2%
Worst duration (ms)	116.3
Worst identifier	white

System information
Node version	v14.15.4
CPU count	2
CPU speed	2.095 GHz
CPU model	Intel(R) Xeon(R) Platinum 8171M CPU @ 2.60GHz
CPU Architecture	x64
Memory	6.8 GiB
Platform	linux
Release	4.15.0-1103-azure

types/tailwindcss/index.d.ts

types/tailwindcss/tslint.json

typescript-bot · 2021-01-29T22:56:02Z

@dolanmiu One or more reviewers has requested changes. Please address their comments. I'll be back once they sign off or you've pushed new commits. Thank you!

dolanmiu · 2021-01-30T01:05:21Z

Inspecting the JavaScript source for this package found some properties that are not in the .d.ts files.
The check for missing properties isn't always right, so take this list as advice, not a requirement.

tailwindcss (unpkg)

was missing the following properties:

The declaration doesn't match the JavaScript module 'tailwindcss'. Reason:
The JavaScript module can be called or constructed, but the declaration module cannot.

The most common way to resolve this error is to use 'export =' syntax.
To learn more about 'export =' syntax, see https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require.

postcss

Generated by 🚫 dangerJS against 2049749

This is now done

typescript-bot · 2021-01-30T01:10:08Z

@sheetalkamat Thank you for reviewing this PR! The author has pushed new commits since your last review. Could you take another look and submit a fresh review?

dolanmiu · 2021-02-01T13:14:44Z

@sheetalkamat Could you take a look again please?

amcasey · 2021-02-01T18:18:40Z

types/tailwindcss/tailwind-config.d.ts

@@ -0,0 +1,1186 @@
+export type Variant =


This appears to be a types-only file without a corresponding module in the underlying library. Am I reading that correctly? Is the goal just to prevent consumers from accidentally importing the types? If not, why not just include them in index.d.ts? Possible issues: if a consumer does import this file, will the import still be present at runtime? What happens if the underlying library adds a module with this name (unlikely, since it doesn't seem to follow their naming conventions)?

Separation of concerns

tailwind-config.d.ts is really big (way over 1000+ lines long), and I did not want to pollute index.d.ts

This library does not export anything of the sort, I had to manually infer this from the documentation.

Similar to how in @types/webpack type definitions, there is a Configuration interface which is no where to be found in webpack itself. This is my goal

Sorry, I'm not sure I understand. What concerns are you separating? It seems like tailwind-config.d.ts contains the types that are necessary for the declarations in index.d.ts. If you don't want consumers to see the helper types, just don't export them.

I don't follow your point about webpack. There's nothing wrong with adding types not found in the underlying library - that's the point of DefinitelyTyped. My concern is with adding a package not found in the underlying library. Does webpack do that?

This type definition has zero dependencies, so surely this would not be a problem?

Ok, I could move tailwind-config.d.ts into index.d.ts if that is better? what do you think?

I'm not sure what you mean by "zero dependencies". If you mean that it doesn't depend on anything, I don't think that's relevant to the file organization. If you mean that nothing depends on it, I think that's only because it hasn't been merged yet - it seems to be quite a popular package.

Yes, as @peterblazejewicz and I have explained, having modules that don't exist in the underlying library makes it more likely that a user will consume it incorrectly and have problems at runtime.

types/tailwindcss/index.d.ts

types/tailwindcss/resolveConfig.d.ts

peterblazejewicz · 2021-02-02T22:23:03Z

types/tailwindcss/resolveConfig.d.ts

@@ -0,0 +1,5 @@
+import { TailwindConfig } from './tailwind-config';


there is no './tailwind-config.jsin the source, why this cannot belib/util/resolveConfig` import?

It can't be lib/util/resolveConfig because it has to be:

import resolveConfig from 'tailwindcss/resolveConfig'

Is this what you mean?

Source:

https://tailwindcss.com/docs/configuration#referencing-in-java-script

This is how to consume the package IMO, not how it's written:
https://github.com/tailwindlabs/tailwindcss/blob/master/resolveConfig.js#L4
https://unpkg.com/tailwindcss@2.0.2/resolveConfig.js
this methods returns outcome of calling the resolvveConfigObjects:

const resolveConfigObjects = require('./lib/util/resolveConfig').default

you can of course skip 'lib/util/resolveConfig' details and just write shared types somewhere. But I'd not create some artificial file for those, just put them into 'index.d.ts' as shared interfaces (types).

Co-authored-by: Piotr Błażejewicz (Peter Blazejewicz) <peterblazejewicz@users.noreply.github.com>

types/tailwindcss/index.d.ts

Co-authored-by: Piotr Błażejewicz (Peter Blazejewicz) <peterblazejewicz@users.noreply.github.com>

types/tailwindcss/resolveConfig.d.ts

aivenkimmob

I'd be tempted to tick the "request changes" but not sure if I misunderstood the big picture here.

types/tailwindcss/tailwind-config.d.ts

amcasey

Can you please address @aivenkimmob's question? The types shouldn't preclude common usage patterns.

typescript-bot · 2021-02-18T17:53:30Z

@dolanmiu One or more reviewers has requested changes. Please address their comments. I'll be back once they sign off or you've pushed new commits. Thank you!

dolanmiu · 2021-02-18T21:46:25Z

Can you please address @aivenkimmob's question? The types shouldn't preclude common usage patterns.

done

dolanmiu · 2021-03-01T21:14:25Z

Could someone merge this in? Everything is addressed

Co-authored-by: Piotr Błażejewicz (Peter Blazejewicz) <peterblazejewicz@users.noreply.github.com>

dolanmiu · 2021-03-01T22:32:00Z

@amcasey I had to revert the export = resolveConfig; change on resolveConfig.d.ts as it broke the tests

ERROR: 1:8  expect  TypeScript@4.2 compile error: 
Module '"/Users/dmiu/DefinitelyTyped/types/tailwindcss/resolveConfig"' can only be default-imported using the 'esModuleInterop' flag

typescript-bot · 2021-03-01T22:32:38Z

@dolanmiu The CI build failed! Please review the logs for more information.

Once you've pushed the fixes, the build will automatically re-run. Thanks!

typescript-bot · 2021-03-01T22:38:23Z

@amcasey, @themagickoala, @aivenkimmob, @peterblazejewicz, @sheetalkamat Thank you for reviewing this PR! The author has pushed new commits since your last review. Could you take another look and submit a fresh review?

amcasey · 2021-03-01T22:49:45Z

@amcasey I had to revert the export = resolveConfig; change on resolveConfig.d.ts as it broke the tests
ERROR: 1:8  expect  TypeScript@4.2 compile error: 
Module '"/Users/dmiu/DefinitelyTyped/types/tailwindcss/resolveConfig"' can only be default-imported using the 'esModuleInterop' flag

The error is correct - you need a default export to use a default import. I'm confused because the underlying code does not appear to have a default export. However, as you point out, the docs suggest doing it this way, so I'm fine with reverting the export.

typescript-bot · 2021-03-08T19:48:04Z

I just published @types/tailwindcss@2.0.0 to npm.

Add TailwindCSS type definitions

2049749

typescript-bot added New Definition This PR creates a new definition package. Check Config Changes a module config files labels Jan 29, 2021

typescript-bot added this to Needs Maintainer Action in New Pull Request Status Board Jan 29, 2021

sheetalkamat requested changes Jan 29, 2021

View reviewed changes

types/tailwindcss/index.d.ts Outdated Show resolved Hide resolved

types/tailwindcss/tslint.json Outdated Show resolved Hide resolved

typescript-bot added the Revision needed This PR needs code changes before it can be merged. label Jan 29, 2021

typescript-bot moved this from Needs Maintainer Action to Needs Author Action in New Pull Request Status Board Jan 29, 2021

Addressing PR comments

2bcc5ee

typescript-bot removed Check Config Changes a module config files Revision needed This PR needs code changes before it can be merged. labels Jan 30, 2021

typescript-bot moved this from Needs Author Action to Waiting for Code Reviews in New Pull Request Status Board Jan 30, 2021

typescript-bot moved this from Waiting for Code Reviews to Needs Maintainer Action in New Pull Request Status Board Jan 30, 2021

dolanmiu requested a review from sheetalkamat January 30, 2021 17:11

amcasey reviewed Feb 1, 2021

View reviewed changes