diff --git a/.eslintrc.json b/.eslintrc.json index e68b2a4..5faed24 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,14 +1,47 @@ { - "extends": "eslint:recommended", "env": { - "node": true, - "es6": true + "es6": true, + "node": true }, + "extends": "eslint:recommended", "rules": { - "no-console": 0, - "space-before-function-paren": [2, "always"], - "semi": [2, "never"], - "eqeqeq": [2, "allow-null"], - "block-spacing": [2, "always"] + "block-spacing": [ + "error", + "always" + ], + "comma-spacing": [ + "error" + ], + "eqeqeq": [ + "error", + "smart" + ], + "keyword-spacing": [ + "error" + ], + "no-console": [ + "error", + { + "allow": [ + "warn", + "error" + ] + } + ], + "quotes": [ + "error", + "single" + ], + "semi": [ + "error", + "never" + ], + "space-before-function-paren": [ + "error", + "always" + ], + "valid-jsdoc": [ + "error" + ] } } diff --git a/.gitignore b/.gitignore index 93f1361..4d2f777 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ node_modules npm-debug.log +.nyc_output/ +coverage/ diff --git a/.npmignore b/.npmignore index c2615d3..e5d0f3e 100644 --- a/.npmignore +++ b/.npmignore @@ -4,3 +4,5 @@ test .eslintrc.json .travis.yml CHANGELOG.md +.nyc_output +coverage diff --git a/.travis.yml b/.travis.yml index 6e56405..6e53823 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,8 +1,6 @@ sudo: false language: node_js node_js: - - "4" + - "stable" - "6" -script: - - npm run lint - - npm test + - "4" diff --git a/bin/cli.js b/bin/cli.js index 1d34715..9b33d79 100644 --- a/bin/cli.js +++ b/bin/cli.js @@ -1,5 +1,5 @@ #!/usr/bin/env node - +/* eslint no-console: "off" */ var fs = require('fs') var path = require('path') var stdin = require('stdin') @@ -109,8 +109,8 @@ if (argv.r) { function processMultipleFiles (files) { files = files.filter(isCss).sort() - if(!files.length){ - console.error("Files glob patterns specified did not match any css files.") + if (!files.length){ + console.error('Files glob patterns specified did not match any css files.') return } @@ -144,7 +144,7 @@ function processMultipleFiles (files) { messages = messages.filter(function (file){ return file }) - if(messages.length){ + if (messages.length){ messages = messages.join(', ') + '\n\n' + messages.length } else { messages = 'No' @@ -170,7 +170,7 @@ function handleDiff (file, original, formatted) { if (chalk.supportsColor) { file = chalk.blue(file) - if(diff) { + if (diff) { diff = chalk.gray(diff) } else { var JsDiff = require('diff') diff --git a/index.js b/index.js index 2852657..2f38d8e 100644 --- a/index.js +++ b/index.js @@ -12,7 +12,7 @@ const stylefmt = postcss.plugin('stylefmt', function (options) { var paramer = params(options) return function (root, result) { return paramer(root, result).then(function (params) { - if(params) { + if (params) { formatComments(root, params) formatAtRules(root, params) formatRules(root, params) diff --git a/lib/formatAtRules.js b/lib/formatAtRules.js index 859980b..86d5688 100644 --- a/lib/formatAtRules.js +++ b/lib/formatAtRules.js @@ -1,3 +1,5 @@ +var postcss = require('postcss') +var unprefixAtRule = require('postcss-unprefix/lib/clearAtRule') var formatAtRuleParams = require('./formatAtRuleParams') var formatDecls = require('./formatDecls') var getIndent = require('./getIndent') @@ -8,11 +10,31 @@ var util = require('./util') var getProperty = util.getProperty var getOptions = util.getOptions +function shouldClear (atrule, stylelint) { + if (postcss.vendor.prefix(atrule.name)) { + return getProperty(stylelint, 'at-rule-no-vendor-prefix') + } else if (atrule.name === 'media') { + return getProperty(stylelint, 'media-feature-name-no-vendor-prefix') && /\(\s*(?:-\w+-)?(?:\w+-)*device-pixel-ratio\b/.test(atrule.params) + } else if (atrule.name === 'supports') { + var propNoVendorPrefix = getProperty(stylelint, 'property-no-vendor-prefix') + var valueNoVendorPrefix = getProperty(stylelint, 'value-no-vendor-prefix') + return (propNoVendorPrefix && valueNoVendorPrefix) + || (propNoVendorPrefix && /\(\s*(?:-\w+){2,}\b/.test(atrule.params)) + || (propNoVendorPrefix && /\(\s*\w+[\w\-]+\s*\:[^()]*[\s,]?-\w+-/.test(atrule.params)) + } +} + function formatAtRules (root, params) { var stylelint = params.stylelint var indentWidth = params.indentWidth root.walkAtRules(function (atrule, index) { + if (shouldClear(atrule, stylelint)) { + unprefixAtRule(atrule) + if (!atrule.parent) { + return + } + } var parentType = atrule.parent.type var sassAtBlockTypes = [ @@ -98,7 +120,7 @@ function formatAtRules (root, params) { } if (atrule.name === 'mixin') { - atrule.params = atrule.params.replace(/(^[\w|-]+)\s*\(/, "$1(") + atrule.params = atrule.params.replace(/(^[\w|-]+)\s*\(/, '$1(') formatDecls(atrule, indentation, indentWidth, stylelint) } @@ -106,7 +128,7 @@ function formatAtRules (root, params) { atrule.name === 'debug' || atrule.name === 'warn' || atrule.name === 'error' ) { - atrule.params = atrule.params.replace(/\s+/g, " ") + atrule.params = atrule.params.replace(/\s+/g, ' ') atrule.raws.before = '\n' + indentation atrule.raws.between = '' } @@ -123,7 +145,7 @@ function formatAtRules (root, params) { } if (atrule.name === 'include') { - atrule.params = atrule.params.replace(/(^[\w|-]+)\s*\(/, "$1(") + atrule.params = atrule.params.replace(/(^[\w|-]+)\s*\(/, '$1(') atrule.params = atrule.params.replace(/\)\s*{/g, ') ') if (!hasLineBreaksBefore) { atrule.raws.before = '\n' + indentation @@ -215,7 +237,7 @@ function formatAtRules (root, params) { function isAfterComment (prev) { return ( prev - && prev.type === "comment" + && prev.type === 'comment' ) } @@ -228,7 +250,7 @@ function isFirstNested (prev, atrule, isNested) { function isBlocklessGroup (prev, atrule) { return ( - prev && prev.type === "atrule" + prev && prev.type === 'atrule' && !hasBlock(prev) && !hasBlock(atrule) ) @@ -238,7 +260,7 @@ function isBlocklessAfterSameNameBlockless (prev, atrule) { return ( !hasBlock(atrule) && prev && !hasBlock(prev) - && prev.type === "atrule" + && prev.type === 'atrule' && prev.name === atrule.name ) } diff --git a/lib/formatDecls.js b/lib/formatDecls.js index dd18178..30e5dc4 100644 --- a/lib/formatDecls.js +++ b/lib/formatDecls.js @@ -1,17 +1,32 @@ var formatValues = require('./formatValues') var hasDecls = require('./hasDecls') +var postcss = require('postcss') +var unprefixDecl = require('postcss-unprefix/lib/clearDecl') var hasEmptyLine = require('stylelint/lib/utils/hasEmptyLine') var isStandardSyntaxDeclaration = require('stylelint/lib/utils/isStandardSyntaxDeclaration') var isCustomProperty = require('stylelint/lib/utils/isCustomProperty') var util = require('./util') var getProperty = util.getProperty var getOptions = util.getOptions -var isSingleLineString = require("stylelint/lib/utils/isSingleLineString") +var isSingleLineString = require('stylelint/lib/utils/isSingleLineString') function formatDecls (rule, indent, indentWidth, stylelint) { const isSingleLine = isSingleLineString(rule) if (hasDecls(rule)) { + var propNoVendorPrefix = getProperty(stylelint, 'property-no-vendor-prefix') + var valueNoVendorPrefix = getProperty(stylelint, 'value-no-vendor-prefix') + rule.walkDecls(function (decl) { + if ((propNoVendorPrefix && valueNoVendorPrefix) + || (propNoVendorPrefix && postcss.vendor.prefix(decl.prop)) + || (valueNoVendorPrefix && /(?:^|,|\s)-\w+-/m.test(decl.value))) + { + unprefixDecl(decl) + if (!decl.parent) { + return + } + } + var isSassVal = /^\$/.test(decl.prop) var isIEHack = (/(\*|_)$/).test(decl.raws.before) if (decl.prop && !isCustomProperty(decl.prop) && !isSassVal) { @@ -71,7 +86,7 @@ function declarationEmptyLineBefore (stylelint, decl, indent, indentWidth, isSin var exceptOptions = getOptions(stylelint, 'declaration-empty-line-before', 'except') || [] var ignoreOptions = getOptions(stylelint, 'declaration-empty-line-before', 'ignore') || [] - var expectEmptyLineBefore = declarationEmptyLineBeforeRule === "always" + var expectEmptyLineBefore = declarationEmptyLineBeforeRule === 'always' if (ignoreOptions.indexOf('after-comment') !== -1 && prev && prev.type === 'comment') { ignore = true diff --git a/lib/formatSelectors.js b/lib/formatSelectors.js index 87642d3..fa1c225 100644 --- a/lib/formatSelectors.js +++ b/lib/formatSelectors.js @@ -1,16 +1,23 @@ +var unprefixRule = require('postcss-unprefix/lib/clearRule') var getProperty = require('./util').getProperty function formatSelectors (rule, indentation, stylelint) { + if (/\:+-\w+-/.test(rule.selector)) { + unprefixRule(rule) + if (!rule.parent) { + return + } + } var tmp = [] var isSingleLine = false rule.selectors.forEach(function (selector, i) { // don't add extra spaces to :nth-child(5n+1) etc. if (!hasPlusInsideParens(selector) && !isAttrSelector(selector)) { - selector = selector.replace(/\s*([+~>])\s*/g, " $1 ") + selector = selector.replace(/\s*([+~>])\s*/g, ' $1 ') } if (isAttrSelector(selector)) { - selector = selector.replace(/\[\s*(\S+)\s*\]/g, "[$1]") + selector = selector.replace(/\[\s*(\S+)\s*\]/g, '[$1]') } selector = selectorCombinatorSpaceBefore(stylelint, selector) @@ -46,18 +53,18 @@ function formatSelectors (rule, indentation, stylelint) { function selectorCombinatorSpaceBefore (stylelint, selector) { switch (getProperty(stylelint, 'selector-combinator-space-before')) { case 'never': - return selector.replace(/\s+(?=[+~>])/g, "") + return selector.replace(/\s+(?=[+~>])/g, '') default: - return selector.replace(/^\s*([+~>])/g, " $1") + return selector.replace(/^\s*([+~>])/g, ' $1') } } function selectorCombinatorSpaceAfter (stylelint, selector) { switch (getProperty(stylelint, 'selector-combinator-space-after')) { case 'never': - return selector.replace(/([+~>])\s*/g, "$1") + return selector.replace(/([+~>])\s*/g, '$1') default: - return selector.replace(/^\s*([+~>])\s*/g, "$1 ") + return selector.replace(/^\s*([+~>])\s*/g, '$1 ') } } diff --git a/lib/formatShorthand.js b/lib/formatShorthand.js index 0b36aa4..a0f6a39 100644 --- a/lib/formatShorthand.js +++ b/lib/formatShorthand.js @@ -1,27 +1,27 @@ var valueParser = require('postcss-value-parser') var getProperty = require('./util').getProperty -var ignoredCharacters = ["+", "-", "*", "/", "(", ")", "$", "@", "--", "var("] +var ignoredCharacters = ['+', '-', '*', '/', '(', ')', '$', '@', '--', 'var('] var ignoredShorthandProperties = [ - "background", - "font", - "border", - "border-top", - "border-bottom", - "border-left", - "border-right", - "list-style", - "transition", + 'background', + 'font', + 'border', + 'border-top', + 'border-bottom', + 'border-left', + 'border-right', + 'list-style', + 'transition', ] var shorthandableProperties = [ - "margin", - "padding", - "border-width", - "border-style", - "border-color", - "border-radius", + 'margin', + 'padding', + 'border-width', + 'border-style', + 'border-color', + 'border-radius', ] function condense (top, right, bottom, left) { diff --git a/lib/formatValues.js b/lib/formatValues.js index c23ace3..9d9eb43 100644 --- a/lib/formatValues.js +++ b/lib/formatValues.js @@ -68,11 +68,10 @@ function formatvalues (decl, stylelint) { decl.value = formatTransforms(decl.value) if (decl.important) { - decl.raws.important = " !important" + decl.raws.important = ' !important' } return decl } - module.exports = formatvalues diff --git a/lib/params.js b/lib/params.js index 44d6ff3..c3f514d 100644 --- a/lib/params.js +++ b/lib/params.js @@ -72,7 +72,7 @@ function loadConfig (stylelint, file, options) { throw err } }).then(function (rules) { - if(rules) { + if (rules) { return { indentWidth: getIndentationFromStylelintRules(rules), hasScss: /\.scss$/i.test(file), diff --git a/lib/util.js b/lib/util.js index 489b504..acc0501 100644 --- a/lib/util.js +++ b/lib/util.js @@ -55,7 +55,6 @@ function getOptions (stylelint, prop, option) { return stylelintProperty } - module.exports = { inAtRule: inAtRule, getNestedRulesNum: getNestedRulesNum, diff --git a/package.json b/package.json index 3888b31..fea5d2b 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,29 @@ "description": "stylefmt is a tool that automatically formats CSS according to stylelint rules", "main": "index.js", "scripts": { - "test": "tape test/*.js | faucet && npm run lint", - "lint": "eslint -c .eslintrc.json index.js lib bin" + "pretest": "eslint -c .eslintrc.json index.js lib bin", + "test": "nyc tape test/*.js | faucet" + }, + "nyc": { + "lines": 80, + "statements": 80, + "functions": 80, + "branches": 80, + "include": [ + "index.js", + "lib/**/*.js", + "bin/**/*.js" + ], + "exclude": [ + "dist/**/*.spec.js" + ], + "reporter": [ + "lcov", + "text" + ], + "cache": true, + "all": true, + "check-coverage": true }, "bin": { "stylefmt": "bin/cli.js" @@ -39,6 +60,7 @@ "postcss": "^6.0.1", "postcss-scss": "^1.0.0", "postcss-sorting": "^2.1.0", + "postcss-unprefix": "^2.1.1", "postcss-value-parser": "^3.3.0", "stdin": "^0.0.1", "stylelint": "^7.10.1", @@ -49,6 +71,7 @@ "eslint": "^3.19.0", "faucet": "^0.0.1", "klaw": "^1.3.1", + "nyc": "^10.3.2", "tape": "^4.6.3" } } diff --git a/test/stylelint/no-vendor-prefix/.stylelintrc b/test/stylelint/no-vendor-prefix/.stylelintrc new file mode 100644 index 0000000..b9792de --- /dev/null +++ b/test/stylelint/no-vendor-prefix/.stylelintrc @@ -0,0 +1,9 @@ +{ + "rules": { + "at-rule-no-vendor-prefix": true, + "media-feature-name-no-vendor-prefix": true, + "property-no-vendor-prefix": true, + "selector-no-vendor-prefix": true, + "value-no-vendor-prefix": true + } +} diff --git a/test/stylelint/no-vendor-prefix/no-vendor-prefix.css b/test/stylelint/no-vendor-prefix/no-vendor-prefix.css new file mode 100644 index 0000000..86e7c43 --- /dev/null +++ b/test/stylelint/no-vendor-prefix/no-vendor-prefix.css @@ -0,0 +1,459 @@ +a { + -js-display: flex; + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-flow: row; + -moz-box-orient: horizontal; + -moz-box-direction: normal; + -ms-flex-flow: row; + flex-flow: row; + -webkit-box-ordinal-group: 1; + -webkit-order: 0; + -moz-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 1 2; + -moz-box-flex: 0; + -ms-flex: 0 1 2; + flex: 0 1 2; + -webkit-transition: -webkit-box-flex 200ms, -webkit-flex 200ms; + transition: -webkit-box-flex 200ms, -webkit-flex 200ms; + transition: flex 200ms; + transition: flex 200ms, -webkit-box-flex 200ms, -webkit-flex 200ms, -moz-box-flex 200ms, -ms-flex 200ms; +} + +.inline { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-self: auto; + -ms-flex-item-align: auto; + align-self: auto; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-box-flex: 1; + -webkit-flex: auto; + -moz-box-flex: 1; + -ms-flex: auto; + flex: auto; +} + +.inline-box { + display: -webkit-inline-box; +} + +.inline-flex { + display: -webkit-inline-flex; +} + +.inline-flexbox { + display: -ms-inline-flexbox; +} + +.a { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -moz-box-orient: horizontal; + -moz-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -moz-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: start; + -webkit-align-items: flex-start; + -moz-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-content: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; + -webkit-box-flex: 0; + -webkit-flex: none; + -moz-box-flex: 0; + -ms-flex: none; + flex: none; +} + +.display_flex { + display: -webkit-flex; +} + +.display_box { + display: -moz-box; +} + +.display_flexbox { + display: -ms-flexbox; +} + +.b { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -webkit-flex-direction: row-reverse; + -moz-box-orient: horizontal; + -moz-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -moz-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + -webkit-box-align: end; + -webkit-align-items: flex-end; + -moz-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-content: flex-end; + -ms-flex-line-pack: end; + align-content: flex-end; + -webkit-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; +} + +.c { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -moz-box-orient: vertical; + -moz-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -moz-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -moz-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: reverse-wrap; + -ms-flex-wrap: reverse-wrap; + flex-wrap: reverse-wrap; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; +} + +.e { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -webkit-flex-direction: column-reverse; + -moz-box-orient: vertical; + -moz-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -moz-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: baseline; + -webkit-align-items: baseline; + -moz-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + -webkit-align-content: space-between; + -ms-flex-line-pack: justify; + align-content: space-between; + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; +} + +.f { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -moz-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-align-content: space-around; + -ms-flex-line-pack: distribute; + align-content: space-around; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; +} + +.g { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: -webkit-calc(1em + 1px); + -webkit-flex: -webkit-calc(1em + 1px) 0 0; + -moz-box-flex: calc(1em + 1px); + -ms-flex: calc(1em + 1px) 0 0px; + flex: calc(1em + 1px) 0 0; +} + +.h { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-flow: column wrap; + -moz-box-orient: vertical; + -moz-box-direction: normal; + -ms-flex-flow: column wrap; + flex-flow: column wrap; +} + +.i { + -webkit-flex-flow: nowrap; + -ms-flex-flow: nowrap; + flex-flow: nowrap; +} + +.inherit { + -webkit-box-ordinal-group: inherit; + -webkit-order: inherit; + -moz-box-ordinal-group: inherit; + -ms-flex-order: inherit; + order: inherit; +} + +a { + background: -webkit-linear-gradient(99.5deg, white, black), -webkit-linear-gradient(220deg, black, white), -webkit-linear-gradient(45deg, black, white); + background: -o-linear-gradient(99.5deg, white, black), -o-linear-gradient(220deg, black, white), -o-linear-gradient(45deg, black, white); + background: linear-gradient(350.5deg, white, black), linear-gradient(-130deg, black, white), linear-gradient(45deg, black, white); +} + +b { + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(white)), -webkit-gradient(linear, left top, left bottom, from(white), to(black)); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 1), white), -webkit-linear-gradient(white, black); + background-image: -o-linear-gradient(rgba(0, 0, 0, 1), white), -o-linear-gradient(white, black); + background-image: linear-gradient(rgba(0, 0, 0, 1), white), linear-gradient(white, black); +} + +strong { + background: -webkit-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat; + background: -o-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat; + background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat; +} + +div { + background-image: -webkit-radial-gradient(right, white, black), -webkit-repeating-linear-gradient(top left, black, white), -webkit-repeating-radial-gradient(bottom, aqua, red); + background-image: -o-radial-gradient(right, white, black), -o-repeating-linear-gradient(top left, black, white), -o-repeating-radial-gradient(bottom, aqua, red); + background-image: radial-gradient(to left, white, black), repeating-linear-gradient(to bottom right, black, white), repeating-radial-gradient(to top, aqua, red); +} + +.radial { + background: -webkit-radial-gradient(ellipse farthest-corner, black, white); + background: -o-radial-gradient(ellipse farthest-corner, black, white); + background: radial-gradient(ellipse farthest-corner, black, white); +} + +.simple1 { + background: -webkit-gradient(linear, left top, left bottom, from(black), to(white)); + background: -webkit-linear-gradient(black, white); + background: -o-linear-gradient(black, white); + background: linear-gradient(black, white); +} + +.simple2 { + background: -webkit-gradient(linear, right top, left top, from(black), color-stop(50%, rgba(0, 0, 0, 0.5)), to(white)); + background: -webkit-linear-gradient(right, black 0%, rgba(0, 0, 0, 0.5)50%, white 100%); + background: -o-linear-gradient(right, black 0%, rgba(0, 0, 0, 0.5)50%, white 100%); + background: linear-gradient(to left, black 0%, rgba(0, 0, 0, 0.5)50%, white 100%); +} + +.simple3 { + background: -webkit-gradient(linear, right top, left top, color-stop(50%, black), to(white)); + background: -webkit-linear-gradient(right, black 50%, white 100%); + background: -o-linear-gradient(right, black 50%, white 100%); + background: linear-gradient(to left, black 50%, white 100%); +} + +.simple4 { + background: -webkit-gradient(linear, left bottom, right top, from(black), to(white)); + background: -webkit-linear-gradient(left bottom, black, white); + background: -o-linear-gradient(left bottom, black, white); + background: linear-gradient(to right top, black, white); +} + +.direction { + background: -webkit-gradient(linear, left top, right bottom, from(black), color-stop(rgba(0, 0, 0, 0.5)), to(white)); + background: -webkit-linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white); + background: -o-linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white); + background: linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white); +} + +.silent { + background: -webkit-linear-gradient(top left, black, white); +} + +.radial { + background: -webkit-radial-gradient(0 50%, farthest-side, white, black); + background: -o-radial-gradient(0 50%, farthest-side, white, black); + background: radial-gradient(farthest-side at 0 50%, white, black); +} + +.second { + background: red -webkit-gradient(linear, left top, left bottom, from(red), to(blue)); + background: red -webkit-linear-gradient(red, blue); + background: red -o-linear-gradient(red, blue); + background: red linear-gradient(red, blue); + background: url('logo.png'), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000)); + background: url('logo.png'), -webkit-linear-gradient(#fff, #000); + background: url('logo.png'), -o-linear-gradient(#fff, #000); + background: url('logo.png'), linear-gradient(#fff, #000); +} + +.px { + background: -webkit-linear-gradient(black 0, white 100px); + background: -o-linear-gradient(black 0, white 100px); + background: linear-gradient(black 0, white 100px); +} + +.list { + list-style-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); + list-style-image: -webkit-linear-gradient(white, black); + list-style-image: linear-gradient(white, black); +} + +.mask1 { + -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); +} + +.mask2 { + -webkit-mask: -webkit-linear-gradient(white, black); +} + +.mask3 { + mask: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); +} + +.newline_old { + background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black)), -webkit-gradient(linear, left top, left bottom, from(black), to(white)); +} + +.newline { + background-image: -webkit-linear-gradient(white, black), -webkit-linear-gradient(black, white); + background-image: -o-linear-gradient(white, black), -o-linear-gradient(black, white); +} + +.convert_old { + background: -webkit-gradient(linear, right top, left top, from(white), to(black)); +} + +.convert { + background: -webkit-linear-gradient(right, white, black); + background: -o-linear-gradient(right, white, black); +} + +.rad { + background: -webkit-linear-gradient(32.704deg, white, black); + background: -o-linear-gradient(32.704deg, white, black); +} + +.turn { + background: -webkit-linear-gradient(342deg, white, black); + background: -o-linear-gradient(342deg, white, black); +} + +.norm { + background: -webkit-gradient(linear, right top, left top, from(white), to(black)); + background: -webkit-linear-gradient(right, white, black); + background: -o-linear-gradient(right, white, black); +} + +.foo { + --widthA: 100px; + --widthB: -webkit-calc(var(--widthA) / 2); + --widthC: -webkit-calc(var(--widthB) / 2); + --widthB: -moz-calc(var(--widthA) / 2); + --widthC: -moz-calc(var(--widthB) / 2); + width: var(--widthC); +} + +div { + width: -webkit-calc(100% - 1em); + width: -moz-calc(100% - 1em); +} + +input::-moz-placeholder { +} + +:-webkit-full-screen a { +} + +@media (-webkit-min-device-pixel-ratio: 1) { +} + +@media (min--mox-device-pixel-ratio: 1) { +} + +@media (-o-max-device-pixel-ratio: 1/1) { +} + +@-webkit-keyframes { + 0% { + top: 0; + } +} + +@-ms-viewport { + orientation: landscape; +} diff --git a/test/stylelint/no-vendor-prefix/no-vendor-prefix.out.css b/test/stylelint/no-vendor-prefix/no-vendor-prefix.out.css new file mode 100644 index 0000000..3f84413 --- /dev/null +++ b/test/stylelint/no-vendor-prefix/no-vendor-prefix.out.css @@ -0,0 +1,242 @@ +a { + display: flex; + flex-flow: row; + order: 0; + flex: 0 1 2; + transition: flex 200ms; +} + +.inline { + display: inline-flex; + align-self: auto; + align-content: stretch; + flex: auto; +} + +.inline-box { + display: inline-flex; +} + +.inline-flex { + display: inline-flex; +} + +.inline-flexbox { + display: inline-flex; +} + +.a { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: nowrap; + align-content: flex-start; + align-self: flex-start; + flex: none; +} + +.display_flex { + display: flex; +} + +.display_box { + display: flex; +} + +.display_flexbox { + display: flex; +} + +.b { + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; + align-items: flex-end; + flex-wrap: wrap; + align-content: flex-end; + align-self: flex-end; + flex-shrink: 1; +} + +.c { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex-wrap: reverse-wrap; + align-content: center; + align-self: center; + flex-basis: auto; +} + +.e { + display: flex; + flex-direction: column-reverse; + justify-content: space-between; + align-items: baseline; + align-content: space-between; + align-self: baseline; +} + +.f { + display: flex; + justify-content: space-around; + align-items: stretch; + align-content: space-around; + align-self: stretch; +} + +.g { + display: flex; + flex: calc(1em + 1px) 0 0; +} + +.h { + flex-flow: column wrap; +} + +.i { + flex-flow: nowrap; +} + +.inherit { + order: inherit; +} + +a { + background: linear-gradient(350.5deg, white, black), linear-gradient(-130deg, black, white), linear-gradient(45deg, black, white); +} + +b { + background-image: linear-gradient(rgba(0, 0, 0, 1), white), linear-gradient(white, black); +} + +strong { + background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat; +} + +div { + background-image: radial-gradient(to left, white, black), repeating-linear-gradient(to bottom right, black, white), repeating-radial-gradient(to top, aqua, red); +} + +.radial { + background: radial-gradient(ellipse farthest-corner, black, white); +} + +.simple1 { + background: linear-gradient(black, white); +} + +.simple2 { + background: linear-gradient(to left, black 0%, rgba(0, 0, 0, 0.5)50%, white 100%); +} + +.simple3 { + background: linear-gradient(to left, black 50%, white 100%); +} + +.simple4 { + background: linear-gradient(to right top, black, white); +} + +.direction { + background: linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white); +} + +.silent { + background: linear-gradient(to bottom right, black, white); +} + +.radial { + background: radial-gradient(farthest-side at 0 50%, white, black); +} + +.second { + background: red linear-gradient(red, blue); + background: url('logo.png'), linear-gradient(#fff, #000); +} + +.px { + background: linear-gradient(black 0, white 100px); +} + +.list { + list-style-image: linear-gradient(white, black); +} + +.mask1 { + mask: linear-gradient(white, black); +} + +.mask2 { + mask: linear-gradient(white, black); +} + +.mask3 { + mask: linear-gradient(white, black); +} + +.newline_old { + background-image: linear-gradient(white, black), linear-gradient(black, white); +} + +.newline { + background-image: linear-gradient(white, black), linear-gradient(black, white); +} + +.convert_old { + background: linear-gradient(270deg, white, black); +} + +.convert { + background: linear-gradient(to left, white, black); +} + +.rad { + background: linear-gradient(57.296deg, white, black); +} + +.turn { + background: linear-gradient(108deg, white, black); +} + +.norm { + background: linear-gradient(to left, white, black); +} + +.foo { + --widthA: 100px; + --widthB: calc(var(--widthA) / 2); + --widthC: calc(var(--widthB) / 2); + width: var(--widthC); +} + +div { + width: calc(100% - 1em); +} + +input::placeholder { +} + +:fullscreen a { +} + +@media (min-resolution: 1dppx) { +} + +@media (min--mox-device-pixel-ratio: 1) { +} + +@media (max-resolution: 1dppx) { +} + +@keyframes { + 0% { + top: 0; + } +} + +@viewport { + orientation: landscape; +} diff --git a/test/stylelint/property-no-vendor-prefix/.stylelintrc b/test/stylelint/property-no-vendor-prefix/.stylelintrc new file mode 100644 index 0000000..15b926f --- /dev/null +++ b/test/stylelint/property-no-vendor-prefix/.stylelintrc @@ -0,0 +1,5 @@ +{ + "rules": { + "property-no-vendor-prefix": true + } +} diff --git a/test/stylelint/property-no-vendor-prefix/property-no-vendor-prefix.css b/test/stylelint/property-no-vendor-prefix/property-no-vendor-prefix.css new file mode 100644 index 0000000..284a12e --- /dev/null +++ b/test/stylelint/property-no-vendor-prefix/property-no-vendor-prefix.css @@ -0,0 +1,388 @@ +.class { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +h1 { + font: bold 20px/1.5 georgia, simsun, sans-serif; +} + +.box { + display: -webkit-box; + display: -moz-box; + display: -ms-box; + width: 600px; + height: 180px; + margin: 0; + padding: 0; + list-style: none; +} + +a { + -js-display: flex; + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-flow: row; + -moz-box-orient: horizontal; + -moz-box-direction: normal; + -ms-flex-flow: row; + flex-flow: row; + -webkit-box-ordinal-group: 1; + -webkit-order: 0; + -moz-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 1 2; + -moz-box-flex: 0; + -ms-flex: 0 1 2; + flex: 0 1 2; + -webkit-transition: -webkit-box-flex 200ms, -webkit-flex 200ms; + transition: -webkit-box-flex 200ms, -webkit-flex 200ms; + transition: flex 200ms; + transition: flex 200ms, -webkit-box-flex 200ms, -webkit-flex 200ms, -moz-box-flex 200ms, -ms-flex 200ms; +} + +.flex-direction:row { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; +} + +.flex-direction:row-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; +} + +.flex-direction:column { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; +} + +.flex-direction:column-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; +} + +.flex-direction:row { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; +} + +.flex-direction:row-reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; +} + +.flex-direction:column { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; +} + +.flex-direction:column-reverse { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; +} + +.box-orient:vertical { + -webkit-box-orient: vertical; +} + +.box-orient:horizontal { + -webkit-box-orient: horizontal; +} + +.box-orient { + -webkit-box-orient: error; +} + +.box-direction:normal { + -webkit-box-direction: normal; +} + +.box-direction:reverse { + -webkit-box-direction: reverse; +} + +.box-direction { + -webkit-box-direction: error; +} + +.inline { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-self: auto; + -ms-flex-item-align: auto; + align-self: auto; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-box-flex: 1; + -webkit-flex: auto; + -moz-box-flex: 1; + -ms-flex: auto; + flex: auto; +} + +.a { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -moz-box-orient: horizontal; + -moz-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -moz-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: start; + -webkit-align-items: flex-start; + -moz-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-content: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; + -webkit-box-flex: 0; + -webkit-flex: none; + -moz-box-flex: 0; + -ms-flex: none; + flex: none; +} + +.b { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -webkit-flex-direction: row-reverse; + -moz-box-orient: horizontal; + -moz-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -moz-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + -webkit-box-align: end; + -webkit-align-items: flex-end; + -moz-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-content: flex-end; + -ms-flex-line-pack: end; + align-content: flex-end; + -webkit-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; +} + +.c { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -moz-box-orient: vertical; + -moz-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -moz-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -moz-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: reverse-wrap; + -ms-flex-wrap: reverse-wrap; + flex-wrap: reverse-wrap; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; +} + +.e { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -webkit-flex-direction: column-reverse; + -moz-box-orient: vertical; + -moz-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -moz-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: baseline; + -webkit-align-items: baseline; + -moz-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + -webkit-align-content: space-between; + -ms-flex-line-pack: justify; + align-content: space-between; + -webkit-align-self: baseline; + -ms-flex-item-align: baseline; + align-self: baseline; +} + +.f { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -moz-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-align-content: space-around; + -ms-flex-line-pack: distribute; + align-content: space-around; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; +} + +.g { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: -webkit-calc(1em + 1px); + -webkit-flex: -webkit-calc(1em + 1px) 0 0; + -moz-box-flex: calc(1em + 1px); + -ms-flex: calc(1em + 1px) 0 0px; + flex: calc(1em + 1px) 0 0; +} + +.h { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-flow: column wrap; + -moz-box-orient: vertical; + -moz-box-direction: normal; + -ms-flex-flow: column wrap; + flex-flow: column wrap; +} + +.i { + -webkit-flex-flow: nowrap; + -ms-flex-flow: nowrap; + flex-flow: nowrap; +} + +.inherit { + -webkit-box-ordinal-group: inherit; + -webkit-order: inherit; + -moz-box-ordinal-group: inherit; + -ms-flex-order: inherit; + order: inherit; +} + +.a { + -webkit-column-break-inside: auto; + page-break-inside: auto; + break-inside: auto; + -webkit-column-break-before: auto; + page-break-before: auto; + break-before: auto; + -webkit-column-break-after: auto; + page-break-after: auto; + break-after: auto; +} + +.b { + -webkit-column-break-inside: avoid; + page-break-inside: avoid; + break-inside: avoid; +} + +.c { + -webkit-column-break-inside: avoid; + page-break-inside: avoid; + break-inside: avoid-column; +} + +.d { + page-break-inside: avoid; + break-inside: avoid-page; +} + +.e { + break-inside: avoid-region; +} + +img { + image-rendering: crisp-edges; +} + +img.other { + -ms-interpolation-mode: nearest-neighbor; + image-rendering: -webkit-optimize-contrast; + image-rendering: -moz-crisp-edges; + image-rendering: pixelated; +} + +img.already { + -ms-interpolation-mode: nearest-neighbor; + display: block; + image-rendering: crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: -moz-crisp-edges; + image-rendering: pixelated; +} diff --git a/test/stylelint/property-no-vendor-prefix/property-no-vendor-prefix.out.css b/test/stylelint/property-no-vendor-prefix/property-no-vendor-prefix.out.css new file mode 100644 index 0000000..22c99d3 --- /dev/null +++ b/test/stylelint/property-no-vendor-prefix/property-no-vendor-prefix.out.css @@ -0,0 +1,221 @@ +.class { + box-sizing: border-box; +} + +h1 { + font: bold 20px/1.5 georgia, simsun, sans-serif; +} + +.box { + display: -webkit-box; + display: -moz-box; + display: -ms-box; + width: 600px; + height: 180px; + margin: 0; + padding: 0; + list-style: none; +} + +a { + display: flex; + flex-flow: row; + order: 0; + flex: 0 1 2; + transition: flex 200ms; +} + +.flex-direction:row { + flex-direction: row; +} + +.flex-direction:row-reverse { + flex-direction: row-reverse; +} + +.flex-direction:column { + flex-direction: row; +} + +.flex-direction:column-reverse { + flex-direction: row-reverse; +} + +.flex-direction:row { + flex-direction: row; +} + +.flex-direction:row-reverse { + flex-direction: row; +} + +.flex-direction:column { + flex-direction: column; +} + +.flex-direction:column-reverse { + flex-direction: column; +} + +.box-orient:vertical { + flex-direction: column; +} + +.box-orient:horizontal { + flex-direction: row; +} + +.box-orient { + flex-direction: row; +} + +.box-direction:normal { + flex-direction: row; +} + +.box-direction:reverse { + flex-direction: row-reverse; +} + +.box-direction { + flex-direction: row; +} + +.inline { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + align-self: auto; + align-content: stretch; + flex: auto; +} + +.a { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: nowrap; + align-content: flex-start; + align-self: flex-start; + flex: none; +} + +.b { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; + align-items: flex-end; + flex-wrap: wrap; + align-content: flex-end; + align-self: flex-end; + flex-shrink: 1; +} + +.c { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex-wrap: reverse-wrap; + align-content: center; + align-self: center; + flex-basis: auto; +} + +.e { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + flex-direction: column-reverse; + justify-content: space-between; + align-items: baseline; + align-content: space-between; + align-self: baseline; +} + +.f { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + justify-content: space-around; + align-items: stretch; + align-content: space-around; + align-self: stretch; +} + +.g { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + flex: calc(1em + 1px) 0 0; +} + +.h { + flex-flow: column wrap; +} + +.i { + flex-flow: nowrap; +} + +.inherit { + order: inherit; +} + +.a { + break-inside: auto; + break-before: auto; + break-after: auto; +} + +.b { + break-inside: avoid; +} + +.c { + break-inside: avoid-column; +} + +.d { + page-break-inside: avoid; + break-inside: avoid-page; +} + +.e { + break-inside: avoid-region; +} + +img { + image-rendering: crisp-edges; +} + +img.other { + image-rendering: pixelated; +} + +img.already { + display: block; + image-rendering: crisp-edges; + image-rendering: pixelated; +} diff --git a/test/stylelint/value-no-vendor-prefix/.stylelintrc b/test/stylelint/value-no-vendor-prefix/.stylelintrc new file mode 100644 index 0000000..b4d808c --- /dev/null +++ b/test/stylelint/value-no-vendor-prefix/.stylelintrc @@ -0,0 +1,5 @@ +{ + "rules": { + "value-no-vendor-prefix": true + } +} diff --git a/test/stylelint/value-no-vendor-prefix/value-no-vendor-prefix.css b/test/stylelint/value-no-vendor-prefix/value-no-vendor-prefix.css new file mode 100644 index 0000000..203c477 --- /dev/null +++ b/test/stylelint/value-no-vendor-prefix/value-no-vendor-prefix.css @@ -0,0 +1,175 @@ +a { + -js-display: flex; + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + -webkit-flex-flow: row; + -ms-flex-flow: row; + -webkit-box-ordinal-group: 1; + -webkit-order: 0; + -moz-box-ordinal-group: 1; + -ms-flex-order: 0; + -moz-box-flex: 0; + -ms-flex: 0 1 2; + -webkit-transition: -webkit-box-flex 200ms, -webkit-flex 200ms; +} + +a { + background: -webkit-linear-gradient(99.5deg, white, black), -webkit-linear-gradient(220deg, black, white), -webkit-linear-gradient(45deg, black, white); + background: -o-linear-gradient(99.5deg, white, black), -o-linear-gradient(220deg, black, white), -o-linear-gradient(45deg, black, white); + background: linear-gradient(350.5deg, white, black), linear-gradient(-130deg, black, white), linear-gradient(45deg, black, white); +} + +b { + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(white)), -webkit-gradient(linear, left top, left bottom, from(white), to(black)); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 1), white), -webkit-linear-gradient(white, black); + background-image: -o-linear-gradient(rgba(0, 0, 0, 1), white), -o-linear-gradient(white, black); + background-image: linear-gradient(rgba(0, 0, 0, 1), white), linear-gradient(white, black); +} + +strong { + background: -webkit-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat; + background: -o-linear-gradient(bottom, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat; + background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat; +} + +div { + background-image: -webkit-radial-gradient(right, white, black), -webkit-repeating-linear-gradient(top left, black, white), -webkit-repeating-radial-gradient(bottom, aqua, red); + background-image: -o-radial-gradient(right, white, black), -o-repeating-linear-gradient(top left, black, white), -o-repeating-radial-gradient(bottom, aqua, red); + background-image: radial-gradient(to left, white, black), repeating-linear-gradient(to bottom right, black, white), repeating-radial-gradient(to top, aqua, red); +} + +.radial { + background: -webkit-radial-gradient(ellipse farthest-corner, black, white); + background: -o-radial-gradient(ellipse farthest-corner, black, white); + background: radial-gradient(ellipse farthest-corner, black, white); +} + +.simple1 { + background: -webkit-gradient(linear, left top, left bottom, from(black), to(white)); + background: -webkit-linear-gradient(black, white); + background: -o-linear-gradient(black, white); + background: linear-gradient(black, white); +} + +.simple2 { + background: -webkit-gradient(linear, right top, left top, from(black), color-stop(50%, rgba(0, 0, 0, 0.5)), to(white)); + background: -webkit-linear-gradient(right, black 0%, rgba(0, 0, 0, 0.5)50%, white 100%); + background: -o-linear-gradient(right, black 0%, rgba(0, 0, 0, 0.5)50%, white 100%); + background: linear-gradient(to left, black 0%, rgba(0, 0, 0, 0.5)50%, white 100%); +} + +.simple3 { + background: -webkit-gradient(linear, right top, left top, color-stop(50%, black), to(white)); + background: -webkit-linear-gradient(right, black 50%, white 100%); + background: -o-linear-gradient(right, black 50%, white 100%); + background: linear-gradient(to left, black 50%, white 100%); +} + +.simple4 { + background: -webkit-gradient(linear, left bottom, right top, from(black), to(white)); + background: -webkit-linear-gradient(left bottom, black, white); + background: -o-linear-gradient(left bottom, black, white); + background: linear-gradient(to right top, black, white); +} + +.direction { + background: -webkit-gradient(linear, left top, right bottom, from(black), color-stop(rgba(0, 0, 0, 0.5)), to(white)); + background: -webkit-linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white); + background: -o-linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white); + background: linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white); +} + +.silent { + background: -webkit-linear-gradient(top left, black, white); +} + +.radial { + background: -webkit-radial-gradient(0 50%, farthest-side, white, black); + background: -o-radial-gradient(0 50%, farthest-side, white, black); + background: radial-gradient(farthest-side at 0 50%, white, black); +} + +.second { + background: red -webkit-gradient(linear, left top, left bottom, from(red), to(blue)); + background: red -webkit-linear-gradient(red, blue); + background: red -o-linear-gradient(red, blue); + background: red linear-gradient(red, blue); + background: url('logo.png'), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000)); + background: url('logo.png'), -webkit-linear-gradient(#fff, #000); + background: url('logo.png'), -o-linear-gradient(#fff, #000); + background: url('logo.png'), linear-gradient(#fff, #000); +} + +.px { + background: -webkit-linear-gradient(black 0, white 100px); + background: -o-linear-gradient(black 0, white 100px); + background: linear-gradient(black 0, white 100px); +} + +.list { + list-style-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); + list-style-image: -webkit-linear-gradient(white, black); + list-style-image: linear-gradient(white, black); +} + +.mask { + -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); + -webkit-mask: -webkit-linear-gradient(white, black); + mask: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); + mask: linear-gradient(white, black); +} + +.newline { + background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black)), -webkit-gradient(linear, left top, left bottom, from(black), to(white)); + background-image: -webkit-linear-gradient(white, black), -webkit-linear-gradient(black, white); + background-image: -o-linear-gradient(white, black), -o-linear-gradient(black, white); + background-image: linear-gradient(white, black), linear-gradient(black, white); +} + +.convert { + background: -webkit-gradient(linear, right top, left top, from(white), to(black)); + background: -webkit-linear-gradient(right, white, black); + background: -o-linear-gradient(right, white, black); + background: linear-gradient(270deg, white, black); +} + +.rad { + background: -webkit-linear-gradient(32.704deg, white, black); + background: -o-linear-gradient(32.704deg, white, black); + background: linear-gradient(1rad, white, black); +} + +.turn { + background: -webkit-linear-gradient(342deg, white, black); + background: -o-linear-gradient(342deg, white, black); + background: linear-gradient(0.3turn, white, black); +} + +.norm { + background: -webkit-gradient(linear, right top, left top, from(white), to(black)); + background: -webkit-linear-gradient(right, white, black); + background: -o-linear-gradient(right, white, black); + background: linear-gradient(-90deg, white, black); +} + +img { + image-rendering: crisp-edges; +} + +img.other { + -ms-interpolation-mode: nearest-neighbor; + image-rendering: -webkit-optimize-contrast; + image-rendering: -moz-crisp-edges; + image-rendering: pixelated; +} + +img.already { + -ms-interpolation-mode: nearest-neighbor; + display: block; + image-rendering: crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: -moz-crisp-edges; + image-rendering: pixelated; +} diff --git a/test/stylelint/value-no-vendor-prefix/value-no-vendor-prefix.out.css b/test/stylelint/value-no-vendor-prefix/value-no-vendor-prefix.out.css new file mode 100644 index 0000000..4b769b8 --- /dev/null +++ b/test/stylelint/value-no-vendor-prefix/value-no-vendor-prefix.out.css @@ -0,0 +1,113 @@ +a { + display: flex; + -webkit-flex-flow: row; + -ms-flex-flow: row; + -webkit-box-ordinal-group: 1; + -webkit-order: 0; + -moz-box-ordinal-group: 1; + -ms-flex-order: 0; + -moz-box-flex: 0; + -ms-flex: 0 1 2; + transition: flex 200ms; +} + +a { + background: linear-gradient(350.5deg, white, black), linear-gradient(-130deg, black, white), linear-gradient(45deg, black, white); +} + +b { + background-image: linear-gradient(rgba(0, 0, 0, 1), white), linear-gradient(white, black); +} + +strong { + background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.8) 20px, #000 30px, #000) no-repeat; +} + +div { + background-image: radial-gradient(to left, white, black), repeating-linear-gradient(to bottom right, black, white), repeating-radial-gradient(to top, aqua, red); +} + +.radial { + background: radial-gradient(ellipse farthest-corner, black, white); +} + +.simple1 { + background: linear-gradient(black, white); +} + +.simple2 { + background: linear-gradient(to left, black 0%, rgba(0, 0, 0, 0.5)50%, white 100%); +} + +.simple3 { + background: linear-gradient(to left, black 50%, white 100%); +} + +.simple4 { + background: linear-gradient(to right top, black, white); +} + +.direction { + background: linear-gradient(top left, black, rgba(0, 0, 0, 0.5), white); +} + +.silent { + background: linear-gradient(to bottom right, black, white); +} + +.radial { + background: radial-gradient(farthest-side at 0 50%, white, black); +} + +.second { + background: red linear-gradient(red, blue); + background: url('logo.png'), linear-gradient(#fff, #000); +} + +.px { + background: linear-gradient(black 0, white 100px); +} + +.list { + list-style-image: linear-gradient(white, black); +} + +.mask { + mask: linear-gradient(white, black); +} + +.newline { + background-image: linear-gradient(white, black), linear-gradient(black, white); +} + +.convert { + background: linear-gradient(270deg, white, black); +} + +.rad { + background: linear-gradient(1rad, white, black); +} + +.turn { + background: linear-gradient(0.3turn, white, black); +} + +.norm { + background: linear-gradient(-90deg, white, black); +} + +img { + image-rendering: crisp-edges; +} + +img.other { + -ms-interpolation-mode: nearest-neighbor; + image-rendering: pixelated; +} + +img.already { + -ms-interpolation-mode: nearest-neighbor; + display: block; + image-rendering: crisp-edges; + image-rendering: pixelated; +}