tailwindcss 1.4.2 → 1.4.6

package/.eslintrc.json

@@ -9,7 +9,8 @@
   "extends": ["eslint-config-postcss", "prettier"],
   "plugins": ["prettier"],
   "rules": {
-    "no-unused-vars": [2, {"args": "all", "argsIgnorePattern": "^_"}],
+    "no-unused-vars": [2, { "args": "all", "argsIgnorePattern": "^_" }],
+    "no-warning-comments": 0,
     "prettier/prettier": [
       "error",
       {

package/README.md

@@ -1,9 +1,9 @@
-<p align="center">
-    <a href="https://tailwindcss.com/" target="_blank"><img width="200" src="https://tailwindcss.com/img/tailwind.svg"></a><br>
+<p>
+    <a href="https://tailwindcss.com/" target="_blank"><img width="350" src="https://refactoringui.nyc3.cdn.digitaloceanspaces.com/tailwind-logo.svg"></a><br>
     A utility-first CSS framework for rapidly building custom user interfaces.
 </p>
 
-<p align="center">
+<p>
     <a href="https://travis-ci.org/tailwindcss/tailwindcss"><img src="https://img.shields.io/travis/tailwindcss/tailwindcss/master.svg" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
     <a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>

package/lib/lib/purgeUnusedStyles.js

@@ -51,8 +51,9 @@ function purgeUnusedUtilities(config) {
 
   if (Array.isArray(config.purge) && config.purge.length === 0) {
     (0, _utils.log)();
-    (0, _utils.log)(emoji.warning, _chalk.default.yellow(' Skipping purge because no template paths provided.'));
-    (0, _utils.log)(_chalk.default.white('   To silence this warning, set `purge: false` in your Tailwind config file.'));
+    (0, _utils.log)(emoji.warning, _chalk.default.yellow(' Tailwind is not purging unused styles because no template paths have been provided.'));
+    (0, _utils.log)(_chalk.default.white('   If you have manually configured PurgeCSS outside of Tailwind or are deliberately not\n      removing unused styles, set `purge: false` in your Tailwind config file to silence\n      this warning.'));
+    (0, _utils.log)(_chalk.default.white('\n      https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css'));
     return removeTailwindComments;
   }
 

package/lib/lib/substituteVariantsAtRules.js

@@ -105,6 +105,10 @@ function _default(config, {
       }
 
       _lodash.default.forEach(_lodash.default.without(ensureIncludesDefault(variants), 'responsive'), variant => {
+        if (!variantGenerators[variant]) {
+          throw new Error(`Your config mentions the "${variant}" variant, but "${variant}" doesn't appear to be a variant. Did you forget or misconfigure a plugin that supplies that variant?`);
+        }
+
         variantGenerators[variant](atRule, config);
       });
 

package/lib/plugins/backgroundColor.js

@@ -19,7 +19,8 @@ function _default() {
     e,
     theme,
     variants,
-    target
+    target,
+    corePlugins
   }) {
     if (target('backgroundColor') === 'ie11') {
       const utilities = _lodash.default.fromPairs(_lodash.default.map((0, _flattenColorPalette.default)(theme('backgroundColor')), (value, modifier) => {
@@ -33,11 +34,13 @@ function _default() {
     }
 
     const utilities = _lodash.default.fromPairs(_lodash.default.map((0, _flattenColorPalette.default)(theme('backgroundColor')), (value, modifier) => {
-      return [`.${e(`bg-${modifier}`)}`, (0, _withAlphaVariable.default)({
+      return [`.${e(`bg-${modifier}`)}`, corePlugins('backgroundOpacity') ? (0, _withAlphaVariable.default)({
         color: value,
         property: 'background-color',
         variable: '--bg-opacity'
-      })];
+      }) : {
+        'background-color': value
+      }];
     }));
 
     addUtilities(utilities, variants('backgroundColor'));

package/lib/plugins/borderColor.js

@@ -19,7 +19,8 @@ function _default() {
     e,
     theme,
     variants,
-    target
+    target,
+    corePlugins
   }) {
     if (target('borderColor') === 'ie11') {
       const colors = (0, _flattenColorPalette.default)(theme('borderColor'));
@@ -37,11 +38,13 @@ function _default() {
     const colors = (0, _flattenColorPalette.default)(theme('borderColor'));
 
     const utilities = _lodash.default.fromPairs(_lodash.default.map(_lodash.default.omit(colors, 'default'), (value, modifier) => {
-      return [`.${e(`border-${modifier}`)}`, (0, _withAlphaVariable.default)({
+      return [`.${e(`border-${modifier}`)}`, corePlugins('borderOpacity') ? (0, _withAlphaVariable.default)({
         color: value,
         property: 'border-color',
         variable: '--border-opacity'
-      })];
+      }) : {
+        'border-color': value
+      }];
     }));
 
     addUtilities(utilities, variants('borderColor'));

package/lib/plugins/divideColor.js

@@ -19,7 +19,8 @@ function _default() {
     e,
     theme,
     variants,
-    target
+    target,
+    corePlugins
   }) {
     const colors = (0, _flattenColorPalette.default)(theme('divideColor'));
 
@@ -30,16 +31,18 @@ function _default() {
         }];
       }));
 
-      addUtilities(utilities, variants('textColor'));
+      addUtilities(utilities, variants('divideColor'));
       return;
     }
 
     const utilities = _lodash.default.fromPairs(_lodash.default.map(_lodash.default.omit(colors, 'default'), (value, modifier) => {
-      return [`.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`, (0, _withAlphaVariable.default)({
+      return [`.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`, corePlugins('divideOpacity') ? (0, _withAlphaVariable.default)({
         color: value,
         property: 'border-color',
         variable: '--divide-opacity'
-      })];
+      }) : {
+        'border-color': value
+      }];
     }));
 
     addUtilities(utilities, variants('divideColor'));

package/lib/plugins/placeholderColor.js

@@ -19,7 +19,8 @@ function _default() {
     e,
     theme,
     variants,
-    target
+    target,
+    corePlugins
   }) {
     if (target('placeholderColor') === 'ie11') {
       const utilities = _lodash.default.fromPairs(_lodash.default.map((0, _flattenColorPalette.default)(theme('placeholderColor')), (value, modifier) => {
@@ -33,11 +34,13 @@ function _default() {
     }
 
     const utilities = _lodash.default.fromPairs(_lodash.default.map((0, _flattenColorPalette.default)(theme('placeholderColor')), (value, modifier) => {
-      return [`.${e(`placeholder-${modifier}`)}::placeholder`, (0, _withAlphaVariable.default)({
+      return [`.${e(`placeholder-${modifier}`)}::placeholder`, corePlugins('placeholderOpacity') ? (0, _withAlphaVariable.default)({
         color: value,
         property: 'color',
         variable: '--placeholder-opacity'
-      })];
+      }) : {
+        color: value
+      }];
     }));
 
     addUtilities(utilities, variants('placeholderColor'));

package/lib/plugins/textColor.js

@@ -19,7 +19,8 @@ function _default() {
     e,
     theme,
     variants,
-    target
+    target,
+    corePlugins
   }) {
     if (target('textColor') === 'ie11') {
       const utilities = _lodash.default.fromPairs(_lodash.default.map((0, _flattenColorPalette.default)(theme('textColor')), (value, modifier) => {
@@ -33,11 +34,13 @@ function _default() {
     }
 
     const utilities = _lodash.default.fromPairs(_lodash.default.map((0, _flattenColorPalette.default)(theme('textColor')), (value, modifier) => {
-      return [`.${e(`text-${modifier}`)}`, (0, _withAlphaVariable.default)({
+      return [`.${e(`text-${modifier}`)}`, corePlugins('textOpacity') ? (0, _withAlphaVariable.default)({
         color: value,
         property: 'color',
         variable: '--text-opacity'
-      })];
+      }) : {
+        color: value
+      }];
     }));
 
     addUtilities(utilities, variants('textColor'));

package/lib/util/processPlugins.js

@@ -27,6 +27,8 @@ var _wrapWithVariants = _interopRequireDefault(require("../util/wrapWithVariants
 
 var _increaseSpecificity = _interopRequireDefault(require("../util/increaseSpecificity"));
 
+var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function parseStyles(styles) {
@@ -37,6 +39,14 @@ function parseStyles(styles) {
   return _lodash.default.flatMap(styles, style => style instanceof _node.default ? style : (0, _parseObjectStyles.default)(style));
 }
 
+function containsClass(value) {
+  return (0, _postcssSelectorParser.default)(selectors => {
+    let classFound = false;
+    selectors.walkClasses(() => classFound = true);
+    return classFound;
+  }).transformSync(value);
+}
+
 function _default(plugins, config) {
   const pluginBaseStyles = [];
   const pluginComponents = [];
@@ -60,6 +70,13 @@ function _default(plugins, config) {
       postcss: _postcss.default,
       config: getConfigValue,
       theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
+      corePlugins: path => {
+        if (Array.isArray(config.corePlugins)) {
+          return config.corePlugins.includes(path);
+        }
+
+        return getConfigValue(`corePlugins.${path}`, true);
+      },
       variants: (path, defaultValue) => {
         if (Array.isArray(config.variants)) {
           return config.variants;
@@ -69,7 +86,7 @@ function _default(plugins, config) {
       },
       target: path => {
         if (_lodash.default.isString(config.target)) {
-          return config.target;
+          return config.target === 'browserslist' ? browserslistTarget : config.target;
         }
 
         const [defaultTarget, targetOverrides] = getConfigValue('target');
@@ -103,6 +120,10 @@ function _default(plugins, config) {
             if (config.important === true) {
               rule.walkDecls(decl => decl.important = true);
             } else if (typeof config.important === 'string') {
+              if (containsClass(config.important)) {
+                throw rule.error(`Classes are not allowed when using the \`important\` option with a string argument. Please use an ID instead.`);
+              }
+
               rule.selectors = rule.selectors.map(selector => {
                 return (0, _increaseSpecificity.default)(config.important, selector);
               });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "1.4.2",
+  "version": "1.4.6",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -30,7 +30,7 @@
     "@babel/core": "^7.0.0",
     "@babel/node": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
-    "babel-jest": "^25.1.0",
+    "babel-jest": "^26.0.0",
     "clean-css": "^4.1.9",
     "eslint": "^6.0.1",
     "eslint-config-postcss": "^2.0.2",

package/scripts/rebuildFixtures.js

@@ -44,6 +44,19 @@ Promise.all([
     to: '__tests__/fixtures/tailwind-output-ie11.css',
     config: { target: 'ie11' },
   }),
+  build({
+    from: '__tests__/fixtures/tailwind-input.css',
+    to: '__tests__/fixtures/tailwind-output-no-color-opacity.css',
+    config: {
+      corePlugins: {
+        textOpacity: false,
+        backgroundOpacity: false,
+        borderOpacity: false,
+        placeholderOpacity: false,
+        divideOpacity: false,
+      },
+    },
+  }),
 ]).then(() => {
   console.log('\nFinished rebuilding fixtures.')
   console.log(