diff options
Diffstat (limited to 'node_modules/@tailwindcss')
8 files changed, 626 insertions, 0 deletions
diff --git a/node_modules/@tailwindcss/nesting/README.md b/node_modules/@tailwindcss/nesting/README.md new file mode 100644 index 0000000..ab1d3eb --- /dev/null +++ b/node_modules/@tailwindcss/nesting/README.md @@ -0,0 +1,47 @@ +# @tailwindcss/nesting + +This is a PostCSS plugin that wraps [postcss-nested](https://github.com/postcss/postcss-nested) or [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) and acts as a compatibility layer to make sure your nesting plugin of choice properly understands custom syntax like `@apply` and `@screen`. + +To use it, install it via npm: + +```shell +npm install @tailwindcss/nesting +``` + +Then add it to your PostCSS configuration, somewhere before Tailwind itself: + +```js +// postcss.config.js +module.exports = { + plugins: [ + require('postcss-import'), + require('@tailwindcss/nesting'), + require('tailwindcss'), + require('autoprefixer'), + ] +} +``` + +By default, it uses the [postcss-nested](https://github.com/postcss/postcss-nested) plugin under the hood, which uses a Sass-like syntax and is the plugin that powers nesting support in the [Tailwind CSS plugin API](https://tailwindcss.com/docs/plugins#css-in-js-syntax). + +If you'd rather use [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) (which is based on the work-in-progress [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) specification), first install the plugin alongside `@tailwindcss/nesting`: + +```shell +npm install @tailwindcss/nesting postcss-nesting +``` + +Then pass the plugin itself as an argument to `@tailwindcss/nesting` in your PostCSS configuration: + +```js +// postcss.config.js +module.exports = { + plugins: [ + require('postcss-import'), + require('@tailwindcss/nesting')(require('postcss-nesting')), + require('tailwindcss'), + require('autoprefixer'), + ] +} +``` + +This can also be helpful if for whatever reason you need to use a very specific version of `postcss-nested` and want to override the version we bundle with `@tailwindcss/nesting` itself. diff --git a/node_modules/@tailwindcss/nesting/index.js b/node_modules/@tailwindcss/nesting/index.js new file mode 100644 index 0000000..8ff7f63 --- /dev/null +++ b/node_modules/@tailwindcss/nesting/index.js @@ -0,0 +1,46 @@ +let postcss = require('postcss') +let postcssNested = require('postcss-nested') + +module.exports = (opts = postcssNested) => { + return { + postcssPlugin: '@tailwindcss/nesting', + Once(root, { result }) { + root.walkAtRules('screen', (rule) => { + rule.name = 'media' + rule.params = `screen(${rule.params})` + }) + + root.walkAtRules('apply', (rule) => { + rule.before(postcss.decl({ prop: '__apply', value: rule.params })) + rule.remove() + }) + + let plugin = (() => { + if (typeof opts === 'function') { + return opts + } + + if (typeof opts === 'string') { + return require(opts) + } + + if (Object.keys(opts).length <= 0) { + return postcssNested + } + + throw new Error('@tailwindcss/nesting should be loaded with a nesting plugin.') + })() + + postcss([plugin]).process(root, result.opts).sync() + + root.walkDecls('__apply', (decl) => { + decl.before(postcss.atRule({ name: 'apply', params: decl.value })) + decl.remove() + }) + + return root + }, + } +} + +module.exports.postcss = true diff --git a/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/LICENSE b/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/LICENSE new file mode 100644 index 0000000..1ae47a2 --- /dev/null +++ b/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright 2014 Andrey Sitnik <andrey@sitnik.ru> + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/README.md b/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/README.md new file mode 100644 index 0000000..118ae20 --- /dev/null +++ b/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/README.md @@ -0,0 +1,198 @@ +# PostCSS Nested + +<img align="right" width="135" height="95" + title="Philosopher’s stone, logo of PostCSS" + src="https://postcss.org/logo-leftp.svg"> + +[PostCSS] plugin to unwrap nested rules like how Sass does it. + +```css +.phone { + &_title { + width: 500px; + @media (max-width: 500px) { + width: auto; + } + body.is_dark & { + color: white; + } + } + img { + display: block; + } +} + +.title { + font-size: var(--font); + + @at-root html { + --font: 16px + } +} +``` + +will be processed to: + +```css +.phone_title { + width: 500px; +} +@media (max-width: 500px) { + .phone_title { + width: auto; + } +} +body.is_dark .phone_title { + color: white; +} +.phone img { + display: block; +} + +.title { + font-size: var(--font); +} +html { + --font: 16px +} +``` + +Related plugins: + +* Use [`postcss-atroot`] for `@at-root` at-rule to move nested child + to the CSS root. +* Use [`postcss-current-selector`] **after** this plugin if you want + to use current selector in properties or variables values. +* Use [`postcss-nested-ancestors`] **before** this plugin if you want + to reference any ancestor element directly in your selectors with `^&`. + +Alternatives: + +* See also [`postcss-nesting`], which implements [CSSWG draft] + (requires the `&` and introduces `@nest`). +* [`postcss-nested-props`] for nested properties like `font-size`. + +<a href="https://evilmartians.com/?utm_source=postcss-nested"> + <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" + alt="Sponsored by Evil Martians" width="236" height="54"> +</a> + +[`postcss-atroot`]: https://github.com/OEvgeny/postcss-atroot +[`postcss-current-selector`]: https://github.com/komlev/postcss-current-selector +[`postcss-nested-ancestors`]: https://github.com/toomuchdesign/postcss-nested-ancestors +[`postcss-nested-props`]: https://github.com/jedmao/postcss-nested-props +[`postcss-nesting`]: https://github.com/jonathantneal/postcss-nesting +[CSSWG draft]: https://drafts.csswg.org/css-nesting-1/ +[PostCSS]: https://github.com/postcss/postcss + + +## Usage + +**Step 1:** Install plugin: + +```sh +npm install --save-dev postcss postcss-nested +``` + +**Step 2:** Check your project for existing PostCSS config: `postcss.config.js` +in the project root, `"postcss"` section in `package.json` +or `postcss` in bundle config. + +If you do not use PostCSS, add it according to [official docs] +and set this plugin in settings. + +**Step 3:** Add the plugin to plugins list: + +```diff +module.exports = { + plugins: [ ++ require('postcss-nested'), + require('autoprefixer') + ] +} +``` + +[official docs]: https://github.com/postcss/postcss#usage + + +## Options + +### `bubble` + +By default, plugin will bubble only `@media` and `@supports` at-rules. +You can add your custom at-rules to this list by `bubble` option: + +```js +postcss([ require('postcss-nested')({ bubble: ['phone'] }) ]) +``` + +```css +/* input */ +a { + color: white; + @phone { + color: black; + } +} +/* output */ +a { + color: white; +} +@phone { + a { + color: black; + } +} +``` + + +### `unwrap` + +By default, plugin will unwrap only `@font-face`, `@keyframes` and `@document` +at-rules. You can add your custom at-rules to this list by `unwrap` option: + +```js +postcss([ require('postcss-nested')({ unwrap: ['phone'] }) ]) +``` + +```css +/* input */ +a { + color: white; + @phone { + color: black; + } +} +/* output */ +a { + color: white; +} +@phone { + color: black; +} +``` + + +### `preserveEmpty` + +By default, plugin will strip out any empty selector generated by intermediate +nesting levels. You can set `preserveEmpty` to `true` to preserve them. + +```css +.a { + .b { + color: black; + } +} +``` + +Will be compiled to: + +```css +.a { } +.a .b { + color: black; +} +``` + +This is especially useful if you want to export the empty classes with `postcss-modules`. diff --git a/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/index.d.ts b/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/index.d.ts new file mode 100644 index 0000000..d22bcdd --- /dev/null +++ b/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/index.d.ts @@ -0,0 +1,34 @@ +// Original definitions (@types/postcss-nested) +// by Maxim Vorontsov <https://github.com/VorontsovMaxim> + +import { PluginCreator } from 'postcss' + +declare namespace nested { + interface Options { + /** + * By default, plugin will bubble only `@media` and `@supports` at-rules. + * You can add your custom at-rules to this list by this option. + */ + bubble?: string[] + + /** + * By default, plugin will unwrap only `@font-face`, `@keyframes`, + * and `@document` at-rules. You can add your custom at-rules + * to this list by this option. + */ + unwrap?: string[] + + /** + * By default, plugin will strip out any empty selector generated + * by intermediate nesting levels. You can set this option to `true` + * to preserve them. + */ + preserveEmpty?: boolean + } + + type Nested = PluginCreator<Options> +} + +declare const nested: nested.Nested + +export = nested diff --git a/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/index.js b/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/index.js new file mode 100644 index 0000000..e6ebd92 --- /dev/null +++ b/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/index.js @@ -0,0 +1,214 @@ +let parser = require('postcss-selector-parser') + +function parse (str, rule) { + let nodes + let saver = parser(parsed => { + nodes = parsed + }) + try { + saver.processSync(str) + } catch (e) { + if (str.includes(':')) { + throw rule ? rule.error('Missed semicolon') : e + } else { + throw rule ? rule.error(e.message) : e + } + } + return nodes.at(0) +} + +function replace (nodes, parent) { + let replaced = false + nodes.each(i => { + if (i.type === 'nesting') { + let clonedParent = parent.clone() + if (i.value !== '&') { + i.replaceWith(parse(i.value.replace('&', clonedParent.toString()))) + } else { + i.replaceWith(clonedParent) + } + replaced = true + } else if (i.nodes) { + if (replace(i, parent)) { + replaced = true + } + } + }) + return replaced +} + +function selectors (parent, child) { + let result = [] + parent.selectors.forEach(i => { + let parentNode = parse(i, parent) + + child.selectors.forEach(j => { + if (j.length) { + let node = parse(j, child) + let replaced = replace(node, parentNode) + if (!replaced) { + node.prepend(parser.combinator({ value: ' ' })) + node.prepend(parentNode.clone()) + } + result.push(node.toString()) + } + }) + }) + return result +} + +function pickComment (comment, after) { + if (comment && comment.type === 'comment') { + after.after(comment) + return comment + } else { + return after + } +} + +function createFnAtruleChilds (bubble) { + return function atruleChilds (rule, atrule, bubbling) { + let children = [] + atrule.each(child => { + if (child.type === 'comment') { + children.push(child) + } else if (child.type === 'decl') { + children.push(child) + } else if (child.type === 'rule' && bubbling) { + child.selectors = selectors(rule, child) + } else if (child.type === 'atrule') { + if (child.nodes && bubble[child.name]) { + atruleChilds(rule, child, true) + } else { + children.push(child) + } + } + }) + if (bubbling) { + if (children.length) { + let clone = rule.clone({ nodes: [] }) + for (let child of children) { + clone.append(child) + } + atrule.prepend(clone) + } + } + } +} + +function pickDeclarations (selector, declarations, after, Rule) { + let parent = new Rule({ + selector, + nodes: [] + }) + + for (let declaration of declarations) { + parent.append(declaration) + } + + after.after(parent) + return parent +} + +function atruleNames (defaults, custom) { + let list = {} + for (let i of defaults) { + list[i] = true + } + if (custom) { + for (let i of custom) { + let name = i.replace(/^@/, '') + list[name] = true + } + } + return list +} + +module.exports = (opts = {}) => { + let bubble = atruleNames(['media', 'supports'], opts.bubble) + let atruleChilds = createFnAtruleChilds(bubble) + let unwrap = atruleNames( + [ + 'document', + 'font-face', + 'keyframes', + '-webkit-keyframes', + '-moz-keyframes' + ], + opts.unwrap + ) + let preserveEmpty = opts.preserveEmpty + + return { + postcssPlugin: 'postcss-nested', + Rule (rule, { Rule }) { + let unwrapped = false + let after = rule + let copyDeclarations = false + let declarations = [] + + rule.each(child => { + if (child.type === 'rule') { + if (declarations.length) { + after = pickDeclarations(rule.selector, declarations, after, Rule) + declarations = [] + } + + copyDeclarations = true + unwrapped = true + child.selectors = selectors(rule, child) + after = pickComment(child.prev(), after) + after.after(child) + after = child + } else if (child.type === 'atrule') { + if (declarations.length) { + after = pickDeclarations(rule.selector, declarations, after, Rule) + declarations = [] + } + + if (child.name === 'at-root') { + unwrapped = true + atruleChilds(rule, child, false) + + let nodes = child.nodes + if (child.params) { + nodes = new Rule({ selector: child.params, nodes }) + } + + after.after(nodes) + after = nodes + child.remove() + } else if (bubble[child.name]) { + copyDeclarations = true + unwrapped = true + atruleChilds(rule, child, true) + after = pickComment(child.prev(), after) + after.after(child) + after = child + } else if (unwrap[child.name]) { + copyDeclarations = true + unwrapped = true + atruleChilds(rule, child, false) + after = pickComment(child.prev(), after) + after.after(child) + after = child + } else if (copyDeclarations) { + declarations.push(child) + } + } else if (child.type === 'decl' && copyDeclarations) { + declarations.push(child) + } + }) + + if (declarations.length) { + after = pickDeclarations(rule.selector, declarations, after, Rule) + } + + if (unwrapped && preserveEmpty !== true) { + rule.raws.semicolon = true + if (rule.nodes.length === 0) rule.remove() + } + } + } +} +module.exports.postcss = true diff --git a/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/package.json b/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/package.json new file mode 100644 index 0000000..29090bd --- /dev/null +++ b/node_modules/@tailwindcss/nesting/node_modules/postcss-nested/package.json @@ -0,0 +1,28 @@ +{ + "name": "postcss-nested", + "version": "5.0.6", + "description": "PostCSS plugin to unwrap nested rules like how Sass does it", + "keywords": [ + "postcss", + "css", + "postcss-plugin", + "sass", + "nested" + ], + "author": "Andrey Sitnik <andrey@sitnik.ru>", + "license": "MIT", + "repository": "postcss/postcss-nested", + "engines": { + "node": ">=12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.2.14" + }, + "dependencies": { + "postcss-selector-parser": "^6.0.6" + } +} diff --git a/node_modules/@tailwindcss/nesting/package.json b/node_modules/@tailwindcss/nesting/package.json new file mode 100644 index 0000000..62ce37f --- /dev/null +++ b/node_modules/@tailwindcss/nesting/package.json @@ -0,0 +1,39 @@ +{ + "name": "@tailwindcss/nesting", + "version": "0.0.0-insiders.565cd3e", + "description": "A light wrapper around any postcss nesting plugin improves compatibility with Tailwind CSS.", + "main": "index.js", + "scripts": { + "test": "jest" + }, + "publishConfig": { + "access": "public" + }, + "prettier": { + "printWidth": 100, + "semi": false, + "singleQuote": true, + "trailingComma": "es5" + }, + "jest": { + "setupFilesAfterEnv": [ + "<rootDir>/jest/custom-matchers.js" + ] + }, + "files": [ + "index.js", + "README.md" + ], + "license": "MIT", + "peerDependencies": { + "postcss": "^8.2.15" + }, + "dependencies": { + "postcss-nested": "^5.0.5" + }, + "devDependencies": { + "jest": "^26.6.3", + "postcss": "^8.2.15", + "prettier": "^2.3.0" + } +} |