No description
Find a file
Adam Wathan 007231fbfc Require plugin authors to manually escape variants
Not 100% convinced this is a net positive change, but I regret not having done things this way at the beginning.

In 0.x, we pass the `separator` and `className` values already escaped, so `:` comes through as `\:` for example, and `w-1/2` comes through as `w-1\/2`.

At first this sounds fine, less work for the plugin author right? But CSS escaping rules are kind of complicated and you have to escape characters differently depending on whether or not they are at the start of an identifier.

For example, it's totally fine for a class to contain a zero (`0` ), but it can't _start_ with a zero. For a class to start with a zero, it needs to be escaped like this: `\30 `

This means that as a general rule, trying to escape the individual segments of a class separately is a bad idea — you should escape the class as a whole so only the necessary escaping is applied. We break this rule when we pre-escape the separator and className for plugin authors who use the `modifySelectors` function.

We already require users to manually escape class names when they are using `addUtilities` or `addComponents`, so to me it feels more consistent for things to work this way and it's how they should have worked from day one.

Basically this code:

```js
function({ addVariant }) {
  addVariant('first-child', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `.first-child${separator}${className}:first-child`
    })
  })
},
```

...would need to be re-written like this if I merge this change:

```js
function({ addVariant, e }) {
  addVariant('first-child', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `.${e(`first-child${separator}${className}`)}:first-child`
    })
  })
},
```

Although I think this is the right way for this to work, I hesitate because it's a breaking change that makes any variant plugins authored for 0.x incompatible with 1.x. It's an easy fix on the plugin author's part, but it's still annoying.

I'm leaning towards merging so I don't regret this even more later when the plugin ecosystem is a lot bigger. Anyone have any thoughts?
2019-02-28 10:17:09 -05:00
.github Remove component example reference from contributing guide 2018-09-22 15:30:53 -04:00
__tests__ Require plugin authors to manually escape variants 2019-02-28 10:17:09 -05:00
dist Add empty .npmignore so dist files are distributed with releases 2017-11-09 09:21:30 -05:00
jest Fix tests and style 2017-11-23 09:58:25 -05:00
plugins Don't export core plugins 2019-02-26 09:59:50 -05:00
src Require plugin authors to manually escape variants 2019-02-28 10:17:09 -05:00
.editorconfig Convert new stuff to use ES6 modules 2017-08-27 18:02:41 -04:00
.eslintignore Added tests for CLI utils 2018-09-25 11:09:20 -05:00
.eslintrc Support for basic variant generator plugins 2018-06-26 13:44:47 -04:00
.gitignore Ignore index.html 2019-02-27 13:31:13 -05:00
.npmignore Remove docs from main repo 2018-02-24 08:12:55 -05:00
.travis.yml chore: tests Node.js 8 and 10, remove PHP in CI config 2018-05-29 00:13:17 +02:00
base.css Remove preflight CSS export in favor of base 2019-02-11 12:38:46 -05:00
components.css Move CSS files to root for easier imports 2018-03-13 10:05:24 -04:00
defaultConfig.js Switch to separate config import 2017-11-14 08:03:31 -05:00
defaultConfig.stub.js Split flexShrink to separate plugin 2019-02-26 10:33:34 -05:00
defaultTheme.js Make flex-grow/shrink customizable 2019-02-26 13:45:12 -05:00
LICENSE Avoid updating license every year 2017-12-29 22:32:43 +01:00
package-lock.json Depend on normalize.css properly 2019-02-11 15:49:12 -05:00
package.json Remove dependency on cssesc 2019-02-27 16:40:19 -05:00
README.md Switch Slack to Discord in README 2019-02-14 08:51:33 -05:00
tailwind.css Convert preflight to plugin 2019-02-07 15:19:54 -05:00
utilities.css Move CSS files to root for easier imports 2018-03-13 10:05:24 -04:00
yarn.lock Switch from css.escape to cssesc 2019-02-27 13:53:28 -05:00


A utility-first CSS framework for rapidly building custom user interfaces.

Build Status Total Downloads Latest Release License


Documentation

For full documentation, visit tailwindcss.com.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Tailwind CSS on GitHub

For casual chit-chat with others using the framework:

Join the Tailwind CSS Discord Server

Contributing

If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.