Release of version 2.0.0

Author: aerni

.eslintrc

@@ -0,0 +1,27 @@
+{
+	"extends": ["wesbos"],
+	"rules": {
+		"no-console": 2,
+		"class-methods-use-this": 0,
+		"global-require": 0,
+		"import/no-extraneous-dependencies": [
+			"error",
+			{
+				"devDependencies": true,
+				"optionalDependencies": false,
+				"peerDependencies": false,
+				"packageDir": "./"
+			}
+		],
+		"prettier/prettier": [
+			"error",
+			{
+				"trailingComma": "es5",
+				"singleQuote": true,
+				"printWidth": 200,
+				"useTabs": false,
+				"tabWidth": 4
+			}
+		]
+	}
+}

README.md

@@ -1,2 +1,137 @@
-# tailwindcss-rfs
-Tailwind CSS plugin to generate responsive font size utilities
+# RFS Plugin for Tailwind CSS
+
+This is a Tailwind CSS plugin to generate utility classes for RFS. 
+
+**Important!**
+This plugin requires a working PostCSS setup of RFS in order to make use of the resizing engine of RFS. The plugin by itself only generates utility classes which then are transformed by RFS itself. You can check out the `webpack.mix.js` file for a working setup using Laravel Mix.
+
+## Installation
+```
+yarn add tailwindcss-rfs
+```
+
+## Usage
+Add the plugin to your Tailwind configuration:
+
+```js
+// tailwind.config.js
+module.exports = {
+  plugins: [
+    require('tailwindcss-rfs')()
+  ]
+};
+```
+
+### Options
+The plugin exposes the following options:
+
+```js
+// tailwind.config.js
+module.exports = {
+  plugins: [
+    require('tailwindcss-rfs')({
+      prefix: 'rfs-',
+      suffix: '',
+      fontSizeUtilities: true,
+      paddingUtilities: true,
+      marginUtilities: true,
+    })
+  ]
+};
+```
+
+#### Prefix
+By default all generated class names will start with `rfs-`. You can override this behaviour by changing the value of `prefix`:
+
+```js
+prefix: '', // default: 'rfs-'
+```
+
+#### Suffix
+You can also choose to use a `suffix` at the end of the generated class names:
+
+```js
+suffix: '-rfs', // default: ''
+```
+
+#### Utilities
+By default this plugin generates utility classes for `fontSize`, `padding` and `margin`. You can choose to disable the utilities that you don't need. 
+
+```js
+fontSizeUtilities: true, // default: true
+paddingUtilities: false, // default: true
+marginUtilities: false, // default: true
+```
+
+### Variants
+You can also generate variants for the classes:
+
+```js
+// tailwind.config.js
+module.exports = {
+  variants: {
+    rfsFontSize: ['responsive'], // default: []
+    rfsPadding: ['responsive'], // default: []
+    rfsMargin: ['responsive'], // default: []
+  }
+};
+```
+
+## Generated Utility Classes
+This plugin generates utility classes based on the keys of `fontSize`, `padding` and `margin` in the `theme` section of your `tailwind.config.js`. The generated class names follow the naming convention of Tailwind. By default all generated class names have a prefix of `rfs-`.
+
+### Font Size
+```css
+.rfs-text-[key]
+```
+
+### Padding
+```css
+.rfs-p-[key]
+.rfs-py-[key]
+.rfs-px-[key]
+.rfs-pt-[key]
+.rfs-pr-[key]
+.rfs-pb-[key]
+.rfs-pl-[key]
+```
+
+### Margin
+```css
+.rfs-m-[key]
+.rfs-my-[key]
+.rfs-mx-[key]
+.rfs-mt-[key]
+.rfs-mr-[key]
+.rfs-mb-[key]
+.rfs-ml-[key]
+```
+
+### Negative Margin
+```css
+.-rfs-m-[key]
+.-rfs-my-[key]
+.-rfs-mx-[key]
+.-rfs-mt-[key]
+.-rfs-mr-[key]
+.-rfs-mb-[key]
+.-rfs-ml-[key]
+```
+
+**Note: You might want to disable the `corePlugins` for `fontSizes`, `padding` and `margin` in your Tailwind configuration.**
+
+```js
+// tailwind.config.js
+module.exports = {
+  corePlugins: {
+    fontSize: false,
+    padding: false,
+    margin: false,
+  }
+}
+```
+
+## About RFS
+RFS is a unit resizing engine which automatically calculates the appropriate values based on the dimensions of the browser viewport. 
+
+[Learn more about RFS](https://github.com/twbs/rfs)

dist/index.js

@@ -0,0 +1,59 @@
+const _ = require('lodash');
+
+const tailwindcssRfs = function(userConfig = {}) {
+    return ({ addUtilities, e, theme, variants }) => {
+        const defaultOptions = {
+            prefix: 'rfs-',
+            suffix: '',
+            fontSizeUtilities: true,
+            paddingUtilities: true,
+            marginUtilities: true,
+        };
+
+        const options = _.defaults({}, userConfig, defaultOptions);
+
+        const prefixNegativeModifiers = function(base, modifier) {
+            if (modifier === '-') {
+                return `-${base}`;
+            }
+            if (_.startsWith(modifier, '-')) {
+                return `-${options.prefix}${base}-${modifier.slice(1)}${options.suffix}`;
+            }
+            return `${options.prefix}${base}-${modifier}${options.suffix}`;
+        };
+
+        const fontSizeGenerator = (size, modifier) => ({
+            [`.${e(`${options.prefix}text-${modifier}${options.suffix}`)}`]: { 'font-size': `rfs(${size})` },
+        });
+
+        const paddingGenerator = (size, modifier) => ({
+            [`.${e(`${options.prefix}p-${modifier}${options.suffix}`)}`]: { padding: `rfs(${size})` },
+            [`.${e(`${options.prefix}py-${modifier}${options.suffix}`)}`]: { 'padding-top': `rfs(${size})`, 'padding-bottom': `rfs(${size})` },
+            [`.${e(`${options.prefix}px-${modifier}${options.suffix}`)}`]: { 'padding-left': `rfs(${size})`, 'padding-right': `rfs(${size})` },
+            [`.${e(`${options.prefix}pt-${modifier}${options.suffix}`)}`]: { 'padding-top': `rfs(${size})` },
+            [`.${e(`${options.prefix}pr-${modifier}${options.suffix}`)}`]: { 'padding-right': `rfs(${size})` },
+            [`.${e(`${options.prefix}pb-${modifier}${options.suffix}`)}`]: { 'padding-bottom': `rfs(${size})` },
+            [`.${e(`${options.prefix}pl-${modifier}${options.suffix}`)}`]: { 'padding-left': `rfs(${size})` },
+        });
+
+        const marginGenerator = (size, modifier) => ({
+            [`.${e(prefixNegativeModifiers('m', modifier))}`]: { margin: `rfs(${size})` },
+            [`.${e(prefixNegativeModifiers('my', modifier))}`]: { 'margin-top': `rfs(${size})`, 'margin-bottom': `rfs(${size})` },
+            [`.${e(prefixNegativeModifiers('mx', modifier))}`]: { 'margin-left': `rfs(${size})`, 'margin-right': `rfs(${size})` },
+            [`.${e(prefixNegativeModifiers('mt', modifier))}`]: { 'margin-top': `rfs(${size})` },
+            [`.${e(prefixNegativeModifiers('mr', modifier))}`]: { 'margin-right': `rfs(${size})` },
+            [`.${e(prefixNegativeModifiers('mb', modifier))}`]: { 'margin-bottom': `rfs(${size})` },
+            [`.${e(prefixNegativeModifiers('ml', modifier))}`]: { 'margin-left': `rfs(${size})` },
+        });
+
+        const fontSizeUtilities = _.flatMap(theme('fontSize'), fontSizeGenerator);
+        const paddingUtilities = _.flatMap(theme('padding'), paddingGenerator);
+        const marginUtilities = _.flatMap(theme('margin'), marginGenerator);
+
+        if (options.fontSizeUtilities) addUtilities(fontSizeUtilities, variants('rfsFontSize'));
+        if (options.paddingUtilities) addUtilities(paddingUtilities, variants('rfsPadding'));
+        if (options.marginUtilities) addUtilities(marginUtilities, variants('rfsMargin'));
+    };
+};
+
+module.exports = tailwindcssRfs;