archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Automatically escape non-standard characters in class selectors

Browse Source 
Prevents end user from having to worry about escaping crap in their
config.
This commit is contained in:
Adam Wathan 2017-08-27 17:35:09 -04:00
parent e9f2e98726
commit a2673b1793
3 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
__tests__/defineClass.test.js
View File

@ -21,3 +21,8 @@ it('does not modify the case of property names', () => {
let output = defineClass('smooth', {'-webkit-font-smoothing': 'antialiased'})
expect(c(output.toString())).toEqual(`.smooth { -webkit-font-smoothing: antialiased }`)
})
it('escapes non-standard characters in selectors', () => {
let output = defineClass('w-1/4', {'width': '25%'})
expect(c(output.toString())).toEqual(`.w-1\\/4 { width: 25% }`)
})

22
src/defaultConfig.js
View File

@ -277,17 +277,17 @@ export default {
'full': '100%',
},
width: {
'1\\/2': '50%',
'1\\/3': 'calc(100% / 3)',
'2\\/3': 'calc(100% / 3 * 2)',
'1\\/4': '25%',
'3\\/4': '75%',
'1\\/5': '20%',
'2\\/5': '40%',
'3\\/5': '60%',
'4\\/5': '80%',
'1\\/6': 'calc(100% / 6)',
'5\\/6': 'calc(100% / 6 * 5)',
'1/2': '50%',
'1/3': 'calc(100% / 3)',
'2/3': 'calc(100% / 3 * 2)',
'1/4': '25%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': 'calc(100% / 6)',
'5/6': 'calc(100% / 6 * 5)',
'screen': '100vw'
},
height: {

6
src/util/defineClass.js
View File

@ -1,6 +1,10 @@
import _ from 'lodash'
import postcss from 'postcss'
function escapeSelector(selector) {
return selector.replace(/([^A-Za-z0-9\-])/g, "\\$1")
}
export default function(className, properties) {
const decls = _.map(properties, (value, property) => {
return postcss.decl({
@ -10,6 +14,6 @@ export default function(className, properties) {
})
return postcss.rule({
selector: `.${className}`,
selector: `.${escapeSelector(className)}`,
}).append(decls)
}