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

master
Brad Cornes 2022-01-07 11:42:39 +00:00
parent 2594afbbde
commit 6fdef8616a
8 changed files with 2396 additions and 14572 deletions

2837
package-lock.json generated

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -22,6 +22,10 @@
}, },
"devDependencies": { "devDependencies": {
"@parcel/watcher": "2.0.3", "@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/debounce": "1.2.0",
"@types/node": "14.14.34", "@types/node": "14.14.34",
"@types/vscode": "1.52.0", "@types/vscode": "1.52.0",
@ -50,6 +54,7 @@
"rimraf": "3.0.2", "rimraf": "3.0.2",
"semver": "7.3.2", "semver": "7.3.2",
"stack-trace": "0.0.10", "stack-trace": "0.0.10",
"tailwindcss": "3.0.11",
"terser": "4.6.12", "terser": "4.6.12",
"typescript": "4.2.4", "typescript": "4.2.4",
"vscode-languageserver": "7.0.0", "vscode-languageserver": "7.0.0",

View File

@ -2,6 +2,16 @@
* Adapted from: https://github.com/elastic/require-in-the-middle * Adapted from: https://github.com/elastic/require-in-the-middle
*/ */
import Module from 'module' 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 { export default class Hook {
cache = {} cache = {}
@ -31,8 +41,22 @@ export default class Hook {
return self._origRequire.apply(this, arguments) return self._origRequire.apply(this, arguments)
} }
let filename
if (bundledModules.hasOwnProperty(request)) {
try {
// @ts-ignore // @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 // return known patched modules immediately
if (self.cache.hasOwnProperty(filename)) { if (self.cache.hasOwnProperty(filename)) {

View File

@ -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,
},
}

View File

@ -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;
}`

View File

@ -39,9 +39,7 @@ import type * as chokidar from 'chokidar'
import findUp from 'find-up' import findUp from 'find-up'
import minimatch from 'minimatch' import minimatch from 'minimatch'
import resolveFrom, { setPnpApi } from './util/resolveFrom' 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 Module from 'module'
import Hook from './lib/hook' import Hook from './lib/hook'
import semver from 'semver' 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 { getColor } from 'tailwindcss-language-service/src/util/color'
import * as culori from 'culori' import * as culori from 'culori'
import namedColors from 'color-name' 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 CONFIG_FILE_GLOB = '{tailwind,tailwind.config}.{js,cjs}'
const PACKAGE_GLOB = '{package.json,package-lock.json,yarn.lock,pnpm-lock.yaml}'
const TRIGGER_CHARACTERS = [ const TRIGGER_CHARACTERS = [
// class attributes // class attributes
'"', '"',
@ -269,7 +279,7 @@ async function createProjectService(
} }
let isConfigFile = minimatch(file, `**/${CONFIG_FILE_GLOB}`, { dot: true }) 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) let isDependency = state.dependencies && state.dependencies.includes(change.file)
if (!isConfigFile && !isPackageFile && !isDependency) continue if (!isConfigFile && !isPackageFile && !isDependency) continue
@ -312,7 +322,7 @@ async function createProjectService(
}) })
connection.client.register(DidChangeWatchedFilesNotification.type, { 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()) { } else if (parcel.getBinding()) {
let typeMap = { let typeMap = {
@ -340,7 +350,7 @@ async function createProjectService(
}) })
} else { } else {
let watch: typeof chokidar.watch = require('chokidar').watch let watch: typeof chokidar.watch = require('chokidar').watch
chokidarWatcher = watch([`**/${CONFIG_FILE_GLOB}`, '**/package.json'], { chokidarWatcher = watch([`**/${CONFIG_FILE_GLOB}`, `**/${PACKAGE_GLOB}`], {
cwd: folder, cwd: folder,
ignorePermissionErrors: true, ignorePermissionErrors: true,
ignoreInitial: true, ignoreInitial: true,
@ -493,6 +503,7 @@ async function createProjectService(
let jitModules: typeof state.modules.jit let jitModules: typeof state.modules.jit
let tailwindcssVersion: string | undefined let tailwindcssVersion: string | undefined
let postcssVersion: string | undefined let postcssVersion: string | undefined
let pluginVersions: string | undefined
let browserslist: string[] | undefined let browserslist: string[] | undefined
let resolveConfigFn: (config: any) => any let resolveConfigFn: (config: any) => any
let featureFlags: FeatureFlags = { future: [], experimental: [] } let featureFlags: FeatureFlags = { future: [], experimental: [] }
@ -511,13 +522,25 @@ async function createProjectService(
postcssVersion = __non_webpack_require__(postcssPkgPath).version postcssVersion = __non_webpack_require__(postcssPkgPath).version
tailwindcssVersion = __non_webpack_require__(tailwindcssPkgPath).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 ( if (
state.enabled && state.enabled &&
postcssVersion === state.modules.postcss.version && postcssVersion === state.modules.postcss.version &&
tailwindcssVersion === state.modules.tailwindcss.version && tailwindcssVersion === state.modules.tailwindcss.version &&
pluginVersions === state.pluginVersions &&
configPath === state.configPath && configPath === state.configPath &&
configId === state.configId configId === state.configId
) { ) {
console.log('short circuit')
return return
} }
@ -674,17 +697,25 @@ async function createProjectService(
} catch (_) {} } catch (_) {}
} }
} catch (error) { } 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 state.configPath = configPath
@ -698,6 +729,7 @@ async function createProjectService(
state.browserslist = browserslist state.browserslist = browserslist
state.featureFlags = featureFlags state.featureFlags = featureFlags
state.version = tailwindcssVersion state.version = tailwindcssVersion
state.pluginVersions = pluginVersions
try { try {
state.corePlugins = Object.keys( state.corePlugins = Object.keys(

View File

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