tailwindcss - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

defaultConfig.stub.js

@@ -762,15 +762,117 @@ /*
   |-----------------------------------------------------------------------------
-  | Options                  https://tailwindcss.com/docs/configuration#options
+  | SVG fill                                   https://tailwindcss.com/docs/svg
   |-----------------------------------------------------------------------------
   |
-  | Here is where you can set your Tailwind configuration options. For more
-  | details about these options, visit the configuration options documentation.
+  | Here is where you define your SVG fill colors. By default we just provide
+  | `fill-current` which sets the fill to the current text color. This lets you
+  | specify a fill color using existing text color utilities and helps keep the
+  | generated CSS file size down.
   |
+  | Class name: .fill-{name}
+  |
   */
 
+  svgFill: {
+    'current': 'currentColor',
+  },
+
+
+  /*
+  |-----------------------------------------------------------------------------
+  | SVG stroke                                 https://tailwindcss.com/docs/svg
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define your SVG stroke colors. By default we just provide
+  | `stroke-current` which sets the stroke to the current text color. This lets
+  | you specify a stroke color using existing text color utilities and helps
+  | keep the generated CSS file size down.
+  |
+  | Class name: .stroke-{name}
+  |
+  */
+
+  svgStroke: {
+    'current': 'currentColor',
+  },
+
+
+  /*
+  |-----------------------------------------------------------------------------
+  | Modules                  https://tailwindcss.com/docs/configuration#modules
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you control which modules are generated and what variants are
+  | generated for each of those modules.
+  |
+  | Currently supported variants: 'responsive', 'hover', 'focus'
+  |
+  | To disable a module completely, use `false` instead of an array.
+  |
+  */
+
+  modules: {
+    appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
+    backgroundColors: ['responsive', 'hover'],
+    backgroundPosition: ['responsive'],
+    backgroundRepeat: ['responsive'],
+    backgroundSize: ['responsive'],
+    borderColors: ['responsive', 'hover'],
+    borderRadius: ['responsive'],
+    borderStyle: ['responsive'],
+    borderWidths: ['responsive'],
+    cursor: ['responsive'],
+    display: ['responsive'],
+    flexbox: ['responsive'],
+    float: ['responsive'],
+    fonts: ['responsive'],
+    fontWeights: ['responsive', 'hover'],
+    height: ['responsive'],
+    leading: ['responsive'],
+    lists: ['responsive'],
+    margin: ['responsive'],
+    maxHeight: ['responsive'],
+    maxWidth: ['responsive'],
+    minHeight: ['responsive'],
+    minWidth: ['responsive'],
+    negativeMargin: ['responsive'],
+    opacity: ['responsive'],
+    overflow: ['responsive'],
+    padding: ['responsive'],
+    pointerEvents: ['responsive'],
+    position: ['responsive'],
+    resize: ['responsive'],
+    shadows: ['responsive'],
+    svgFill: [],
+    svgStroke: [],
+    textAlign: ['responsive'],
+    textColors: ['responsive', 'hover'],
+    textSizes: ['responsive'],
+    textStyle: ['responsive', 'hover'],
+    tracking: ['responsive'],
+    userSelect: ['responsive'],
+    verticalAlign: ['responsive'],
+    visibility: ['responsive'],
+    whitespace: ['responsive'],
+    width: ['responsive'],
+    zIndex: ['responsive'],
+  },
+
+
+  /*
+  |-----------------------------------------------------------------------------
+  | Advanced Options         https://tailwindcss.com/docs/configuration#options
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you can tweak advanced configuration options. We recommend
+  | leaving these options alone unless you absolutely need to change them.
+  |
+  */
+
   options: {
     prefix: '',
     important: false,
+    separator: ':',
   },
 
 }

lib/generators/backgroundColors.js

@@ -8,7 +8,7 @@ 'use strict';
 exports.default = function ({ backgroundColors }) {
-  return (0, _hoverable2.default)(_lodash2.default.map(backgroundColors, (color, className) => {
+  return _lodash2.default.map(backgroundColors, (color, className) => {
     return (0, _defineClass2.default)(`bg-${className}`, {
       'background-color': color
     });
-  }));
+  });
 };
@@ -24,6 +24,2 @@
 
-var _hoverable = require('../util/hoverable');
-
-var _hoverable2 = _interopRequireDefault(_hoverable);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/generators/borderColors.js

@@ -8,7 +8,7 @@ 'use strict';
 exports.default = function ({ borderColors }) {
-  return (0, _hoverable2.default)(_lodash2.default.map(_lodash2.default.omit(borderColors, 'default'), (color, className) => {
+  return _lodash2.default.map(_lodash2.default.omit(borderColors, 'default'), (color, className) => {
     return (0, _defineClass2.default)(`border-${className}`, {
       'border-color': color
     });
-  }));
+  });
 };
@@ -24,6 +24,2 @@
 
-var _hoverable = require('../util/hoverable');
-
-var _hoverable2 = _interopRequireDefault(_hoverable);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/generators/lists.js

@@ -11,3 +11,2 @@ 'use strict';
       'list-style': 'none',
-      margin: '0',
       padding: '0'
