` can be what the core is generating for your initial class `something`. So the example above could have been generated from this source:
+```
+
+
+ Yeah
+
+
+```
+In that case, the initial code is semantically wrong since the `querySelector` should return `undefined`. The minified CSS selector code will thus return a different result in that case.
+
+If you had followed the advice above and excluded (or reserved) all potential HTML tag name (see below), then `something` won't be mapped to `b`, but, for example, `t` and the initial code behavior will be preserved.
+
+Similarly, if your initial code was:
+```js
+...
+var a = 'b';
+...
+```
+then the core will generate a warning telling you that `b` is already used in the renaming map and that you should fix the ambiguity.
+
+If you are in such cases (you are using `getElementById` et al) then the easiest solution is to exclude all potential HTML tag name with a config file containing:
+```json
+{
+ "exclude": [
+"html", "head", "title", "base", "link", "meta", "style", "body", "article", "section", "nav", "aside",
+"h1", "h2", "h3", "h4", "h5", "h6", "hgroup", "address", "p", "hr", "pre", "blockquote", "ol", "ul",
+"menu", "li", "dl", "dt", "dd", "figure", "figcaption", "main", "div", "a", "em", "strong", "small",
+"s", "cite", "q", "dfn", "abbr", "ruby", "rt", "rp", "data", "time", "code", "var", "samp", "kbd",
+"sub", "sup", "i", "b", "u", "mark", "bdi", "bdo", "span", "br", "wbr", "ins", "del", "picture",
+"source", "img", "iframe", "embed", "object", "param", "video", "audio", "track", "map", "area",
+"table", "caption", "colgroup", "col", "tbody", "thead", "tfoot", "tr", "td", "th", "form", "label",
+"input", "button", "select", "datalist", "optgroup", "option", "textarea", "output", "progress", "meter",
+"fieldset", "legend", "details", "summary", "dialog", "script", "noscript", "template", "slot", "canvas"]
+}
+```
+The incovenient being that such selectors won't be minified (think about `header` for example, it's quite common for a class name)
+
+## Caveat for step 3
+
+Replacement is relatively safe for CSS and HTML (again, because such format are explicit enough to avoiding ambiguity).
+
+Replacements inside Javascript code is much harder because a string for a selector can be generated from many small parts (like in `var a = '.' + objClass;`), can be used in functions that have different semantics (like `getElementById` and `querySelector`), etc...
+
+So, here's the way the core is trying to resolve ambiguities (but as seen above, not all ambiguities can be solved):
+
+1. Ecmascript template, like in ``var a = `some text ${jsVar}`;`` is parsed like HTML, looking for `class="X"` or `id='Y'` or `for="Z"`.
+ If you use template code to make your CSS selector from each part, it'll fail:
+ Don't write ``var myClass = 'something'; var sel = `.${myClass}`;``, but instead `var myClass = '.something'`.
+
+2. Each string literal is extracted from your javascript code and:
+ 1. If it contains some CSS specific selectors chars (like `#` or `.` or ` ` etc...), then it's parsed as a CSS selector. **This is safer and usually gives the expected result.**
+ 2. If it does not contain some CSS specific selectors (like a single word), then it's tried as an ID selector first and if not found as a class selector (or not replaced if not found in either one).
+ **This can lead to the ambiguity shown above.**
+
+So, to avoid such ambiguity, try to store your class or id with their respective prefix (`.` or `#`) in your code, and rely on `querySelector` et al.
+
+For example, here are some replacement selected by the library, with these CSS selector:
+
+```css
+.something {} // Mapped to .a
+#test {} // Mapped to #a
+.test {} // Mapped to .b
+```
+
+
+
+| Initial code | Replaced code | Reason |
+|---|---|---|
+|`var a = 'something';`|`var a = 'b';`| The core could not deduce the string literal is a selector, so fallback to searching for any rule with `something`, class had one|
+|`var a = 'test';`|`var a = 'a';`| The core could not deduce the string literal is a selector and in fallback to search for any rule, it selected #test=>#a since it was searched first|
+|`var a = '.something';`|`var a = '.a';`| The core deduced a class selector was required and replaced it|
+|`var a = '.test';`|`var a = '.b';`| The core deduced a class selector was required and replaced it|
+|`var a = ' something';`|`var a = ' something';`| The core deduced the string literal is a CSS selector, but could not find any match|
+|`var a = 'div[class=something]';`|`var a = 'div[class=a]';`| The core deduced the attribute selector was related to a class selector and replaced it|
+|`var a = 'input[name=something]';`|`var a = 'input[name=something]';`| The core deduced the attribute selector wasn't related to a class, id or for attribute, no replacement was done|
+|`var a = 'b #test, .something';`|`var a = 'b #a, .a';`| The core parsed all selectors and produced correct replacement for each of them|
+
+
+### Another remark:
+
+Some are writing CSS selector this way:
+```css
+div[class = something]
+{
+color: red;
+}
+```
+This is perfectly safe from javascript code (if you have `var a = 'div[class=something]';`), then this will be replaced correctly by the core (*to* `var a = 'div[class=b]';`).
+
+This however requires much more work from the developper so this is not a solution we recommend.
+
+
diff --git a/index.js b/index.js
index af38807..dc5f7b5 100644
--- a/index.js
+++ b/index.js
@@ -8,7 +8,7 @@ const generateMapping = require('./lib/mapping/generateMapping');
const loadMapping = require('./lib/mapping/loadMapping');
// config
-const includeConfig = require('./lib/config/includeConfig');
+const config = require('./lib/config/config');
module.exports = {
process: {
@@ -28,5 +28,5 @@ module.exports = {
generateMappingSync,
generateMapping,
loadMapping,
- includeConfig,
+ config,
};
diff --git a/lib/config/config.js b/lib/config/config.js
new file mode 100644
index 0000000..42d2e47
--- /dev/null
+++ b/lib/config/config.js
@@ -0,0 +1,39 @@
+const rcs = require('rcs-core');
+const path = require('path');
+const json = require('json-extra');
+const minimatch = require('minimatch');
+
+class Config {
+ constructor() {
+ this.ignorePatterns = [];
+ }
+
+ load(pathString = path.join(process.cwd(), '.rcsrc')) {
+ let configObject;
+
+ configObject = json.readToObjSync(pathString);
+
+ if (!configObject) {
+ // package.json .rcs if no other config is found
+ configObject = json.readToObjSync(path.join(process.cwd(), 'package.json')).rcs;
+ }
+
+ if (configObject.exclude) {
+ rcs.default.selectorsLibrary.setExclude(configObject.exclude);
+ }
+
+ if (configObject.reserve) {
+ rcs.default.selectorsLibrary.setReserved(configObject.reserve);
+ }
+
+ if (configObject.ignore) {
+ this.ignorePatterns = configObject.ignore;
+ }
+ }
+
+ isIgnored(filePath) {
+ return this.ignorePatterns.some(pattern => minimatch(filePath, pattern));
+ }
+}
+
+module.exports = new Config();
diff --git a/lib/config/includeConfig.js b/lib/config/includeConfig.js
deleted file mode 100644
index 1df72f8..0000000
--- a/lib/config/includeConfig.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const rcs = require('rcs-core');
-const path = require('path');
-const json = require('json-extra');
-
-const include = (pathString = path.join(process.cwd(), '.rcsrc')) => {
- let configObject;
-
- configObject = json.readToObjSync(pathString);
-
- if (!configObject) {
- // package.json .rcs if no other config is found
- configObject = json.readToObjSync(path.join(process.cwd(), 'package.json')).rcs;
- }
-
- if (configObject.exclude) {
- rcs.selectorLibrary.setExclude(configObject.exclude);
- }
-}; // /include
-
-module.exports = include;
diff --git a/lib/mapping/generateMapping.js b/lib/mapping/generateMapping.js
index 66b9301..2fda88b 100644
--- a/lib/mapping/generateMapping.js
+++ b/lib/mapping/generateMapping.js
@@ -47,11 +47,17 @@ const generateMapping = (pathString, opts, cb) => {
fileName = options.cssMapping;
}
- const cssMappingArray = rcs.selectorLibrary.getAll({
+ const cssClassMappingArray = rcs.default.selectorsLibrary.getClassSelector().getAll({
extend: options.extended,
getRenamedValues: !options.origValues,
addSelectorType: options.isSelectors,
});
+ const cssIdMappingArray = rcs.default.selectorsLibrary.getIdSelector().getAll({
+ extend: options.extended,
+ getRenamedValues: !options.origValues,
+ addSelectorType: options.isSelectors,
+ });
+ const cssMappingArray = { class: cssClassMappingArray, id: cssIdMappingArray };
const cssMappingJsonString = json.check(cssMappingArray) ? cssMappingArray : json.stringify(cssMappingArray, null, '\t');
let writeData = cssMappingJsonString;
diff --git a/lib/mapping/generateMappingSync.js b/lib/mapping/generateMappingSync.js
index af18eb4..0c8f4a4 100644
--- a/lib/mapping/generateMappingSync.js
+++ b/lib/mapping/generateMappingSync.js
@@ -20,9 +20,11 @@ const generateMappingSync = (pathString, options) => {
overwrite: false,
};
+ // eslint-disable-next-line no-param-reassign
options = merge({}, optionsDefault, options);
if (options.cssMappingMin) {
+ // eslint-disable-next-line no-param-reassign
options.origValues = false;
mappingName = 'CSS_NAME_MAPPING_MIN';
fileName = `${fileName}_min`;
@@ -37,11 +39,17 @@ const generateMappingSync = (pathString, options) => {
fileName = options.cssMapping;
}
- const cssMappingArray = rcs.selectorLibrary.getAll({
+ const cssClassMappingArray = rcs.default.selectorsLibrary.getClassSelector().getAll({
extend: options.extended,
getRenamedValues: !options.origValues,
addSelectorType: options.isSelectors,
});
+ const cssIdMappingArray = rcs.default.selectorsLibrary.getIdSelector().getAll({
+ extend: options.extended,
+ getRenamedValues: !options.origValues,
+ addSelectorType: options.isSelectors,
+ });
+ const cssMappingArray = { class: cssClassMappingArray, id: cssIdMappingArray };
const cssMappingJsonString = json.check(cssMappingArray) ? cssMappingArray : json.stringify(cssMappingArray, null, '\t');
let writeData = cssMappingJsonString;
diff --git a/lib/mapping/loadMapping.js b/lib/mapping/loadMapping.js
index 5270993..0145f3d 100644
--- a/lib/mapping/loadMapping.js
+++ b/lib/mapping/loadMapping.js
@@ -2,38 +2,39 @@ const merge = require('lodash.merge');
const rcs = require('rcs-core');
const json = require('json-extra');
-const loadMapping = (pathString, options) => {
+const loadReversed = selectors =>
+ Object.entries(selectors).reduce(
+ (prev, [key, value]) => merge(prev, { [key.charAt(0) + value]: key.slice(1, key.length) })
+ , {});
+
+const loadMapping = (pathString, options = {}) => {
let selectors = pathString;
const optionsDefault = {
origValues: true,
};
- options = options || {};
+ // eslint-disable-next-line no-param-reassign
options = merge({}, optionsDefault, options);
if (typeof pathString === 'string') {
selectors = json.readToObjSync(pathString, 'utf8');
}
- if (!options.origValues) {
- const tempSelectors = {};
-
- Object.keys(selectors).forEach((key) => {
- const value = selectors[key];
- const modKey = key.slice(1, key.length);
+ let classes = selectors.class || {};
+ let ids = selectors.id || {};
- tempSelectors[key.charAt(0) + value] = modKey;
- });
-
- selectors = tempSelectors;
+ if (!options.origValues) {
+ classes = loadReversed(classes);
+ ids = loadReversed(ids);
}
if (!selectors || typeof selectors !== 'object') {
return;
}
- rcs.selectorLibrary.setMultiple(selectors);
+ rcs.default.selectorsLibrary.getClassSelector().setMultiple(classes);
+ rcs.default.selectorsLibrary.getIdSelector().setMultiple(ids);
}; // /loadMapping
module.exports = loadMapping;
diff --git a/lib/process/process.js b/lib/process/process.js
index aa743c7..59fd7fc 100644
--- a/lib/process/process.js
+++ b/lib/process/process.js
@@ -10,6 +10,7 @@ const assert = require('assert');
const save = require('../helper/save');
const replaceData = require('./replaceData');
const { fileExt, availableTypes, optionsDefault } = require('./defaults');
+const config = require('../config/config');
const rcsProcess = (pathString, opts, cb) => {
let globString = pathString;
@@ -37,6 +38,7 @@ const rcsProcess = (pathString, opts, cb) => {
glob(globString, {
cwd: options.cwd,
+ ignore: config.ignorePatterns,
}, (errGlob, filesArray) => {
if (errGlob) {
return callback(errGlob);
@@ -75,7 +77,7 @@ const rcsProcess = (pathString, opts, cb) => {
const isHtml = fileExt.html.includes(path.extname(filePath));
- rcs.fillLibraries(
+ rcs.default.fillLibraries(
bufferData.toString(),
{
prefix: options.prefix,
@@ -129,6 +131,8 @@ const rcsProcess = (pathString, opts, cb) => {
});
});
}, (errProcess) => {
+ rcs.default.warnings.warn();
+
if (errProcess) {
return callback(errProcess);
}
diff --git a/lib/process/processSync.js b/lib/process/processSync.js
index 915ca10..2278d0d 100644
--- a/lib/process/processSync.js
+++ b/lib/process/processSync.js
@@ -8,6 +8,7 @@ const assert = require('assert');
const saveSync = require('../helper/saveSync');
const replaceData = require('./replaceData');
const { fileExt, availableTypes, optionsDefault } = require('./defaults');
+const config = require('../config/config');
/**
* The synchronous method for process
@@ -25,7 +26,7 @@ const processSync = (pathString, opts) => {
globString = `{${pathString.join(',')}}`;
}
- const globArray = glob.sync(globString, { cwd: options.cwd });
+ const globArray = glob.sync(globString, { cwd: options.cwd, ignore: config.ignorePatterns });
const cssHtmlFiles = globArray.filter(file => (
fileExt.css.includes(path.extname(file))
|| fileExt.html.includes(path.extname(file))
@@ -39,7 +40,7 @@ const processSync = (pathString, opts) => {
const fileData = fs.readFileSync(path.join(options.cwd, filePath), 'utf8');
const isHtml = fileExt.html.includes(path.extname(filePath));
- rcs.fillLibraries(
+ rcs.default.fillLibraries(
fileData.toString(),
{
prefix: options.prefix,
@@ -67,6 +68,8 @@ const processSync = (pathString, opts) => {
saveSync(joinedPath, data, { overwrite: shouldOverwrite });
});
+
+ rcs.default.warnings.warn();
}; // /processSync
module.exports = processSync;
diff --git a/lib/process/replaceData.js b/lib/process/replaceData.js
index 3f3a90d..819dc40 100644
--- a/lib/process/replaceData.js
+++ b/lib/process/replaceData.js
@@ -1,3 +1,4 @@
+const merge = require('lodash.merge');
const rcs = require('rcs-core');
const path = require('path');
const { fileExt } = require('./defaults');
@@ -5,6 +6,7 @@ const { fileExt } = require('./defaults');
const replaceData = (filePath, fileData, options) => {
let data;
+ const sourceFile = { sourceFile: filePath };
if (
options.type === 'js' ||
(
@@ -12,7 +14,8 @@ const replaceData = (filePath, fileData, options) => {
fileExt.js.includes(path.extname(filePath))
)
) {
- data = rcs.replace.js(fileData, options.parserOptions);
+ const jsxType = { ecmaFeatures: { jsx: path.extname(filePath).match(/jsx/i) !== null } };
+ data = rcs.default.replace.js(fileData, merge(jsxType, options.parserOptions, sourceFile));
} else if (
options.type === 'css' ||
(
@@ -20,7 +23,7 @@ const replaceData = (filePath, fileData, options) => {
fileExt.css.includes(path.extname(filePath))
)
) {
- data = rcs.replace.css(fileData);
+ data = rcs.default.replace.css(fileData, sourceFile);
} else if (
options.type === 'html' ||
(
@@ -28,7 +31,7 @@ const replaceData = (filePath, fileData, options) => {
fileExt.html.includes(path.extname(filePath))
)
) {
- data = rcs.replace.html(fileData);
+ data = rcs.default.replace.html(fileData, sourceFile);
} else if (
options.type === 'pug' ||
(
@@ -36,9 +39,9 @@ const replaceData = (filePath, fileData, options) => {
fileExt.pug.includes(path.extname(filePath))
)
) {
- data = rcs.replace.pug(fileData);
+ data = rcs.default.replace.pug(fileData, sourceFile);
} else {
- data = rcs.replace.any(fileData);
+ data = rcs.default.replace.any(fileData, sourceFile);
}
return data;
diff --git a/package.json b/package.json
index 98633bb..760a83c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "rename-css-selectors",
- "version": "3.2.5",
+ "version": "3.2.6",
"description": "Rename css classes and id's in files",
"main": "./index.js",
"scripts": {
@@ -25,6 +25,17 @@
"!test/files/**/*.js"
]
},
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ },
+ "lint-staged": {
+ "*.js": [
+ "eslint --fix",
+ "git add"
+ ]
+ },
"keywords": [
"css",
"minify",
@@ -48,7 +59,8 @@
"glob": "^7.1.1",
"json-extra": "^0.5.0",
"lodash.merge": "^4.6.1",
- "rcs-core": "^2.6.2",
+ "minimatch": "^3.0.4",
+ "rcs-core": "^3.0.0-alpha.3",
"universalify": "^0.1.2"
},
"devDependencies": {
@@ -61,6 +73,8 @@
"eslint-config-airbnb-base": "^11.2.0",
"eslint-plugin-import": "^2.7.0",
"html-minifier": "^3.5.20",
+ "husky": "^3.0.4",
+ "lint-staged": "^9.2.3",
"nyc": "^12.0.2"
}
}
diff --git a/test/config.js b/test/config.js
new file mode 100644
index 0000000..81938cd
--- /dev/null
+++ b/test/config.js
@@ -0,0 +1,94 @@
+import test from 'ava';
+import path from 'path';
+import fs from 'fs-extra';
+import rcs from 'rcs-core';
+
+import config from '../lib/config/config';
+
+const testFiles = path.join(process.cwd(), '/test/files');
+
+test.beforeEach(() => {
+ rcs.selectorsLibrary.getClassSelector().nameGenerator.setAlphabet('#abcdefghijklmnopqrstuvwxyz');
+ rcs.selectorsLibrary.getIdSelector().nameGenerator.setAlphabet('#abcdefghijklmnopqrstuvwxyz');
+ rcs.selectorsLibrary.reset();
+ rcs.keyframesLibrary.reset();
+});
+
+test.cb('should set the config with package.json', (t) => {
+ // include config
+ config.load();
+
+ // include new settings
+ rcs.selectorsLibrary.set(['.js', '.any-value']);
+
+ t.is(rcs.selectorsLibrary.get('js'), 'js');
+ t.is(rcs.selectorsLibrary.get('any-value'), 'a');
+
+ t.end();
+});
+
+test.cb('should set the config with .rcsrc', (t) => {
+ const file = '.rcsrc';
+
+ fs.writeFileSync(file, `{
+ "exclude": [
+ "flexbox",
+ "no-js"
+ ],
+ "reserve": [
+ "ad"
+ ]
+ }`, {
+ encoding: 'utf8',
+ });
+
+ // include config
+ config.load();
+
+ // include new settings
+ rcs.selectorsLibrary.set(['.flexbox', '.any-value']);
+
+ t.is(rcs.selectorsLibrary.get('flexbox'), 'flexbox');
+ t.is(rcs.selectorsLibrary.get('any-value'), 'a');
+
+ fs.removeSync(file);
+
+ t.end();
+});
+
+test.cb('should set the config with package.json', (t) => {
+ // include config
+ config.load(path.join(testFiles, '/config.json'));
+
+ // include new settings
+ rcs.selectorsLibrary.set(['.own-file', '.any-value']);
+
+ t.is(rcs.selectorsLibrary.get('own-file'), 'own-file');
+ t.is(rcs.selectorsLibrary.get('any-value'), 'a');
+
+ t.end();
+});
+
+test.cb('should load ignored patterns', (t) => {
+ const file = '.rcsrc';
+
+ fs.writeFileSync(file, `{
+ "ignore": [
+ "a.js",
+ "**.min.js"
+ ]
+ }`, {
+ encoding: 'utf8',
+ });
+
+ // include config
+ config.load();
+
+ t.true(config.isIgnored('a.js'));
+ t.true(config.isIgnored('b.min.js'));
+ t.false(config.isIgnored('b.js'));
+
+ fs.removeSync(file);
+
+ t.end();
+});
diff --git a/test/files/fixtures/js/react.js b/test/files/fixtures/js/react.jsx
similarity index 100%
rename from test/files/fixtures/js/react.js
rename to test/files/fixtures/js/react.jsx
diff --git a/test/files/fixtures/unknown.txt b/test/files/fixtures/unknown.txt
new file mode 100644
index 0000000..bdec289
--- /dev/null
+++ b/test/files/fixtures/unknown.txt
@@ -0,0 +1 @@
+some '.jp-block' going here
diff --git a/test/files/results/css/css-variables-ignore.css b/test/files/results/css/css-variables-ignore.css
index 63c312f..1aa7157 100644
--- a/test/files/results/css/css-variables-ignore.css
+++ b/test/files/results/css/css-variables-ignore.css
@@ -46,17 +46,17 @@
content: 'block__element--modifier';
}
-#i {
+#a {
content: 'id';
}
-.j[src] {
+.i[src] {
content: 'attribute';
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
@media screen and (min-width: .40em) {
- #i {
+ #a {
height: .20px;
width: .20em;
}
@@ -68,7 +68,7 @@
@media screen and (min-width: 40em)
{
- #i
+ #a
{
height: .20px;
width: .20em;
@@ -79,22 +79,22 @@ h1 {
color: red;
}
-.k {
+.j {
content: 'reveal';
color: #eee;
font-size: .5rem;
}
-.l.k {
+.k.j {
content: 'js reveal';
margin-right: calc(var(--theme-primary, var(--0px)) - var(--theme-secondary, var(--0px)));
margin-bottom: calc(var(--theme-tertiary, var(--0px)) - var(--theme-primary, var(--0px)));
}
-.m.k {
+.l.j {
content: 'js reveal';
}
-.n {
+.m {
content: 'js-reveal';
}
diff --git a/test/files/results/css/css-variables.css b/test/files/results/css/css-variables.css
index 8909a2c..3541abf 100644
--- a/test/files/results/css/css-variables.css
+++ b/test/files/results/css/css-variables.css
@@ -1,16 +1,16 @@
-.d {
+.a {
--a: #111;
--b: #f0f0f0;
--c: #999;
}
-.e {
+.b {
--a: red;
--b: white;
--c: black;
}
-.f {
+.c {
color: var(--a);
background-color: var(--b);
font-size: 1.2em;
@@ -22,41 +22,41 @@
margin: 0 0 20px;
}
-.g {
+.d {
content: 'block';
}
-.h {
+.e {
content: 'block__element';
}
-.i {
+.f {
content: 'block__element--modifier';
}
-.j{
+.g{
content: 'block--modifier';
}
-.k:before {
+.h:before {
content: 'before';
}
-.i {
+.f {
content: 'block__element--modifier';
}
-#l {
+#a {
content: 'id';
}
-.m[src] {
+.i[src] {
content: 'attribute';
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
@media screen and (min-width: .40em) {
- #l {
+ #a {
height: .20px;
width: .20em;
}
@@ -68,7 +68,7 @@
@media screen and (min-width: 40em)
{
- #l
+ #a
{
height: .20px;
width: .20em;
@@ -79,22 +79,22 @@ h1 {
color: red;
}
-.n {
+.j {
content: 'reveal';
color: #eee;
font-size: .5rem;
}
-.o.n {
+.k.j {
content: 'js reveal';
margin-right: calc(var(--a, var(--0px)) - var(--b, var(--0px)));
margin-bottom: calc(var(--c, var(--0px)) - var(--a, var(--0px)));
}
-.p.n {
+.l.j {
content: 'js reveal';
}
-.q {
+.m {
content: 'js-reveal';
}
diff --git a/test/files/results/css/style-prefix.css b/test/files/results/css/style-prefix.css
index 0d6d26a..b63220a 100644
--- a/test/files/results/css/style-prefix.css
+++ b/test/files/results/css/style-prefix.css
@@ -22,17 +22,17 @@
content: 'block__element--modifier';
}
-#prefixed-f {
+#prefixed-a {
content: 'id';
}
-.prefixed-g[src] {
+.prefixed-f[src] {
content: 'attribute';
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
@media screen and (min-width: .40em) {
- #prefixed-f {
+ #prefixed-a {
height: .20px;
width: .20em;
}
@@ -44,7 +44,7 @@
@media screen and (min-width: 40em)
{
- #prefixed-f
+ #prefixed-a
{
height: .20px;
width: .20em;
@@ -55,20 +55,20 @@ h1 {
color: red;
}
-.prefixed-h {
+.prefixed-g {
content: 'reveal';
color: #eee;
font-size: .5rem;
}
-.prefixed-i.prefixed-h {
+.prefixed-h.prefixed-g {
content: 'js reveal';
}
-.prefixed-j.prefixed-h {
+.prefixed-i.prefixed-g {
content: 'js reveal';
}
-.prefixed-k {
+.prefixed-j {
content: 'js-reveal';
}
diff --git a/test/files/results/css/style.css b/test/files/results/css/style.css
index 11558b4..dfeaa48 100644
--- a/test/files/results/css/style.css
+++ b/test/files/results/css/style.css
@@ -22,17 +22,17 @@
content: 'block__element--modifier';
}
-#f {
+#a {
content: 'id';
}
-.g[src] {
+.f[src] {
content: 'attribute';
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
@media screen and (min-width: .40em) {
- #f {
+ #a {
height: .20px;
width: .20em;
}
@@ -44,7 +44,7 @@
@media screen and (min-width: 40em)
{
- #f
+ #a
{
height: .20px;
width: .20em;
@@ -55,20 +55,20 @@ h1 {
color: red;
}
-.h {
+.g {
content: 'reveal';
color: #eee;
font-size: .5rem;
}
-.i.h {
+.h.g {
content: 'js reveal';
}
-.j.h {
+.i.g {
content: 'js reveal';
}
-.k {
+.j {
content: 'js-reveal';
}
diff --git a/test/files/results/css/style2.css b/test/files/results/css/style2.css
index b841264..cb1f3f3 100644
--- a/test/files/results/css/style2.css
+++ b/test/files/results/css/style2.css
@@ -1,4 +1,4 @@
-#f {
+#a {
content: 'id';
}
diff --git a/test/files/results/css/subdirectory/style.css b/test/files/results/css/subdirectory/style.css
index 52ea801..4f047dd 100644
--- a/test/files/results/css/subdirectory/style.css
+++ b/test/files/results/css/subdirectory/style.css
@@ -22,6 +22,6 @@
content: 'before';
}
-#f {
+#a {
content: 'id';
}
diff --git a/test/files/results/html/index-with-style.html b/test/files/results/html/index-with-style.html
index 9c857e1..f38da18 100644
--- a/test/files/results/html/index-with-style.html
+++ b/test/files/results/html/index-with-style.html
@@ -9,11 +9,11 @@