Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug when composing a class name that includes a @value variable name #548

Closed
kendrickw opened this issue Jan 23, 2019 · 2 comments
Closed

Bug when composing a class name that includes a @value variable name #548

kendrickw opened this issue Jan 23, 2019 · 2 comments
Assignees

Comments

@kendrickw
Copy link

@kendrickw kendrickw commented Jan 23, 2019

Expected Behavior

The css should be processed without error

Current Behavior

CssSyntaxError: modular-css-composition: /1.css:1:11: Invalid composes reference

More detail on the error:

input: 
   { line: 1,
     column: 11,
     source: '@value small: 10px;',
     file: 'spacing.css' },
  postcssNode: 
   Declaration {
     raws: { before: '\n  ', between: ': ' },
     type: 'decl',
     parent: 
      Rule { /* .. omit... */ },
     source: { start: [Object], input: [Object], end: [Object] },
     prop: 'composes',
     value: 'left-10px' },  // seems like incorrect variable substitution

Steps to Reproduce (for bugs)

prefilled modular-css showing syntax error

  1. When using composition, if the classname contains a @value variable name, syntax error results.
@value small from "./1.css";

.left-small { // if I rename this to leftSmall, then it's fine.
  padding-left: small;
}

.my-style {
  composes: left-small;  // if I rename this to leftSmall, then it's fine.
}

Your Environment

Executable Version
modular-css 21.1.1
@tivac
Copy link
Owner

@tivac tivac commented Jan 23, 2019

.map((v) => `\\b${escape(v)}\\b`)

Probably needs to use [^a-z0-9\-\_] around the value name instead of trusting \b, since clearly that matches the -small value and that's silly. I'll think on this a bit more & hopefully can get a fix for you soon.

@tivac tivac self-assigned this Jan 23, 2019
tivac added a commit that referenced this issue Jan 24, 2019
"\bval\b" will match "-val" which is a problem for folks using hyphens to separate classes. Now using "^val$" which when combined with postcss-value-parser should match almost everything the old one did but w/o being too greedy.

Fixes #548
@tivac tivac closed this in #552 Jan 24, 2019
tivac added a commit that referenced this issue Jan 24, 2019
"\bval\b" will match "-val" which is a problem for folks using hyphens to separate classes. Now using "^val$" which when combined with postcss-value-parser should match almost everything the old one did but w/o being too greedy.

Fixes #548
@tivac
Copy link
Owner

@tivac tivac commented Jan 24, 2019

Fix published in v21.2.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

2 participants