tailwindcss 0.0.0-insiders.e7dbc1a → 0.0.0-insiders.f2bc50a

package/README.md

@@ -1,6 +1,6 @@
 <p>
     <a href="https://tailwindcss.com/" target="_blank">
-      <img alt="Tailwind CSS" width="350" src="https://refactoringui.nyc3.cdn.digitaloceanspaces.com/tailwind-logo.svg">
+      <img alt="Tailwind CSS" width="350" src="https://refactoringui.nyc3.cdn.digitaloceanspaces.com/tailwind-logo-sticker.svg">
     </a><br>
     A utility-first CSS framework for rapidly building custom user interfaces.
 </p>

package/defaultConfig.js

@@ -1,4 +1,4 @@
-let { cloneDeep } = require('./src/util/cloneDeep')
+let { cloneDeep } = require('./lib/util/cloneDeep')
 let defaultConfig = require('./stubs/defaultConfig.stub.js')
 
 module.exports = cloneDeep(defaultConfig)

package/defaultTheme.js

@@ -1,4 +1,4 @@
-let { cloneDeep } = require('./src/util/cloneDeep')
+let { cloneDeep } = require('./lib/util/cloneDeep')
 let defaultConfig = require('./stubs/defaultConfig.stub.js')
 
 module.exports = cloneDeep(defaultConfig.theme)

package/lib/lib/detectNesting.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+
+function _default(_context) {
+  return (root, result) => {
+    let found = false;
+    root.walkRules(rule => {
+      if (found) return false;
+      rule.walkRules(nestedRule => {
+        found = true;
+        nestedRule.warn(result, // TODO: Improve this warning message
+        'Nested CSS detected, checkout the docs on how to support nesting: https://tailwindcss.com/docs/using-with-preprocessors#nesting');
+        return false;
+      });
+    });
+  };
+}

package/lib/lib/setupContextUtils.js

@@ -27,7 +27,7 @@ var _isPlainObject = _interopRequireDefault(require("../util/isPlainObject"));
 
 var _escapeClassName = _interopRequireDefault(require("../util/escapeClassName"));
 
-var _nameClass = _interopRequireDefault(require("../util/nameClass"));
+var _nameClass = _interopRequireWildcard(require("../util/nameClass"));
 
 var _pluginUtils = require("../util/pluginUtils");
 
@@ -39,6 +39,8 @@ var sharedState = _interopRequireWildcard(require("./sharedState"));
 
 var _toPath = require("../util/toPath");
 
