Skip to content

Commit

Permalink
feat(core): don't transform custom states to attributes (#1874)
Browse files Browse the repository at this point in the history
  • Loading branch information
@barak007
barak007 authored Jul 14, 2021
1 parent 266f42c commit 9fe0cc2
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 59 deletions.
27 changes: 7 additions & 20 deletions packages/core/src/pseudo-states.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import type { SelectorAstNode } from './selector-utils';
import { StateResult, systemValidators } from './state-validators';
import type { SRule, StylableMeta } from './stylable-processor';
import type { StylableResolver } from './stylable-resolver';
import { isValidClassName } from './stylable-utils';
import { groupValues, listOptions, MappedStates } from './stylable-value-parsers';
import { valueMapping } from './stylable-value-parsers';
import type { ParsedValue, StateParsedValue } from './types';
Expand All @@ -29,7 +28,7 @@ export const stateErrors = {
', '
)}"`,
STATE_STARTS_WITH_HYPHEN: (name: string) =>
`state "${name}" declaration cannot begin with a "${stateMiddleDelimiter}" chararcter`,
`state "${name}" declaration cannot begin with a "${stateMiddleDelimiter}" character`,
};

// PROCESS
Expand Down Expand Up @@ -326,13 +325,8 @@ function resolveStateValue(
}

const strippedParam = stripQuotation(actualParam);
if (isValidClassName(strippedParam)) {
node.type = 'class';
node.name = createStateWithParamClassName(name, namespace, strippedParam);
} else {
node.type = 'attribute';
node.content = createAttributeState(name, namespace, strippedParam);
}
node.type = 'class';
node.name = createStateWithParamClassName(name, namespace, strippedParam);
}

