diff --git a/lib/process/process.js b/lib/process/process.js index 0fa2915..db8ed78 100644 --- a/lib/process/process.js +++ b/lib/process/process.js @@ -75,6 +75,7 @@ const rcsProcess = (pathString, opts, cb) => { replaceKeyframes: options.replaceKeyframes, preventRandomName: options.preventRandomName, ignoreAttributeSelectors: options.ignoreAttributeSelectors, + ignoreCssVariables: options.ignoreCssVariables, }; rcs.fillLibraries(bufferData.toString(), availableOptions); diff --git a/lib/process/processSync.js b/lib/process/processSync.js index 6938411..4190e6b 100644 --- a/lib/process/processSync.js +++ b/lib/process/processSync.js @@ -40,6 +40,7 @@ const processSync = (pathString, opts) => { replaceKeyframes: options.replaceKeyframes, preventRandomName: options.preventRandomName, ignoreAttributeSelectors: options.ignoreAttributeSelectors, + ignoreCssVariables: options.ignoreCssVariables, }; rcs.fillLibraries(fileData.toString(), availableOptions); diff --git a/test/files/results/css/css-variables-ignore.css b/test/files/results/css/css-variables-ignore.css new file mode 100644 index 0000000..14ec43a --- /dev/null +++ b/test/files/results/css/css-variables-ignore.css @@ -0,0 +1,98 @@ +.a { + --theme-primary: #111; + --theme-secondary: #f0f0f0; + --theme-tertiary: #999; +} + +.b { + --theme-primary: red; + --theme-secondary: white; + --theme-tertiary: black; +} + +.c { + color: var(--theme-primary); + background-color: var(--theme-secondary); + font-size: 1.2em; + line-height: 1.4; + width: 100%; + max-width: 400px; + padding: 5px; + border: 1px solid var(--theme-tertiary); + margin: 0 0 20px; +} + +.d { + content: 'block'; +} + +.e { + content: 'block__element'; +} + +.f { + content: 'block__element--modifier'; +} + +.g{ + content: 'block--modifier'; +} + +.h:before { + content: 'before'; +} + +.f { + content: 'block__element--modifier'; +} + +#i { + content: 'id'; +} + +.j[src] { + content: 'attribute'; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} + +@media screen and (min-width: .40em) { + #i { + height: .20px; + width: .20em; + } +} + +/** + * a description + */ +@media screen and (min-width: 40em) + +{ + #i + { + height: .20px; + width: .20em; + } +} + +h1 { + color: red; +} + +.k { + content: 'reveal'; + color: #eee; + font-size: .5rem; +} + +.l.k { + content: 'js reveal'; +} + +.m.k { + content: 'js reveal'; +} + +.n { + content: 'js-reveal'; +} diff --git a/test/processAuto.js b/test/processAuto.js index 3baa115..613ca79 100644 --- a/test/processAuto.js +++ b/test/processAuto.js @@ -15,6 +15,7 @@ test.beforeEach(() => { rcsCore.nameGenerator.reset(); rcsCore.selectorLibrary.reset(); rcsCore.keyframesLibrary.reset(); + rcsCore.cssVariablesLibrary.reset(); }); test.afterEach(() => { @@ -109,3 +110,34 @@ test.cb('should fail', (t) => { t.end(); }); }); + +test.cb('should process auto file with css variables', (t) => { + rcs.process.auto('css/css-variables.css', { + newPath: testCwd, + cwd: fixturesCwd, + }, (err) => { + const newFile = fs.readFileSync(path.join(testCwd, '/css/css-variables.css'), 'utf8'); + const expectedFile = fs.readFileSync(path.join(resultsCwd, '/css/css-variables.css'), 'utf8'); + + t.falsy(err); + t.is(newFile, expectedFile); + + t.end(); + }); +}); + +test.cb('should not process auto file with css variables', (t) => { + rcs.process.auto('css/css-variables.css', { + newPath: testCwd, + cwd: fixturesCwd, + ignoreCssVariables: true, + }, (err) => { + const newFile = fs.readFileSync(path.join(testCwd, '/css/css-variables.css'), 'utf8'); + const expectedFile = fs.readFileSync(path.join(resultsCwd, '/css/css-variables-ignore.css'), 'utf8'); + + t.falsy(err); + t.is(newFile, expectedFile); + + t.end(); + }); +});