tailwindcss 2.0.2 → 2.0.3

package/lib/cli/commands/init.js

@@ -27,7 +27,7 @@ const options = [{
   description: 'Generate complete configuration file.'
 }, {
   usage: '-p',
-  description: 'Generate postcss.config.js file.'
+  description: 'Generate PostCSS config file.'
 }];
 exports.options = options;
 const optionMap = {
@@ -47,8 +47,9 @@ exports.optionMap = optionMap;
 function run(cliParams, cliOptions) {
   return new Promise(resolve => {
     utils.header();
+    const isModule = utils.isModule();
     const full = cliOptions.full;
-    const file = cliParams[0] || constants.defaultConfigFile;
+    const file = cliParams[0] || (isModule ? constants.cjsConfigFile : constants.defaultConfigFile);
     const simplePath = utils.getSimplePath(file);
     utils.exists(file) && utils.die(colors.file(simplePath), 'already exists.');
     const stubFile = full ? constants.defaultConfigStubFile : constants.simpleConfigStubFile;
@@ -58,9 +59,10 @@ function run(cliParams, cliOptions) {
     utils.log(emoji.yes, 'Created Tailwind config file:', colors.file(simplePath));
 
     if (cliOptions.postcss) {
-      const path = utils.getSimplePath(constants.defaultPostCssConfigFile);
+      const postCssConfigFile = isModule ? constants.cjsPostCssConfigFile : constants.defaultPostCssConfigFile;
+      const path = utils.getSimplePath(postCssConfigFile);
       utils.exists(constants.defaultPostCssConfigFile) && utils.die(colors.file(path), 'already exists.');
-      utils.copyFile(constants.defaultPostCssConfigStubFile, constants.defaultPostCssConfigFile);
+      utils.copyFile(constants.defaultPostCssConfigStubFile, postCssConfigFile);
       utils.log(emoji.yes, 'Created PostCSS config file:', colors.file(path));
     }
 

package/lib/cli/utils.js

@@ -13,6 +13,7 @@ exports.die = die;
 exports.exists = exists;
 exports.copyFile = copyFile;
 exports.readFile = readFile;
+exports.isModule = isModule;
 exports.writeFile = writeFile;
 exports.getSimplePath = getSimplePath;
 
@@ -20,18 +21,20 @@ var _fsExtra = require("fs-extra");
 
 var _lodash = require("lodash");
 
+var _path = _interopRequireDefault(require("path"));
+
 var colors = _interopRequireWildcard(require("./colors"));
 
 var emoji = _interopRequireWildcard(require("./emoji"));
 
 var _package = _interopRequireDefault(require("../../package.json"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * Gets CLI parameters.
  *
@@ -153,6 +156,23 @@ function copyFile(source, destination) {
 function readFile(path) {
   return (0, _fsExtra.readFileSync)(path, 'utf-8');
 }
+/**
+ * Checks if current package.json uses type "module"
+ *
+ * @return {boolean}
+ */
+
+
+function isModule() {
+  const pkgPath = _path.default.resolve('./package.json');
+
+  if (exists(pkgPath)) {
+    const pkg = JSON.parse(readFile(pkgPath));
+    return pkg.type && pkg.type === 'module';
+  }
+
+  return false;
+}
 /**
  * Writes content to file.
  *

package/lib/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultPostCssConfigStubFile = exports.simpleConfigStubFile = exports.defaultConfigStubFile = exports.defaultPostCssConfigFile = exports.defaultConfigFile = exports.cli = void 0;
+exports.defaultPostCssConfigStubFile = exports.simpleConfigStubFile = exports.defaultConfigStubFile = exports.supportedPostCssConfigFile = exports.supportedConfigFiles = exports.cjsPostCssConfigFile = exports.cjsConfigFile = exports.defaultPostCssConfigFile = exports.defaultConfigFile = exports.cli = void 0;
 
 var _path = _interopRequireDefault(require("path"));
 
@@ -15,6 +15,14 @@ const defaultConfigFile = './tailwind.config.js';
 exports.defaultConfigFile = defaultConfigFile;
 const defaultPostCssConfigFile = './postcss.config.js';
 exports.defaultPostCssConfigFile = defaultPostCssConfigFile;
+const cjsConfigFile = './tailwind.config.cjs';
+exports.cjsConfigFile = cjsConfigFile;
+const cjsPostCssConfigFile = './postcss.config.cjs';
+exports.cjsPostCssConfigFile = cjsPostCssConfigFile;
+const supportedConfigFiles = [cjsConfigFile, defaultConfigFile];
+exports.supportedConfigFiles = supportedConfigFiles;
+const supportedPostCssConfigFile = [cjsPostCssConfigFile, defaultPostCssConfigFile];
+exports.supportedPostCssConfigFile = supportedPostCssConfigFile;
 
 const defaultConfigStubFile = _path.default.resolve(__dirname, '../stubs/defaultConfig.stub.js');
 

package/lib/index.js

@@ -46,15 +46,17 @@ function resolveConfigPath(filePath) {
   } // require('tailwindcss')
 
 
-  try {
-    const defaultConfigPath = _path.default.resolve(_constants.defaultConfigFile);
+  for (const configFile of _constants.supportedConfigFiles) {
+    try {
+      const configPath = _path.default.resolve(configFile);
 
-    _fs.default.accessSync(defaultConfigPath);
+      _fs.default.accessSync(configPath);
 
-    return defaultConfigPath;
-  } catch (err) {
-    return undefined;
+      return configPath;
+    } catch (err) {}
   }
+
+  return undefined;
 }
 
 const getConfigFunction = config => () => {

package/lib/index.postcss7.js

@@ -48,15 +48,17 @@ function resolveConfigPath(filePath) {
   } // require('tailwindcss')
 
 
-  try {
-    const defaultConfigPath = _path.default.resolve(_constants.defaultConfigFile);
+  for (const configFile of _constants.supportedConfigFiles) {
+    try {
+      const configPath = _path.default.resolve(configFile);
 
-    _fs.default.accessSync(defaultConfigPath);
+      _fs.default.accessSync(configPath);
 
-    return defaultConfigPath;
-  } catch (err) {
-    return undefined;
+      return configPath;
+    } catch (err) {}
   }
+
+  return undefined;
 }
 
 const getConfigFunction = config => () => {

package/lib/lib/evaluateTailwindFunctions.js

@@ -85,7 +85,7 @@ function validatePath(config, path, defaultValue) {
     };
   }
 
-  if (!(typeof value === 'string' || typeof value === 'number' || value instanceof String || value instanceof Number || Array.isArray(value))) {
+  if (!(typeof value === 'string' || typeof value === 'number' || typeof value === 'function' || value instanceof String || value instanceof Number || Array.isArray(value))) {
     let error = `'${pathString}' was found but does not resolve to a string.`;
 
     if (_lodash.default.isObject(value)) {

package/lib/lib/substituteClassApplyAtRules.js

@@ -324,7 +324,7 @@ function substituteClassApplyAtRules(config, getProcessedPlugins, configChanged)
 
     const generateLookupTree = configChanged || !defaultTailwindTree.has(lookupKey) ? () => {
       return (0, _postcss.default)([(0, _substituteTailwindAtRules.default)(config, getProcessedPlugins()), (0, _evaluateTailwindFunctions.default)(config), (0, _substituteVariantsAtRules.default)(config, getProcessedPlugins()), (0, _substituteResponsiveAtRules.default)(config), (0, _convertLayerAtRulesToControlComments.default)(config), (0, _substituteScreenAtRules.default)(config)]).process(requiredTailwindAtRules.map(rule => `@tailwind ${rule};`).join('\n'), {
-        from: undefined
+        from: __filename
       }).then(result => {
         defaultTailwindTree.set(lookupKey, result);
         return result;

package/lib/lib/substituteTailwindAtRules.js

@@ -62,7 +62,7 @@ function _default(_config, {
     css.walkAtRules('tailwind', atRule => {
       if (atRule.params === 'preflight') {
         // prettier-ignore
-        throw atRule.error("`@tailwind preflight` is not a valid at-rule in Tailwind v1.0, use `@tailwind base` instead.", {
+        throw atRule.error("`@tailwind preflight` is not a valid at-rule in Tailwind v2.0, use `@tailwind base` instead.", {
           word: 'preflight'
         });
       }

package/lib/plugins/css/preflight.css

@@ -141,6 +141,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
+  opacity: 1;
   color: theme('colors.gray.400', #a1a1aa);
 }
 

package/lib/plugins/preflight.js

@@ -9,6 +9,8 @@ var _fs = _interopRequireDefault(require("fs"));
 
 var _postcss = _interopRequireDefault(require("postcss"));
 
+var _package = _interopRequireDefault(require("../../package.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _default() {
@@ -19,6 +21,8 @@ function _default() {
 
     const preflightStyles = _postcss.default.parse(_fs.default.readFileSync(`${__dirname}/css/preflight.css`, 'utf8'));
 
-    addBase([...normalizeStyles.nodes, ...preflightStyles.nodes]);
+    addBase([_postcss.default.comment({
+      text: `! tailwindcss v${_package.default.version} | MIT License | https://tailwindcss.com`
+    }), ...normalizeStyles.nodes, ...preflightStyles.nodes]);
   };
 }

package/lib/util/transformThemeValue.js

@@ -14,5 +14,9 @@ function transformThemeValue(themeSection) {
     return value => Array.isArray(value) ? value.join(', ') : value;
   }
 
+  if (themeSection === 'colors') {
+    return value => typeof value === 'function' ? value({}) : value;
+  }
+
   return value => value;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -37,19 +37,19 @@
     "*.js"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.11.6",
-    "@babel/core": "^7.12.9",
-    "@babel/node": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "autoprefixer": "^10.0.2",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/node": "^7.12.10",
+    "@babel/preset-env": "^7.12.10",
+    "autoprefixer": "^10.2.4",
     "babel-jest": "^26.6.3",
     "clean-css": "^4.1.9",
-    "eslint": "^7.14.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.2.0",
+    "eslint": "^7.18.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-prettier": "^3.3.1",
     "jest": "^26.6.3",
-    "postcss": "^8.1.10",
-    "prettier": "^2.2.0",
+    "postcss": "^8.2.4",
+    "prettier": "^2.2.1",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {
@@ -57,25 +57,25 @@
     "postcss": "^8.0.9"
   },
   "dependencies": {
-    "@fullhuman/postcss-purgecss": "^3.0.0",
+    "@fullhuman/postcss-purgecss": "^3.1.3",
     "bytes": "^3.0.0",
     "chalk": "^4.1.0",
     "color": "^3.1.3",
     "detective": "^5.2.0",
     "didyoumean": "^1.2.1",
-    "fs-extra": "^9.0.1",
+    "fs-extra": "^9.1.0",
     "html-tags": "^3.1.0",
     "lodash": "^4.17.20",
     "modern-normalize": "^1.0.0",
     "node-emoji": "^1.8.1",
-    "object-hash": "^2.0.3",
+    "object-hash": "^2.1.1",
     "postcss-functions": "^3",
     "postcss-js": "^3.0.3",
     "postcss-nested": "^5.0.1",
     "postcss-selector-parser": "^6.0.4",
     "postcss-value-parser": "^4.1.0",
     "pretty-hrtime": "^1.0.3",
-    "reduce-css-calc": "^2.1.6",
+    "reduce-css-calc": "^2.1.8",
     "resolve": "^1.19.0"
   },
   "browserslist": [

package/stubs/defaultConfig.stub.js

@@ -141,6 +141,7 @@ module.exports = {
       wait: 'wait',
       text: 'text',
       move: 'move',
+      help: 'help',
       'not-allowed': 'not-allowed',
     },
     divideColor: (theme) => theme('borderColor'),
@@ -308,17 +309,6 @@ module.exports = {
       6: '6',
       7: '7',
     },
-    transformOrigin: {
-      center: 'center',
-      top: 'top',
-      'top-right': 'top right',
-      right: 'right',
-      'bottom-right': 'bottom right',
-      bottom: 'bottom',
-      'bottom-left': 'bottom left',
-      left: 'left',
-      'top-left': 'top left',
-    },
     gridTemplateColumns: {
       none: 'none',
       1: 'repeat(1, minmax(0, 1fr))',
@@ -616,8 +606,18 @@ module.exports = {
     },
     textColor: (theme) => theme('colors'),
     textOpacity: (theme) => theme('opacity'),
-    transitionDuration: {
-      DEFAULT: '150ms',
+    transformOrigin: {
+      center: 'center',
+      top: 'top',
+      'top-right': 'top right',
+      right: 'right',
+      'bottom-right': 'bottom right',
+      bottom: 'bottom',
+      'bottom-left': 'bottom left',
+      left: 'left',
+      'top-left': 'top left',
+    },
+    transitionDelay: {
       75: '75ms',
       100: '100ms',
       150: '150ms',
@@ -627,7 +627,8 @@ module.exports = {
       700: '700ms',
       1000: '1000ms',
     },
-    transitionDelay: {
+    transitionDuration: {
+      DEFAULT: '150ms',
       75: '75ms',
       100: '100ms',
       150: '150ms',
@@ -742,13 +743,13 @@ module.exports = {
     backgroundClip: ['responsive'],
     backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
     backgroundImage: ['responsive'],
-    backgroundOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
+    backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
     borderCollapse: ['responsive'],
     borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
-    borderOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
+    borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
     borderRadius: ['responsive'],
     borderStyle: ['responsive'],
     borderWidth: ['responsive'],
@@ -759,7 +760,7 @@ module.exports = {
     cursor: ['responsive'],
     display: ['responsive'],
     divideColor: ['responsive', 'dark'],
-    divideOpacity: ['responsive'],
+    divideOpacity: ['responsive', 'dark'],
     divideStyle: ['responsive'],
     divideWidth: ['responsive'],
     fill: ['responsive'],
@@ -814,14 +815,14 @@ module.exports = {
     placeItems: ['responsive'],
     placeSelf: ['responsive'],
     placeholderColor: ['responsive', 'dark', 'focus'],
-    placeholderOpacity: ['responsive', 'focus'],
+    placeholderOpacity: ['responsive', 'dark', 'focus'],
     pointerEvents: ['responsive'],
     position: ['responsive'],
     resize: ['responsive'],
     ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
     ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
     ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
-    ringOpacity: ['responsive', 'focus-within', 'focus'],
+    ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'],
     ringWidth: ['responsive', 'focus-within', 'focus'],
     rotate: ['responsive', 'hover', 'focus'],
     scale: ['responsive', 'hover', 'focus'],
@@ -833,7 +834,7 @@ module.exports = {
     textAlign: ['responsive'],
     textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
     textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    textOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
+    textOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
     textOverflow: ['responsive'],
     textTransform: ['responsive'],
     transform: ['responsive'],