function resolveParam(
Expand All @@ -355,16 +349,9 @@ export function createStateWithParamClassName(stateName: string, namespace: stri
return `${namespace}${stateWithParamDelimiter}${stateName}${resolveStateParam(param)}`;
}

export function createAttributeState(stateName: string, namespace: string, param: string) {
return `class~="${createStateWithParamClassName(stateName, namespace, param)}"`;
}

export function resolveStateParam(param: string) {
if (isValidClassName(param)) {
return `${stateMiddleDelimiter}${param.length}${stateMiddleDelimiter}${param}`;
} else {
return `${stateMiddleDelimiter}${param.length}${stateMiddleDelimiter}${stripQuotation(
JSON.stringify(param).replace(/\s/gm, '_')
)}`;
}
return `${stateMiddleDelimiter}${param.length}${stateMiddleDelimiter}${param.replace(
/\s/gm,
'_'
)}`;
}
30 changes: 15 additions & 15 deletions packages/core/test/pseudo-states.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ describe('pseudo-states', () => {
});

describe('advanced type', () => {
it('should warn when a state receieves more than a single state type', () => {
it('should warn when a state receives more than a single state type', () => {
expectWarnings(
`
.root{
Expand Down Expand Up @@ -651,7 +651,7 @@ describe('pseudo-states', () => {
});
});

it('should use an attribute selector for illegal param syntax (and replaces spaces with underscoes)', () => {
it('should use an attribute selector for illegal param syntax (and replaces spaces with underscores)', () => {
const res = generateStylableResult({
entry: `/entry.st.css`,
files: {
Expand All @@ -672,7 +672,7 @@ describe('pseudo-states', () => {
'no diagnostics reported for native states'
).to.eql([]);
expect(res).to.have.styleRules({
1: '.entry__root[class~="entry---state-9-user_name"] {}',
1: '.entry__root.entry---state-9-user_name {}',
});
});

Expand Down Expand Up @@ -723,11 +723,11 @@ describe('pseudo-states', () => {
'no diagnostics reported for native states'
).to.eql([]);
expect(res).to.have.styleRules({
1: '.entry__my-class[class~="entry---stateWithDefault-16-myDefault_String"] {}',
1: '.entry__my-class.entry---stateWithDefault-16-myDefault_String {}',
});
});

it('should supprt default values through a variable', () => {
it('should support default values through a variable', () => {
const res = generateStylableResult({
entry: `/entry.st.css`,
files: {
Expand Down Expand Up @@ -866,7 +866,7 @@ describe('pseudo-states', () => {
});
});

it('should transform string using an invalid contains validator (mainintaing passed values)', () => {
it('should transform string using an invalid contains validator (maintains passed values)', () => {
const config = {
entry: `/entry.st.css`,
files: {
Expand Down Expand Up @@ -969,7 +969,7 @@ describe('pseudo-states', () => {

const res = expectWarningsFromTransform(config, []);
expect(res).to.have.styleRules({
1: '.entry__my-class[class~="entry---state1-7-hello!!"] {}',
1: '.entry__my-class.entry---state1-7-hello\\!\\! {}',
});
});

Expand Down Expand Up @@ -1106,7 +1106,7 @@ describe('pseudo-states', () => {
'no diagnostics reported for native states'
).to.eql([]);
expect(res).to.have.styleRules({
1: '.entry__my-class[class~="entry---state1-2-42"] {}',
1: '.entry__my-class.entry---state1-2-42 {}',
});
});

Expand Down Expand Up @@ -1219,7 +1219,7 @@ describe('pseudo-states', () => {
},
]);
expect(res).to.have.styleRules({
1: '.entry__my-class[class~="entry---state1-1-1"] {}',
1: '.entry__my-class.entry---state1-1-1 {}',
});
});

Expand Down Expand Up @@ -1249,7 +1249,7 @@ describe('pseudo-states', () => {
},
]);
expect(res).to.have.styleRules({
1: '.entry__my-class[class~="entry---state1-2-42"] {}',
1: '.entry__my-class.entry---state1-2-42 {}',
});
});

Expand Down Expand Up @@ -1279,7 +1279,7 @@ describe('pseudo-states', () => {
},
]);
expect(res).to.have.styleRules({
1: '.entry__my-class[class~="entry---state1-2-42"] {}',
1: '.entry__my-class.entry---state1-2-42 {}',
});
});

Expand All @@ -1301,7 +1301,7 @@ describe('pseudo-states', () => {

const res = expectWarningsFromTransform(config, []);
expect(res).to.have.styleRules({
1: '.entry__my-class[class~="entry---state1-2-40"] {}',
1: '.entry__my-class.entry---state1-2-40 {}',
});
});

Expand All @@ -1323,7 +1323,7 @@ describe('pseudo-states', () => {

const res = expectWarningsFromTransform(config, []);
expect(res).to.have.styleRules({
1: '.entry__my-class[class~="entry---state1-1-3"] {}',
1: '.entry__my-class.entry---state1-1-3 {}',
});
});

Expand All @@ -1345,7 +1345,7 @@ describe('pseudo-states', () => {

const res = expectWarningsFromTransform(config, []);
expect(res).to.have.styleRules({
1: '.entry__my-class[class~="entry---state1-1-3"] {}',
1: '.entry__my-class.entry---state1-1-3 {}',
});
});
});
Expand Down Expand Up @@ -1571,7 +1571,7 @@ describe('pseudo-states', () => {
},
]);
expect(res).to.have.styleRules({
1: '.entry__my-class[class~="entry---category-7-one_two"] {}',
1: '.entry__my-class.entry---category-7-one_two {}',
});
});
});
Expand Down
29 changes: 7 additions & 22 deletions packages/dom-test-kit/src/stylable-dom-util.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
import {
isValidClassName,
parseSelector,
pseudoStates,
stringifySelector,
traverseNode,
} from '@stylable/core';
import { parseSelector, pseudoStates, stringifySelector, traverseNode } from '@stylable/core';
import type { RuntimeStylesheet, StateValue } from '@stylable/runtime';

export interface PartialElement {
Expand Down Expand Up @@ -47,21 +41,12 @@ export class StylableDOMUtil {
node.type = 'class';
node.name = pseudoStates.createBooleanStateClassName(node.name, namespace);
} else {
if (isValidClassName(param)) {
node.type = 'class';
node.name = pseudoStates.createStateWithParamClassName(
node.name,
namespace,
param
);
} else {
node.type = 'attribute';
node.content = pseudoStates.createAttributeState(
node.name,
namespace,
param
);
}
node.type = 'class';
node.name = pseudoStates.createStateWithParamClassName(
node.name,
namespace,
param
);
}
} else if (
node.type === 'pseudo-element' ||
Expand Down
4 changes: 2 additions & 2 deletions packages/webpack-extensions/test/unit/forcestates-plugin.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ describe('stylable-forcestates-plugin', () => {
);
});

it('should mark an class state woth param as forced using a data-attribute selector', () => {
it('should mark an class state with param as forced using a data-attribute selector', () => {
const res = generateStylableResult({
entry: `/entry.st.css`,
files: {
Expand Down Expand Up @@ -214,7 +214,7 @@ describe('stylable-forcestates-plugin', () => {
});

expect((res.meta.outputAst!.nodes[1] as postcss.Rule).selector).to.equal(
`.entry__root[class~="entry---myState-10-some_value"],.entry__root[${createDataAttr(
`.entry__root.entry---myState-10-some_value,.entry__root[${createDataAttr(
OVERRIDE_STATE_PREFIX,
'myState',
'some value'
Expand Down

0 comments on commit 9fe0cc2

Please sign in to comment.