🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

postcss-pseudo-elements-content

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-pseudo-elements-content - npm Package Compare versions

Comparing version

1.0.0
to
2.0.0

test/expected.css
test/input.css

44

index.js

@@ -1,29 +0,23 @@

var postcss = require('postcss');
var postcss = require('postcss')
module.exports = postcss.plugin('postcss-pseudo-elements-content', function (opts) {
opts = opts || {};
var customPseudoExp = /(.*::?)(after|before)(-c)$/
var customPseudoExp = /(.*::?)(after|before)(-c)$/;
module.exports = postcss.plugin('postcss-pseudo-elements-content', function () {
return function (root) {
root.walkRules(function (rule) {
var hasCustomPseudo = false
return function (css) {
// Process selectors
rule.selectors = rule.selectors.map(function (selector) {
if (customPseudoExp.test(selector)) {
hasCustomPseudo = true
return selector.replace(customPseudoExp, '$1$2')
}
return selector
})
css.eachRule(function(rule) {
var hasCustomPseudo = false;
var selectors = [];
rule.selectors.forEach(function(selector){
var isCustomPseudo = customPseudoExp.test(selector);
if (isCustomPseudo) {
hasCustomPseudo = true;
selector = selector.replace(customPseudoExp, '$1$2');
}
selectors.push(selector);
});
if (hasCustomPseudo) {
rule.selector = selectors.join(', ');
var contentDecl = postcss.decl({ prop: 'content', value: "''" });
rule.append(contentDecl);
}
});
};
});
// Add `content: ''` declaraion
if (hasCustomPseudo) rule.append({ prop: 'content', value: "''" })
})
}
})

41

package.json
{
"name": "postcss-pseudo-elements-content",
"version": "1.0.0",
"description": "PostCSS plugin to automatically add 'content' property in the pseudo-elements (:before and :after)",
"version": "2.0.0",
"description": "PostCSS plugin adds `content: ''` to `:before` and `:after` pseudo-elements",
"keywords": [

@@ -9,4 +9,4 @@ "postcss",

"postcss-plugin",
"before",
"after",
"before",
"pseudo",

@@ -16,8 +16,8 @@ "pseudo-elements",

],
"scripts": {
"test": "jest && eslint *.js"
},
"author": "Vlad Shilov <omgovich@ya.ru>",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/omgovich/postcss-pseudo-elements-content.git"
},
"repository": "omgovich/postcss-pseudo-elements-content",
"bugs": {

@@ -28,13 +28,24 @@ "url": "https://github.com/omgovich/postcss-pseudo-elements-content/issues"

"dependencies": {
"postcss": "^4.1.13"
"postcss": "^7.0.6"
},
"devDependencies": {
"chai": "^3.0.0",
"gulp": "^3.9.0",
"gulp-eslint": "^0.14.0",
"gulp-mocha": "^2.1.2"
"@logux/eslint-config": "^27.0.0",
"eslint": "^5.10.0",
"eslint-config-postcss": "^3.0.7",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-es5": "^1.3.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^22.1.2",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-security": "^1.4.0",
"eslint-plugin-standard": "^4.0.0",
"jest": "^23.6.0"
},
"scripts": {
"test": "gulp"
"eslintConfig": {
"extends": "eslint-config-postcss/es5"
},
"jest": {
"testEnvironment": "node"
}
}
}

38

README.md

@@ -1,5 +0,7 @@

# PostCSS Pseudo Elements Content [![Build Status][ci-img]][ci]
# PostCSS Pseudo Elements Content
[PostCSS] plugin to automatically add "content" property in the pseudo-elements (:before and :after).
[![Build Status][ci-img]][ci] [![npm](https://img.shields.io/npm/v/postcss-pseudo-elements-content.svg?color=%2356C838)](https://www.npmjs.com/package/postcss-pseudo-elements-content)
[PostCSS] plugin adds `content: ''` to `:before` and `:after` pseudo-elements.
[PostCSS]: https://github.com/postcss/postcss

@@ -9,29 +11,21 @@ [ci-img]: https://travis-ci.org/omgovich/postcss-pseudo-elements-content.svg

Convert custom pseudo-elements `before-c`/`after-c` into `before`/`after` and add `content: ''` decl.
Before:
```css
.block:before-c {
display: block;
width: 10px;
height: 10px;
background: yellow;
.foo:before-c {
display: block;
width: 10px;
height: 10px;
}
.chained .block:after-c {
.bar .baz:after-c {
}
```
After:
```css
.block:before {
display: block;
width: 10px;
height: 10px;
background: yellow;
content: '';
.foo:before {
display: block;
width: 10px;
height: 10px;
content: '';
}
.chained .block:after {
content: '';
.bar .baz:after {
content: '';
}

@@ -38,0 +32,0 @@ ```

.eslintrc
.npmignore
CHANGELOG.md
LICENSE

Sorry, the diff of this file is not supported yet