Add bundled version of `tailwindcss` and first-party plugins

packages/tailwindcss-language-server/package.json

@@ -22,6 +22,10 @@
   },
   "devDependencies": {
     "@parcel/watcher": "2.0.3",
+    "@tailwindcss/aspect-ratio": "0.4.0",
+    "@tailwindcss/forms": "0.4.0",
+    "@tailwindcss/line-clamp": "0.3.0",
+    "@tailwindcss/typography": "0.5.0",
     "@types/debounce": "1.2.0",
     "@types/node": "14.14.34",
     "@types/vscode": "1.52.0",
@@ -50,6 +54,7 @@
     "rimraf": "3.0.2",
     "semver": "7.3.2",
     "stack-trace": "0.0.10",
+    "tailwindcss": "3.0.11",
     "terser": "4.6.12",
     "typescript": "4.2.4",
     "vscode-languageserver": "7.0.0",

packages/tailwindcss-language-server/src/lib/hook.ts

@@ -2,6 +2,16 @@
  * Adapted from: https://github.com/elastic/require-in-the-middle
  */
 import Module from 'module'
+import plugins from './plugins'
+
+let bundledModules = {
+  ...plugins,
+  'tailwindcss/colors': require('tailwindcss/colors'),
+  'tailwindcss/defaultConfig': require('tailwindcss/defaultConfig'),
+  'tailwindcss/defaultTheme': require('tailwindcss/defaultTheme'),
+  'tailwindcss/resolveConfig': require('tailwindcss/resolveConfig'),
+  'tailwindcss/plugin': require('tailwindcss/plugin'),
+}
 
 export default class Hook {
   cache = {}
@@ -31,8 +41,22 @@ export default class Hook {
         return self._origRequire.apply(this, arguments)
       }
 
+      let filename
+
+      if (bundledModules.hasOwnProperty(request)) {
+        try {
           // @ts-ignore
-      let filename = Module._resolveFilename(request, this)
+          filename = Module._resolveFilename(request, this)
+        } catch (_) {
+          // if (plugins.hasOwnProperty(request)) {
+          //   console.log(`Using bundled version of \`${request}\`: v${plugins[request].version}`)
+          // }
+          return bundledModules[request].module || bundledModules[request]
+        }
+      } else {
+        // @ts-ignore
+        filename = Module._resolveFilename(request, this)
+      }
 
       // return known patched modules immediately
       if (self.cache.hasOwnProperty(filename)) {

packages/tailwindcss-language-server/src/lib/plugins.ts

@@ -0,0 +1,18 @@
+export default {
+  '@tailwindcss/aspect-ratio': {
+    module: require('@tailwindcss/aspect-ratio'),
+    version: require('@tailwindcss/aspect-ratio/package.json').version,
+  },
+  '@tailwindcss/forms': {
+    module: require('@tailwindcss/forms'),
+    version: require('@tailwindcss/forms/package.json').version,
+  },
+  '@tailwindcss/line-clamp': {
+    module: require('@tailwindcss/line-clamp'),
+    version: require('@tailwindcss/line-clamp/package.json').version,
+  },
+  '@tailwindcss/typography': {
+    module: require('@tailwindcss/typography'),
+    version: require('@tailwindcss/typography/package.json').version,
+  },
+}

packages/tailwindcss-language-server/src/lib/preflight.ts

@@ -0,0 +1,367 @@
+export default `/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: currentColor; /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured \`sans\` font-family by default.
+*/
+
+html {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured \`mono\` font family by default.
+2. Correct the odd \`em\` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to \`inherit\` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: theme('colors.gray.400', #9ca3af); /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+Ensure the default browser behavior of the \`hidden\` attribute.
+*/
+
+[hidden] {
+  display: none;
+}`

packages/tailwindcss-language-server/src/server.ts

@@ -39,9 +39,7 @@ import type * as chokidar from 'chokidar'
 import findUp from 'find-up'
 import minimatch from 'minimatch'
 import resolveFrom, { setPnpApi } from './util/resolveFrom'
-import { /*postcssFallback,*/ AtRule, Container, Node, Result } from 'postcss'
+import { AtRule, Container, Node, Result } from 'postcss'
-// import tailwindcssFallback from 'tailwindcss'
-// import resolveConfigFallback from 'tailwindcss/resolveConfig'
 import Module from 'module'
 import Hook from './lib/hook'
 import semver from 'semver'
@@ -78,8 +76,20 @@ import { generateRules } from 'tailwindcss-language-service/src/util/jit'
 import { getColor } from 'tailwindcss-language-service/src/util/color'
 import * as culori from 'culori'
 import namedColors from 'color-name'
+import preflight from './lib/preflight'
+import tailwindPlugins from './lib/plugins'
+
+let oldReadFileSync = fs.readFileSync
+// @ts-ignore
+fs.readFileSync = function (filename, ...args) {
+  if (filename === path.join(__dirname, 'css/preflight.css')) {
+    return preflight
+  }
+  return oldReadFileSync(filename, ...args)
+}
 
 const CONFIG_FILE_GLOB = '{tailwind,tailwind.config}.{js,cjs}'
+const PACKAGE_GLOB = '{package.json,package-lock.json,yarn.lock,pnpm-lock.yaml}'
 const TRIGGER_CHARACTERS = [
   // class attributes
   '"',
@@ -269,7 +279,7 @@ async function createProjectService(
       }
 
       let isConfigFile = minimatch(file, `**/${CONFIG_FILE_GLOB}`, { dot: true })
-      let isPackageFile = minimatch(file, '**/package.json', { dot: true })
+      let isPackageFile = minimatch(file, `**/${PACKAGE_GLOB}`, { dot: true })
       let isDependency = state.dependencies && state.dependencies.includes(change.file)
 
       if (!isConfigFile && !isPackageFile && !isDependency) continue
@@ -312,7 +322,7 @@ async function createProjectService(
     })
 
     connection.client.register(DidChangeWatchedFilesNotification.type, {
-      watchers: [{ globPattern: `**/${CONFIG_FILE_GLOB}` }, { globPattern: '**/package.json' }],
+      watchers: [{ globPattern: `**/${CONFIG_FILE_GLOB}` }, { globPattern: `**/${PACKAGE_GLOB}` }],
     })
   } else if (parcel.getBinding()) {
     let typeMap = {
@@ -340,7 +350,7 @@ async function createProjectService(
     })
   } else {
     let watch: typeof chokidar.watch = require('chokidar').watch
-    chokidarWatcher = watch([`**/${CONFIG_FILE_GLOB}`, '**/package.json'], {
+    chokidarWatcher = watch([`**/${CONFIG_FILE_GLOB}`, `**/${PACKAGE_GLOB}`], {
       cwd: folder,
       ignorePermissionErrors: true,
       ignoreInitial: true,
@@ -493,6 +503,7 @@ async function createProjectService(
     let jitModules: typeof state.modules.jit
     let tailwindcssVersion: string | undefined
     let postcssVersion: string | undefined
+    let pluginVersions: string | undefined
     let browserslist: string[] | undefined
     let resolveConfigFn: (config: any) => any
     let featureFlags: FeatureFlags = { future: [], experimental: [] }
@@ -511,13 +522,25 @@ async function createProjectService(
       postcssVersion = __non_webpack_require__(postcssPkgPath).version
       tailwindcssVersion = __non_webpack_require__(tailwindcssPkgPath).version
 
+      pluginVersions = Object.keys(tailwindPlugins)
+        .map((plugin) => {
+          try {
+            return __non_webpack_require__(resolveFrom(configDir, `${plugin}/package.json`)).version
+          } catch (_) {
+            return ''
+          }
+        })
+        .join(',')
+
       if (
         state.enabled &&
         postcssVersion === state.modules.postcss.version &&
         tailwindcssVersion === state.modules.tailwindcss.version &&
+        pluginVersions === state.pluginVersions &&
         configPath === state.configPath &&
         configId === state.configId
       ) {
+        console.log('short circuit')
         return
       }
 
@@ -674,17 +697,25 @@ async function createProjectService(
         } catch (_) {}
       }
     } catch (error) {
-      throw new SilentError(error.message)
+      tailwindcss = require('tailwindcss')
-      // TODO: force mode
+      resolveConfigFn = require('tailwindcss/resolveConfig')
-      // tailwindcss = tailwindcssFallback
+      postcss = require('postcss')
-      // resolveConfigFn = resolveConfigFallback
+      tailwindcssVersion = require('tailwindcss/package.json').version
-      // postcss = postcssFallback
+      postcssVersion = require('postcss/package.json').version
-      // applyComplexClasses = require('tailwindcss/lib/lib/substituteClassApplyAtRules')
+      postcssSelectorParser = require('postcss-selector-parser')
-      // tailwindcssVersion = '2.0.3'
+      jitModules = {
-      // postcssVersion = '8.2.6'
+        generateRules: { module: require('tailwindcss/lib/lib/generateRules').generateRules },
-      // console.log(
+        createContext: {
-      //   `Failed to load workspace modules. Initializing with tailwindcss v${tailwindcssVersion}`
+          module: (state) =>
-      // )
+            require('tailwindcss/lib/lib/setupContextUtils').createContext(state.config),
+        },
+        expandApplyAtRules: {
+          module: require('tailwindcss/lib/lib/expandApplyAtRules').default,
+        },
+      }
+      console.log('Failed to load workspace modules.')
+      console.log(`Using bundled version of \`tailwindcss\`: v${tailwindcssVersion}`)
+      console.log(`Using bundled version of \`postcss\`: v${postcssVersion}`)
     }
 
     state.configPath = configPath
@@ -698,6 +729,7 @@ async function createProjectService(
     state.browserslist = browserslist
     state.featureFlags = featureFlags
     state.version = tailwindcssVersion
+    state.pluginVersions = pluginVersions
 
     try {
       state.corePlugins = Object.keys(

packages/tailwindcss-language-service/src/util/state.ts

@@ -94,6 +94,7 @@ export interface State {
   jit?: boolean
   jitContext?: any
   classList?: Array<[string, { color: culori.Color | KeywordColor | null }]>
+  pluginVersions?: string
   // postcssPlugins?: { before: any[]; after: any[] }
 }