Don't change case of class names
This is unfortunate but it totally fucks up things that have numbers in them.
This commit is contained in:
Adam Wathan
parent
e375d9caae
commit
000eefd609
8 changed files with 129 additions and 150 deletions
|
|
@ -1,38 +1,23 @@
|
|||
import postcss from 'postcss'
|
||||
import fs from 'fs'
|
||||
import _ from 'lodash'
|
||||
import c from '../src/util/collapseWhitespace'
|
||||
import defineClass from '../src/util/defineClass'
|
||||
|
||||
let flexHelper = `.flex {
|
||||
display: flex
|
||||
}`
|
||||
|
||||
let inlineBlock = `.inline-block {
|
||||
display: inline-block
|
||||
}`
|
||||
|
||||
let inlineFlexHelper = `.inline-flex {
|
||||
display: inline-flex
|
||||
}`
|
||||
|
||||
let backgroundColor = `.bg-1 {
|
||||
background-color: #bada55
|
||||
}`
|
||||
|
||||
/**
|
||||
* Tests
|
||||
*/
|
||||
it('creates a proper single-word class with rules', () => {
|
||||
let output = defineClass('flex', {display: 'flex'})
|
||||
expect(output.toString()).toEqual(flexHelper)
|
||||
expect(c(output.toString())).toEqual(`.flex { display: flex }`)
|
||||
})
|
||||
|
||||
it('generates a rule with a kebab-case selector', () => {
|
||||
it('does not modify the case of selector names', () => {
|
||||
let output = defineClass('inlineBlock', {display: 'inline-block'})
|
||||
expect(output.toString()).toEqual(inlineBlock)
|
||||
expect(c(output.toString())).toEqual(`.inlineBlock { display: inline-block }`)
|
||||
})
|
||||
|
||||
it('generates a rule with a kebab-case property name', () => {
|
||||
it('converts property names to kebab-case', () => {
|
||||
let output = defineClass('bg-1', {backgroundColor: '#bada55'})
|
||||
expect(output.toString()).toEqual(backgroundColor)
|
||||
expect(c(output.toString())).toEqual(`.bg-1 { background-color: #bada55 }`)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,31 +1,22 @@
|
|||
import postcss from 'postcss'
|
||||
import fs from 'fs'
|
||||
import _ from 'lodash'
|
||||
import c from '../src/util/collapseWhitespace'
|
||||
import defineClasses from '../src/util/defineClasses'
|
||||
|
||||
let config = {
|
||||
flex: {
|
||||
display: 'flex',
|
||||
},
|
||||
inlineFlex: {
|
||||
display: 'inline-flex',
|
||||
},
|
||||
}
|
||||
|
||||
let flexHelper = `.flex {
|
||||
display: flex
|
||||
}`
|
||||
|
||||
let inlineFlexHelper = `.inline-flex {
|
||||
display: inline-flex
|
||||
}`
|
||||
|
||||
/**
|
||||
* Tests
|
||||
*/
|
||||
it('it generates a set of helper classes from a config', () => {
|
||||
let output = defineClasses(config)
|
||||
let output = defineClasses({
|
||||
'flex': {
|
||||
display: 'flex',
|
||||
},
|
||||
'inline-flex': {
|
||||
display: 'inline-flex',
|
||||
},
|
||||
})
|
||||
expect(output).toBeInstanceOf(Array)
|
||||
expect(output[0].toString()).toEqual(flexHelper)
|
||||
expect(output[1].toString()).toEqual(inlineFlexHelper)
|
||||
expect(c(output[0].toString())).toEqual(`.flex { display: flex }`)
|
||||
expect(c(output[1].toString())).toEqual(`.inline-flex { display: inline-flex }`)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -6,63 +6,63 @@ export default {
|
|||
xl: '1200px',
|
||||
},
|
||||
colors: {
|
||||
black: '#000000',
|
||||
grey900: '#212b35',
|
||||
grey800: '#404e5c',
|
||||
grey700: '#647382',
|
||||
grey600: '#919eab',
|
||||
grey500: '#c5ced6',
|
||||
grey400: '#dfe3e8',
|
||||
grey300: '#f0f2f5',
|
||||
grey200: '#f7f9fa',
|
||||
white: '#ffffff',
|
||||
redDark: '#d43633',
|
||||
red: '#f25451',
|
||||
redLight: '#fa8785',
|
||||
redLightest: '#fff1f0',
|
||||
orangeDark: '#f29500',
|
||||
orange: '#ffb82b',
|
||||
orangeLight: '#ffd685',
|
||||
orangeLightest: '#fff8eb',
|
||||
yellowDark: '#ffc400',
|
||||
yellow: '#ffe14a',
|
||||
yellowLight: '#ffea83',
|
||||
yellowLightest: '#fffbe5',
|
||||
greenDark: '#34ae4c',
|
||||
green: '#57d06f',
|
||||
greenLight: '#b1f3be',
|
||||
greenLightest: '#eefff1',
|
||||
tealDark: '#249e9a',
|
||||
teal: '#4dc0b5',
|
||||
tealLight: '#9eebe4',
|
||||
tealLightest: '#eefffd',
|
||||
blueDark: '#3687c8',
|
||||
blue: '#4aa2ea',
|
||||
blueLight: '#acdaff',
|
||||
blueLightest: '#f1f9ff',
|
||||
indigoDark: '#4957a5',
|
||||
indigo: '#6574cd',
|
||||
indigoLight: '#bcc5fb',
|
||||
indigoLightest: '#f4f5ff',
|
||||
purpleDark: '#714cb4',
|
||||
purple: '#976ae6',
|
||||
purpleLight: '#ceb3ff',
|
||||
purpleLightest: '#f7f3ff',
|
||||
pinkDark: '#d84f7d',
|
||||
pink: '#f66d9b',
|
||||
pinkLight: '#ffa5c3',
|
||||
pinkLightest: '#fdf2f5',
|
||||
'black': '#000000',
|
||||
'grey900': '#212b35',
|
||||
'grey800': '#404e5c',
|
||||
'grey700': '#647382',
|
||||
'grey600': '#919eab',
|
||||
'grey500': '#c5ced6',
|
||||
'grey400': '#dfe3e8',
|
||||
'grey300': '#f0f2f5',
|
||||
'grey200': '#f7f9fa',
|
||||
'white': '#ffffff',
|
||||
'red-dark': '#d43633',
|
||||
'red': '#f25451',
|
||||
'red-light': '#fa8785',
|
||||
'red-lightest': '#fff1f0',
|
||||
'orange-dark': '#f29500',
|
||||
'orange': '#ffb82b',
|
||||
'orange-light': '#ffd685',
|
||||
'orange-lightest': '#fff8eb',
|
||||
'yellow-dark': '#ffc400',
|
||||
'yellow': '#ffe14a',
|
||||
'yellow-light': '#ffea83',
|
||||
'yellow-lightest': '#fffbe5',
|
||||
'green-dark': '#34ae4c',
|
||||
'green': '#57d06f',
|
||||
'green-light': '#b1f3be',
|
||||
'green-lightest': '#eefff1',
|
||||
'teal-dark': '#249e9a',
|
||||
'teal': '#4dc0b5',
|
||||
'teal-light': '#9eebe4',
|
||||
'teal-lightest': '#eefffd',
|
||||
'blue-dark': '#3687c8',
|
||||
'blue': '#4aa2ea',
|
||||
'blue-light': '#acdaff',
|
||||
'blue-lightest': '#f1f9ff',
|
||||
'indigo-dark': '#4957a5',
|
||||
'indigo': '#6574cd',
|
||||
'indigo-light': '#bcc5fb',
|
||||
'indigo-lightest': '#f4f5ff',
|
||||
'purple-dark': '#714cb4',
|
||||
'purple': '#976ae6',
|
||||
'purple-light': '#ceb3ff',
|
||||
'purple-lightest': '#f7f3ff',
|
||||
'pink-dark': '#d84f7d',
|
||||
'pink': '#f66d9b',
|
||||
'pink-light': '#ffa5c3',
|
||||
'pink-lightest': '#fdf2f5',
|
||||
},
|
||||
backgroundColors: [
|
||||
{
|
||||
light: 'white',
|
||||
lightSoft: 'grey-200',
|
||||
lightSofter: 'grey-300',
|
||||
lightSoftest: 'grey-400',
|
||||
dark: 'grey-900',
|
||||
darkSoft: 'grey-800',
|
||||
darkSofter: 'grey-700',
|
||||
darkSoftest: 'grey-600',
|
||||
'light': 'white',
|
||||
'light-soft': 'grey-200',
|
||||
'light-softer': 'grey-300',
|
||||
'light-softest': 'grey-400',
|
||||
'dark': 'grey-900',
|
||||
'dark-soft': 'grey-800',
|
||||
'dark-softer': 'grey-700',
|
||||
'dark-softest': 'grey-600',
|
||||
},
|
||||
'red-dark',
|
||||
'red',
|
||||
|
|
@ -107,25 +107,25 @@ export default {
|
|||
color: 'grey-500',
|
||||
},
|
||||
widths: {
|
||||
0: '0',
|
||||
2: '2px',
|
||||
4: '4px',
|
||||
8: '8px',
|
||||
'0': '0',
|
||||
'2': '2px',
|
||||
'4': '4px',
|
||||
'8': '8px',
|
||||
},
|
||||
colors: [
|
||||
{
|
||||
light: 'white',
|
||||
lightSoft: 'grey-200',
|
||||
lightSofter: 'grey-300',
|
||||
dark: 'grey-600',
|
||||
darkSoft: 'grey-500',
|
||||
darkSofter: 'grey-400',
|
||||
lightOverlay: 'hsla(0, 0%, 0%, 20%)',
|
||||
lightOverlaySoft: 'hsla(0, 0%, 0%, 10%)',
|
||||
lightOverlaySofter: 'hsla(0, 0%, 0%, 5%)',
|
||||
darkOverlay: 'hsla(0, 0%, 100%, 100%)',
|
||||
darkOverlaySoft: 'hsla(0, 0%, 100%, 60%)',
|
||||
darkOverlaySofter: 'hsla(0, 0%, 100%, 35%)',
|
||||
'light': 'white',
|
||||
'light-soft': 'grey-200',
|
||||
'light-softer': 'grey-300',
|
||||
'dark': 'grey-600',
|
||||
'dark-soft': 'grey-500',
|
||||
'dark-softer': 'grey-400',
|
||||
'light-overlay': 'hsla(0, 0%, 0%, 20%)',
|
||||
'light-overlay-soft': 'hsla(0, 0%, 0%, 10%)',
|
||||
'light-overlay-softer': 'hsla(0, 0%, 0%, 5%)',
|
||||
'dark-overlay': 'hsla(0, 0%, 100%, 100%)',
|
||||
'dark-overlay-soft': 'hsla(0, 0%, 100%, 60%)',
|
||||
'dark-overlay-softer': 'hsla(0, 0%, 100%, 35%)',
|
||||
},
|
||||
'red-dark',
|
||||
'red',
|
||||
|
|
@ -166,10 +166,10 @@ export default {
|
|||
]
|
||||
},
|
||||
shadows: {
|
||||
1: '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.15)',
|
||||
2: '0 3px 6px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.13)',
|
||||
3: '0 10px 20px rgba(0,0,0,0.13), 0 6px 6px rgba(0,0,0,0.13)',
|
||||
4: '0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)',
|
||||
5: '0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)',
|
||||
'1': '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.15)',
|
||||
'2': '0 3px 6px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.13)',
|
||||
'3': '0 10px 20px rgba(0,0,0,0.13), 0 6px 6px rgba(0,0,0,0.13)',
|
||||
'4': '0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)',
|
||||
'5': '0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)',
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import defineClasses from '../util/defineClasses'
|
|||
|
||||
export default function() {
|
||||
return defineClasses({
|
||||
bgCover: {
|
||||
'bg-cover': {
|
||||
backgroundSize: 'cover',
|
||||
},
|
||||
bgContain: {
|
||||
'bg-contain': {
|
||||
backgroundSize: 'contain',
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -5,19 +5,19 @@ import findColor from '../util/findColor'
|
|||
|
||||
function defaultBorder(width, color) {
|
||||
return defineClasses({
|
||||
border: {
|
||||
'border': {
|
||||
border: `${width} solid ${color}`,
|
||||
},
|
||||
borderT: {
|
||||
'border-t': {
|
||||
borderTop: `${width} solid ${color}`,
|
||||
},
|
||||
borderR: {
|
||||
'border-r': {
|
||||
borderRight: `${width} solid ${color}`,
|
||||
},
|
||||
borderB: {
|
||||
'border-b': {
|
||||
borderBottom: `${width} solid ${color}`,
|
||||
},
|
||||
borderL: {
|
||||
'border-l': {
|
||||
borderLeft: `${width} solid ${color}`,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,82 +4,82 @@ import defineClasses from '../util/defineClasses'
|
|||
|
||||
export default function() {
|
||||
return defineClasses({
|
||||
flex: {
|
||||
'flex': {
|
||||
display: 'flex',
|
||||
},
|
||||
inlineFlex: {
|
||||
'inline-flex': {
|
||||
display: 'inline-flex',
|
||||
},
|
||||
flexRow: {
|
||||
'flex-row': {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
flexRowReverse: {
|
||||
'flex-row-reverse': {
|
||||
flexDirection: 'row-reverse',
|
||||
},
|
||||
flexCol: {
|
||||
'flex-col': {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
flexColReverse: {
|
||||
'flex-col-reverse': {
|
||||
flexDirection: 'column-reverse',
|
||||
},
|
||||
flexWrap: {
|
||||
'flex-wrap': {
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
flexWrapReverse: {
|
||||
'flex-wrap-reverse': {
|
||||
flexWrap: 'wrap-reverse',
|
||||
},
|
||||
flexNowrap: {
|
||||
'flex-nowrap': {
|
||||
flexWrap: 'nowrap',
|
||||
},
|
||||
itemsStart: {
|
||||
'items-start': {
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
itemsEnd: {
|
||||
'items-end': {
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
itemsCenter: {
|
||||
'items-center': {
|
||||
alignItems: 'center',
|
||||
},
|
||||
itemsBaseline: {
|
||||
'items-baseline': {
|
||||
alignItems: 'baseline',
|
||||
},
|
||||
itemsStretch: {
|
||||
'items-stretch': {
|
||||
alignItems: 'stretch',
|
||||
},
|
||||
justifyStart: {
|
||||
'justify-start': {
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
justifyEnd: {
|
||||
'justify-end': {
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
justifyCenter: {
|
||||
'justify-center': {
|
||||
justifyContent: 'center',
|
||||
},
|
||||
justifyBetween: {
|
||||
'justify-between': {
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
justifyAround: {
|
||||
'justify-around': {
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
flexAuto: {
|
||||
'flex-auto': {
|
||||
flex: 'auto',
|
||||
},
|
||||
flexInitial: {
|
||||
'flex-initial': {
|
||||
flex: 'initial',
|
||||
},
|
||||
flexNone: {
|
||||
'flex-none': {
|
||||
flex: 'none',
|
||||
},
|
||||
flexGrow: {
|
||||
'flex-grow': {
|
||||
flexGrow: '1',
|
||||
},
|
||||
flexShrink: {
|
||||
'flex-shrink': {
|
||||
flexShrink: '1',
|
||||
},
|
||||
flexNoGrow: {
|
||||
'flex-no-grow': {
|
||||
flexGrow: '0',
|
||||
},
|
||||
flexNoShrink: {
|
||||
'flex-no-shrink': {
|
||||
flexShrink: '0',
|
||||
},
|
||||
})
|
||||
|
|
|
|||
3
src/util/collapseWhitespace.js
Normal file
3
src/util/collapseWhitespace.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export default function collapseWhitespace(str) {
|
||||
return str.replace(/(\n|\r|\r\n)/g, ' ').replace(/\s+/g, ' ')
|
||||
}
|
||||
|
|
@ -10,6 +10,6 @@ export default function(className, properties) {
|
|||
})
|
||||
|
||||
return postcss.rule({
|
||||
selector: `.${_.kebabCase(className)}`,
|
||||
selector: `.${className}`,
|
||||
}).append(decls)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue