diff --git a/__tests__/applyClassPrefix.test.js b/__tests__/applyClassPrefix.test.js new file mode 100644 index 000000000..5f574fc64 --- /dev/null +++ b/__tests__/applyClassPrefix.test.js @@ -0,0 +1,18 @@ +import postcss from 'postcss' +import applyClassPrefix from '../src/util/applyClassPrefix' + +test('it prefixes classes with the provided prefix', () => { + const input = postcss.parse(` + .foo { color: red; } + .apple, .pear { color: green; } + `) + + const expected = ` + .tw-foo { color: red; } + .tw-apple, .tw-pear { color: green; } + ` + + const result = applyClassPrefix(input, 'tw-').toResult() + expect(result.css).toEqual(expected) + expect(result.warnings().length).toBe(0) +}) diff --git a/docs/package.json b/docs/package.json index 9fb496566..e96df456e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,11 +1,10 @@ { "scripts": { - "local": "cross-env NODE_ENV=development webpack --progress --hide-modules --env=local --config=node_modules/laravel-mix/setup/webpack.config.js", - "staging": "cross-env NODE_ENV=development webpack --progress --hide-modules --env=staging --config=node_modules/laravel-mix/setup/webpack.config.js", - "production": "cross-env NODE_ENV=development webpack --progress --hide-modules --env=production --config=node_modules/laravel-mix/setup/webpack.config.js", - "dev": "npm run local", + "development": "cross-env NODE_ENV=development webpack --progress --hide-modules --env=local --config=node_modules/laravel-mix/setup/webpack.config.js", + "production": "cross-env NODE_ENV=production webpack --progress --hide-modules --env=production --config=node_modules/laravel-mix/setup/webpack.config.js", + "dev": "npm run development", "prod": "npm run production", - "watch": "npm run local -- --watch" + "watch": "npm run development -- --watch" }, "private": true, "devDependencies": { diff --git a/docs/source/_layouts/documentation.blade.php b/docs/source/_layouts/documentation.blade.php index 9450b9da8..f2e1f1f88 100644 --- a/docs/source/_layouts/documentation.blade.php +++ b/docs/source/_layouts/documentation.blade.php @@ -115,3 +115,17 @@ @endsection + +@push('scripts') +@if ($page->production) + + + +@endif +@endpush diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index 91f364cb2..0290f941a 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -25,16 +25,6 @@ @yield('body') @if ($page->production) - - - - @endif +@stack('scripts') + diff --git a/docs/source/docs/functions-and-directives.blade.md b/docs/source/docs/functions-and-directives.blade.md index 967019d2f..ce8cf68e8 100644 --- a/docs/source/docs/functions-and-directives.blade.md +++ b/docs/source/docs/functions-and-directives.blade.md @@ -8,7 +8,7 @@ Tailwind exposes a few custom CSS functions and directives that can be used in y ### `@@tailwind` -Use the `@@tailwind` directive to insert Tailwind's `preflight`, `utilities` and `screen` styles into your CSS. Here's a full example of how you might do this: +Use the `@@tailwind` directive to insert Tailwind's `preflight`, `utilities` and `screens` styles into your CSS. Here's a full example of how you might do this: ```less /** @@ -27,9 +27,11 @@ Use the `@@tailwind` directive to insert Tailwind's `preflight`, `utilities` and @@tailwind utilities; /** - * (Optional) - * This injects the utility classes and styles wrapped by the @@responsive directive. - * These will be appended at the end of the stylesheet if the `@@tailwind screens` directive is not used. + * Use this directive to control where Tailwind injects the responsive + * variations of each utility. + * + * If omitted, Tailwind will append these classes to the very end of + * your stylesheet by default. */ @@tailwind screens; ``` diff --git a/src/lib/generateUtilities.js b/src/lib/generateUtilities.js index 39f637b73..94b0fa7f0 100644 --- a/src/lib/generateUtilities.js +++ b/src/lib/generateUtilities.js @@ -1,4 +1,6 @@ import _ from 'lodash' +import postcss from 'postcss' +import applyClassPrefix from '../util/applyClassPrefix' import backgroundColors from '../generators/backgroundColors' import backgroundPositions from '../generators/backgroundPositions' import backgroundSize from '../generators/backgroundSize' @@ -38,49 +40,60 @@ import zIndex from '../generators/zIndex' export default function(config) { return function(css) { - const options = config() + const unwrappedConfig = config() css.walkAtRules('tailwind', atRule => { if (atRule.params === 'utilities') { - const utilities = _.flatten([ - lists(options), - forms(options), - textSizes(options), - textWeights(options), - textFonts(options), - textColors(options), - textLeading(options), - textTracking(options), - textAlign(options), - textWrap(options), - textStyle(options), - verticalAlign(options), - backgroundColors(options), - backgroundPositions(options), - backgroundSize(options), - borderWidths(options), - borderColors(options), - borderStyles(options), - rounded(options), - display(options), - position(options), - overflow(options), - sizing(options), - spacing(options), - shadows(options), - flex(options), - floats(options), - visibility(options), - zIndex(options), - opacity(options), - userSelect(options), - pointerEvents(options), - resize(options), - cursor(options), - ]) + const utilities = postcss.root({ + nodes: _.flatten([ + lists(unwrappedConfig), + forms(unwrappedConfig), + textSizes(unwrappedConfig), + textWeights(unwrappedConfig), + textFonts(unwrappedConfig), + textColors(unwrappedConfig), + textLeading(unwrappedConfig), + textTracking(unwrappedConfig), + textAlign(unwrappedConfig), + textWrap(unwrappedConfig), + textStyle(unwrappedConfig), + verticalAlign(unwrappedConfig), + backgroundColors(unwrappedConfig), + backgroundPositions(unwrappedConfig), + backgroundSize(unwrappedConfig), + borderWidths(unwrappedConfig), + borderColors(unwrappedConfig), + borderStyles(unwrappedConfig), + rounded(unwrappedConfig), + display(unwrappedConfig), + position(unwrappedConfig), + overflow(unwrappedConfig), + sizing(unwrappedConfig), + spacing(unwrappedConfig), + shadows(unwrappedConfig), + flex(unwrappedConfig), + floats(unwrappedConfig), + visibility(unwrappedConfig), + zIndex(unwrappedConfig), + opacity(unwrappedConfig), + userSelect(unwrappedConfig), + pointerEvents(unwrappedConfig), + resize(unwrappedConfig), + cursor(unwrappedConfig), + ]), + }) - atRule.before(container(options)) - atRule.before(responsive(utilities)) + if (_.get(unwrappedConfig, 'options.important', false)) { + utilities.walkDecls(decl => (decl.important = true)) + } + + const tailwindClasses = postcss.root({ + nodes: [...container(unwrappedConfig), responsive(utilities)], + }) + + applyClassPrefix(tailwindClasses, _.get(unwrappedConfig, 'options.prefix', '')) + + atRule.before(tailwindClasses) atRule.remove() } }) diff --git a/src/util/applyClassPrefix.js b/src/util/applyClassPrefix.js new file mode 100644 index 000000000..502e5f02b --- /dev/null +++ b/src/util/applyClassPrefix.js @@ -0,0 +1,6 @@ +export default function(css, prefix) { + css.walkRules(rule => { + rule.selectors = rule.selectors.map(selector => `.${prefix}${selector.slice(1)}`) + }) + return css +} diff --git a/src/util/responsive.js b/src/util/responsive.js index 67c905645..2d0a90636 100644 --- a/src/util/responsive.js +++ b/src/util/responsive.js @@ -1,3 +1,4 @@ +import _ from 'lodash' import postcss from 'postcss' import cloneNodes from './cloneNodes' @@ -6,5 +7,5 @@ export default function responsive(rules) { .atRule({ name: 'responsive', }) - .append(cloneNodes(rules)) + .append(cloneNodes(_.isArray(rules) ? rules : rules.nodes)) }