tailwindcss
Advanced tools
tailwindcss - npm Package Compare versions
Comparing version 0.6.1 to 0.6.2
@@ -899,2 +899,3 @@ /* | ||
| svgStroke: [], | ||
| tableLayout: ['responsive'], | ||
| textAlign: ['responsive'], | ||
@@ -901,0 +902,0 @@ textColors: ['responsive', 'hover', 'focus'], |
@@ -23,26 +23,6 @@ 'use strict'; | ||
| var _substituteTailwindAtRules = require('./lib/substituteTailwindAtRules'); | ||
| var _processTailwindFeatures = require('./processTailwindFeatures'); | ||
| var _substituteTailwindAtRules2 = _interopRequireDefault(_substituteTailwindAtRules); | ||
| var _processTailwindFeatures2 = _interopRequireDefault(_processTailwindFeatures); | ||
| var _evaluateTailwindFunctions = require('./lib/evaluateTailwindFunctions'); | ||
| var _evaluateTailwindFunctions2 = _interopRequireDefault(_evaluateTailwindFunctions); | ||
| var _substituteVariantsAtRules = require('./lib/substituteVariantsAtRules'); | ||
| var _substituteVariantsAtRules2 = _interopRequireDefault(_substituteVariantsAtRules); | ||
| var _substituteResponsiveAtRules = require('./lib/substituteResponsiveAtRules'); | ||
| var _substituteResponsiveAtRules2 = _interopRequireDefault(_substituteResponsiveAtRules); | ||
| var _substituteScreenAtRules = require('./lib/substituteScreenAtRules'); | ||
| var _substituteScreenAtRules2 = _interopRequireDefault(_substituteScreenAtRules); | ||
| var _substituteClassApplyAtRules = require('./lib/substituteClassApplyAtRules'); | ||
| var _substituteClassApplyAtRules2 = _interopRequireDefault(_substituteClassApplyAtRules); | ||
| var _mergeConfigWithDefaults = require('./util/mergeConfigWithDefaults'); | ||
@@ -57,3 +37,3 @@ | ||
| if (!_lodash2.default.isUndefined(config)) { | ||
| if (!_lodash2.default.isUndefined(config) && !_lodash2.default.isObject(config)) { | ||
| plugins.push((0, _registerConfigAsDependency2.default)(_path2.default.resolve(config))); | ||
@@ -67,7 +47,10 @@ } | ||
| delete require.cache[require.resolve(_path2.default.resolve(config))]; | ||
| return (0, _mergeConfigWithDefaults2.default)(require(_path2.default.resolve(config)), require('../defaultConfig')()); | ||
| if (!_lodash2.default.isObject(config)) { | ||
| delete require.cache[require.resolve(_path2.default.resolve(config))]; | ||
| } | ||
| return (0, _mergeConfigWithDefaults2.default)(_lodash2.default.isObject(config) ? config : require(_path2.default.resolve(config)), require('../defaultConfig')()); | ||
| }; | ||
| return (0, _postcss2.default)(...plugins, ...[(0, _substituteTailwindAtRules2.default)(lazyConfig), (0, _evaluateTailwindFunctions2.default)(lazyConfig), (0, _substituteVariantsAtRules2.default)(lazyConfig), (0, _substituteResponsiveAtRules2.default)(lazyConfig), (0, _substituteScreenAtRules2.default)(lazyConfig), (0, _substituteClassApplyAtRules2.default)(lazyConfig), (0, _perfectionist2.default)({ | ||
| return (0, _postcss2.default)([...plugins, (0, _processTailwindFeatures2.default)(lazyConfig), (0, _perfectionist2.default)({ | ||
| cascade: true, | ||
@@ -74,0 +57,0 @@ colorShorthand: true, |
@@ -11,3 +11,3 @@ 'use strict'; | ||
| config: (path, defaultValue) => { | ||
| return _lodash2.default.get(config(), _lodash2.default.trim(path, `'"`), defaultValue); | ||
| return _lodash2.default.get(config, _lodash2.default.trim(path, `'"`), defaultValue); | ||
| } | ||
@@ -14,0 +14,0 @@ } |
@@ -7,9 +7,10 @@ 'use strict'; | ||
| exports.default = function () { | ||
| exports.default = function (config, generatedUtilities) { | ||
| return function (css) { | ||
| const classLookup = buildClassTable(css); | ||
| const shadowLookup = _lodash2.default.get(config, 'experiments.shadowLookup', false) ? buildShadowTable(generatedUtilities) : {}; | ||
| css.walkRules(rule => { | ||
| rule.walkAtRules('apply', atRule => { | ||
| const mixins = _postcss2.default.list.space(atRule.params); | ||
| const classesAndProperties = _postcss2.default.list.space(atRule.params); | ||
@@ -23,13 +24,13 @@ /* | ||
| */ | ||
| const [customProperties, classes] = _lodash2.default.partition(mixins, mixin => { | ||
| return _lodash2.default.startsWith(mixin, '--'); | ||
| const [customProperties, classes] = _lodash2.default.partition(classesAndProperties, classOrProperty => { | ||
| return _lodash2.default.startsWith(classOrProperty, '--'); | ||
| }); | ||
| const decls = (0, _lodash2.default)(classes).reject(mixin => mixin === '!important').flatMap(mixin => { | ||
| return findMixin(classLookup, normalizeClassName(mixin), message => { | ||
| throw atRule.error(message); | ||
| const decls = (0, _lodash2.default)(classes).reject(cssClass => cssClass === '!important').flatMap(cssClass => { | ||
| return findClass(normalizeClassName(cssClass), classLookup, shadowLookup, message => { | ||
| return atRule.error(message); | ||
| }); | ||
| }).value(); | ||
| _lodash2.default.tap(_lodash2.default.last(mixins) === '!important', important => { | ||
| _lodash2.default.tap(_lodash2.default.last(classesAndProperties) === '!important', important => { | ||
| decls.forEach(decl => decl.important = important); | ||
@@ -77,2 +78,12 @@ }); | ||
| function buildShadowTable(generatedUtilities) { | ||
| const utilities = _postcss2.default.root(); | ||
| generatedUtilities.walkAtRules('variants', atRule => { | ||
| utilities.append(atRule.clone().nodes); | ||
| }); | ||
| return buildClassTable(utilities); | ||
| } | ||
| function normalizeClassName(className) { | ||
@@ -82,8 +93,12 @@ return `.${(0, _escapeClassName2.default)(_lodash2.default.trimStart(className, '.'))}`; | ||
| function findMixin(classTable, mixin, onError) { | ||
| const matches = _lodash2.default.get(classTable, mixin, []); | ||
| function findClass(classToApply, classTable, shadowLookup, onError) { | ||
| const matches = _lodash2.default.get(classTable, classToApply, []); | ||
| if (_lodash2.default.isEmpty(matches)) { | ||
| // prettier-ignore | ||
| 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.`); | ||
| if (_lodash2.default.isEmpty(shadowLookup)) { | ||
| // prettier-ignore | ||
| throw onError(`\`@apply\` cannot be used with \`${classToApply}\` because \`${classToApply}\` either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that \`${classToApply}\` 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.`); | ||
| } | ||
| return findClass(classToApply, shadowLookup, {}, onError); | ||
| } | ||
@@ -93,3 +108,3 @@ | ||
| // prettier-ignore | ||
| onError(`\`@apply\` cannot be used with ${mixin} because ${mixin} is included in multiple rulesets.`); | ||
| throw onError(`\`@apply\` cannot be used with ${classToApply} because ${classToApply} is included in multiple rulesets.`); | ||
| } | ||
@@ -101,3 +116,3 @@ | ||
| // prettier-ignore | ||
| onError(`\`@apply\` cannot be used with ${mixin} because ${mixin} is nested inside of an at-rule (@${match.parent.name}).`); | ||
| throw onError(`\`@apply\` cannot be used with ${classToApply} because ${classToApply} is nested inside of an at-rule (@${match.parent.name}).`); | ||
| } | ||
@@ -104,0 +119,0 @@ |
@@ -9,4 +9,4 @@ 'use strict'; | ||
| return function (css) { | ||
| const screens = config().screens; | ||
| const separator = config().options.separator; | ||
| const screens = config.screens; | ||
| const separator = config.options.separator; | ||
| const responsiveRules = []; | ||
@@ -13,0 +13,0 @@ let finalRules = []; |
@@ -9,8 +9,6 @@ 'use strict'; | ||
| return function (css) { | ||
| const options = config(); | ||
| css.walkAtRules('screen', atRule => { | ||
| const screen = atRule.params; | ||
| if (!_lodash2.default.has(options.screens, screen)) { | ||
| if (!_lodash2.default.has(config.screens, screen)) { | ||
| throw atRule.error(`No \`${screen}\` screen found.`); | ||
@@ -20,3 +18,3 @@ } | ||
| atRule.name = 'media'; | ||
| atRule.params = (0, _buildMediaQuery2.default)(options.screens[screen]); | ||
| atRule.params = (0, _buildMediaQuery2.default)(config.screens[screen]); | ||
| }); | ||
@@ -23,0 +21,0 @@ }; |
@@ -7,8 +7,4 @@ 'use strict'; | ||
| exports.default = function (config) { | ||
| exports.default = function (config, { components: pluginComponents }, generatedUtilities) { | ||
| return function (css) { | ||
| const unwrappedConfig = config(); | ||
| const [pluginComponents, pluginUtilities] = (0, _processPlugins2.default)(unwrappedConfig); | ||
| css.walkAtRules('tailwind', atRule => { | ||
@@ -36,23 +32,4 @@ if (atRule.params === 'preflight') { | ||
| if (atRule.params === 'utilities') { | ||
| const utilities = (0, _generateModules2.default)(_utilityModules2.default, unwrappedConfig.modules, unwrappedConfig); | ||
| if (unwrappedConfig.options.important) { | ||
| utilities.walkDecls(decl => decl.important = true); | ||
| } | ||
| const tailwindUtilityTree = _postcss2.default.root({ | ||
| nodes: utilities.nodes | ||
| }); | ||
| const pluginUtilityTree = _postcss2.default.root({ | ||
| nodes: pluginUtilities | ||
| }); | ||
| (0, _prefixTree2.default)(tailwindUtilityTree, unwrappedConfig.options.prefix); | ||
| tailwindUtilityTree.walk(node => node.source = atRule.source); | ||
| pluginUtilityTree.walk(node => node.source = atRule.source); | ||
| atRule.before(tailwindUtilityTree); | ||
| atRule.before(pluginUtilityTree); | ||
| generatedUtilities.walk(node => node.source = atRule.source); | ||
| atRule.before(generatedUtilities); | ||
| atRule.remove(); | ||
@@ -72,18 +49,2 @@ } | ||
| var _utilityModules = require('../utilityModules'); | ||
| var _utilityModules2 = _interopRequireDefault(_utilityModules); | ||
| var _prefixTree = require('../util/prefixTree'); | ||
| var _prefixTree2 = _interopRequireDefault(_prefixTree); | ||
| var _generateModules = require('../util/generateModules'); | ||
| var _generateModules2 = _interopRequireDefault(_generateModules); | ||
| var _processPlugins = require('../util/processPlugins'); | ||
| var _processPlugins2 = _interopRequireDefault(_processPlugins); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
@@ -7,8 +7,10 @@ 'use strict'; | ||
| exports.default = function (config) { | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| exports.default = function (config, { variantGenerators: pluginVariantGenerators }) { | ||
| return function (css) { | ||
| const unwrappedConfig = config(); | ||
| const variantGenerators = _extends({}, defaultVariantGenerators, pluginVariantGenerators); | ||
| css.walkAtRules('variants', atRule => { | ||
| const variants = _postcss2.default.list.comma(atRule.params); | ||
| const variants = _postcss2.default.list.comma(atRule.params).filter(variant => variant !== ''); | ||
@@ -23,7 +25,13 @@ if (variants.includes('responsive')) { | ||
| _lodash2.default.forEach(['group-hover', 'hover', 'focus', 'active'], variant => { | ||
| if (variants.includes(variant)) { | ||
| variantGenerators[variant](atRule, unwrappedConfig); | ||
| } | ||
| }); | ||
| if (_lodash2.default.get(config, 'experiments.pluginVariants', false)) { | ||
| _lodash2.default.forEach(_lodash2.default.without(variants, 'responsive'), variant => { | ||
| variantGenerators[variant](atRule, config); | ||
| }); | ||
| } else { | ||
| _lodash2.default.forEach(['group-hover', 'hover', 'focus', 'active'], variant => { | ||
| if (variants.includes(variant)) { | ||
| variantGenerators[variant](atRule, config); | ||
| } | ||
| }); | ||
| } | ||
@@ -43,34 +51,22 @@ atRule.remove(); | ||
| var _buildSelectorVariant = require('../util/buildSelectorVariant'); | ||
| var _generateVariantFunction = require('../util/generateVariantFunction'); | ||
| var _buildSelectorVariant2 = _interopRequireDefault(_buildSelectorVariant); | ||
| var _generateVariantFunction2 = _interopRequireDefault(_generateVariantFunction); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function buildPseudoClassVariant(selector, pseudoClass, separator) { | ||
| return `${(0, _buildSelectorVariant2.default)(selector, pseudoClass, separator)}:${pseudoClass}`; | ||
| } | ||
| function generatePseudoClassVariant(pseudoClass) { | ||
| return (container, config) => { | ||
| const cloned = container.clone(); | ||
| cloned.walkRules(rule => { | ||
| rule.selector = buildPseudoClassVariant(rule.selector, pseudoClass, config.options.separator); | ||
| return (0, _generateVariantFunction2.default)(({ modifySelectors, separator }) => { | ||
| return modifySelectors(({ className }) => { | ||
| return `.${pseudoClass}${separator}${className}:${pseudoClass}`; | ||
| }); | ||
| container.before(cloned.nodes); | ||
| }; | ||
| }); | ||
| } | ||
| const variantGenerators = { | ||
| 'group-hover': (container, { options: { separator } }) => { | ||
| const cloned = container.clone(); | ||
| cloned.walkRules(rule => { | ||
| rule.selector = `.group:hover ${(0, _buildSelectorVariant2.default)(rule.selector, 'group-hover', separator)}`; | ||
| const defaultVariantGenerators = { | ||
| 'group-hover': (0, _generateVariantFunction2.default)(({ modifySelectors, separator }) => { | ||
| return modifySelectors(({ className }) => { | ||
| return `.group:hover .group-hover${separator}${className}`; | ||
| }); | ||
| container.before(cloned.nodes); | ||
| }, | ||
| }), | ||
| hover: generatePseudoClassVariant('hover'), | ||
@@ -77,0 +73,0 @@ focus: generatePseudoClassVariant('focus'), |
@@ -10,2 +10,3 @@ 'use strict'; | ||
| const pluginUtilities = []; | ||
| const pluginVariantGenerators = {}; | ||
@@ -50,2 +51,5 @@ config.plugins.forEach(plugin => { | ||
| pluginComponents.push(...styles.nodes); | ||
| }, | ||
| addVariant: (name, generator) => { | ||
| pluginVariantGenerators[name] = (0, _generateVariantFunction2.default)(generator); | ||
| } | ||
@@ -55,3 +59,7 @@ }); | ||
| return [pluginComponents, pluginUtilities]; | ||
| return { | ||
| components: pluginComponents, | ||
| utilities: pluginUtilities, | ||
| variantGenerators: pluginVariantGenerators | ||
| }; | ||
| }; | ||
@@ -75,2 +83,6 @@ | ||
| var _generateVariantFunction = require('../util/generateVariantFunction'); | ||
| var _generateVariantFunction2 = _interopRequireDefault(_generateVariantFunction); | ||
| var _parseObjectStyles = require('../util/parseObjectStyles'); | ||
@@ -77,0 +89,0 @@ |
@@ -151,2 +151,6 @@ 'use strict'; | ||
| var _tableLayout = require('./generators/tableLayout'); | ||
| var _tableLayout2 = _interopRequireDefault(_tableLayout); | ||
| var _textAlign = require('./generators/textAlign'); | ||
@@ -198,2 +202,2 @@ | ||
| exports.default = [{ name: 'lists', generator: _lists2.default }, { name: 'appearance', generator: _appearance2.default }, { name: 'backgroundAttachment', generator: _backgroundAttachment2.default }, { name: 'backgroundColors', generator: _backgroundColors2.default }, { name: 'backgroundPosition', generator: _backgroundPosition2.default }, { name: 'backgroundRepeat', generator: _backgroundRepeat2.default }, { name: 'backgroundSize', generator: _backgroundSize2.default }, { name: 'borderCollapse', generator: _borderCollapse2.default }, { name: 'borderColors', generator: _borderColors2.default }, { name: 'borderRadius', generator: _borderRadius2.default }, { name: 'borderStyle', generator: _borderStyle2.default }, { name: 'borderWidths', generator: _borderWidths2.default }, { name: 'cursor', generator: _cursor2.default }, { name: 'display', generator: _display2.default }, { name: 'flexbox', generator: _flexbox2.default }, { name: 'float', generator: _float2.default }, { name: 'fonts', generator: _fonts2.default }, { name: 'fontWeights', generator: _fontWeights2.default }, { name: 'height', generator: _height2.default }, { name: 'leading', generator: _leading2.default }, { name: 'margin', generator: _margin2.default }, { name: 'maxHeight', generator: _maxHeight2.default }, { name: 'maxWidth', generator: _maxWidth2.default }, { name: 'minHeight', generator: _minHeight2.default }, { name: 'minWidth', generator: _minWidth2.default }, { name: 'negativeMargin', generator: _negativeMargin2.default }, { name: 'opacity', generator: _opacity2.default }, { name: 'outline', generator: _outline2.default }, { name: 'overflow', generator: _overflow2.default }, { name: 'padding', generator: _padding2.default }, { name: 'pointerEvents', generator: _pointerEvents2.default }, { name: 'position', generator: _position2.default }, { name: 'resize', generator: _resize2.default }, { name: 'shadows', generator: _shadows2.default }, { name: 'svgFill', generator: _svgFill2.default }, { name: 'svgStroke', generator: _svgStroke2.default }, { name: 'textAlign', generator: _textAlign2.default }, { name: 'textColors', generator: _textColors2.default }, { name: 'textSizes', generator: _textSizes2.default }, { name: 'textStyle', generator: _textStyle2.default }, { name: 'tracking', generator: _tracking2.default }, { name: 'userSelect', generator: _userSelect2.default }, { name: 'verticalAlign', generator: _verticalAlign2.default }, { name: 'visibility', generator: _visibility2.default }, { name: 'whitespace', generator: _whitespace2.default }, { name: 'width', generator: _width2.default }, { name: 'zIndex', generator: _zIndex2.default }]; | ||
| exports.default = [{ name: 'lists', generator: _lists2.default }, { name: 'appearance', generator: _appearance2.default }, { name: 'backgroundAttachment', generator: _backgroundAttachment2.default }, { name: 'backgroundColors', generator: _backgroundColors2.default }, { name: 'backgroundPosition', generator: _backgroundPosition2.default }, { name: 'backgroundRepeat', generator: _backgroundRepeat2.default }, { name: 'backgroundSize', generator: _backgroundSize2.default }, { name: 'borderCollapse', generator: _borderCollapse2.default }, { name: 'borderColors', generator: _borderColors2.default }, { name: 'borderRadius', generator: _borderRadius2.default }, { name: 'borderStyle', generator: _borderStyle2.default }, { name: 'borderWidths', generator: _borderWidths2.default }, { name: 'cursor', generator: _cursor2.default }, { name: 'display', generator: _display2.default }, { name: 'flexbox', generator: _flexbox2.default }, { name: 'float', generator: _float2.default }, { name: 'fonts', generator: _fonts2.default }, { name: 'fontWeights', generator: _fontWeights2.default }, { name: 'height', generator: _height2.default }, { name: 'leading', generator: _leading2.default }, { name: 'margin', generator: _margin2.default }, { name: 'maxHeight', generator: _maxHeight2.default }, { name: 'maxWidth', generator: _maxWidth2.default }, { name: 'minHeight', generator: _minHeight2.default }, { name: 'minWidth', generator: _minWidth2.default }, { name: 'negativeMargin', generator: _negativeMargin2.default }, { name: 'opacity', generator: _opacity2.default }, { name: 'outline', generator: _outline2.default }, { name: 'overflow', generator: _overflow2.default }, { name: 'padding', generator: _padding2.default }, { name: 'pointerEvents', generator: _pointerEvents2.default }, { name: 'position', generator: _position2.default }, { name: 'resize', generator: _resize2.default }, { name: 'shadows', generator: _shadows2.default }, { name: 'svgFill', generator: _svgFill2.default }, { name: 'svgStroke', generator: _svgStroke2.default }, { name: 'tableLayout', generator: _tableLayout2.default }, { name: 'textAlign', generator: _textAlign2.default }, { name: 'textColors', generator: _textColors2.default }, { name: 'textSizes', generator: _textSizes2.default }, { name: 'textStyle', generator: _textStyle2.default }, { name: 'tracking', generator: _tracking2.default }, { name: 'userSelect', generator: _userSelect2.default }, { name: 'verticalAlign', generator: _verticalAlign2.default }, { name: 'visibility', generator: _visibility2.default }, { name: 'whitespace', generator: _whitespace2.default }, { name: 'width', generator: _width2.default }, { name: 'zIndex', generator: _zIndex2.default }]; |
| { | ||
| "name": "tailwindcss", | ||
| "version": "0.6.1", | ||
| "version": "0.6.2", | ||
| "description": "A utility-first CSS framework for rapidly building custom user interfaces.", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.33%
2039116
- Number of package files
- increased by3.7%
112
- Lines of code
- increased by0.32%
46550
No dependency changes