+var _log = _interopRequireDefault(require("../util/log"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -170,7 +172,8 @@ function isValidArbitraryValue(value) {
 function buildPluginApi(tailwindConfig, context, {
   variantList,
   variantMap,
-  offsets
+  offsets,
+  classList
 }) {
   function getConfigValue(path, defaultValue) {
     return path ? (0, _dlv.default)(tailwindConfig, path, defaultValue) : tailwindConfig;
@@ -271,6 +274,7 @@ function buildPluginApi(tailwindConfig, context, {
       for (let [identifier, rule] of withIdentifiers(components)) {
         let prefixedIdentifier = prefixIdentifier(identifier, options);
         let offset = offsets.components++;
+        classList.add(prefixedIdentifier);
 
         if (!context.candidateRuleMap.has(prefixedIdentifier)) {
           context.candidateRuleMap.set(prefixedIdentifier, []);
@@ -298,6 +302,7 @@ function buildPluginApi(tailwindConfig, context, {
       for (let [identifier, rule] of withIdentifiers(utilities)) {
         let prefixedIdentifier = prefixIdentifier(identifier, options);
         let offset = offsets.utilities++;
+        classList.add(prefixedIdentifier);
 
         if (!context.candidateRuleMap.has(prefixedIdentifier)) {
           context.candidateRuleMap.set(prefixedIdentifier, []);
@@ -326,6 +331,7 @@ function buildPluginApi(tailwindConfig, context, {
       for (let identifier in utilities) {
         let prefixedIdentifier = prefixIdentifier(identifier, options);
         let rule = utilities[identifier];
+        classList.add([prefixedIdentifier, options]);
 
         function wrapped(modifier) {
           let {
@@ -510,10 +516,12 @@ function registerPlugins(plugins, context) {
     utilities: 0n,
     user: 0n
   };
+  let classList = new Set();
   let pluginApi = buildPluginApi(context.tailwindConfig, context, {
     variantList,
     variantMap,
-    offsets
+    offsets,
+    classList
   });
 
   for (let plugin of plugins) {
@@ -548,7 +556,89 @@ function registerPlugins(plugins, context) {
   for (let [variantName, variantFunctions] of variantMap.entries()) {
     let sort = context.variantOrder.get(variantName);
     context.variantMap.set(variantName, variantFunctions.map((variantFunction, idx) => [sort << BigInt(idx), variantFunction]));
-  }
+  } //
+
+
+  let warnedAbout = new Set([]);
+
+  context.safelist = function () {
+    var _context$tailwindConf;
+
+    let safelist = ((_context$tailwindConf = context.tailwindConfig.safelist) !== null && _context$tailwindConf !== void 0 ? _context$tailwindConf : []).filter(Boolean);
+    if (safelist.length <= 0) return [];
+    let output = [];
+    let checks = [];
+
+    for (let value of safelist) {
+      if (typeof value === 'string') {
+        output.push(value);
+        continue;
+      }
+
+      if (value instanceof RegExp) {
+        if (!warnedAbout.has('root-regex')) {
+          _log.default.warn([// TODO: Improve this warning message
+          'RegExp in the safelist option is not supported.', 'Please use the object syntax instead: https://tailwindcss.com/docs/...']);
+
+          warnedAbout.add('root-regex');
+        }
+
+        continue;
+      }
+
+      checks.push(value);
+    }
+
+    if (checks.length <= 0) return output.map(value => ({
+      raw: value,
+      extension: 'html'
+    }));
+    let patternMatchingCount = new Map();
+
+    for (let util of classList) {
+      let utils = Array.isArray(util) ? (() => {
+        var _options$values;
+
+        let [utilName, options] = util;
+        return Object.keys((_options$values = options === null || options === void 0 ? void 0 : options.values) !== null && _options$values !== void 0 ? _options$values : {}).map(value => (0, _nameClass.formatClass)(utilName, value));
+      })() : [util];
+
+      for (let util of utils) {
+        for (let {
+          pattern,
+          variants = []
+        } of checks) {
+          // RegExp with the /g flag are stateful, so let's reset the last
+          // index pointer to reset the state.
+          pattern.lastIndex = 0;
+
+          if (!patternMatchingCount.has(pattern)) {
+            patternMatchingCount.set(pattern, 0);
+          }
+
+          if (!pattern.test(util)) continue;
+          patternMatchingCount.set(pattern, patternMatchingCount.get(pattern) + 1);
+          output.push(util);
+
+          for (let variant of variants) {
+            output.push(variant + context.tailwindConfig.separator + util);
+          }
+        }
+      }
+    }
+
+    for (let [regex, count] of patternMatchingCount.entries()) {
+      if (count !== 0) continue;
+
+      _log.default.warn([// TODO: Improve this warning message
+      `You have a regex pattern in your "safelist" config (${regex}) that doesn't match any utilities.`, 'For more info, visit https://tailwindcss.com/docs/...']);
+    }
+
+    return output.map(value => ({
+      raw: value,
+      extension: 'html'
+    }));
+  };
 }
 
 function createContext(tailwindConfig, changedContent = [], tailwindDirectives = new Set(), root = _postcss.default.root()) {

package/lib/lib/setupTrackingContext.js

@@ -87,7 +87,7 @@ function getTailwindConfig(configOrPath) {
 }
 
 function resolvedChangedContent(context, candidateFiles, fileModifiedMap) {
-  let changedContent = context.tailwindConfig.content.content.filter(item => typeof item.raw === 'string').concat(context.tailwindConfig.content.safelist).map(({
+  let changedContent = context.tailwindConfig.content.content.filter(item => typeof item.raw === 'string').concat(context.tailwindConfig.content.safelist).concat(context.safelist()).map(({
     raw,
     extension
   }) => ({

package/lib/lib/setupWatchingContext.js

@@ -204,7 +204,7 @@ function getTailwindConfig(configOrPath) {
 }
 
 function resolvedChangedContent(context, candidateFiles) {
-  let changedContent = context.tailwindConfig.content.content.filter(item => typeof item.raw === 'string').concat(context.tailwindConfig.content.safelist).map(({
+  let changedContent = context.tailwindConfig.content.content.filter(item => typeof item.raw === 'string').concat(context.tailwindConfig.content.safelist).concat(context.safelist()).map(({
     raw,
     extension
   }) => ({

package/lib/processTailwindFeatures.js

@@ -19,6 +19,8 @@ var _resolveDefaultsAtRules = _interopRequireDefault(require("./lib/resolveDefau
 
 var _collapseAdjacentRules = _interopRequireDefault(require("./lib/collapseAdjacentRules"));
 
+var _detectNesting = _interopRequireDefault(require("./lib/detectNesting"));
+
 var _setupContextUtils = require("./lib/setupContextUtils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,6 +49,7 @@ function processTailwindFeatures(setupContext) {
       throw new Error("The '-' character cannot be used as a custom separator in JIT mode due to parsing ambiguity. Please use another character like '_' instead.");
     }
 
+    (0, _detectNesting.default)(context)(root, result);
     (0, _expandTailwindAtRules.default)(context)(root, result);
     (0, _expandApplyAtRules.default)(context)(root, result);
     (0, _evaluateTailwindFunctions.default)(context)(root, result);

package/lib/util/nameClass.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = nameClass;
+exports.formatClass = formatClass;
 
 var _escapeClassName = _interopRequireDefault(require("./escapeClassName"));
 
@@ -16,17 +17,21 @@ function asClass(name) {
 }
 
 function nameClass(classPrefix, key) {
+  return asClass(formatClass(classPrefix, key));
+}
+
+function formatClass(classPrefix, key) {
   if (key === 'DEFAULT') {
-    return asClass(classPrefix);
+    return classPrefix;
   }
 
   if (key === '-') {
-    return asClass(`-${classPrefix}`);
+    return `-${classPrefix}`;
   }
 
   if (key.startsWith('-')) {
-    return asClass(`-${classPrefix}${key}`);
+    return `-${classPrefix}${key}`;
   }
 
-  return asClass(`${classPrefix}-${key}`);
+  return `${classPrefix}-${key}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.e7dbc1a",
+  "version": "0.0.0-insiders.f2bc50a",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -47,7 +47,7 @@
     "@babel/node": "^7.12.13",
     "@babel/preset-env": "^7.15.0",
     "@tailwindcss/aspect-ratio": "^0.2.1",
-    "@vercel/ncc": "^0.29.2",
+    "@vercel/ncc": "^0.31.1",
     "autoprefixer": "^10.3.3",
     "babel-jest": "^27.1.0",
     "cross-env": "^7.0.3",
@@ -59,7 +59,7 @@
     "jest-diff": "^27.1.0",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
-    "prettier": "^2.3.2",
+    "prettier": "^2.4.1",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {

package/src/lib/detectNesting.js

@@ -0,0 +1,20 @@
+export default function (_context) {
+  return (root, result) => {
+    let found = false
+
+    root.walkRules((rule) => {
+      if (found) return false
+
+      rule.walkRules((nestedRule) => {
+        found = true
+        nestedRule.warn(
+          result,
+          // TODO: Improve this warning message
+          'Nested CSS detected, checkout the docs on how to support nesting: https://tailwindcss.com/docs/using-with-preprocessors#nesting'
+        )
+
+        return false
+      })
+    })
+  }
+}

package/src/lib/setupContextUtils.js

@@ -9,13 +9,14 @@ import parseObjectStyles from '../util/parseObjectStyles'
 import prefixSelector from '../util/prefixSelector'
 import isPlainObject from '../util/isPlainObject'
 import escapeClassName from '../util/escapeClassName'
-import nameClass from '../util/nameClass'
+import nameClass, { formatClass } from '../util/nameClass'
 import { coerceValue } from '../util/pluginUtils'
 import bigSign from '../util/bigSign'
 import * as corePlugins from '../corePlugins'
 import * as sharedState from './sharedState'
 import { env } from './sharedState'
 import { toPath } from '../util/toPath'
+import log from '../util/log'
 
 function insertInto(list, value, { before = [] } = {}) {
   before = [].concat(before)
@@ -146,7 +147,7 @@ function isValidArbitraryValue(value) {
   return true
 }
 
-function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offsets }) {
+function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offsets, classList }) {
   function getConfigValue(path, defaultValue) {
     return path ? dlv(tailwindConfig, path, defaultValue) : tailwindConfig
   }
@@ -241,6 +242,8 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         let prefixedIdentifier = prefixIdentifier(identifier, options)
         let offset = offsets.components++
 
+        classList.add(prefixedIdentifier)
+
         if (!context.candidateRuleMap.has(prefixedIdentifier)) {
           context.candidateRuleMap.set(prefixedIdentifier, [])
         }
@@ -268,6 +271,8 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         let prefixedIdentifier = prefixIdentifier(identifier, options)
         let offset = offsets.utilities++
 
+        classList.add(prefixedIdentifier)
+
         if (!context.candidateRuleMap.has(prefixedIdentifier)) {
           context.candidateRuleMap.set(prefixedIdentifier, [])
         }
@@ -293,6 +298,8 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         let prefixedIdentifier = prefixIdentifier(identifier, options)
         let rule = utilities[identifier]
 
+        classList.add([prefixedIdentifier, options])
+
         function wrapped(modifier) {
           let { type = 'any' } = options
           type = [].concat(type)
@@ -468,10 +475,13 @@ function registerPlugins(plugins, context) {
     user: 0n,
   }
 
+  let classList = new Set()
+
   let pluginApi = buildPluginApi(context.tailwindConfig, context, {
     variantList,
     variantMap,
     offsets,
+    classList,
   })
 
   for (let plugin of plugins) {
@@ -523,6 +533,83 @@ function registerPlugins(plugins, context) {
       variantFunctions.map((variantFunction, idx) => [sort << BigInt(idx), variantFunction])
     )
   }
+
+  //
+  let warnedAbout = new Set([])
+  context.safelist = function () {
+    let safelist = (context.tailwindConfig.safelist ?? []).filter(Boolean)
+    if (safelist.length <= 0) return []
+
+    let output = []
+    let checks = []
+
+    for (let value of safelist) {
+      if (typeof value === 'string') {
+        output.push(value)
+        continue
+      }
+
+      if (value instanceof RegExp) {
+        if (!warnedAbout.has('root-regex')) {
+          log.warn([
+            // TODO: Improve this warning message
+            'RegExp in the safelist option is not supported.',
+            'Please use the object syntax instead: https://tailwindcss.com/docs/...',
+          ])
+          warnedAbout.add('root-regex')
+        }
+        continue
+      }
+
+      checks.push(value)
+    }
+
+    if (checks.length <= 0) return output.map((value) => ({ raw: value, extension: 'html' }))
+
+    let patternMatchingCount = new Map()
+
+    for (let util of classList) {
+      let utils = Array.isArray(util)
+        ? (() => {
+            let [utilName, options] = util
+            return Object.keys(options?.values ?? {}).map((value) => formatClass(utilName, value))
+          })()
+        : [util]
+
+      for (let util of utils) {
+        for (let { pattern, variants = [] } of checks) {
+          // RegExp with the /g flag are stateful, so let's reset the last
+          // index pointer to reset the state.
+          pattern.lastIndex = 0
+
+          if (!patternMatchingCount.has(pattern)) {
+            patternMatchingCount.set(pattern, 0)
+          }
+
+          if (!pattern.test(util)) continue
+
+          patternMatchingCount.set(pattern, patternMatchingCount.get(pattern) + 1)
+
+          output.push(util)
+          for (let variant of variants) {
+            output.push(variant + context.tailwindConfig.separator + util)
+          }
+        }
+      }
+    }
+
+    for (let [regex, count] of patternMatchingCount.entries()) {
+      if (count !== 0) continue
+
+      log.warn([
+        // TODO: Improve this warning message
+        `You have a regex pattern in your "safelist" config (${regex}) that doesn't match any utilities.`,
+        'For more info, visit https://tailwindcss.com/docs/...',
+      ])
+    }
+
+    return output.map((value) => ({ raw: value, extension: 'html' }))
+  }
 }
 
 export function createContext(

package/src/lib/setupTrackingContext.js

@@ -80,6 +80,7 @@ function resolvedChangedContent(context, candidateFiles, fileModifiedMap) {
   let changedContent = context.tailwindConfig.content.content
     .filter((item) => typeof item.raw === 'string')
     .concat(context.tailwindConfig.content.safelist)
+    .concat(context.safelist())
     .map(({ raw, extension }) => ({ content: raw, extension }))
 
   for (let changedFile of resolveChangedFiles(candidateFiles, fileModifiedMap)) {

package/src/lib/setupWatchingContext.js

@@ -188,6 +188,7 @@ function resolvedChangedContent(context, candidateFiles) {
   let changedContent = context.tailwindConfig.content.content
     .filter((item) => typeof item.raw === 'string')
     .concat(context.tailwindConfig.content.safelist)
+    .concat(context.safelist())
     .map(({ raw, extension }) => ({ content: raw, extension }))
 
   for (let changedFile of resolveChangedFiles(context, candidateFiles)) {

package/src/processTailwindFeatures.js

@@ -5,6 +5,7 @@ import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions'
 import substituteScreenAtRules from './lib/substituteScreenAtRules'
 import resolveDefaultsAtRules from './lib/resolveDefaultsAtRules'
 import collapseAdjacentRules from './lib/collapseAdjacentRules'
+import detectNesting from './lib/detectNesting'
 import { createContext } from './lib/setupContextUtils'
 
 export default function processTailwindFeatures(setupContext) {
@@ -31,6 +32,7 @@ export default function processTailwindFeatures(setupContext) {
       )
     }
 
+    detectNesting(context)(root, result)
     expandTailwindAtRules(context)(root, result)
     expandApplyAtRules(context)(root, result)
     evaluateTailwindFunctions(context)(root, result)

package/src/util/nameClass.js

@@ -6,17 +6,21 @@ function asClass(name) {
 }
 
 export default function nameClass(classPrefix, key) {
+  return asClass(formatClass(classPrefix, key))
+}
+
+export function formatClass(classPrefix, key) {
   if (key === 'DEFAULT') {
-    return asClass(classPrefix)
+    return classPrefix
   }
 
   if (key === '-') {
-    return asClass(`-${classPrefix}`)
+    return `-${classPrefix}`
   }
 
   if (key.startsWith('-')) {
-    return asClass(`-${classPrefix}${key}`)
+    return `-${classPrefix}${key}`
   }
 
-  return asClass(`${classPrefix}-${key}`)
+  return `${classPrefix}-${key}`
 }