Skip to content

Commit

Permalink
Feat: replace css variables in js files (#80)
Browse files Browse the repository at this point in the history 
* Feat: replace css variables in js files

* Refactor: change selectors in tests
  • Loading branch information
@JPeer264
JPeer264 committed Jun 22, 2019
1 parent 905fcb7 commit 596c591
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 25 deletions.
11 changes: 9 additions & 2 deletions lib/replace/js.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import merge from 'lodash.merge';

import selectorLibrary from '../selectorLibrary';
import replaceString from './string';
import cssVariablesLibrary from '../cssVariablesLibrary';
import allRegex from './regex';

const replaceJs = (code, espreeOptions) => {
const regex = selectorLibrary.getAll({
Expand Down Expand Up @@ -46,10 +48,15 @@ const replaceJs = (code, espreeOptions) => {
// add whitespaces before and after
// to make the regex work
const newValue = ` ${node.value} `;
const replacedValue = newValue.replace(newValue, match => replaceString(match, regex, ' ', { countStats: false }));
// replace css selectors
const replacedCssSelectors = newValue.replace(newValue, match => replaceString(match, regex, ' ', { countStats: false }));
// replace css variables
const replacedCssVariables = replacedCssSelectors.replace(allRegex.cssVariables, match => (
cssVariablesLibrary.get(match)
));

// eslint-disable-next-line no-param-reassign
node.value = replacedValue.slice(1, replacedValue.length - 1);
node.value = replacedCssVariables.slice(1, replacedCssVariables.length - 1);
}
},
});
Expand Down
43 changes: 20 additions & 23 deletions test/replace.html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,9 @@ const fixturesCwd = 'test/files/fixtures';
const resultsCwd = 'test/files/results';

function replaceHtmlMacro(t, selectors, input, expected, options) {
const setter = {};
const expect = expected || input;

selectors.forEach((selector) => { setter[selector] = undefined; });

rcs.selectorLibrary.setMultiple(setter);
rcs.selectorLibrary.fillLibrary(selectors);

t.is(rcs.replace.html(input, options), expect);
}
Expand All @@ -28,79 +25,79 @@ test.beforeEach(() => {

test('should replace nothing',
replaceHtmlMacro,
['.selector', '.another-selector'],
'.selector {} .another-selector {}',
'<!DOCTYPE html><html><head></head><body>Hi there!</body></html>',
);

test('should replace class selectors',
replaceHtmlMacro,
['.selector', '.another-selector'],
'.selector {} .another-selector {}',
'<table class="test selector" id="id"></table>',
'<table class="test a" id="id"></table>',
);

test('should replace class selectors',
replaceHtmlMacro,
['.selector', '.another-selector'],
'.selector {} .another-selector {}',
'<table class="test selector" id="id"></table>',
'<table class="test a" id="id"></table>',
);

test('should replace class selectors based on issue #50',
replaceHtmlMacro,
['.cl1'],
'.cl1 {}',
'<p class="cl1">text with \'single quote</p><p class="cl1">another s\'ingle quote</p>',
'<p class="a">text with \'single quote</p><p class="a">another s\'ingle quote</p>',
);

test('should replace class selectors in a normal html file',
replaceHtmlMacro,
['.jp-block', '.jp-block__element'],
'.jp-block {} .jp-block__element {}',
minify(fs.readFileSync(path.join(fixturesCwd, '/html/index.html'), 'utf8'), { collapseWhitespace: true }),
minify(fs.readFileSync(path.join(resultsCwd, '/html/index.html'), 'utf8'), { collapseWhitespace: true }),
);

test('should replace class selectors within script tags',
replaceHtmlMacro,
['.test', '.selector', '#id'],
'.test {} .selector {} #id {}',
minify(fs.readFileSync(path.join(fixturesCwd, '/html/script.html'), 'utf8'), { collapseWhitespace: true }),
minify(fs.readFileSync(path.join(resultsCwd, '/html/script.html'), 'utf8'), { collapseWhitespace: true }),
);

test('should replace class selectors within style tags',
replaceHtmlMacro,
['.jp-block', '.jp-block__element'],
'.jp-block {} .jp-block__element {}',
minify(fs.readFileSync(path.join(fixturesCwd, '/html/style.html'), 'utf8'), { collapseWhitespace: true }),
minify(fs.readFileSync(path.join(resultsCwd, '/html/style.html'), 'utf8'), { collapseWhitespace: true }),
);

test('should replace with shouldTriggerClassAttribute',
replaceHtmlMacro,
['.selector', '.another-selector'],
'.selector {} .another-selector {}',
'<table anything="test selector" id="id"></table>',
'<table anything="test a" id="id"></table>',
{ triggerClassAttributes: ['anything'] },
);

test('should replace with shouldTriggerClassAttribute and glob',
replaceHtmlMacro,
['.selector', '.another-selector'],
'.selector {} .another-selector {}',
'<table anything="test selector" id="id"></table>',
'<table anything="test a" id="id"></table>',
{ triggerClassAttributes: [/^any/] },
);

test('should not replace with shouldTriggerClassAttribute and glob',
replaceHtmlMacro,
['.selector', '.another-selector'],
'.selector {} .another-selector {}',
'<table anything="test selector" id="id"></table>',
'<table anything="test selector" id="id"></table>',
{ triggerClassAttributes: [/any$/] },
);

test('should replace shouldTriggerClassAttribute glob an normal mixed',
replaceHtmlMacro,
['.selector', '.another-selector'],
'.selector {} .another-selector {}',
'<table anything="test selector" another="selector" data-one="another-selector" data-two="another-selector" id="id"></table>',
'<table anything="test a" another="a" data-one="b" data-two="b" id="id"></table>',
{ triggerClassAttributes: ['anything', 'another', /data-*/] },
Expand All @@ -109,53 +106,53 @@ test('should replace shouldTriggerClassAttribute glob an normal mixed',

test('should replace with shouldTriggerIdAttribute',
replaceHtmlMacro,
['#selector', '#another-selector'],
'#selector {} #another-selector {}',
'<table anything="test selector" id="id"></table>',
'<table anything="test a" id="id"></table>',
{ triggerIdAttributes: ['anything'] },
);

test('should replace with shouldTriggerIdAttribute and glob',
replaceHtmlMacro,
['#selector', '#another-selector'],
'#selector {} #another-selector {}',
'<table anything="test selector" id="id"></table>',
'<table anything="test a" id="id"></table>',
{ triggerIdAttributes: [/^any/] },
);

test('should not replace with shouldTriggerIdAttribute and glob',
replaceHtmlMacro,
['#selector', '#another-selector'],
'#selector {} #another-selector {}',
'<table anything="test selector" id="id"></table>',
'<table anything="test selector" id="id"></table>',
{ triggerIdAttributes: [/any$/] },
);

test('should replace shouldTriggerIdAttribute glob an normal mixed',
replaceHtmlMacro,
['#selector', '#another-selector'],
'#selector {} #another-selector {}',
'<table anything="test selector" another="selector" data-one="another-selector" data-two="another-selector" id="id"></table>',
'<table anything="test a" another="a" data-one="b" data-two="b" id="id"></table>',
{ triggerIdAttributes: ['anything', 'another', /data-*/] },
);

test('should replace inside template | issue #58',
replaceHtmlMacro,
['.selector', '.another-selector'],
'.selector {} .another-selector {}',
'<div class="selector"><template type="selector"><div class="another-selector"></div></template></div>',
'<div class="a"><template type="selector"><div class="b"></div></template></div>',
);

test('should replace escaped selectors | issue #67',
replaceHtmlMacro,
['.selector\\:some-thing:after', '.another-selector'],
'.selector\\:some-thing:after {} .another-selector {}',
'<table class="test selector:some-thing" id="id"></table>',
'<table class="test a" id="id"></table>',
);

test('should replace javascript',
replaceHtmlMacro,
['.selector', '.another-selector'],
'.selector {} .another-selector {}',
`
<div class="selector another-selector">
<script data-something="data">
Expand All @@ -174,7 +171,7 @@ test('should replace javascript',

test('should ignore JSON | issue #70',
replaceHtmlMacro,
['.selector', '.another-selector'],
'.selector {} .another-selector {}',
`
<div class="selector another-selector">
<script type="application/json">
Expand Down
19 changes: 19 additions & 0 deletions test/replace.js.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const resultsCwd = 'test/files/results';

function replaceJsMacro(t, input, expected, fillLibrary = fs.readFileSync(path.join(fixturesCwd, '/css/style.css'), 'utf8')) {
rcs.selectorLibrary.fillLibrary(fillLibrary);
rcs.cssVariablesLibrary.fillLibrary(fillLibrary);

t.is(rcs.replace.js(input), expected);
t.is(rcs.replace.js(new Buffer(input)), expected);
Expand All @@ -20,6 +21,7 @@ test.beforeEach(() => {
rcs.nameGenerator.setAlphabet('#abcdefghijklmnopqrstuvwxyz');
rcs.nameGenerator.reset();
rcs.selectorLibrary.reset();
rcs.cssVariablesLibrary.reset();
});

test(replaceJsMacro,
Expand Down Expand Up @@ -94,3 +96,20 @@ test('check optional try catch | issue #73',
`,
'.jp-block{}.jp-block-two{}',
);

test('replace css variables | issue rename-css-selectors#38',
replaceJsMacro,
`
const defaultProps = {
secondary: false,
offset: "var(--header-height)",
};
`,
`
const defaultProps = {
secondary: false,
offset: "var(--a)",
};
`,
':root { --header-height: #7EA }',
);

0 comments on commit 596c591

Please sign in to comment.