@@ -14,0 +13,0 @@ }

lib/generators/position.js

@@ -13,8 +13,8 @@ 'use strict';
     relative: { position: 'relative' },
-    'pin-t': { top: 0 },
-    'pin-r': { right: 0 },
-    'pin-b': { bottom: 0 },
-    'pin-l': { left: 0 },
-    'pin-y': { top: 0, bottom: 0 },
-    'pin-x': { right: 0, left: 0 },
+    'pin-none': {
+      top: 'auto',
+      right: 'auto',
+      bottom: 'auto',
+      left: 'auto'
+    },
     pin: {
@@ -24,6 +24,10 @@ top: 0,
       bottom: 0,
-      left: 0,
-      width: '100%',
-      height: '100%'
-    }
+      left: 0
+    },
+    'pin-y': { top: 0, bottom: 0 },
+    'pin-x': { right: 0, left: 0 },
+    'pin-t': { top: 0 },
+    'pin-r': { right: 0 },
+    'pin-b': { bottom: 0 },
+    'pin-l': { left: 0 }
   });
@@ -30,0 +34,0 @@ };

lib/generators/resize.js

@@ -11,3 +11,4 @@ 'use strict';
     'resize-y': { resize: 'vertical' },
-    'resize-x': { resize: 'horizontal' }
+    'resize-x': { resize: 'horizontal' },
+    resize: { resize: 'both' }
   });
@@ -14,0 +15,0 @@ };

lib/generators/textColors.js

@@ -8,7 +8,7 @@ 'use strict';
 exports.default = function ({ textColors }) {
-  return (0, _hoverable2.default)(_lodash2.default.map(textColors, (color, modifier) => {
+  return _lodash2.default.map(textColors, (color, modifier) => {
     return (0, _defineClass2.default)(`text-${modifier}`, {
       color
     });
-  }));
+  });
 };
@@ -24,6 +24,2 @@
 
-var _hoverable = require('../util/hoverable');
-
-var _hoverable2 = _interopRequireDefault(_hoverable);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/generators/textStyle.js

@@ -8,3 +8,3 @@ 'use strict';
 exports.default = function () {
-  return (0, _hoverable2.default)((0, _defineClasses2.default)({
+  return (0, _defineClasses2.default)({
     italic: { 'font-style': 'italic' },
@@ -30,3 +30,3 @@ roman: { 'font-style': 'normal' },
     }
-  }));
+  });
 };
@@ -38,6 +38,2 @@
 
-var _hoverable = require('../util/hoverable');
-
-var _hoverable2 = _interopRequireDefault(_hoverable);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/index.js

@@ -23,5 +23,5 @@ 'use strict';
 
-var _substitutePreflightAtRule = require('./lib/substitutePreflightAtRule');
+var _substituteTailwindPreflightAtRule = require('./lib/substituteTailwindPreflightAtRule');
 
-var _substitutePreflightAtRule2 = _interopRequireDefault(_substitutePreflightAtRule);
+var _substituteTailwindPreflightAtRule2 = _interopRequireDefault(_substituteTailwindPreflightAtRule);
 
@@ -32,14 +32,10 @@ var _evaluateTailwindFunctions = require('./lib/evaluateTailwindFunctions');
 
-var _generateUtilities = require('./lib/generateUtilities');
+var _substituteTailwindUtilitiesAtRules = require('./lib/substituteTailwindUtilitiesAtRules');
 
-var _generateUtilities2 = _interopRequireDefault(_generateUtilities);
+var _substituteTailwindUtilitiesAtRules2 = _interopRequireDefault(_substituteTailwindUtilitiesAtRules);
 
-var _substituteHoverableAtRules = require('./lib/substituteHoverableAtRules');
+var _substituteVariantsAtRules = require('./lib/substituteVariantsAtRules');
 
-var _substituteHoverableAtRules2 = _interopRequireDefault(_substituteHoverableAtRules);
+var _substituteVariantsAtRules2 = _interopRequireDefault(_substituteVariantsAtRules);
 
-var _substituteFocusableAtRules = require('./lib/substituteFocusableAtRules');
-
-var _substituteFocusableAtRules2 = _interopRequireDefault(_substituteFocusableAtRules);
-
 var _substituteResponsiveAtRules = require('./lib/substituteResponsiveAtRules');
@@ -57,2 +53,6 @@
 
+var _mergeConfigWithDefaults = require('./util/mergeConfigWithDefaults');
+
+var _mergeConfigWithDefaults2 = _interopRequireDefault(_mergeConfigWithDefaults);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -73,6 +73,6 @@
     delete require.cache[require.resolve(_path2.default.resolve(config))];
-    return require(_path2.default.resolve(config));
+    return (0, _mergeConfigWithDefaults2.default)(require(_path2.default.resolve(config)), require('../defaultConfig')());
   };
 
