tailwindcss 0.0.0-insiders.ea139f2 → 0.0.0-insiders.ea4e1cd

package/src/postcss-plugins/nesting/README.md

@@ -0,0 +1,42 @@
+# tailwindcss/nesting
+
+This is a PostCSS plugin that wraps [postcss-nested](https://github.com/postcss/postcss-nested) or [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting) and acts as a compatibility layer to make sure your nesting plugin of choice properly understands Tailwind's custom syntax like `@apply` and `@screen`.
+
+Add it to your PostCSS configuration, somewhere before Tailwind itself:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ]
+}
+```
+
+By default, it uses the [postcss-nested](https://github.com/postcss/postcss-nested) plugin under the hood, which uses a Sass-like syntax and is the plugin that powers nesting support in the [Tailwind CSS plugin API](https://tailwindcss.com/docs/plugins#css-in-js-syntax).
+
+If you'd rather use [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting) (which is based on the work-in-progress [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) specification), first install the plugin alongside:
+
+```shell
+npm install postcss-nesting
+```
+
+Then pass the plugin itself as an argument to `tailwindcss/nesting` in your PostCSS configuration:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting')(require('postcss-nesting')),
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ]
+}
+```
+
+This can also be helpful if for whatever reason you need to use a very specific version of `postcss-nested` and want to override the version we bundle with `tailwindcss/nesting` itself.
+

package/src/postcss-plugins/nesting/index.js

@@ -0,0 +1,13 @@
+import { nesting } from './plugin'
+
+export default Object.assign(
+  function (opts) {
+    return {
+      postcssPlugin: 'tailwindcss/nesting',
+      Once(root, { result }) {
+        return nesting(opts)(root, result)
+      },
+    }
+  },
+  { postcss: true }
+)

package/src/postcss-plugins/nesting/plugin.js

@@ -0,0 +1,80 @@
+import postcss from 'postcss'
+import postcssNested from 'postcss-nested'
+
+export function nesting(opts = postcssNested) {
+  return (root, result) => {
+    root.walkAtRules('screen', (rule) => {
+      rule.name = 'media'
+      rule.params = `screen(${rule.params})`
+    })
+
+    root.walkAtRules('apply', (rule) => {
+      rule.before(postcss.decl({ prop: '__apply', value: rule.params, source: rule.source }))
+      rule.remove()
+    })
+
+    let plugin = (() => {
+      if (
+        typeof opts === 'function' ||
+        (typeof opts === 'object' && opts?.hasOwnProperty?.('postcssPlugin'))
+      ) {
+        return opts
+      }
+
+      if (typeof opts === 'string') {
+        return require(opts)
+      }
+
+      if (Object.keys(opts).length <= 0) {
+        return postcssNested
+      }
+
+      throw new Error('tailwindcss/nesting should be loaded with a nesting plugin.')
+    })()
+
+    postcss([plugin]).process(root, result.opts).sync()
+
+    root.walkDecls('__apply', (decl) => {
+      decl.before(postcss.atRule({ name: 'apply', params: decl.value, source: decl.source }))
+      decl.remove()
+    })
+
+    /**
+     * Use a private PostCSS API to remove the "clean" flag from the entire AST.
+     * This is done because running process() on the AST will set the "clean"
+     * flag on all nodes, which we don't want.
+     *
+     * This causes downstream plugins using the visitor API to be skipped.
+     *
+     * This is guarded because the PostCSS API is not public
+     * and may change in future versions of PostCSS.
+     *
+     * See https://github.com/postcss/postcss/issues/1712 for more details
+     *
+     * @param {import('postcss').Node} node
+     */
+    function markDirty(node) {
+      if (!('markDirty' in node)) {
+        return
+      }
+
+      // Traverse the tree down to the leaf nodes
+      if (node.nodes) {
+        node.nodes.forEach((n) => markDirty(n))
+      }
+
+      // If it's a leaf node mark it as dirty
+      // We do this here because marking a node as dirty
+      // will walk up the tree and mark all parents as dirty
+      // resulting in a lot of unnecessary work if we did this
+      // for every single node
+      if (!node.nodes) {
+        node.markDirty()
+      }
+    }
+
+    markDirty(root)
+
+    return root
+  }
+}

package/src/processTailwindFeatures.js

@@ -6,16 +6,24 @@ import substituteScreenAtRules from './lib/substituteScreenAtRules'
 import resolveDefaultsAtRules from './lib/resolveDefaultsAtRules'
 import collapseAdjacentRules from './lib/collapseAdjacentRules'
 import collapseDuplicateDeclarations from './lib/collapseDuplicateDeclarations'
