Skip to content

Commit

Permalink
feat: add "::placeholder" support to prefixer
Browse files Browse the repository at this point in the history
  • Loading branch information
@streamich
streamich authored Jun 3, 2019
2 parents 4497f66 + 0d36ff1 commit caf78d8
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 3 deletions.
66 changes: 65 additions & 1 deletion addon/__tests__/prefixer.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@
var env = require('./env');
var create = require('../../index').create;
var addonPrefixer = require('../../addon/prefixer').addon;
var addonNesting = require('../../addon/nesting').addon;

function createNano (config) {
var nano = create(config);

addonPrefixer(nano);

return nano;
};
}

describe('prefixer', function () {
it('installs without crashing', function () {
Expand Down Expand Up @@ -54,4 +55,67 @@ describe('prefixer', function () {
var expected = '.one{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' width=\'48\' height=\'36\' viewBox=\'0 0 48 36\' fill=\'rgb(28,28,28)\'%3E%3Crect x=\'16\' y=\'12\' width=\'16\' height=\'2\' /%3E%3Crect x=\'16\' y=\'17\' width=\'16\' height=\'2\' /%3E%3Crect x=\'16\' y=\'22\' width=\'16\' height=\'2\' /%3E%3C/svg>");}';
expect(result).toEqual(expected);
});

it('prefixes "placeholder" correctly', function() {
var nano = createNano();
nano.putRaw = jest.fn();

nano.put('input::placeholder', {
'font-weight': 300,
'user-select': 'none'
});

var result = nano.putRaw.mock.calls.join(' ').replace(/ +(?= )/g, '');
[
'input::-webkit-input-placeholder',
'input::-moz-placeholder',
'input:-ms-input-placeholder',
'input:-moz-placeholder',
'::placeholder',
].forEach(function (key) {
expect(result.includes(key)).toBe(true);
});
});

it('prefixes "placeholder" in nested rules correctly', function(){
var nano = createNano();
addonNesting(nano);
nano.putRaw = jest.fn();

nano.put('input[type=email]', {
'&::placeholder': {
color: '#393939',
fontWeight: 300,
},
});

var result = nano.putRaw.mock.calls.join(' ').replace(/ +(?= )/g, '');
[
'::-webkit-input-placeholder',
'::-moz-placeholder',
':-ms-input-placeholder',
':-moz-placeholder',
'::placeholder',
].forEach(function (key) {
expect(result.includes(key)).toBe(true);
});
});

it('prefixes "placeholder" in compound rules correctly', function(){
var nano = createNano();
nano.putRaw = jest.fn();

nano.put('input[type=email]::placeholder, input[type=password]::placeholder, input[type=text]::placeholder', {
color: '#393939',
fontWeight: 300,
});

var calls = nano.putRaw.mock.calls;
expect(calls).toHaveLength(15);

var result = nano.putRaw.mock.calls.join(' ').replace(/ +(?= )/g, '');
var rawResult = 'input[type=email]::-webkit-input-placeholder{color:#393939;font-weight:300;} input[type=email]::-moz-placeholder{color:#393939;font-weight:300;} input[type=email]:-ms-input-placeholder{color:#393939;font-weight:300;} input[type=email]:-moz-placeholder{color:#393939;font-weight:300;} input[type=email]::placeholder{color:#393939;font-weight:300;} input[type=password]::-webkit-input-placeholder{color:#393939;font-weight:300;} input[type=password]::-moz-placeholder{color:#393939;font-weight:300;} input[type=password]:-ms-input-placeholder{color:#393939;font-weight:300;} input[type=password]:-moz-placeholder{color:#393939;font-weight:300;} input[type=password]::placeholder{color:#393939;font-weight:300;} input[type=text]::-webkit-input-placeholder{color:#393939;font-weight:300;} input[type=text]::-moz-placeholder{color:#393939;font-weight:300;} input[type=text]:-ms-input-placeholder{color:#393939;font-weight:300;} input[type=text]:-moz-placeholder{color:#393939;font-weight:300;} input[type=text]::placeholder{color:#393939;font-weight:300;}';

expect(result).toEqual(rawResult);
});
});
30 changes: 28 additions & 2 deletions addon/prefixer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ var matchCallback = function (match) {

exports.addon = function (renderer) {
var decl = renderer.decl;
var origPut = renderer.put;

renderer.camel = function (prop) {
return prop.replace(CAMEL_REGEX, matchCallback);
Expand All @@ -32,7 +33,7 @@ exports.addon = function (renderer) {
if (value instanceof Array) {
result[propPrefixed] = value.join(';' + propPrefixed + ':');
} else {
result[propPrefixed] = value;
result[propPrefixed] = value;
}
}

Expand All @@ -43,11 +44,36 @@ exports.addon = function (renderer) {
var result = renderer.prefix(prop, value);

var returned = '';
Object.keys(result).forEach(function(key) {
Object.keys(result).forEach(function (key) {
var str = decl(key, value);
returned += str;
});

return returned;
};

function newPut(selector, decls, atrule) {
var indexed = selector.indexOf('::placeholder');
if (indexed > -1) {
var split = selector.split(',');
if (split.length > 1) {
split.forEach(function(sp) {
newPut(sp.trim(), decls, atrule);
});
return;
}
var bareSelect = selector.substring(0, indexed);
[
'::-webkit-input-placeholder',
'::-moz-placeholder',
':-ms-input-placeholder',
':-moz-placeholder'
].forEach(function(ph) {
origPut(bareSelect + ph, decls, atrule);
});
}
origPut(selector, decls, atrule);
}

renderer.put = newPut;
};

1 comment on commit caf78d8

@streamich
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Build version: 5.1.0-master.115 🤞 master on CircleCI 🎉

Please sign in to comment.