tailwindcss - npm Package Compare versions

Comparing version 0.4.3 to 0.5.0

defaultConfig.stub.js

@@ -365,2 +365,22 @@ /*
   |-----------------------------------------------------------------------------
+  | Background sizes               https://tailwindcss.com/docs/background-size
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define your background sizes. We provide some common
+  | values that are useful in most projects, but feel free to add other sizes
+  | that are specific to your project here as well.
+  |
+  | Class name: .bg-{size}
+  |
+  */
+
+  backgroundSize: {
+    'auto': 'auto',
+    'cover': 'cover',
+    'contain': 'contain',
+  },
+
+
+  /*
+  |-----------------------------------------------------------------------------
   | Border widths                     https://tailwindcss.com/docs/border-width
@@ -808,3 +828,8 @@ |-----------------------------------------------------------------------------
   |
-  | Currently supported variants: 'responsive', 'hover', 'focus', 'group-hover'
+  | Currently supported variants:
+  |   - responsive
+  |   - hover
+  |   - focus
+  |   - active
+  |   - group-hover
   |
@@ -869,4 +894,5 @@ | To disable a module completely, use `false` instead of an array.
   |
-  | Here is where you can register any additional plugins you'd like to use in
-  | your project.
+  | Here is where you can register any plugins you'd like to use in your
+  | project. Tailwind's built-in `container` plugin is enabled by default to
+  | give you a Bootstrap-style responsive container component out of the box.
   |
@@ -878,3 +904,8 @@ | Be sure to view the complete plugin documentation to learn more about how
 
-  plugins: [],
+  plugins: [
+    require('./plugins/container')({
+      // center: true,
+      // padding: '1rem',
+    }),
+  ],
 
@@ -881,0 +912,0 @@

lib/build.js

@@ -23,9 +23,9 @@ 'use strict';
   return new Promise((resolve, reject) => {
-    console.log(`Processing ./css/${filename}.css...`);
+    console.log(`Processing ./${filename}.css...`);
 
-    _fs2.default.readFile(`./css/${filename}.css`, (err, css) => {
+    _fs2.default.readFile(`./${filename}.css`, (err, css) => {
       if (err) throw err;
 
       return (0, _postcss2.default)([(0, _2.default)(), require('autoprefixer')]).process(css, {
-        from: `./css/${filename}.css`,
+        from: `./${filename}.css`,
         to: `./dist/${filename}.css`,
@@ -52,4 +52,4 @@ map: { inline: false }
 
-Promise.all([buildDistFile('preflight'), buildDistFile('utilities'), buildDistFile('tailwind')]).then(() => {
+Promise.all([buildDistFile('preflight'), buildDistFile('components'), buildDistFile('utilities'), buildDistFile('tailwind')]).then(() => {
   console.log('Finished Building Tailwind!');
 });

lib/cli.js

@@ -48,3 +48,3 @@ #!/usr/bin/env node
 
-  return (0, _postcss2.default)([(0, _2.default)(config)]).process(input).then(result => {
+  return (0, _postcss2.default)([(0, _2.default)(config)]).process(input, { from: inputFile }).then(result => {
     write(result.css);
@@ -73,2 +73,3 @@ console.log('Finished building Tailwind!');
   _fsExtra2.default.outputFileSync(destination, output.replace('// let defaultConfig', 'let defaultConfig'));
+  _fsExtra2.default.outputFileSync(destination, output.replace("require('./plugins/container')", "require('tailwindcss/plugins/container')"));
   console.log(`Generated Tailwind config: ${destination}`);
@@ -75,0 +76,0 @@ _process2.default.exit();

lib/generators/backgroundSize.js

@@ -7,17 +7,18 @@ 'use strict';
 
-exports.default = function () {
-  return (0, _defineClasses2.default)({
-    'bg-cover': {
-      'background-size': 'cover'
-    },
-    'bg-contain': {
-      'background-size': 'contain'
-    }
+exports.default = function ({ backgroundSize }) {
+  return _lodash2.default.map(backgroundSize, (size, className) => {
+    return (0, _defineClass2.default)(`bg-${className}`, {
+      'background-size': size
+    });
   });
 };
 
-var _defineClasses = require('../util/defineClasses');
+var _lodash = require('lodash');
 
-var _defineClasses2 = _interopRequireDefault(_defineClasses);
+var _lodash2 = _interopRequireDefault(_lodash);
 
+var _defineClass = require('../util/defineClass');
+
+var _defineClass2 = _interopRequireDefault(_defineClass);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/generators/cursor.js

@@ -12,2 +12,4 @@ 'use strict';
     'cursor-pointer': { cursor: 'pointer' },
+    'cursor-wait': { cursor: 'wait' },
+    'cursor-move': { cursor: 'move' },
     'cursor-not-allowed': { cursor: 'not-allowed' }
@@ -14,0 +16,0 @@ });

lib/generators/overflow.js

@@ -13,10 +13,6 @@ 'use strict';
     'overflow-scroll': { overflow: 'scroll' },
-    'overflow-x-scroll': {
-      'overflow-x': 'auto',
-      '-ms-overflow-style': '-ms-autohiding-scrollbar'
-    },
-    'overflow-y-scroll': {
-      'overflow-y': 'auto',
-      '-ms-overflow-style': '-ms-autohiding-scrollbar'
-    },
+    'overflow-x-auto': { 'overflow-x': 'auto' },
+    'overflow-y-auto': { 'overflow-y': 'auto' },
+    'overflow-x-scroll': { 'overflow-x': 'scroll' },
+    'overflow-y-scroll': { 'overflow-y': 'scroll' },
     'scrolling-touch': { '-webkit-overflow-scrolling': 'touch' },
@@ -23,0 +19,0 @@ 'scrolling-auto': { '-webkit-overflow-scrolling': 'auto' }

lib/generators/position.js

@@ -13,2 +13,3 @@ 'use strict';
     relative: { position: 'relative' },
+    sticky: { position: 'sticky' },
     'pin-none': {
@@ -15,0 +16,0 @@ top: 'auto',

lib/generators/textStyle.js

@@ -10,3 +10,3 @@ 'use strict';
     italic: { 'font-style': 'italic' },
-    roman: { 'font-style': 'normal' },
+    'not-italic': { 'font-style': 'normal' },
 
@@ -13,0 +13,0 @@ uppercase: { 'text-transform': 'uppercase' },

lib/lib/substituteTailwindAtRules.js

@@ -38,3 +38,3 @@ 'use strict';
         const tailwindUtilityTree = _postcss2.default.root({
-          nodes: [...(0, _container2.default)(unwrappedConfig), ...utilities.nodes]
+          nodes: utilities.nodes
         });
@@ -67,6 +67,2 @@
 
-var _container = require('../generators/container');
-
-var _container2 = _interopRequireDefault(_container);
-
 var _utilityModules = require('../utilityModules');
@@ -73,0 +69,0 @@

lib/lib/substituteVariantsAtRules.js

@@ -22,3 +22,3 @@ 'use strict';
 
-      _lodash2.default.forEach(['focus', 'hover', 'group-hover'], variant => {
+      _lodash2.default.forEach(['group-hover', 'hover', 'focus', 'active'], variant => {
         if (variants.includes(variant)) {
@@ -48,17 +48,24 @@ variantGenerators[variant](atRule, unwrappedConfig);
 
-const variantGenerators = {
-  hover: (container, config) => {
+function buildPseudoClassVariant(selector, pseudoClass, separator) {
+  return `${(0, _buildClassVariant2.default)(selector, pseudoClass, separator)}:${pseudoClass}`;
+}
+
+function generatePseudoClassVariant(pseudoClass) {
+  return (container, config) => {
     const cloned = container.clone();
 
     cloned.walkRules(rule => {
-      rule.selector = `${(0, _buildClassVariant2.default)(rule.selector, 'hover', config.options.separator)}:hover`;
+      rule.selector = buildPseudoClassVariant(rule.selector, pseudoClass, config.options.separator);
     });
 
     container.before(cloned.nodes);
-  },
-  focus: (container, config) => {
+  };
+}
+
+const variantGenerators = {
+  'group-hover': (container, { options: { separator } }) => {
     const cloned = container.clone();
 
     cloned.walkRules(rule => {
-      rule.selector = `${(0, _buildClassVariant2.default)(rule.selector, 'focus', config.options.separator)}:focus`;
+      rule.selector = `.group:hover ${(0, _buildClassVariant2.default)(rule.selector, 'group-hover', separator)}`;
     });
@@ -68,12 +75,5 @@
   },
-  'group-hover': (container, config) => {
-    const cloned = container.clone();
-
-    cloned.walkRules(rule => {
-      // prettier-ignore
-      rule.selector = `.group:hover ${(0, _buildClassVariant2.default)(rule.selector, 'group-hover', config.options.separator)}`;
-    });
-
-    container.before(cloned.nodes);
-  }
+  hover: generatePseudoClassVariant('hover'),
+  focus: generatePseudoClassVariant('focus'),
+  active: generatePseudoClassVariant('active')
 };

lib/util/prefixSelector.js

@@ -10,3 +10,13 @@ 'use strict';
 
-  return `.${getPrefix(selector)}${selector.slice(1)}`;
-};
+  return (0, _postcssSelectorParser2.default)(selectors => {
+    selectors.walkClasses(classSelector => {
+      classSelector.value = `${getPrefix('.' + classSelector.value)}${classSelector.value}`;
+    });
+  }).processSync(selector);
+};
+
+var _postcssSelectorParser = require('postcss-selector-parser');
+
+var _postcssSelectorParser2 = _interopRequireDefault(_postcssSelectorParser);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/util/processPlugins.js

@@ -14,14 +14,37 @@ 'use strict';
       config: (path, defaultValue) => _lodash2.default.get(config, path, defaultValue),
-      rule: defineRule,
-      utility: (selector, properties) => defineUtility(selector, properties, config.options),
-      atRule: defineAtRule,
       e: _escapeClassName2.default,
-      addUtilities: (utilities, variants = []) => {
-        pluginUtilities.push((0, _wrapWithVariants2.default)(utilities, variants));
+      prefix: selector => {
+        return (0, _prefixSelector2.default)(config.options.prefix, selector);
       },
-      addComponents: components => {
-        pluginComponents.push(...components);
+      addUtilities: (utilities, options) => {
+        const defaultOptions = { variants: [], respectPrefix: true, respectImportant: true };
+
+        options = Array.isArray(options) ? Object.assign({}, defaultOptions, { variants: options }) : _lodash2.default.defaults(options, defaultOptions);
+
+        const styles = _postcss2.default.root({ nodes: parseStyles(utilities) });
+
+        styles.walkRules(rule => {
+          if (options.respectPrefix) {
+            rule.selector = (0, _prefixSelector2.default)(config.options.prefix, rule.selector);
+          }
+
+          if (options.respectImportant && _lodash2.default.get(config, 'options.important')) {
+            rule.walkDecls(decl => decl.important = true);
+          }
+        });
+
+        pluginUtilities.push((0, _wrapWithVariants2.default)(styles.nodes, options.variants));
       },
-      prefix: selector => {
-        return (0, _prefixSelector2.default)(config.options.prefix, selector);
+      addComponents: (components, options) => {
+        options = Object.assign({ respectPrefix: true }, options);
+
+        const styles = _postcss2.default.root({ nodes: parseStyles(components) });
+
+        styles.walkRules(rule => {
+          if (options.respectPrefix) {
+            rule.selector = (0, _prefixSelector2.default)(config.options.prefix, rule.selector);
+          }
+        });
+
+        pluginComponents.push(...styles.nodes);
       }
@@ -42,2 +65,6 @@ });
 
+var _node = require('postcss/lib/node');
+
+var _node2 = _interopRequireDefault(_node);
+
 var _escapeClassName = require('../util/escapeClassName');
@@ -47,2 +74,6 @@
 
+var _parseObjectStyles = require('../util/parseObjectStyles');
+
+var _parseObjectStyles2 = _interopRequireDefault(_parseObjectStyles);
+
 var _prefixSelector = require('../util/prefixSelector');
@@ -58,34 +89,8 @@
 
-function defineRule(selector, properties) {
-  const decls = _lodash2.default.map(properties, (value, property) => {
-    return _postcss2.default.decl({
-      prop: `${property}`,
-      value: `${value}`
-    });
-  });
-
-  return _postcss2.default.rule({ selector }).append(decls);
-}
-
-function defineUtility(selector, properties, options) {
-  if (selector.startsWith('.')) {
-    return defineUtility(selector.slice(1), properties, options);
+function parseStyles(styles) {
+  if (!Array.isArray(styles)) {
+    return parseStyles([styles]);
   }
 
-  const rule = defineRule((0, _prefixSelector2.default)(options.prefix, `.${(0, _escapeClassName2.default)(selector)}`), properties);
-
-  if (options.important) {
-    rule.walkDecls(decl => decl.important = true);
-  }
-
-  return rule;
-}
-
-function defineAtRule(atRule, rules) {
-  const [name, ...params] = atRule.split(' ');
-
-  return _postcss2.default.atRule({
-    name: name.startsWith('@') ? name.slice(1) : name,
-    params: params.join(' ')
-  }).append(rules);
+  return _lodash2.default.flatMap(styles, style => style instanceof _node2.default ? style : (0, _parseObjectStyles2.default)(style));
 }

package.json

 {
   "name": "tailwindcss",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
@@ -41,3 +41,2 @@ "license": "MIT",
     "jest": "^20.0.4",
-    "mousetrap": "^1.6.1",
     "prettier": "^1.7.4",
@@ -53,3 +52,6 @@ "rimraf": "^2.6.1"
     "postcss": "^6.0.9",
-    "postcss-functions": "^3.0.0"
+    "postcss-functions": "^3.0.0",
+    "postcss-js": "^1.0.1",
+    "postcss-nested": "^3.0.0",
+    "postcss-selector-parser": "^3.1.1"
   },
@@ -56,0 +58,0 @@ "browserslist": [

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

Improved metrics

Total package byte prevSize

1520330

increased by0.44%

Dev dependency count

16

decreased by-5.88%

Number of package files

106

increased by7.07%

Worsened metrics

Dependency count

10

increased by42.86%

Lines of code

33724

decreased by-0.09%

Dependency changes

• + Addedpostcss-js@^1.0.1

• + Addedpostcss-nested@^3.0.0

• + Addedpostcss-selector-parser@^3.1.1

• + Addedcamelcase-css@1.0.1(transitive)

• + Addeddot-prop@5.3.0(transitive)

• + Addedindexes-of@1.0.1(transitive)

• + Addedis-obj@2.0.0(transitive)

• + Addedpostcss-js@1.0.1(transitive)

• + Addedpostcss-nested@3.0.0(transitive)

• + Addedpostcss-selector-parser@3.1.2(transitive)

• + Addeduniq@1.0.1(transitive)