+import partitionApplyAtRules from './lib/partitionApplyAtRules'
 import detectNesting from './lib/detectNesting'
 import { createContext } from './lib/setupContextUtils'
 import { issueFlagNotices } from './featureFlags'
 
 export default function processTailwindFeatures(setupContext) {
   return function (root, result) {
-    let tailwindDirectives = normalizeTailwindDirectives(root)
+    let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
+
+    detectNesting()(root, result)
+
+    // Partition apply rules that are found in the css
+    // itself.
+    partitionApplyAtRules()(root, result)
 
     let context = setupContext({
       tailwindDirectives,
+      applyDirectives,
       registerDependency(dependency) {
         result.messages.push({
           plugin: 'tailwindcss',
@@ -36,8 +44,10 @@ export default function processTailwindFeatures(setupContext) {
 
     issueFlagNotices(context.tailwindConfig)
 
-    detectNesting(context)(root, result)
     expandTailwindAtRules(context)(root, result)
+    // Partition apply rules that are generated by
+    // addComponents, addUtilities and so on.
+    partitionApplyAtRules()(root, result)
     expandApplyAtRules(context)(root, result)
     evaluateTailwindFunctions(context)(root, result)
     substituteScreenAtRules(context)(root, result)

package/src/public/colors.js

@@ -24,6 +24,7 @@ export default {
     700: '#334155',
     800: '#1e293b',
     900: '#0f172a',
+    950: '#020617',
   },
   gray: {
     50: '#f9fafb',
@@ -36,6 +37,7 @@ export default {
     700: '#374151',
     800: '#1f2937',
     900: '#111827',
+    950: '#030712',
   },
   zinc: {
     50: '#fafafa',
@@ -48,6 +50,7 @@ export default {
     700: '#3f3f46',
     800: '#27272a',
     900: '#18181b',
+    950: '#09090b',
   },
   neutral: {
     50: '#fafafa',
@@ -60,6 +63,7 @@ export default {
     700: '#404040',
     800: '#262626',
     900: '#171717',
+    950: '#0a0a0a',
   },
   stone: {
     50: '#fafaf9',
@@ -72,6 +76,7 @@ export default {
     700: '#44403c',
     800: '#292524',
     900: '#1c1917',
+    950: '#0c0a09',
   },
   red: {
     50: '#fef2f2',
@@ -84,6 +89,7 @@ export default {
     700: '#b91c1c',
     800: '#991b1b',
     900: '#7f1d1d',
+    950: '#450a0a',
   },
   orange: {
     50: '#fff7ed',
@@ -96,6 +102,7 @@ export default {
     700: '#c2410c',
     800: '#9a3412',
     900: '#7c2d12',
+    950: '#431407',
   },
   amber: {
     50: '#fffbeb',
@@ -108,6 +115,7 @@ export default {
     700: '#b45309',
     800: '#92400e',
     900: '#78350f',
+    950: '#451a03',
   },
   yellow: {
     50: '#fefce8',
@@ -120,6 +128,7 @@ export default {
     700: '#a16207',
     800: '#854d0e',
     900: '#713f12',
+    950: '#422006',
   },
   lime: {
     50: '#f7fee7',
@@ -132,6 +141,7 @@ export default {
     700: '#4d7c0f',
     800: '#3f6212',
     900: '#365314',
+    950: '#1a2e05',
   },
   green: {
     50: '#f0fdf4',
@@ -144,6 +154,7 @@ export default {
     700: '#15803d',
     800: '#166534',
     900: '#14532d',
+    950: '#052e16',
   },
   emerald: {
     50: '#ecfdf5',
@@ -156,6 +167,7 @@ export default {
     700: '#047857',
     800: '#065f46',
     900: '#064e3b',
+    950: '#022c22',
   },
   teal: {
     50: '#f0fdfa',
@@ -168,6 +180,7 @@ export default {
     700: '#0f766e',
     800: '#115e59',
     900: '#134e4a',
+    950: '#042f2e',
   },
   cyan: {
     50: '#ecfeff',
@@ -180,6 +193,7 @@ export default {
     700: '#0e7490',
     800: '#155e75',
     900: '#164e63',
+    950: '#083344',
   },
   sky: {
     50: '#f0f9ff',
@@ -192,6 +206,7 @@ export default {
     700: '#0369a1',
     800: '#075985',
     900: '#0c4a6e',
+    950: '#082f49',
   },
   blue: {
     50: '#eff6ff',
@@ -204,6 +219,7 @@ export default {
     700: '#1d4ed8',
     800: '#1e40af',
     900: '#1e3a8a',
+    950: '#172554',
   },
   indigo: {
     50: '#eef2ff',
@@ -216,6 +232,7 @@ export default {
     700: '#4338ca',
     800: '#3730a3',
     900: '#312e81',
+    950: '#1e1b4b',
   },
   violet: {
     50: '#f5f3ff',
@@ -228,6 +245,7 @@ export default {
     700: '#6d28d9',
     800: '#5b21b6',
     900: '#4c1d95',
+    950: '#2e1065',
   },
   purple: {
     50: '#faf5ff',
@@ -240,6 +258,7 @@ export default {
     700: '#7e22ce',
     800: '#6b21a8',
     900: '#581c87',
+    950: '#3b0764',
   },
   fuchsia: {
     50: '#fdf4ff',
@@ -252,6 +271,7 @@ export default {
     700: '#a21caf',
     800: '#86198f',
     900: '#701a75',
+    950: '#4a044e',
   },
   pink: {
     50: '#fdf2f8',
@@ -264,6 +284,7 @@ export default {
     700: '#be185d',
     800: '#9d174d',
     900: '#831843',
+    950: '#500724',
   },
   rose: {
     50: '#fff1f2',
@@ -276,6 +297,7 @@ export default {
     700: '#be123c',
     800: '#9f1239',
     900: '#881337',
+    950: '#4c0519',
   },
   get lightBlue() {
     warn({ version: 'v2.2', from: 'lightBlue', to: 'sky' })

package/src/public/default-config.js

@@ -1,4 +1,4 @@
 import { cloneDeep } from '../util/cloneDeep'
-import defaultConfig from '../../stubs/defaultConfig.stub'
+import defaultConfig from '../../stubs/config.full'
 
 export default cloneDeep(defaultConfig)

package/src/public/default-theme.js

@@ -1,4 +1,4 @@
 import { cloneDeep } from '../util/cloneDeep'
-import defaultConfig from '../../stubs/defaultConfig.stub'
+import defaultFullConfig from '../../stubs/config.full'
 
-export default cloneDeep(defaultConfig.theme)
+export default cloneDeep(defaultFullConfig.theme)

package/src/public/load-config.js

@@ -0,0 +1,2 @@
+import { loadConfig } from '../lib/load-config'
+export default loadConfig

package/src/util/applyImportantSelector.js

@@ -0,0 +1,27 @@
+import parser from 'postcss-selector-parser'
+import { movePseudos } from './pseudoElements'
+
+export function applyImportantSelector(selector, important) {
+  let sel = parser().astSync(selector)
+
+  sel.each((sel) => {
+    // Wrap with :is if it's not already wrapped
+    let isWrapped =
+      sel.nodes[0].type === 'pseudo' &&
+      sel.nodes[0].value === ':is' &&
+      sel.nodes.every((node) => node.type !== 'combinator')
+
+    if (!isWrapped) {
+      sel.nodes = [
+        parser.pseudo({
+          value: ':is',
+          nodes: [sel.clone()],
+        }),
+      ]
+    }
+
+    movePseudos(sel)
+  })
+
+  return `${important} ${sel.toString()}`
+}

package/src/util/buildMediaQuery.js

@@ -2,8 +2,8 @@ export default function buildMediaQuery(screens) {
   screens = Array.isArray(screens) ? screens : [screens]
 
   return screens
-    .map((screen) =>
-      screen.values.map((screen) => {
+    .map((screen) => {
+      let values = screen.values.map((screen) => {
         if (screen.raw !== undefined) {
           return screen.raw
         }
@@ -15,6 +15,8 @@ export default function buildMediaQuery(screens) {
           .filter(Boolean)
           .join(' and ')
       })
-    )
+
+      return screen.not ? `not all and ${values}` : values
+    })
     .join(', ')
 }

package/src/util/cloneNodes.js

@@ -1,9 +1,26 @@
-export default function cloneNodes(nodes, source) {
+export default function cloneNodes(nodes, source = undefined, raws = undefined) {
   return nodes.map((node) => {
     let cloned = node.clone()
 
-    if (source !== undefined) {
+    // We always want override the source map
+    // except when explicitly told not to
+    let shouldOverwriteSource = node.raws.tailwind?.preserveSource !== true || !cloned.source
+
+    if (source !== undefined && shouldOverwriteSource) {
       cloned.source = source
+
+      if ('walk' in cloned) {
+        cloned.walk((child) => {
+          child.source = source
+        })
+      }
+    }
+
+    if (raws !== undefined) {
+      cloned.raws.tailwind = {
+        ...cloned.raws.tailwind,
+        ...raws,
+      }
     }
 
     return cloned

package/src/util/color.js

@@ -1,15 +1,22 @@
-import namedColors from 'color-name'
+import namedColors from './colorNames'
 
 let HEX = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i
 let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i
-let VALUE = `(?:\\d+|\\d*\\.\\d+)%?`
-let SEP = `(?:\\s*,\\s*|\\s+)`
-let ALPHA_SEP = `\\s*[,/]\\s*`
-let RGB_HSL = new RegExp(
-  `^(rgb|hsl)a?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
+let VALUE = /(?:\d+|\d*\.\d+)%?/
+let SEP = /(?:\s*,\s*|\s+)/
+let ALPHA_SEP = /\s*[,/]\s*/
+let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)\)/
+
+let RGB = new RegExp(
+  `^(rgba?)\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
+)
+let HSL = new RegExp(
+  `^(hsla?)\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
 )
 
-export function parseColor(value) {
+// In "loose" mode the color may contain fewer than 3 parts, as long as at least
+// one of the parts is variable.
+export function parseColor(value, { loose = false } = {}) {
   if (typeof value !== 'string') {
     return null
   }
@@ -37,20 +44,45 @@ export function parseColor(value) {
     }
   }
 
-  let match = value.match(RGB_HSL)
+  let match = value.match(RGB) ?? value.match(HSL)
+
+  if (match === null) {
+    return null
+  }
+
+  let color = [match[2], match[3], match[4]].filter(Boolean).map((v) => v.toString())
 
-  if (match !== null) {
+  // rgba(var(--my-color), 0.1)
+  // hsla(var(--my-color), 0.1)
+  if (color.length === 2 && color[0].startsWith('var(')) {
     return {
       mode: match[1],
-      color: [match[2], match[3], match[4]].map((v) => v.toString()),
-      alpha: match[5]?.toString?.(),
+      color: [color[0]],
+      alpha: color[1],
     }
   }
 
-  return null
+  if (!loose && color.length !== 3) {
+    return null
+  }
+
+  if (color.length < 3 && !color.some((part) => /^var\(.*?\)$/.test(part))) {
+    return null
+  }
+
+  return {
+    mode: match[1],
+    color,
+    alpha: match[5]?.toString?.(),
+  }
 }
 
 export function formatColor({ mode, color, alpha }) {
   let hasAlpha = alpha !== undefined
+
+  if (mode === 'rgba' || mode === 'hsla') {
+    return `${mode}(${color.join(', ')}${hasAlpha ? `, ${alpha}` : ''})`
+  }
+
   return `${mode}(${color.join(' ')}${hasAlpha ? ` / ${alpha}` : ''})`
 }

package/src/util/colorNames.js

@@ -0,0 +1,150 @@
+export default {
+  aliceblue: [240, 248, 255],
+  antiquewhite: [250, 235, 215],
+  aqua: [0, 255, 255],
+  aquamarine: [127, 255, 212],
+  azure: [240, 255, 255],
+  beige: [245, 245, 220],
+  bisque: [255, 228, 196],
+  black: [0, 0, 0],
+  blanchedalmond: [255, 235, 205],
+  blue: [0, 0, 255],
+  blueviolet: [138, 43, 226],
+  brown: [165, 42, 42],
+  burlywood: [222, 184, 135],
+  cadetblue: [95, 158, 160],
+  chartreuse: [127, 255, 0],
+  chocolate: [210, 105, 30],
+  coral: [255, 127, 80],
+  cornflowerblue: [100, 149, 237],
+  cornsilk: [255, 248, 220],
+  crimson: [220, 20, 60],
+  cyan: [0, 255, 255],
+  darkblue: [0, 0, 139],
+  darkcyan: [0, 139, 139],
+  darkgoldenrod: [184, 134, 11],
+  darkgray: [169, 169, 169],
+  darkgreen: [0, 100, 0],
+  darkgrey: [169, 169, 169],
+  darkkhaki: [189, 183, 107],
+  darkmagenta: [139, 0, 139],
+  darkolivegreen: [85, 107, 47],
+  darkorange: [255, 140, 0],
+  darkorchid: [153, 50, 204],
+  darkred: [139, 0, 0],
+  darksalmon: [233, 150, 122],
+  darkseagreen: [143, 188, 143],
+  darkslateblue: [72, 61, 139],
+  darkslategray: [47, 79, 79],
+  darkslategrey: [47, 79, 79],
+  darkturquoise: [0, 206, 209],
+  darkviolet: [148, 0, 211],
+  deeppink: [255, 20, 147],
+  deepskyblue: [0, 191, 255],
+  dimgray: [105, 105, 105],
+  dimgrey: [105, 105, 105],
+  dodgerblue: [30, 144, 255],
+  firebrick: [178, 34, 34],
+  floralwhite: [255, 250, 240],
+  forestgreen: [34, 139, 34],
+  fuchsia: [255, 0, 255],
+  gainsboro: [220, 220, 220],
+  ghostwhite: [248, 248, 255],
+  gold: [255, 215, 0],
+  goldenrod: [218, 165, 32],
+  gray: [128, 128, 128],
+  green: [0, 128, 0],
+  greenyellow: [173, 255, 47],
+  grey: [128, 128, 128],
+  honeydew: [240, 255, 240],
+  hotpink: [255, 105, 180],
+  indianred: [205, 92, 92],
+  indigo: [75, 0, 130],
+  ivory: [255, 255, 240],
+  khaki: [240, 230, 140],
+  lavender: [230, 230, 250],
+  lavenderblush: [255, 240, 245],
+  lawngreen: [124, 252, 0],
+  lemonchiffon: [255, 250, 205],
+  lightblue: [173, 216, 230],
+  lightcoral: [240, 128, 128],
+  lightcyan: [224, 255, 255],
+  lightgoldenrodyellow: [250, 250, 210],
+  lightgray: [211, 211, 211],
+  lightgreen: [144, 238, 144],
+  lightgrey: [211, 211, 211],
+  lightpink: [255, 182, 193],
+  lightsalmon: [255, 160, 122],
+  lightseagreen: [32, 178, 170],
+  lightskyblue: [135, 206, 250],
+  lightslategray: [119, 136, 153],
+  lightslategrey: [119, 136, 153],
+  lightsteelblue: [176, 196, 222],
+  lightyellow: [255, 255, 224],
+  lime: [0, 255, 0],
+  limegreen: [50, 205, 50],
+  linen: [250, 240, 230],
+  magenta: [255, 0, 255],
+  maroon: [128, 0, 0],
+  mediumaquamarine: [102, 205, 170],
+  mediumblue: [0, 0, 205],
+  mediumorchid: [186, 85, 211],
+  mediumpurple: [147, 112, 219],
+  mediumseagreen: [60, 179, 113],
+  mediumslateblue: [123, 104, 238],
+  mediumspringgreen: [0, 250, 154],
+  mediumturquoise: [72, 209, 204],
+  mediumvioletred: [199, 21, 133],
+  midnightblue: [25, 25, 112],
+  mintcream: [245, 255, 250],
+  mistyrose: [255, 228, 225],
+  moccasin: [255, 228, 181],
+  navajowhite: [255, 222, 173],
+  navy: [0, 0, 128],
+  oldlace: [253, 245, 230],
+  olive: [128, 128, 0],
+  olivedrab: [107, 142, 35],
+  orange: [255, 165, 0],
+  orangered: [255, 69, 0],
+  orchid: [218, 112, 214],
+  palegoldenrod: [238, 232, 170],
+  palegreen: [152, 251, 152],
+  paleturquoise: [175, 238, 238],
+  palevioletred: [219, 112, 147],
+  papayawhip: [255, 239, 213],
+  peachpuff: [255, 218, 185],
+  peru: [205, 133, 63],
+  pink: [255, 192, 203],
+  plum: [221, 160, 221],
+  powderblue: [176, 224, 230],
+  purple: [128, 0, 128],
+  rebeccapurple: [102, 51, 153],
+  red: [255, 0, 0],
+  rosybrown: [188, 143, 143],
+  royalblue: [65, 105, 225],
+  saddlebrown: [139, 69, 19],
+  salmon: [250, 128, 114],
+  sandybrown: [244, 164, 96],
+  seagreen: [46, 139, 87],
+  seashell: [255, 245, 238],
+  sienna: [160, 82, 45],
+  silver: [192, 192, 192],
+  skyblue: [135, 206, 235],
+  slateblue: [106, 90, 205],
+  slategray: [112, 128, 144],
+  slategrey: [112, 128, 144],
+  snow: [255, 250, 250],
+  springgreen: [0, 255, 127],
+  steelblue: [70, 130, 180],
+  tan: [210, 180, 140],
+  teal: [0, 128, 128],
+  thistle: [216, 191, 216],
+  tomato: [255, 99, 71],
+  turquoise: [64, 224, 208],
+  violet: [238, 130, 238],
+  wheat: [245, 222, 179],
+  white: [255, 255, 255],
+  whitesmoke: [245, 245, 245],
+  yellow: [255, 255, 0],
+  yellowgreen: [154, 205, 50],
+}