-  return (0, _postcss2.default)(...plugins, ...[(0, _substitutePreflightAtRule2.default)(lazyConfig), (0, _evaluateTailwindFunctions2.default)(lazyConfig), (0, _generateUtilities2.default)(lazyConfig), (0, _substituteHoverableAtRules2.default)(lazyConfig), (0, _substituteFocusableAtRules2.default)(lazyConfig), (0, _substituteResponsiveAtRules2.default)(lazyConfig), (0, _substituteScreenAtRules2.default)(lazyConfig), (0, _substituteClassApplyAtRules2.default)(lazyConfig), _stylefmt2.default]);
+  return (0, _postcss2.default)(...plugins, ...[(0, _substituteTailwindPreflightAtRule2.default)(lazyConfig), (0, _evaluateTailwindFunctions2.default)(lazyConfig), (0, _substituteTailwindUtilitiesAtRules2.default)(lazyConfig), (0, _substituteVariantsAtRules2.default)(lazyConfig), (0, _substituteResponsiveAtRules2.default)(lazyConfig), (0, _substituteScreenAtRules2.default)(lazyConfig), (0, _substituteClassApplyAtRules2.default)(lazyConfig), _stylefmt2.default]);
 });
@@ -79,0 +79,0 @@

lib/lib/evaluateTailwindFunctions.js

@@ -8,8 +8,6 @@ 'use strict';
 exports.default = function (config) {
-  const options = config();
-
   return (0, _postcssFunctions2.default)({
     functions: {
       config: (path, defaultValue) => {
-        return _lodash2.default.get(options, _lodash2.default.trim(path, `'"`), defaultValue);
+        return _lodash2.default.get(config(), _lodash2.default.trim(path, `'"`), defaultValue);
       }
@@ -16,0 +14,0 @@ }

lib/lib/substituteClassApplyAtRules.js

@@ -78,3 +78,3 @@ 'use strict';
     // prettier-ignore
-    onError(`\`@apply\` cannot be used with ${mixin} because ${mixin} either does not exist, or it's actual definition includes a pseudo-class like :hover, :active, etc.`);
+    onError(`\`@apply\` cannot be used with \`${mixin}\` because \`${mixin}\` either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that \`${mixin}\` exists, make sure that any \`@import\` statements are being properly processed *before* Tailwind CSS sees your CSS, as \`@apply\` can only be used for classes in the same CSS tree.`);
   }
@@ -81,0 +81,0 @@

lib/lib/substituteResponsiveAtRules.js

@@ -10,2 +10,3 @@ 'use strict';
     const screens = config().screens;
+    const separator = config().options.separator;
     const responsiveRules = [];
@@ -29,3 +30,3 @@ let finalRules = [];
         const cloned = rule.clone();
-        cloned.selectors = _lodash2.default.map(rule.selectors, selector => `.${screen}\\:${selector.slice(1)}`);
+        cloned.selectors = _lodash2.default.map(rule.selectors, selector => (0, _buildClassVariant2.default)(selector, screen, separator));
         return cloned;
@@ -75,2 +76,6 @@ }));
 
+var _buildClassVariant = require('../util/buildClassVariant');
+
+var _buildClassVariant2 = _interopRequireDefault(_buildClassVariant);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/util/hoverable.js

@@ -8,2 +8,6 @@ 'use strict';
 
+var _lodash = require('lodash');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
 var _postcss = require('postcss');
@@ -22,3 +26,3 @@
     name: 'hoverable'
-  }).append((0, _cloneNodes2.default)(rules));
+  }).append((0, _cloneNodes2.default)(_lodash2.default.isArray(rules) ? rules : [rules]));
 }

lib/util/responsive.js

@@ -25,3 +25,3 @@ 'use strict';
     name: 'responsive'
-  }).append((0, _cloneNodes2.default)(_lodash2.default.isArray(rules) ? rules : rules.nodes));
+  }).append((0, _cloneNodes2.default)(_lodash2.default.isArray(rules) ? rules : [rules]));
 }

package.json

 {
   "name": "tailwindcss",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
@@ -71,2 +71,8 @@ "license": "MIT",
   },
+  "jest": {
+    "setupTestFrameworkScriptFile": "<rootDir>/jest/customMatchers.js",
+    "testPathIgnorePatterns": [
+      "<rootDir>/__tests__/fixtures/"
+    ]
+  },
   "engines": {
@@ -73,0 +79,0 @@ "node": ">=6.9.0"

README.md

@@ -19,4 +19,14 @@ <p align="center">
 
+## Community
+
+For help, discussion about best practices, or any other conversation that would benefit from being searchable:
+
+[Discuss Tailwind CSS on GitHub](https://github.com/tailwindcss/discuss/issues?q=is%3Aissue+sort%3Aupdated-desc)
+
+For casual chit-chat with others using the framework:
+
+[Join the Tailwind CSS Slack Community](https://join.slack.com/t/tailwindcss/shared_invite/enQtMjc2NTA1NTg0NTEyLTY4ZTg1YWFjM2NjMTRkMmNkMTA4MGNiZTFmNDYyYTJhNjNkY2QxODQwODE4MWRiZDFlNzdmOGI0MmQ1M2EzZmQ)
+
 ## Contributing
 
 If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md) **before submitting a pull request**.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1502781

increased by15.34%

Number of package files

100

increased by17.65%

Lines of code

33560

increased by19.24%

Number of lines in readme file

32

increased by45.45%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes