https://github.com/tobua/postcss-tags-without-class

Make HTML Tags Opt Out-Able When Adding a Class
https://github.com/tobua/postcss-tags-without-class

postcss postcss-plugin

Last synced: 1 day ago
JSON representation

Make HTML Tags Opt Out-Able When Adding a Class

• Host: GitHub
• URL: https://github.com/tobua/postcss-tags-without-class
• Owner: tobua
• Created: 2018-07-22T14:50:15.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-07-20T10:36:23.000Z (over 4 years ago)
• Last Synced: 2024-11-14T08:33:55.307Z (2 days ago)
• Topics: postcss, postcss-plugin
• Language: JavaScript
• Size: 42 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# postcss-tags-without-class

Applies tag selectors only if no class is present on the tag.

## Only Style Pure Tags

```css

button {

    color: red;

}

```

```html

I'm red.

I'm still black.

```

## Installation and Usage

```

npm i postcss postcss-tags-without-class

```

```js

const postcss = require('postcss')

const tagsWithoutClass = require('postcss-tags-without-class')

postcss([tagsWithoutClass]).process('button {color: red;}').then(result => {

    const transformedCSS = result.css

    transformedCSS === 'button:not([class]){color: red;}' // true

})

```

## How?

This plugin will add `:not([class])` to each tag. Multiple tags `button, a`, chained tags `ul li` and tags with pseudo classes `button:focus` are supported as well.

```css

button {}

button,

a {}

button:focus {}

a span {}

```

will become

```css

button:not([class]) {}

button:not([class]),

a:not([class]) {}

button:not([class]):focus {}

a:not([class]) span:not([class]) {}

```

## License

MIT