https://github.com/halo-lab/gatsby-plugin-css-modules-emoji

Gatsby Plugin to replace CSS Modules Class selectors by Emojis.
https://github.com/halo-lab/gatsby-plugin-css-modules-emoji

css-modules emoji gatsby gatsby-plugin

Last synced: 2 months ago
JSON representation

Gatsby Plugin to replace CSS Modules Class selectors by Emojis.

• Host: GitHub
• URL: https://github.com/halo-lab/gatsby-plugin-css-modules-emoji
• Owner: Halo-Lab
• Created: 2020-07-27T07:51:32.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-01-18T07:49:28.000Z (almost 3 years ago)
• Last Synced: 2024-10-14T11:08:17.685Z (2 months ago)
• Topics: css-modules, emoji, gatsby, gatsby-plugin
• Language: JavaScript
• Homepage:
• Size: 24.4 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# gatsby-plugin-css-modules-emoji 

Replace CSS Modules Class selectors by Emojis. `Supports Gatsby v3`

![emoji selectors](https://i.ibb.co/RPxfpP8/gatsby-plugin-emojis.png)

> ⚠️ Applies only while using CSS Modules.

The plugin will create a unique emoji combination for each CSS selector. Compatible with Official Gatsby Sass/Scss and Less plugins.

## Install

`npm install --save gatsby-plugin-css-modules-emoji`

## How to use

Add plugin to the end of your `gatsby-config.js` file. **If you're using Sass/Scss or Less plugin be sure that this plugin comes after them**.

```javascript

module.exports = {

  plugins: [

    `gatsby-plugin-css-modules-emoji`

  ],

}

```

If you want to configure the plugin, take a look at available options below:

> ⚠️ Any changes require the server be restarted.

```javascript

// In your gatsby-config.js

module.exports = {

  plugins: [

    {

      resolve: `gatsby-plugin-css-modules-emoji`,

      options: {

        enableOnDevelopment: true, 

        selectorLength: 7, // min selector length is 3 emojis

      },

    },

  ],

}

```

## Options

* `enableOnDevelopment` - allows you to disable Emoji selectors while in develop mode. The default value is **true**.

* `selectorLength` - define selector length. The default and minimum required length is **3 emojis**.

## Browser support 

Some of emojis filtered due to Chrome support. Were excluded:

- Emojis that includes ZWJ ([What does ZWJ stand for?](https://en.wikipedia.org/wiki/Zero-width_joiner))

- Flags 

- Letter symbols

- Other emojis that displayed incorrectly in Chrome DevTools

## Word from author

Have fun! ✌️